One,
css introduction mode (three kinds)
1, inline:
setting style attribute in the tag
<tag name style = "Style 1: 2 style value; Pattern 1: style value 2">
<tag name>
如：<a style ="color：red； font-size=20px；"
</a>
2, embedded:
added style tags in the head tag
<style>
selectors 1 {
Pattern 1: style value 1;
Style 1: style value 1;
Style 1: style value 1;
}
selector {2
style 1: 1 style value;
style 1: style value 1;
style 1: style value 1;
}
Such as: <style>
p{
color:blue;
font-weight:bold;
}
</ style>
. 3, the outer introduced
new .css file, write pattern in css file
selector 1 {
Pattern 1: style value 1;
Style 1: style value 1;
Style 1: style value 1;
}
selector {2
style 1: 1 style value;
style 1: style value 1;
style 1: style value 1;
}
in the head tag html file with the link tag incorporated css document
such as:
<link href="xxx.css"></link>
Second, the selector
. 1, id selector
added id attribute <name tag id = "id value"> tag in </a>
#id value of each one is only one value
2, clss selector
added class attribute <class name tag = "class value"> tag in the
.class value Note: the representative class is a class of
3, elements (tags) the selector
written or embedded in the external file formats css
element name {A
}
identifier (named variety) specifications: only alphanumeric, underscore, where $ not begin with a number, and can not be keyword
</>
selector priority:
I D selector <class selector> selector element
incorporated priority mode:
inline> inline> introducing external proximity principle
relationship selector:
parallel relationship:
selector 1, {selector 2
} As: # P1, # S1, Li, UL {
Color: Red;
}
paternity nested father does not set the value to his son set
such as:
#u1 #l4{
color:gray;
}
+ Brotherhood brothers to brothers namely brother add style
such as:
#l5+li{
color: blueviolet;
}
Third, character
<! DOCTYPE HTML> <HTML> <head> <Meta charset = " UTF-. 8 " > <title> basic style </ title> <style>
/ * background * / body { background - Color: Bisque; Background color background - image: URL (../../ IMG / 2.1 .jpg); background image background -repeat: NO- REPEAT; background is tiled background -attachment: fixed ; fixed background } # {D1 / * Font, mostly in the font beginning remove Color * / font -family: Microsoft elegant black; Cambria, Hoefler Text, Liberation Serif , Times, Times New Roman, serif; text font font - size: 30px; size font - weight: Lighter; fine font - style: Italic; italics color: red; color } # P1 { / * version * / text - Decoration: underline; underlined text - Transform: lowercase; lowercase English text - indent: 2em; first line indent 2 characters text - align = left: Center; align text line - height: 50px; 50px line height } D2 {# / *
frame
border-width: 5px; border: 3px Red Dashed; * / border - Top: Solid #FDFCFC 60px; border - left: 60px Solid #FDFCFC; border - right: 60px Solid #FDFCFC; border - bottom : Solid Red 60px; width: 0px; height: 0px; / * as long as the bulk element can be set * / } # Ql { width: 200px; height: 200px; background - Color: Aqua; } # {Q2 backgroundthe -image: URL (../../ IMG / 2.1 .jpg); Background Floating background -position: -283px - 182px; } </ style> </ head> <body> <div ID = " D1 " > This block region </ div> <INPUT type = " text " name = " MC " ID = " Q2 " > <P ID = " P1 " > this is a paragraph tag Hello </ P> <div ID = " D2 " > <div class="d1"> </div> <div id="q1"> </div> <div class="d1"> </div> <div class="d1"> </div> </div> </body> </html>
Reproduced in: https: //www.cnblogs.com/a199706/p/11041127.html