Div CSS basic usage arrangement_html/css_WEB-ITnose

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 the right) 1px 2px (the omitted top is equal to the bottom) 1px (the four sides are the same)

2. Simplify everything: */ body{ margin:0}------------Indicates that the margin of all elements in the web page is 0 #menu{ margin:0}------------Indicates that all elements under the menu box The margin of the element 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; Font-variant:small-caps/normal; Font-weight:bold; Font-size:12px; Line-height:1.2 em(120%)/1.5em(150%); Font-family:arrial,sans-serif,verdana; abbreviated as: Font:italic small-caps bold 12px/1.5em arrial,sans-serif; Note: Font-size and Line-height are combined with slashes and cannot be written separately.

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); 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 multiple href paths. Some browsers support candidate styles, key Word: alternate: 2. Internal style block

2) Class selector, that is, a 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 applies to elements with id="a"

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

1) Parent-child structure, corresponding to the document structure diagram

For example, p span{border:1px solid red;} corresponds to

below Tag, this is very useful and can be accurately positioned.

Some special applications (supported by IE7):

(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: Attribute The selector has only been supported by IE7, and the following versions do not support it. Other browsers can basically support it)

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

indicates that there is an alt attribute The img tag can of course support multiple attributes, such as img[alt][title]{}; indicating that the img tag has both attributes, and can also correspond to specific values: such as: img[alt="Photography" ]{};

Advanced application in attribute selector, special matching:

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

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

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

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

(5)[class|="a"] including a, equal to a Or

starting with a 3) Pseudo-classes and pseudo-elements

In daily use, there are mainly 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, such as input:focus{background :red;} When the input tag gets focus, the background turns red

Using the above syntax in combination, you can achieve accurate positioning, simple and indirect style.

Three selector classification integration

Priority level follows: Inline style >ID > Class > Tag

基本选择器 标记选择器（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

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, yellow after visiting:

