层叠样式表,控制HTML的布局和样式
使用方式
三种使用方式
- 内联样式:在标签内使用属性stype
- 页内样式:在<head>标签中使用<stype type=“text/css”><stype>
- 外部样式:使用CSS文件,使用<link rel=“stylesheet” type=“text/css” href=“mystyle.css”>
- 优先级从高到低
基本语法
selector {property1: value1,… ,propertyN:valueN
# 将链接标签文字颜色变成红色且有横线穿过
a {color:red; text-decoration:line-through}
颜色写法
p {color:#ff0000;} /*大小写无所谓*/
p {color:#f00;}/*FF0000的缩写*/
p{color:rgb(255,0,0);}/*三原色表示,0-255*/
选择器
标签选择器
body { text-align:center}
上例直接使用HTML标签的选择器,就是标签选择器,元素选择器
注意,如果将标签改为*,表示统配所有HTML标签
id选择器
id指的是HTML标签内的属性id
#menu{
background-color: rgb(255,255,255);
width:80%;
border-bottom:#f0f0f0 solid 1px;
margin:opx 0px 5px 0px
类选择器
类,指的是标签中的class属性
<div class="main center">
.center{
width:80%;
margin:auto
}
选择器分组
分组的选择就可以使用同样的样式声明
h1,h2,h3{
color:green
}
层次选择器
- 后代选择器
div li {
display: inline
}
所有div标签下任意层的li标签
div#menu li{
display:inline
}
- 子选择器
ul >li {
display:inline
}
所有div标签下直接的子元素li标签
div#menu ul>li{
display:inline
}
- 相邻兄弟选择器
div.detail p+p{
color:green
}
class 为detail的div标签下任意层下的近邻P的标签的下一个p标签
伪类pseudo-classes
伪类能增加样式,类似于class
锚伪类,链接标签a的四种状态
a:link {color:red} /*未访问的链接*/
a:visited {color:green} /*已访问的链接*/
a:hover {color:blue} /*鼠标移动到链接上*/
a:active {color:black} /*选定的链接*/
伪类可以和css类配合使用
a.red:visited {color:#FF0000}
a:hover{ color:red}
a{color :chartreuse; text-decoration-line:none}
<a class="red",href="css_syntax.asp">css Syntax</a>
伪元素
伪元素能增加元素
:before和:after可以在元素前后插入内容
#homepage:after{
content:url(1.png)
}
a:before{
content:"something:
}
属性装饰器
E[attr]{sRules} | 具有某属性 |
E[attr=value]{sRules} | 具有某属性且等于value |
E[attr~=value]{sRules} | 具有某属性且属性值中的一个是value |
E[attr|=value]{sRules} | 具有某属性且属性值使用了-,且-之前的部分是value的才匹配,*[class]="main"能和<div class=‘main-center’>减号之前的部分匹配 |
链接具有href属性
a[href]{
coror:blue;
text-decoration:line-through
}
图片alt属性为text
img[alt=text]{
height:20px
}
* [class="main center"]{
color:black
}
*[class~="center"]{
color:black
}
继承
body{
text-align:center;
color=red
}
观察整个页面文字颜色,几乎后变成了红色
页面中父元素中使用的形式,通过css继承,子孙元素将继承并使用祖先元素的属性,除非子元素重新定义了该属性。
常见样式
背景background复合属性:http://www.w3school.com.cn/css/css_background.asp
字体font复合属性:http://www.w3school.com.cn/css/css_font.asp