Summary of CSS usage tips

Recently, I started upgrading my blog.
In the process of modifying the template, you need to rewrite the CSS style sheet. I happened to see an article summarizing common CSS techniques on instantshift.com, so I compiled it for my own reference and hope it will be useful to everyone.
This article will continue to be updated in the future.

1. Horizontal centering of text <br />To place a piece of text at the horizontal midpoint of the container, just set the text-align property:

Copy code

The code is as follows:

text-align:center;

2. Horizontal centering of the container <br />First set a clear width for the container, and then set the horizontal value of the margin to auto.

Copy code

The code is as follows:

div#container {
width:760px;
margin:0 auto;
}

3. Vertical centering of text <br />To vertically center a single line of text, just set the line height to be equal to the container height.
For example, there is a row of numbers in the container.

Copy code

The code is as follows:

Then the CSS is written like this:

Copy code

The code is as follows:

div#container {height: 35px; line-height: 35px;}

If there are n lines of text, then just set the line height to one-nth of the container height.

4. Vertical centering of containers <br />For example, there are two containers, one large and one small. How do you vertically center the small container?

Copy code

The code is as follows:

First, set the large container's position to relative.

Copy code

The code is as follows:

div#big{
position:relative;
height:480px;
}

Then, position the small container as absolute, move its upper left corner down 50% along the y-axis, and finally move its margin-top up by 50% of its own height.

Copy code

The code is as follows:

div#small {
position: absolute;
top: 50%;
height: 240px;
margin-top: -120px;
}

Using the same idea, you can also achieve a horizontal centering effect.

5. Adaptive image width <br />How to make larger images automatically adapt to the width of small containers? The CSS can be written like this:

Copy code

The code is as follows:

img {max-width: 100%}

However, IE6 does not support max-width, so when encountering IE6, use IE conditional comments and rewrite the statement as follows:

Copy code

The code is as follows:

img {width: 100%}

6. 3D button <br />To give a button a 3D effect, just set its upper left border to a light color and its lower right border to a dark color.

Copy code

The code is as follows:

div#button {
background: #888;
border: 1px solid;
border-color: #999 #777 #777 #999;
}

7. Shortcuts for font attributes
The format of font shortcut is:

Copy code

The code is as follows:

body {
font: font-style font-variant font-weight font-size line-height font-family;
}

so,

Copy code

The code is as follows:

body {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: normal;
font-variant: small-caps;
font-style: italic;
line-height: 150%;
}

can be written as:

Copy code

The code is as follows:

body {
font: italic small-caps normal 13px/150% Arial, Helvetica, sans-serif;
}

8. Link status setting order
The four states of link need to be set in the following order:

Copy code

The code is as follows:

a:link
a:visited
a:hover
a:active

9. IE conditional comments <br />You can use conditional comments to set statements that only work on IE:

Copy code

The code is as follows:

You can also distinguish between various IE versions:

Copy code

The code is as follows:

10. IE6-specific statements: Method 1 <br />Since IE6 does not regard html as the root element of the document, you can use this to write statements that only IE6 can read:

Copy code

The code is as follows:

/* the following rules apply only to IE6 */
* html{
}
* html body{
}
* html .foo{
}

IE7-specific statements should be written as

Copy code

The code is as follows:

/* the following rules apply only to IE7 */
*+html .foo{
}

11. IE-specific statements: Method 2 <br />Except IE6, all browsers cannot recognize the underscore before the attribute. Except for IE7, all browsers cannot recognize the * before the attribute, so you can write a statement that only these two browsers can read:

Copy code

The code is as follows:

.element {
background: red; /* modern browsers */
*background: green; /* IE 7 and below */
_background: blue; /* IE6 exclusively */
}

12. CSS precedence <br />If the same container is defined by multiple CSS statements, which definition takes precedence?
The basic rules are:
Inline style > id style > class style > tag name style For example, there is an element:

Copy code

The code is as follows:

Inline styles take precedence, and other settings take precedence, from lowest to highest:

Copy code

The code is as follows:

div < .class < div.class < #id < div#id < #id.class < div#id.class

13. IE6 min-height
IE6 does not support min-height. There are two ways to solve this problem:
Method 1:

Copy code

The code is as follows:

.element {
min-height: 500px;
height: auto !important;
height: 500px;
}

There are three CSS statements in total. The first statement sets the minimum height for other browsers, the third statement sets the minimum height for IE, and the second statement allows other browsers to override the settings of the third statement.
Method 2:

Copy code

The code is as follows:

.element {
min-height: 500px
_height: 500px
}