a.red:link {color: #FF0000}

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

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

a.blue:visited {color: #FF00FF}

now applies to different links:

This is the first set of links

This is the second set of links Group link

7. CSS’s most recent priority principle

/*If multiple styles are defined for an element, the most recent one will take precedence. The style will override other Inline Styles >ID > Class > Tags */

Here is the quote snippet:

CSS:

p{color:red}

.blue{color:blue}

.yellow{color:yellow}

HTML:

Displayed here in red p>

This is shown in blue

This is green

This is yellow

Note:

(1) Pay attention to the priorities of styles (the priorities decrease from top to bottom, and the styles below cover the styles above): - Element style settings - Head area Settings in --Externally referenced css files

(2) The priority is not set by the access order, but by the declaration order in css. As 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 letters: L V H A , you can remember the order by memorizing the two words LoVe, Hate.

:link --------Color of link

:visited -----Color after 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.

Such as:

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.

Prohibit line breaks: white-space:nowrap

Force line breaks: word-break: break-all; white-space: normal; 12. The 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) for positioning. If TRBL is not set,

By default, the original point is the original point based on 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. The original point is positioned with TRBL. When the parent

has CSS attributes such as padding, 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---definable width and height, 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 The content of the element is hidden, but the position space it uses is still preserved. 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-image:url(background pattern.jpg,gif,bmp);

background-color:#FFFFFF; ( Background color)

background-color: transparent; 🎜> Description

repeat Background images are side by side

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

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

no -repeat Background images are not processed side by side

Whether background-attachment fixes the image position

Description

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

fixed The background image will not move when the scroll is pulled

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%; Upper left

backgroud-position: 0% 50%; left center

backgroud-position: 50% 0%; center top

backgroud-position: 50% 50%; center

backgroud-position:100% 0%; upper right

backgroud-position: 0% 100%; lower left

backgroud-position: 100% 50%; middle right

backgroud-position: 50% 100%; bottom in the middle

backgroud-position: 100% 100%; keyword positioning in the bottom right

Keyword Description

top ( y = 0 )

center ( x = 50, y = 50 )

bottom ( y = 100 )

left ( x = 0 )

Exp:

background-position:center;

The image 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

Ribbon: shop

Title: title

Join: joinus

Status: status

Button: btn

Scroll: scroll

Tab: tab

Article list: list

Prompt message: msg

Current: current

Tips: tips

Icon: icon

Notes: note

Guide: guild

Service: service

Hotspot: hot

News: news

Download: download

Vote: vote

Partner: partner

Links: link

Copyright: copyright

2. Class naming

(1) Color: Use the name of the color 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, such as

　.left { float :left; }

　.bottom { float:bottom; }

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

　.barnews { }

.barproduct { }

Notes::

u Always lowercase;

u Try to use English;

u No Add a dash and underline;

u 2 combined words can capitalize the first letter of the second word without a dash and underline (eg: mainContent);

u Try not to abbreviate, Unless you can understand the words at a glance.

3. Main site css file

Main master.css

Module module.css

Basic sharing base.css (root.css)

Layout, layout.css

Theme themes.css

Column columns.css

Text font.css

Form forms.css

Patch mend.css

Print print.css

18. Padding affects width problem

If If some spacing is needed between a group of nested tags, 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 outline table

table{border-collapse:collapse;}

td{border:1px solid #000;}

20. If the text is too long, the part that is too long will be Change to ellipses to display

Twenty-one , Not all styles need to be abbreviated

When the style sheet is defined such as p{padding:1px 2px 3px 4px}, another style is added in the subsequent project with upper padding of 5px and lower padding of 6px. We don’t necessarily have to write p.style1{padding:5px 6px 3px 4px}

. It can be written as p.style1{padding-top:5px;padding-right:6px;}. You may feel that writing it this way is not as good as the original one, but have you ever thought about it? Your writing method repeatedly defines the style. In addition, You don’t need to find out what the original

’s bottom filler and left padding values ​​are! If the previous style P changes in the future, the style of p.style1 you defined will also change. (This method is very important for later modification of styles)

22. Several commonly used CSS details processing styles

1) Alignment of Chinese characters at both ends: text-align: justify;text-justify:inter-ideograph;

2) Fixed-width Chinese character truncation: overflow:hidden;text-overflow:ellipsis;white-space:nowrap;(does not allow it to wrap, but can only process text Truncation on one line, cannot handle multiple lines. ) (IE5 and above) FF cannot

, it only hides.

***Universal forced line break: white-space:normal;word-break:break-all;

Forbidden line break: white-space:nowrap

Forced line break: word-wrap: break-word; word-break: normal;

.AutoNewline

{

/*word-break: break-all; Method 1 Required*/

/*word-wrap:break-word;overflow:hidden; Method 2 */

/*word-wrap:break-word; word-break: normal; Method 3*/

word-wrap:break-word; word-break:break-all;

}

.NoNewline

{

/*word-break: keep-all; Method 1 Must*/

white-space:nowrap;

}

3) Fixed-width Chinese character (word) line break ：table-layout:fixed; word-break:break-all; (IE5 and above) FF cannot. 4)TextUse the mouse to place the previous text to see the effect. This effect can be seen on many foreign websites, but very few domestic ones

. 5) Set the image to semi-transparent: .halfalpha { background-color: #000000; filter: Alpha (Opacity=50)} passed the test in IE6 and IE5, but failed in FF. This is because this style is private to IE; 6 ) FLASH transparency: Select swf, open the original code window, enter before The above is the code for IE.

For FIREFOX, add a similar parameter wmode=”transparent” to the tag. 7) When making web pages, it is often used to put the mouse on the picture to make the picture brighter. It can be replaced with a picture. Tips, you can also use the following filters:

.pictures img {

filter: alpha(opacity=45); }

.pictures a:hover img {

filter: alpha(opacity=90); }

8) The problem of center alignment of layers in the browser

body { text-align: center }

#content { text-align: left; width: 700px; margin: 0 auto }

9) Single-line content vertical alignment problem in the layer

# content{height:19px; line- height:19px; }The disadvantage is that the content does not need to wrap. 10) The problem of vertical center alignment of layers in the browser

The disadvantage is: scroll bars cannot appear horizontally or vertically, only on one screen

