1、
选择器+声明
声明：属性+值
eg：h1{color:red;font-size:14px;}
颜色：
p{color:#ff0000;}
p{color:#f00;}
p{color:rgb(255,0,0);}
p{color:rgb(100%,0%,0%);}
单词时:
p{font-family:"sans serif";}

2、选择器的分组
h1,h2,h3{
color:green;
}
3、继承
body{
font-family: Verdana,sans-serif;
}
如果浏览器不支持继承：
body{
font-family: Verdana,sans-serif;
}
p,td,ul{
font-family:Verdana,sans-serif;
}
摆脱继承:
body{
font-family:Verdana,sans-serif;
}
p{
font-family:Times,"Times New Roman",serif;
}
4、派生选择器
li strong {
font-style:italic;
font-weight:normal;
}
只有在li的strong字体才会应用此格式

在li中的strong

5、id选择器
#red{color:red;}
#green{color:green;}
使用：

红色

绿色

id在一个页面中事唯一的，想知道原因吗？哈哈！！！
id选择器和派生选择器:
只应用于id为sidebar内的p
#sidebar p{
font-style: italic;
text-align:right;
margin-top:0.5em;
}
单独的选择器：
#sidebar{
border:1px dotted #000;
padding:10px;
}

6、类选择器
.center{text-align:center}
使用：

使用类选择器class，居中

........

类名不能使用数字

class和派生选择器：
.fancy td{
color:#f60;
background:#666
}
类名为fancy的更大元素内部的表格单元都会起效，即：如果一个

...则所有的单元格都起效
元素基于类而被选择：
td.fancy{
color:#f60;
background:#666;
}
使用：

有且仅有类名为fancy的td起效， 7、属性选择器： [title] { color:red; } .... [title = "w3c"] { color:red; } ... 属性和值选择器-多个值(空格分隔)： [title~=hello] { color:red; } 使用： ... ... 连字符分隔： [lang|=en]{ color:red; } 使用(以en开头)： .... ... 若为[lang=en]{},则只有 ... 表单样式设置： input[type = "text"] { } input[type = "button"] { } 使用： ..... ..... 选择器： [attribute] 用于选取带有指定属性的元素。 [attribute=value] 用于选取带有指定属性和值的元素。 [attribute~=value] 用于选取属性值中包含指定词汇的元素。 [attribute|=value] 用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。 [attribute^=value] 匹配属性值以指定值开头的每个元素。 [attribute$=value] 匹配属性值以指定值结尾的每个元素。 [attribute*=value] 匹配属性值中包含指定值的每个元素。 8、创建: 外部样式表 内部样式表 内联样式 注意多重样式 网页前端 相关 网页前端video播放m3u8(HLS) 标签