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
Detailed installation tutorial of Mysql5.7.19 under Centos7
1. Download Download mysql-5.7.19-linux-glibc2.12...
css3 animation ball rolling js control animation pause
CSS3 can create animations, which can replace man...
Zookeeper request timeout problem in dubbo: configuration of mybatis+spring connecting to mysql8.0.15
I am going to review Java these two days, so I wr...
Example of how to configure nginx in centos server
Download the secure terminal MobaXterm_Personal F...
How to forget the root password in Mysql8.0.13 under Windows 10 system
1. First stop the mysql service As an administrat...
Detailed explanation of Linux inotify real-time backup implementation method
Real-time replication is the most important way t...
SQL GROUP BY detailed explanation and simple example
The GROUP BY statement is used in conjunction wit...
Windows Server 2019 Install (Graphical Tutorial)
Windows Server 2019 is the latest server operatin...
CSS3 text animation effects
Effect html <div class="sp-container"...
How to Customize Bash Command Prompt in Linux
Preface As we all know, bash (the B ourne-A gain ...
Detailed explanation of Truncate usage in MySQL
Preface: When we want to clear a table, we often ...
Perfect solution for JavaScript front-end timeout asynchronous operation
Table of contents What happens if a piece of code...
The best way to start a jar package project under Centos7 server
Preface Everyone knows how to run a jar package o...
Implementing a simple web clock with JavaScript
Use JavaScript to implement a web page clock. The...
Introduction to the use of MySQL performance stress benchmark tool sysbench
Table of contents 1. Introduction to sysbench #Pr...