1.CSS的基本使用
1.1.CSS的定义:
选择器名{
属性名:属性值;
属性名:属性值;
......
}
注意点:
1.声明需要使用{}括起来,每个声明以分号“;”结尾
2.一行建议一个声明
3如果样式的属性值由多个单词组成,则用引号引起来
1.2.CSS的注释
/*注释内容*/
1.3.CSS的三种使用方式:
1.行内样式:直接写在标签上,在标签上通过style属性定义的样式.
2.内部样式:定义在style标签中的样式,style标签一般设置在head中
3.外部样式:定义在外部的CSS文件中通过link标签引入
<link rel="stylesheet" type="text/css" href="css文件的路径"/>
注意:当有多重样式时,越精准越优先(就近原则)
2.CSS选择器
2.1.基本选择器
2.1.1.通用选择器
选择所有
* {
属性名:属性值;
...
}
* {
color:orange;
}
2.1.2.元素选择器
选择指定标签
元素名/标签名{
属性名:属性值;
...
}
p {
color:red;
font-size:20px;
}
2.1.3.ID选择器
选择设置过指定id属性值的元素 #
#id属性值{
属性名:属性值;
...
}
#p1{
font-weight: bold;
}
/*相应标签中要有“id="p1"”*/
2.1.4.类选择器
选择设置过指定claass属性值的元素<font color="red"></font>
.class属性值{
属性名:属性值;
...
}
.hidden{
display:none;
}
/*相应标签中要有“class="hidden"”*/
2.1.5.分组选择器
当几个元素样式属性一样时,可以共同调用同一个声明,元素之间用逗号分割
选择器1,选择器2,选择器3...{
属性名:属性值;
...
}
h2 , #pre1{
color: orange;
font-style: italic;
}
CSS样式的优先级,是根据选择器的精确度/权重来决定的,常见的权重如下,权重越大,优先级越高
元素选择器:1
类选择器:10
id选择器:100
内联选择器:1000
2.2.组合选择器
2.2.1.后代选择器(派生选择器):选择指定元素的所有指定后代元素,以空格隔开
选择器 指定元素{
属性名:属性值
......
}
<style>
.food{
border: 1px solid red;
}
</style>
<!--获取class属性值时food的元素的所有对应的li列表项-->
<body>
<ul class="food">
<li>水果
<ul>
<li>香蕉</li>
<li>苹果</li>
<li>梨</li>
</ul>
</li>
<li>蔬菜
<ul>
<li>白菜</li>
<li>油菜</li>
<li>卷心菜</li>
</ul>
</li>
</ul>
</body>
2.2.2.子元素选择器:选择指定元素的第一代子元素,以大于号>隔开
选择器 > 指定元素{
属性名:属性值
......
}
2.2.3.相邻兄弟选择器:选择指定元素的下一个指定元素(只会找一个),两者有相同的父元素以加号+隔开
选择器 + 指定元素{
属性名:属性值
......
}
<style>
#myid + div{
background-color: #808080;
}
</style>
<body>
<div>相邻兄弟选择器1</div>
<div id="myid">相邻兄弟选择器2</div>
<div>相邻兄弟选择器3</div>
<div>相邻兄弟选择器4</div>
</body>
<style>
#myid + div{
background-color: #808080;
}
</style>
<body>
<div>相邻兄弟选择器1</div>
<div id="myid">相邻兄弟选择器2</div>
<p>GVHBJNMK</p>
<div>相邻兄弟选择器3</div>
<div>相邻兄弟选择器4</div>
</body>
<!--则没有哪一行被选中-->
2.2.4.普通兄弟选择器:选择指定元素后面的的所有指定元素(只会找一个),两者有相同的父元素以波浪号~隔开
选择器 ~ 指定元素{
属性名:属性值
......
}