what are css rules

What are the css rules?

Here are 31 css grammar rules:

1. Make good use of css abbreviation rules

/*Pay attention to the writing order of top, right, bottom and left*/

1. About margins (4 sides):

1px 2px 3px 4px (top, right, bottom, left)

1px 2px 3px (the omitted left is equal to right)

1px 2px (the omitted top is equal to bottom)

1px (all four sides are the same)

2. Simplify everything:

*/ body{margin:0}------------represents all elements in the web page The margin is 0

#menu{ margin:0}------------means that the margin of all elements under the menu box is 0

3. Abbreviation ( border) specific style:

Border:1px solid #ffffff;

Border-width:0 1px 2px 3px;

4. Abbreviation rules for text:

Font-style:italic; italic form

Font-variant:small-caps/normal; Variant style: small-caps/normal

Font-weight:bold;

Font-size:12px;

Line-height:1.2em(120%)/1.5em(150%);

Font-family:arrial,sans-serif, verdana;

abbreviated to:

Font:italic small-caps bold 12px/1.5em arrial,sans-serif;

Note: Font-size and Line-height are used Slashes cannot be written separately when combined together.

5. About the background image:

Background:#FFF url(log.gif) no-repeat fixed top left;

6. About the list:

List-style-type:square/none;

List-style-position:inside;

List-style-image:url(filename.gif);

is abbreviated as:

List-style:none inside url(filename.gif)

2. Use 4 methods to introduce CSS styles

1.link

rel relationship

type data type, there are many

href path

Some browsers support alternative styles, keyword: alternate:

2. Internal style block

h1{color:red;}

–>

3.@import

@import url {a.css}

Note: This directive must be placed in the

It is recommended to place it in an html comment,

4. Inline style

Selector is a basic concept of CSS. The basic rules are as follows:

1. Rule structure:

h1 {color:red;}

Selector {Attribute: value;}

This type is an element selector, which can basically include all html elements

The attribute value can include multiple elements, such as: border: 1px solid red;

Common syntax

1) Grouping:

Both selectors and declarations can be grouped:

h1,h2,h3{color:red;background:#fff ;}, the selector is separated by ",", and the attribute is separated by ";"

2) Class selector, that is, the declaration applied through class="stylename"

Definition:

.stylename{color:red;}

Note:

You can use multiple categories of selection in html: such as class="cn1 cn2 cn3″

3) ID selector, that is, the style corresponding to the id attribute

Definition:

#a{color:red;} ->This definition is for elements with id="a"

2. This part is our common css syntax. Let’s talk about our uncommon selector syntax

1) Parent-child structure, which corresponds to the document structure diagram

such as p span {border:1px solid red;} corresponds to the

tag below

, which is very useful and can be accurately positioned.

Some special applications (IE7 support):

(1) p > span{}, matches all spans under all p

(2) p span{}, matches the first span tag that appears immediately after the p element, the two must Have the same parent tag

2) Attribute selector: (Note: The attribute selector is only supported by IE7, and is not supported by the following versions. Other browsers can basically do it)

Syntax: img [alt]{border:1px solid;}

means the img tag corresponding to the alt attribute. Of course, it can support multiple attributes, such as img[alt][title]{}; means that both attributes are Some img tags can also correspond to specific values: such as: img[alt="what are css rules"]{};

Advanced application in attribute selector, special matching:

(1 )img[class~=”b”], ~=: corresponds to a value in the attribute, that is, corresponds to

(2)[class^=” a”],

(3)[class$=”a”] starting with a,

(4)[class*=”a”] ending with a, including a

(5)[class|=”a”], equal to a or

3) Pseudo classes and pseudo elements

are mainly used in daily use Several pseudo-classes of the tag: link:hover:active:visited

and: first-child:first:before:left:right:lang:focus:fist-line, etc.

Note: Dynamic pseudo-classes can be applied to any element, for example, input:focus{background:red;}When the input tag gets focus, the background turns red

Use the above syntax in combination to achieve accurate positioning , simple and indirect style.

3. Selector classification integration

