CSS code abbreviation div+css layout code abbreviation specification
|
Using abbreviations can help reduce the size of your CSS files and make them easier to read. For the main rules of CSS abbreviations, please refer to "Summary of Common CSS Abbreviation Syntax". The main rules of CSS abbreviations are as follows: color If the values of every two digits of a hexadecimal color value are the same, they can be abbreviated in half, for example: #000000 can be abbreviated as #000; #336699 can be abbreviated as #369; Note: Do not interleave full-text and abbreviated color configurations in the same CSS configuration section, as this will cause browser rendering failures when system resources are extremely low. Box size <br />There are usually four ways to write it: property:value1; means all edges have a value of value1; property:value1 value2; means the values of top and bottom are value1, and the values of right and left are value2 property:value1 value2 value3; means the value of top is value1, the values of right and left are value2, and the value of bottom is value3 property:value1 value2 value3 value4; the four values represent top, right, bottom, left respectively A convenient way to remember is clockwise: up, right, down, left. Specific examples of application in margin and padding are as follows: margin:1em 0 2em 0.5em; Border The properties of the border are as follows: border-width:1px; border-style:solid; border-color:#000; It can be abbreviated into one sentence: border:1px solid #000; The syntax is border:width style color; Backgrounds The properties of the background are as follows: background-color:#f00; background-image:url(background.gif); background-repeat:no-repeat; background-attachment:fixed; background-position:0 0; It can be abbreviated into one sentence: background:#f00 url(background.gif) no-repeat fixed 0 0; The syntax is background:color image repeat attachment position; You can omit one or more of these property values. If omitted, the property value will use the browser default value, which is: color: transparent image: none repeat: repeat attachment: scroll position: 0% 0% Fonts The font properties are as follows: font-style:italic; font-variant:small-caps; font-weight:bold; font-size:1em; line-height:140%; font-family:"Lucida Grande",sans-serif; It can be abbreviated into a sentence: font:italic small-caps bold 1em/140% "Lucida Grande",sans-serif; Note that if you abbreviate the font definition, you must define at least two values: font-size and font-family. Lists To cancel the default dots and serial numbers, you can write list-style:none;, The properties of list are as follows: list-style-type:square; list-style-position:inside; list-style-image:url(image.gif); It can be shortened to one sentence: list-style:square inside url(image.gif); |
<<: Minio lightweight object storage service installation and browser usage tutorial
>>: Solve the problem that line-height=height element height but text is not vertically centered
Recommend
CSS3 sets a mask for the background image and solves the problem of mask style inheritance
In many cases, you need to process the background...
MySQL bypasses granting information_schema objects and reports ERROR 1044 (4200) error
This question is a discussion among netizens in a...
Linux installation steps for Jenkins and various problem solving (page access initialization password)
1. Prepare the Java environment, jdk1.8 Check whe...
How to explain TypeScript generics in a simple way
Table of contents Overview What are Generics Buil...
Solution to uninstalling Python and yum in CentOs system
Background of the accident: A few days ago, due t...
MySQL uses find_in_set() function to implement where in() order sorting
This article introduces a tutorial about how to u...
HTML symbol to entity algorithm challenge
challenge: Converts the characters &, <, &...
Summary of 28 common JavaScript string methods and usage tips
Table of contents Preface 1. Get the length of a ...
MySQL SQL statement to find duplicate data based on one or more fields
SQL finds all duplicate records in a table 1. The...
Virtual domain name configuration and test verification under Linux\Nginx environment
By using Nginx virtual domain name configuration,...
Solution to the problem that the div width is set to width:100% and then the padding or margin exceeds the parent element
Preface This article introduces how to use the ne...
More Features of the JavaScript Console
Table of contents Overview console.log console.in...
Summary of 11 amazing JavaScript code refactoring best practices
Table of contents 1. Extracting functions 2. Merg...
Pure HTML+CSS to achieve Element loading effect
This is the effect of the Element UI loading comp...
Linux beginners in virtual machines configure IP and restart the network
For those who are new to virtual machines or have...