In fact, the solution is Like this: We need position:absolute; absolute positioning. For layer positioning, use the method of using negative outer patch margins. The size of a negative value is the width and height of the layer itself divided by 2.

For example: the width of a layer is 400 and the height is 300. Use absolute positioning and set the top and left distances to 50%. The value of margin-top is -150. The value of margin-left is -200. In this way, we have achieved the

style writing where the layer is vertically centered in the browser.

Please see the example code:

div {

position:absolute;

top:50%;

left:50% ;

margin:-150px 0 0 -200px;

width:400px;

height:300px;

border:1px solid red;

}

11) CSS control image adaptive size

div img {

max-width:600px;

width:600px;

width:expression(document.body.clientWidth>600?"600px":"auto");

overflow:hidden;

}

23. Issues to note when using elements with the float attribute

1. Use the border attribute to determine the layout characteristics of the error element. Using the float attribute for layout will cause errors if you are not careful. At this time, add the border attribute to the element to determine the element boundary, and the cause of the error will be revealed. 2. The parent element of a float element cannot specify the clear attribute

If you use the clear attribute on the parent element of a float element under MacIE, the layout of the surrounding float elements will be confused. This is a famous bug of MacIE. If you don't know it, you will take detours. 3. Float elements must specify the width attribute

Many browsers have bugs when displaying float elements without specified width. So regardless of the content of the float element, the width attribute must be specified for it.

In addition, try to use em instead of px as the unit when specifying elements. 4. Float elements cannot specify attributes such as margin and padding

IE has a bug when displaying float elements with margin and padding specified. Therefore, do not specify margin and padding attributes on float elements (you can nest a div inside the float element to set margin and padding). You can also

use hack methods to specify special values ​​for IE. 5. The sum of the widths of float elements must be less than 100%

If the sum of the widths of float elements is exactly 100%, some ancient browsers will not display properly. Therefore, please ensure that the sum of the widths is less than 99%. 24. Browser compatibility issues (for FF/IE6/IE7)

1. CSS hack: Distinguish between IE6, IE7, firefox

Distinguish between FF, IE7, IE6:

background:green !important; background:orange; *background:blue;

IE6 can recognize *, but not !important,

IE7 can recognize * and can also recognize * !important;

FF cannot recognize *, but it can recognize !important;

One more thing to add, underline "_",

IE6 supports underline, IE7 and firefox both Underscores are not supported.

So you can also distinguish firefox, IE7, IE6 in this way

             background:green!important; *background:orange; _background:blue;

                                                                                               Written at the end.

2. The BOX model interpretation in firefox and IE is inconsistent, resulting in a 2px difference. Solution

div{margin:30px!important;margin:28px;}

Pay attention to this The order of the two margins must not be reversed. IE cannot recognize the !important attribute, but other browsers can. So it is actually interpreted like this under IE: div{maring:30px;margin:28px} If you define it repeatedly, press

to execute it as the last one, so you cannot just write margin:XXpx!important;

3. Conditional comments to select different browsers (more concise than CSS hack)

4. Distinguish IE8