优先级别遵循：行内样式 >ID > Class >标记

基本选择器 标记选择器（eg:

） 

类别选择器(eg:class) 

ID选择器 

复合选择器 “交集”复合选择器(eg:p.menu{color:red}) 必须是标记+类别/ID组合 

“并集”复合选择器(eg:h1,h2,h3{color:red}) 

“后代”复合选择器(eg: #menu .menulist{ ... }) 

“子” 复合选择器(eg: #menu .menulist .selectit { ... })

四、 使用子选择器减少id和class的定义

示例结构：

content

Example CSS:

#menu { ... }

#menu .menulist { ... }

#menu .menulist .selectit { ... }

5. Use group selectors to apply the same style to different elements

such as h1,h2,h3,div{font-size:16px;font-weight:bold }

Then the styles of h1, h2, h3, and div elements are all 16 pixels in font and bold

6. Use of pseudo-classes and selectors

will By combining pseudo-classes and classes, you can create several groups of different link effects on the same page. For example, we define a group of links to be red and blue after access; another group is green and yellow after access. ：

a.red:link {color: #FF0000}

a.red:visited {color: #0000FF}

a.blue:link {color: # 00FF00}

a.blue:visited {color: #FF00FF}

Now applied to different links:

This is the first set of links

This is the second set of links> ;

7. The most recent priority principle of CSS

/*If multiple styles are defined for an element, the most recent one will take precedence, and the most recent style will override other inline styles. >ID > Class >Mark*/

The following is a reference fragment:

CSS:

p{color:red}

.blue {color:blue}

.yellow{color:yellow}

HTML:

This is shown in red

This is shown as blue

This is displayed as Green

This is shown as yellow

Note:

(1) Pay attention to the several priorities of styles (the priorities decrease from top to bottom, and the following styles override the styles above):

--Element style setting

--Head area

--Externally referenced css files

(2) The priority is not set according to the access order, but the declaration order in css To set up.

In the above example,

is displayed as yellow here

is also displayed as yellow, because .yellow is after .blue in the css definition.

8. Write the correct link style

When using css to define the various states of the link, pay attention to the order of writing: :link :visited :hover :active using the first letter: L V H A , you can remember the order by memorizing the two words LoVe, Hate.

:link --------The color of the link

:visited -----The color after the mouse click

:hover ----- --The color when the mouse is placed but not clicked (hover)

:active-------The color when the mouse is clicked

9. Flexible use of :hover

IE6 does not support the :hover attribute other than the a tag. We understand that the :hover attribute is the mouse hover effect. In IE7 and FF, you can set the :hover attribute effect on almost any element. This works great for us doing different visits.

For example:

p {

width : 360px;

height : 80px;

padding : 20px;

margin : 50px auto 0 auto;

border : 1px solid #ccc;

line-height : 25px;

background : #fff;

}

p:hover {

border : 1px solid #000;

background : #ddd;

}

- ---------------This effect is for IE7 and FF

p a {

color : #00f;

text-decoration : none;

font-size : 13px;

}

p a:hover {

color : #036;

text- decoration: underline;

}

-----------------This effect is for IE6

10. Define the A tag requirements Small issues to note

When we define a{color:red;}, it represents the styles of the four states of A. If you want to define a state where the mouse is placed, just define a:hover. Okay, the other three states are the styles defined in A.

When only one a:link is defined, be sure to remember to define the other three states!

11. Prohibiting content from wrapping and forcing content to wrap

In tables or layers, we may want the content not to wrap or to force wrapping. We can achieve these requirements through some css attributes.

Disable line break: white-space:nowrap

Force line break: word-break: break-all; white-space: normal;

12. Difference between relative and absolute

Absolute---The writing method in CSS is: position:absolute; It means absolute positioning. It refers to the upper left corner of the browser and cooperates with TOP, RIGHT, BOTTOM, and LEFT (hereinafter referred to as TRBL). Positioning, if TRBL is not set, defaults to the origin point of the parent. If TRBL is set and the parent does not set the position attribute, then the current absolute will be positioned with the upper left corner of the browser as the original point, and the position will be determined by TRBL.

Relative---The writing method in CSS is: position:relative; It means absolute relative positioning. It refers to the original point of the parent as the original point. If there is no parent, the original point of BODY is used as the original point. Cooperating with TRBL for positioning, when there are CSS attributes such as padding in the parent level, the original point of the current level is positioned with reference to the original point of the parent content area.

13. Distinguish between block-level elements block and inline elements inline

Block level---the width and height can be defined, and it can occupy a separate line (such as: div ul)

Inline---the width and height cannot be defined, such as text elements (such as a span)

14. The difference between display and visibility

Both display:none and visibility:hidden can hide an element , but visibility:hidden only hides the content of the element, but the position space used is still retained. Display:none is equivalent to removing the element from the page, and its occupied position will also be deleted.

15. Some syntax of background background

background-image:url(background pattern.jpg,gif,bmp);

background-color:#FFFFFF; ( Background color)

background-color : transparent;

background-repeat Change the repeating side-by-side setting of the background image

Description

repeat Background pictures are side by side

repeat-x Background pictures are side by side in the X direction

repeat-y Background pictures are side by side in the Y direction

no -repeat The background image is not processed side by side.

Background-attachmentWhether the position of the image is fixed

Description

scroll When the scroll is pulled, the background image will move accordingly (default value )

fixed When the scroll is pulled, the background image will not move accordingly

Position background-position by length: x y

Use percentage to position background-position: x% y%

Description

x% Move right

y% Move down

backgroud-position: 0% 0%; top left

backgroud-position: 0% 50%; left center

backgroud-position: 50% 0%; center top

backgroud-position: 50% 50%; middle center

backgroud-position:100% 0%; upper right

backgroud-position: 0% 100%; lower left

backgroud-position: 100% 50%; middle right

backgroud-position: 50% 100%; middle bottom

backgroud-position: 100% 100%; right bottom

Positioning by keyword

Keyword description

top upper (y = 0)

center middle (x = 50, y = 50)

bottom lower (y = 100)

left Left (x= 0)

Exp:

background-position:center;

The picture is at X=50% Y=50% position in the center of the specified background

background-position: 200px 30px

16. How to write comments

In Html:

content

In CSS:

/* ---------- header --- -------------- */

style

17. CSS naming convention

1. Naming of id

(1) Page structure

Container: container

Header: header

Content: content/container

Page body: main

Footer: footer

Navigation: nav

Sidebar: sidebar

Column: column

Page peripheral control overall layout width: wrapper

left right center

(2)Navigation

Navigation: nav

Main navigation: mainnav

Sub-navigation: subnav

Top navigation: topnav

Side navigation: sidebar

Left navigation: leftsidebar

Right navigation: rightsidebar

Menu: menu

Submenu: submenu

Title: title

Summary: summary

(3) Function

Logo: logo

Advertising: banner

Login: login

Login bar: loginbar

Registration: regsiter

Search: search

Function Area: shop

Title: title

Join: joinus

Status: status

Button: btn

Scroll: scroll

Tag page: tab

Article list: list

Prompt message: msg

Current: current

Tips: tips

Icon: icon

Note: note

Guide: guild

Service: service

Hot spot: hot

News : news

Download: download

Vote: vote

Partner: partner

Friendly link: link

Copyright: copyright

2. Class naming

(1) Color: Use the color name or hexadecimal code, such as

.red { color: red; }

.f60 { color: #f60; }

.ff8600 { color: #ff8600; }

(2) Font size, directly use "font font size" as the name, such as

.font12px { font-size: 12px; }

.font9pt {font-size: 9pt; }

(3) Alignment style, use the English name of the alignment target, For example,

.left { float:left; }

.bottom { float:bottom; }

(4) Title bar style, named using "category function" , such as

.barnews { }

.barproduct { }

Notes::

u All lowercase;

u Try to Use English;

u Do not add a dash or underline;

u If you combine 2 words, you can capitalize the first letter of the second word without a dash or underline (eg: mainContent);

u Try not to abbreviate words unless they are easy to understand at a glance.

3. Main site css file

Main master.css

Module module.css

Basically share base.css (root.css)

Layout, layout.css

themes.css

columns columns.css

Text font.css

Form forms.css

Patch mend.css

Print print.css

18. Padding affects width Question

If some spacing is required between a group of nested tags, then leave it to the margin attribute of the tag located inside instead of defining the padding

## of the tag located outside. #19. Perfect single-pixel border table

table{border-collapse:collapse;}

td{border:1px solid #000;}

20. If the text is too long, the overly long part will be displayed as ellipses

Content2

Title

Content description 1

Content description 2

l dt You can add ol ul li and p

to dd. 27. Clear floating

clearfix:after {content:"."; display:block; height:0; clear:both ; visibility:hidden;}

In Firefox, when all children are floating, then the height of the parent cannot completely wrap the entire child, then use this HACK to clear the floating level. If the parent is defined once, this problem can be solved.

.clearfix {

display:inline-block;

}

/* Hides from IE-mac \*/

* html .clearfix {

height:1%;

}

.clearfix {

display:block;

}

/* End hide from IE-mac */

**This kind of usage is more common when mixing graphics and text, but it is not easy to control. Use margin with clear{clear:both }Control directly.

28. Text processing

1. General fonts:

font-family: "Lucida Grande", Verdana, Lucida, Arial, Helvetica, "宋体",sans-serif;

Title font (h1/h2): font-family: Cambria, Georgia, "Times New Roman", Times, serif;

2. Drop cap ：

P:first-letter{padding:10px,fontsize:32pt;float:left}

3. Pinyin Chinese characters:

Bruce Wolfbu lu si lang

29. Min-height multi-browser compatibility issue

Div{

min-height:450px;

height:auto!important;

height:450px;

overflow:visible;????

}

30. CSS layout tips - CSS BUG jingle

· If the IE border appears or disappears, please note that the height setting must have been forgotten;

· There is a reason for floating. If you want the parent layer to contain it, you need to clear it immediately after the floating. The container will naturally appear in it;

· Don’t panic when the three-pixel text moves slowly, the height setting will help you;

· To be compatible with various browsers, please note that the default row height setting may be a killer;

· Please remember to clear floating independently, set the row height to none, and set the height to zero, the design effect is combined with browsing;

· Learning layout requires thinking, the path is natural and straight with the layout principle, easy to control HTML, streamlined layout with less hacks, clean code, good compatibility, and friendly engines.

· All tags have sources, but the defaults are different. span is Wuji, Wuji has two types - inline and block level. img is special, but it also follows the legal principles. Others are just different modifications, one* The number is all back to the original, the layering pattern requires more practice, everything is regular.

· Be careful when formatting image links. If the image link text link is aligned, padding and vertical-align:middle must be set. It doesn’t matter if the difference is slight.

· IE floating double margins, please use display: inline.

· The list should be typed horizontally, the list codes must be close together, and the gaps must be remembered.

31. Font applications in the Web

Summarize several sets of practical and simple font-family

font-family: Tahoma, Helvetica, Arial, sans-serif ;

Tahoma-based neutral font. It is recommended to use an environment above 13px.

font-family: Trebuchet MS, Verdana, Helvetica, Arial, sans-serif;

Verdana wide flat font. It is recommended to use it in an environment below 11px.

font-family: Geogia, Times New Roman, Times, serif;

The perfect serif font. Mostly used for large title fonts above 16px.

font-family: Lucida Console, Monaco, Courier New, mono, monospace;

A series of monospaced fonts. Writing code is very useful. In addition, if you feel that Lucida Console is too wide, you can switch to the narrower Lucida Sans Typewriter. By the way, the code block on Lao Zhao's blog uses Lucida Sans Typewriter~

If the visibility is set to hidden in the style of the div, the div will be hidden, but it will occupy the blank space, and if it is set to display: none does not occupy the blank space;

and visible="false" means the div will not be returned in html;

The above is the detailed content of what are css rules. For more information, please follow other related articles on the PHP Chinese website!