7.20css
CSS基本语法结构
选择器{声明；
…………；
}
h1
{ font-size:12px;
color:#F00;
}
style标签
<style type="text/css">
h1 { font-size:12px;
color:#F00;
}
</style>
行样式：使用style属性写在行内
例如<h1 style="color:red;">style属性的应用</h1>
<p style="font-size:14px; color:green;">直接在HTML标签中设置的样式</p>
内部样式：写在《head》标签的<style>中
例如<style>
h1{color: green;
}
</style>
外部样式：需要创建css外部文件
链接外部样式：<head>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
导入外部样式：<style type="text/css">
@import url("style.css")
链接外部样式与导入外部样式区别：link是先将css加载到网页中再编译网页,而import是先将html结显示再将css文件导入。
行内样式>内部样式表>外部样式表
css基本选择器
标签选择器：html标签作为标签选择器的名称
p{
font-size:14px;
color:#ff0000;
}
类选择器 类名前面需要加 . 否则将被默认为标签
.class{
font-size:14px;
color:#ff0000;
}
<标签名 class= "类名称">标签内容</标签名
id选择器
#id{
font-size:14px;
color:#ff0000;
}
<标签名 id= "id名称">标签内容</标签名
D选择器 > class类选择器 > 标签选择器的优先级
层次选择器
|
选择器 |
类 型 |
功能描述 |
|
E F |
后代选择器 |
选择匹配的F元素，且匹配的F元素被包含在匹配的E元素内 |
|
E>F |
子选择器 |
选择匹配的F元素，且匹配的F元素是匹配的E元素的子元素 |
|
E+F |
相邻兄弟选择器 |
选择匹配的F元素，且匹配的F元素紧位于匹配的E元素后面 |
|
E~F |
通用兄弟选择器 |
选择匹配的F元素，且位于匹配的E元素后的所有匹配的F元素 |
后代选择器body p{ background: red; }
子选择器： body>p{ background: pink; }
相邻兄弟选择器： .active+p { background: green; }
通用兄弟选择器：.active~p{ background: yellow; }
结构为类选择器
|
选择器 |
功能描述 |
|
E:first-child |
作为父元素的第一个子元素的元素E |
|
E:last-child |
作为父元素的最后一个子元素的元素E |
|
E F:nth-child(n) |
选择父级元素E的第n个子元素F，（n可以是1、2、3），关键字为even、odd |
|
E:first-of-type |
选择父元素内具有指定类型的第一个E元素 |
|
E:last-of-type |
选择父元素内具有指定类型的最后一个E元素 |
|
E F:nth-of-type(n) |
选择父元素内具有指定类型的第n个F元素 |
ul li:first-child{ background: red;}
ul li:last-child{ background: green;}
p:nth-child(1){ background: yellow;}
p:nth-of-type(2){ background: blue;}
<style type="text/css">
ul>li:nth-child(2){
color: #FF0000;
}
ul>li p:nth-of-type(3){
color: #FF0000;
}
</style>
属性选择
|
属性选择器 |
功能描述 |
|
E[attr] |
选择匹配具有属性attr的E元素 |
|
E[attr=val] |
选择匹配具有属性attr的E元素,并且属性值为val（其中val区分大小写） |
|
E[attr^=val] |
选择匹配元素E，且E元素定义了属性attr，其属性值是以val开头的任意字符串 |
|
E[attr$=val] |
选择匹配元素E，且E元素定义了属性attr，其属性值是以val结尾的任意字符串 |
|
E[attr*=val] |
选择匹配元素E，且E元素定义了属性attr，其属性值包含了“val”，换句话说，字符串val与属性值中的任意位置相匹配 |