_height can only be read by IE6.

14. font-size benchmark <br />The default font size of the browser is 16px. You can first set the benchmark font size to 10px:

Copy code

The code is as follows:

body {font-size:62.5%;}

In the following, em is used as the font unit. 2.4em means 24px.

Copy code

The code is as follows:

h1 {font-size: 2.4 em}

15. Text-transform and Font Variant
Text-transform is used to convert all letters to lowercase, uppercase, or capitalized:

Copy code

The code is as follows:

p {text-transform: uppercase}
p {text-transform: lowercase}
p {text-transform: capitalize}

Font Variant is used to change a font into small caps (that is, uppercase letters with the same height as lowercase letters).

Copy code

The code is as follows:

p {font-variant: small-caps}

16. CSS Reset
CSS resets are used to override the browser's built-in styles, see YUI and Eric Meyer's style sheets.

17. Use images as list markers <br />By default, browsers use a black circle as a list marker. You can use an image to replace it:

Copy code

The code is as follows:

ul {list-style: none}
ul li {
background-image: url("path-to-your-image");
background-repeat: none;
background-position: 0 0.5em;
}

18. Transparency <br />To set a container to be transparent, you can use the following code:

Copy code

The code is as follows:

.element {
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}

Of these four lines of CSS statements, the first line is specific to IE, the second line is for Firefox, the third line is for webkit-based browsers, and the fourth line is for Opera.

19. CSS Triangle <br />How to create a triangle using CSS?
First write an empty element <div class="triangle"></div>
Then, set three of its four borders to transparent and the remaining one to visible to create a triangle effect:

Copy code

The code is as follows:

.triangle {
border-color: transparent transparent green transparent;
border-style: solid;
border-width: 0px 300px 300px 300px;
height: 0px;
width: 0px;
}

20. Disable automatic line wrap <br />If you want the text to be displayed in one line without automatic line wrap, the CSS command is as follows:

Copy code

The code is as follows:

h1 { white-space:nowrap; }

21. Replace text with images <br />Sometimes we need to use images in the title bar, but we must ensure that search engines can read the title. The CSS statement can be written like this:

Copy code

The code is as follows:

h1 {
text-indent:-9999px;
background:url("h1-image.jpg") no-repeat;
width:200px;
height:50px;
}

22. Focused form elements <br />When a form element has focus, it can be highlighted:

Copy code

The code is as follows:

input:focus { border: 2px solid green; }

23. !important rule <br />When multiple CSS statements conflict with each other, the statement with !important will override other statements. Since IE does not support !important, it can also be used to distinguish different browsers.

Copy code

The code is as follows:

h1 {
color: red !important;
color: blue;
}

The result of the above statement is that other browsers display red titles, and only IE displays blue titles.

24. CSS tooltip box <br />When the mouse moves over the link, a tooltip box will appear automatically.

Copy code

The code is as follows:

<a class="tooltip" href="#">Link text<span>Prompt text</span></a>

The CSS is written like this:

Copy code

The code is as follows:

a.tooltip {position: relative}
a.tooltip span {display:none; padding:5px; width:200px;}
a:hover {background:#fff;} /*background-color is a must for IE6*/
a.tooltip:hover span{display:inline; position:absolute;}

25. Fixed-position header <br />When the page scrolls, sometimes the header needs to remain fixed in position. The CSS statement can be written like this

Copy code

The code is as follows:

body{ margin:0;padding:100px 0 0 0;}
div#header{
position:absolute;
top:0;
left:0;
width:100%;
height:<length>;
}
@media screen{
body>div#header{position: fixed;}
}
* html body{overflow:hidden;}
* html div#content{height:100%;overflow:auto;}

Another way to write it in IE6 (for fixed position footer):

Copy code

The code is as follows:

* html #footer {
position:absolute;
top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');
}

26. Setting the transparency effect of PNG images in IE6

Copy code

The code is as follows:

.classname {
background: url(image.png);
_background: none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
(src='image.png', sizingMethod='crop');
}

27. Special statements for various browsers

Copy code

The code is as follows:

