css There are several advantages of abbreviation , The first and biggest benefit is to reduce the amount of code . The second is to facilitate your own writing .

Here are some common css Attribute shorthand rule .

One 、 typeface （font）

font-style: Set the font style . Its value is normal（ default font ）,italic（ Italics ）,oblique（ tilt ）,inherit（ Inherit the parent element font ）.

font-variant: Set font change . Its value is normal,small-caps（ Small font with larger subtitles ）,inherit.

font-weight: Set the size of the font . Its value is normal,bold（ In bold ）,bolder（ More thick ）,lighter（ A finer ）,100~900,inherit.

font-size: Set the font size .

line-height: Set the line height of the font ,normal,number（ This number will be multiplied by the current font size ）,length（ Fixed row spacing ）,%（ Based on the percentage of the current font size ）,inherit.

font-family: Specify the style of the font ,family-name（ Font name ）,inherit.

font : font-style | font-variant | font-weight | font-size/line-height | font-family

It should be noted that font-size and line-height Only through “/” Make up a value . And it's only specified at the same time font-size and font-family The abbreviation only works when the attribute is empty .

Two 、 background （background）

background-color: Set the background color .

background-image: Set the background image .url,none,inherit.

background-repeat: Set the background repeat mode .repeat,repeat-x,repeat-y,no-repeat,inherit.

background-attachment: Set whether the background image is fixed .scroll（ The image scrolls as the page scrolls ）,fixed（ The image position is fixed , Don't scroll with the page ）,inherit.

background-position: Set the position of the background image .x% y%,x px y px, Location keywords .

background : background-color | background-image | background-repeat | background-attachment | background-position

background There is no hard and fast requirement for attribute abbreviations , But it is usually abbreviated in the above order .

3、 ... and 、margin & padding

margin : margin-top | margin-right | margin-bottom | margin-left

padding : padding-top | padding-right | padding-bottom | padding-left

Four 、border

border-width: Set border width .thin（ Thin border ）,medium（ Default ）,thick（ Thick border ）,length（ Customize the width of the border ）,inherit.

border-style: Set border style .

border-color: Set border color .

border : border-width | border-style | border-color

5、 ... and 、list-style

list-style-type: Set the type of list flag .

list-style-position: Sets where to place the list item tag .inside（ Within the text ）,outside（ Outside the text ）,inherit.

list-style-image: Set the image instead of the logo .url,none,inherit.

list-style : list-style-type | list-style-position | list-style-image

css The abbreviation of the standard of more related articles

1. CSS BEM An introduction to naming conventions

   [ Preface ] BEM It's a simple and very useful naming convention . Make your front-end code easier to read and understand , Easier collaboration , Easier to control , More robust and clear , And more closely . This article mainly introduces CSS BEM An introduction to naming conventions ( recommend ) Related information ...

2. About CSS The writing standard and order of

   About CSS The writing standard and order of , It's most of the front end er A gate that must be conquered , If not according to good CSS Write in a standard way CSS Code , It will affect the reading experience of the code . Here is a summary of CSS Writing norms .CSS The order of writing is for your reference , These are ...

3. css Style writing standard

   At work css Style is very important , But how to write css Style is more important . One .css Writing norms 1. Location attribute :position  display  float  left  top  right  bottom ...

4. css Attribute shorthand collection

   As a front end siege lion ,CSS That's absolutely the foundation , But there are times when the foundation is not firmly grasped . Today, let's summarize the mistakes that are easy to make CSS Attribute shorthand problem . 1.background The background color :background-color         ...

5. HTML/CSS/JS Coding standards

   I've recently compiled a copy of HTML/CSS/JS Coding standards , For your reference . Catalog : One .HTML Code specification 2 .CSS Code specification 3 .JS Coding standards One .HTML Coding standards 1. img The label says alt attribute according to W3C standard ,img label ...

6. css The writing standard of + Commonly used

   format : body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blo ...

7. html and css Code specification of

   HTML and CSS Content of coding specification One .HTML standard Two .CSS standard 3、 ... and . matters needing attention : Four . Common naming rules 5、 ... and .CSS Stylesheet file name 6、 ... and . File naming rules One .HTML standard : 1. Code specification Add the standard module to the first line of the page ...

8. CSS Style writing standard

   Maybe different teams have their own norms , Or a lot of people are writing CSS I still write what I think when I'm young , There are not too many constraints . I think CSS There is still a need for code specifications , Especially in teamwork , In collaboration with many people , Norms are particularly important . Ben ...

9. Flexible writing 、 Stable 、 High quality css Code specifications

   grammar Use two spaces instead of tabs (tab) -- This is the only way to ensure a consistent presentation in all environments . When grouping selectors , Put individual selectors on a single line . For the readability of the code , Add a space before the left curly bracket of each declaration block . The sound ...

Random recommendation

1. maven Configure alicloud image

   edit %maven_home%/conf/settings.xml file , add to <mirror> <id>aliyun-maven</id> <mirrorOf& ...

2. August 25th 2016 Week 35th Thursday

   Every man dies, but not every man really lives. Everyone will die , But not everyone has ever lived . As I become older and older, I ...

3. Exploring Ionic Lists

   Infinite Lists Because mobile phones are not suitable for multi page display posts,Infinite Lists Become all kinds of news . Consulting category app Standard configuration of . In order to be in ionic The framework uses Infinite Lists, Let's learn first ...

4. poj2000

   To make up today's figures , Big water . No explanation. , Ashamed to speak . #include <stdio.h> int main(){ int n; int i,cnt,j; int tot; while(~scan ...

5. How to be in C++ Builder Use in OpenGL

   author : Taiyi scattered numbers Abstract : Let's take a simple example , Elaborated bcb Use in opengl The easy way to , Including the initialization framework . Rotate and translate the graph . Clear the image . Initialize the background color and keep the image on refresh . key word :bcb6 opengl rotate clear ...

6. win7 How to run the command prompt as an administrator (cmd)

   1. Enter into : C:\Windows\System32 2. find cmd.exe file 3. Right click , choice Run as administrator .

7. Luogu P3381 ( The template questions ) Minimum cost and maximum flow

   < Topic link > The main idea of the topic : Given a picture , Given the capacity of the edge and the cost per unit flow , And given the source and sink . Ask you the most flow from the source point to the sink point and the minimum cost in the case of maximum flow . Problem solving analysis : Minimum cost and maximum flow . The following is ...

8. Chapter 36 -FloatingActionButton Use

   design sketch : Prepare two pictures , One for the desktop background , One for the floating plus sign . Put it in mipmap below . First , add to Imageview As a desktop background , And set up to expand the entire screen . next , Add a hover button , It's in the lower right corner , You can press ...

9. Alibaba cloud putty The linked server appears server refused our key

   Alibaba cloud putty The linked server appears server refused our key Create a key pair binding instance ,puttygen Generate ppk,putty Configuration parameters , Connect , Step by step , Results appear server ref ...

10. CNN- utilize 1*1 Reduce and upgrade maintenance

    Dimension reduction : For example, the result of a convolution is W*H*6 Characteristics of , Now we need to use 1*1 The convolution kernel of is reduced to W*H*5, namely 6 A channel becomes 5 Channels : Through a convolution operation ,W*H*6 Will be W*H*1, In this case , Use 5 individual 1*1 Convolution kernel ...