.color {

background-color: #CC00FF; /*All browsers will display purple*/

background-color: #FF00009; /*IE6, IE7, and IE8 will display red*/

*background-color: #0066FF; /*IE6 and IE7 will turn blue*/ >

25. Standard principles followed by W3C

1. Before arranging tables, please think carefully about the best solution. Try to control the nesting of tables within three levels. And you should try to avoid the two tags . Experience shows that these two tags will bring

a lot of trouble.

2. A web page should try to avoid using an entire large table. All content is nested within this large table, because when the browser interprets the elements of the page, it displays them one by one in units of tables. If a web page is nested within a large

table, the likely consequence is that when the visitor types in the URL, he will first face a blank space for a long time, and then all the web pages content appears simultaneously. If you must do this, use the

tag so that

the large table can be displayed in chunks.

3. In typesetting, we often encounter the need to indent the first line. Do not use or full-width spaces to achieve the effect. The standard approach is to define p { text-indent: 2em; in the style sheet. } Then add

tags to each paragraph. Note that under normal circumstances, please do not omit the

end tag.

4. In principle, we prohibit using to artificially interfere with the size of the image display, and it is recommended not to include the width and height attributes in the tag , this is because during the production process, pictures often

need to be modified repeatedly. This can avoid human intervention in the size of the picture display and maximize the browser's own functions; however, a side effect of this is that when the web page is still When the image is not loaded, the site size of the image will not be reserved, which may

cause the webpage to jitter during the loading process (if the image is inserted into a fixed-size table, this phenomenon will not occur) , especially when the size of the image is large, this phenomenon will be obvious, so when it is expected that this will obviously cause the webpage

to jitter, please be sure to give

5. In order to maximize the automatic layout function of the browser, please try not to use
to manually intervene in the segmentation of a complete text.

6. There should be a half-width space between words in different languages, except before the header avoidance symbol and after the tail avoidance symbol. The punctuation between Chinese characters should be full-width punctuation, and the brackets around English letters and numbers should be Use half-angle brackets.

7. All font sizes should be implemented using style sheets, and the tag is prohibited from appearing on the page.

8. Please do not appear more than one consecutively in the web page and use full-width spaces as little as possible (under the English character set, full-width spaces will become garbled characters). You should try to use text-indent, padding, margin for white spaces. , hspace,

vspace and transparent gif images to achieve.

9. When mixing Chinese and English, we try our best to define English and numbers as verdana and arial fonts.

10. It is recommended to define line spacing in percentage. The commonly used two line spacing values ​​are line-height:120%/150%.

11. All paths in the website use relative paths. Generally, the link path to a default file in a certain directory does not need to be filled with the full name. For example, we do not have to do this: but should look like this:

”aboutus/”>

　12. Use larger fonts when embedding text in graphics. It is recommended not to include text in graphics.

13. "Web page size" is defined as the sum of the file sizes of all web pages, including HTML files and all embedded objects. Users prefer sites that are fast rather than novel. For modem users, it is appropriate to keep the page size below 34K

.

14. Float elements must specify the width attribute. Many browsers have bugs when displaying float elements without specified width. So regardless of the content of the float element, the width attribute must be specified for it. In addition, when specifying elements, try to use em instead of px as the unit.

15. Float elements cannot specify attributes such as margin and padding. IE has a bug when displaying float elements with margin and padding specified. Therefore, do not specify margin and padding attributes on float elements (you can nest a div inside the float element to set margin and padding). You can also

use a hack method to specify a special value for IE.

16. The sum of the widths of float elements must be less than 100% If the sum of the widths of float elements is exactly 100%, some ancient browsers will not display properly. Therefore, please ensure that the sum of the widths is less than 99%.

26. List elements ul ol li dl dt dd meaning

>

Content 2

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, the height of the parent cannot completely cover the entire child. Then use this HACK to clear the floating to define the parent once. Then 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 and clear{clear:both} to control it 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

Twenty-nine, Min-height multi-browser Compatibility issue Div{   min-height:450px; height:auto!important; height:450px; If not, please note that the height setting must have been forgotten; · There is a reason for the float to be included. If the parent layer wants to contain it, the float must be cleared immediately, and the container will naturally appear; · Don’t panic when the three-pixel text moves slowly, the height setting will help you. Busy; · Please pay attention to compatibility with various browsers, the default setting of row height may be a killer; · Remember to clear floats independently, set row height to none, set height to zero, the design effect is concurrent with browsing; · Learning layout requires ideas, and the path will follow the layout principle. , easy to control HTML, streamlined layout with less hacks, clean code, good compatibility, and friendly engines. · All tags are active, but the defaults are different. span is Wuji, Wuji generates two elements? inline and block level. img is special, but it also follows the legal principles. Others are just different modifications. One * sign will return them all to the original, cascading Patterns need to be practiced more often, and everything has rules

. · 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 fonts. It is recommended to use an environment above 13px. font-family: Trebuchet MS, Verdana, Helvetica, Arial, sans-serif; Verdana family wide flat font. It is recommended to use it in an environment below 11px. font-family: Geogia, Times New Roman, Times, serif; Serif fonts are the perfect choice. 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.