/* IE6 and below */
* html #uno { color: red }
/* IE7 */
*:first-child+html #dos { color: red }
/* IE7, FF, Saf, Opera */
html>body #tres { color: red }
/* IE8, FF, Saf, Opera (Everything but IE 6,7) */
html>/**/body #cuatro { color: red }
/* Opera 9.27 and below, Safari 2 */
html:first-child #cinco { color: red }
/* Safari 2-3 */
html[xmlns*=""] body:last-child #seis { color: red }
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:nth-of-type(1) #siete { color: red }
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:first-of-type #ocho { color: red }
/* saf3+, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
#diez { color: red }
}
/* iPhone / mobile webkit */
@media screen and (max-device-width: 480px) {
#veintiseis { color: red }
}
/* Safari 2 - 3.1 */
html[xmlns*=""]:root #trece { color: red }
/* Safari 2 - 3.1, Opera 9.25 */
*|html[xmlns*=""] #catorce { color: red }
/* Everything but IE6-8 */
:root *> #quince { color: red }
/* IE7 */
*+html #dieciocho { color: red }
/* Firefox only. 1+ */
#veinticuatro, x:-moz-any-link { color: red }
/* Firefox 3.0+ */
#veinticinco, x:-moz-any-link, x:default { color: red }
/***** Attribute Hacks ******/
/* IE6 */
#once { _color: blue }
/* IE6, IE7 */
#doce { *color: blue; /* or #color: blue */ }
/* Everything but IE6 */
#diecisiete { color/**/: blue }
/* IE6, IE7, IE8 */
#diecinueve { color: blue\9; }
/* IE7, IE8 */
#veinte { color/*\**/: blue\9; }
/* IE6, IE7 -- acts as an !important */
#veintesiete { color: blue !ie; } /* string after ! can be anything */

28. Horizontal and vertical centering of containers
The HTML code is as follows:

Copy code

The code is as follows:

The CSS code is as follows:

Copy code

The code is as follows:

.logo {
display: block;
text-align: center;
display: block;
text-align: center;
vertical-align: middle;
border: 4px solid #dddddd;
padding: 4px;
height: 74px;
width: 74px; }
.logo * {
display: inline-block;
height: 100%;
vertical-align: middle; }
.logo .photo {
height: auto;
width: auto;
max-width: 100%;
max-height: 100%; }

29. CSS Shadow <br />Outer Shadow:

Copy code

The code is as follows:

.shadow {
-moz-box-shadow: 5px 5px 5px #ccc;
-webkit-box-shadow: 5px 5px 5px #ccc;
box-shadow: 5px 5px 5px #ccc;
}

Inner Shadow:

Copy code

The code is as follows:

.shadow {
-moz-box-shadow:inset 0 0 10px #000000;
-webkit-box-shadow:inset 0 0 10px #000000;
box-shadow:inset 0 0 10px #000000;
}

30. Cancel the scroll bar of IE text box

Copy code

The code is as follows:

textarea { overflow: auto; }

31. Image preloading <br />Please refer to
https://www.jb51.net/article/32761.htm
https://www.jb51.net/css/68340.html
32. For CSS reset, please refer to https://www.jb51.net/css/68582.html

<<: 5 cool and practical HTML tags and attributes introduction

>>: CSS makes the footer automatically stick to the bottom when the content height is not enough

A quick solution to the problem that there is no data directory and my-default.ini in the unzipped package of Windows 64-bit MySQL 5.7 or above, and the service cannot be started (problem summary)

Blog

Understand the rendering process of HTML pages in preparation for learning front-end performance optimization (continued)

Blog

CSS example code to hide the scroll bar and scroll the content

Summary of CSS usage tips

A quick solution to the problem that there is no data directory and my-default.ini in the unzipped package of Windows 64-bit MySQL 5.7 or above, and the service cannot be started (problem summary)

Understand the rendering process of HTML pages in preparation for learning front-end performance optimization (continued)

CSS example code to hide the scroll bar and scroll the content

Turn off the AutoComplete function in the input box

HTML table markup tutorial (15): table title

Detailed explanation of JavaScript prototype chain

Some ways to eliminate duplicate rows in MySQL

MySQL InnoDB row_id boundary overflow verification method steps

The pitfalls encountered when learning Vue.js

Detailed explanation of how to automatically add prefix plugin after CSS3 packaging: autoprefixer

Recommend

A brief summary of vue keep-alive

How to create a Docker repository using Nexus

How to implement input checkbox to expand the click range

A pitfall and solution of using fileReader

Docker deploys nginx and mounts folders and file operations

Detailed explanation of adding security group rules to Alibaba Cloud Server (graphic tutorial)

MySQL common backup commands and shell backup scripts sharing

JavaScript to show and hide images

Analyze the difference between computed and watch in Vue

Instructions for nested use of MySQL ifnull

What you need to know about creating MySQL indexes

mysql5.5.28 installation tutorial is super detailed!

How to find the IP address of Raspberry Pi when it is connected to the wireless network without a screen

Docker custom network container interconnection

Detailed explanation of the use of Vue image drag and drop zoom component