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
- 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 ...
- 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 ...
- 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 ...
- 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 ...
- 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 ...
- 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 ...
- 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 ...
- 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 ...
- 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
- maven Configure alicloud image
edit %maven_home%/conf/settings.xml file , add to <mirror> <id>aliyun-maven</id> <mirrorOf& ...
- 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 ...
- 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 ...
- 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 ...
- 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 ...
- 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 .
- 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 ...
- 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 ...
- 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 ...
- 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 ...