初识CSS
CSS 指层叠样式表 (Cascading Style Sheets),通过CSS定义如何显示HTML元素来提高网页的显示效果。
在HTML的基础上引入CSS:
方式1:
/*方式1:内联引入(行内引入)*/
<div style="color: hotpink"></div>
方式2:
/*方式2:内部引入,在head标签中用style标签书写*/
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{ /*对所有div标签生效*/
color: hotpink;
background: hotpink;
}
</style>
</head>
方式3(推荐使用):
/*方式3:外部文件引入(外部样式),工作中用的最多的一种方式*/
<link rel="stylesheet" href="css1.css"> /*href:文件路径*/
CSS选择器
基础选择器器
- 元素选择器
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{color: gold} <!--所有div标签生效-->
</style>
</head>
<body>
<div>
渣男锡纸烫,渣女大波浪
</div>
<div>
开心你就giao,不开心你就giaogiao
</div>
</body>
- ID选择器
如果我们仅仅需要对某个标签改颜色,那么元素选择器就不能够满足需求了,这时候ID选择器可以解决。
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#d1{ <!--#号表示id属性,d1表示id属性的值,不能重复;仅对id值为d1的标签生效-->
color: gold
}
</style>
</head>
<body>
<div>
渣男锡纸烫,渣女大波浪
</div>
<div id="d1">
开心你就giao,不开心你就giaogiao
</div>
</body>
- 类选择器
如果想对其中某几个标签同时添加一个样式,而id属性的值又不能重复咋办?有人说我在style标签里面写多几个id选择器,不仅low而且标签多得数不过来的时候要写很多遍。直接上才艺!!!
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.d{ <!--.表示class属性,d表示class的值-->
color: green;
}
<!--找某个标签里包含的属性-->
div.d{
color: gold;
}
</style>
</head>
<body>
<div>
渣男锡纸烫,渣女大波浪
</div>
<div class="d"> <!--如果属性值有多个用空格隔开-->
开心你就giao,不开心你就giaogiao。
</div>
<div class="d">
我的烤面筋,融化你的心。
</div>
</body>
组合选择器
- 后代选择器
.c3 a{ <!--c3类中的所有a标签-->
color: pink;
}
<!------------------------>
<div class="c3">
<a href="">鲁班</a>
<a href="">兰陵王</a>
<div>
<a href="">芈月</a>
<a href="">鸡毛信</a>
</div>
</div>
- 儿子选择器
div>p{ <!--所有父级标签为div标签的p元素-->
color: pink;
}
- 毗邻选择器
div+p{ <!--紧跟着div标签的的下面的所有p元素-->
color: pink;
}
<p>giao有错吗???11111</p> <!--这个是不生效的-->
<div>
<p>giao有错吗???2222</p>
</div>
<div>
<p>giao有错吗???</p>
</div>
- 弟弟选择器
#di~p{
color: pink;
margin: 5px;
}
<!------------------------>
<p>giao有错吗???hhh</p>
<div id="di">
<p>大家好111</p>
<p>giao有错吗???11111</p>
</div>
<p>giao有错吗???444444</p> <!--只有这两个生效-->
<p>giao有错吗???55</p>
<div>
<p>giao有错吗???2222</p>
属性选择器
<!--含有title的p标签----->
p[title]{
color: green;
}
<!--含有xxx属性的的所有标签----->
[xxx]{color:red;}
<!--含有xxx属性的并且属性值为p2的所有标签----->
[xxx='p2']{color:red;}
<!--含有所有有title属性的并且属性值为p2的p标签----->
p[title='p2']{xx:xx;}
<!----------------------------------->
<div id="di">
<p title="t1">大家好111</p> <!---------->
<p>giao有错吗???11111</p>
</div>
<p title="t2">giao有错吗???444444</p> <!--------->
组合选择器
需要多个标签的样式相同的时候,可以使用分组选择器来统一设置样式。
div,p{
color: fuchsia;
}
伪类选择器
<style>
a:link{ /* a标签访问前设置样式 */
color:red;
}
a:active{ /* a标签鼠标点下去显示样式 */
color: green;
}
a:visited{ /* a标签访问后显示样式 */
color: pink;
}
a:hover{ /* 鼠标悬浮到a标签时显示样式,所有标签可以使用hover */
color:purple;
}
div:hover{ /* 鼠标悬浮到div标签时显示样式 */
background-color: green;
}
input:focus{ /* input标签捕获光标时的样式显示 */
background-color: orange;
}
</style>
伪元素选择器
<style>
div:first-letter{ <!--将div标签中的文本的第一个字改变颜色和大小-->
color:red;
font-size: 40px;
}
</style>
<body>
<div>
一giao窝里giaogiao
</div>
</body>
<style>
div:before{ /*在每个div元素之前插入内容:?*/
content: '?';
color:red;
}
</style>
<body>
<div>
一giao窝里giaogiao
</div>
<style>
div:after{ /*在每个div元素之后插入内容:?*/
content: '?';
color:red;
}
</style>
<body>
<div>
一giao窝里giaogiao
</div>
通用选择器
*{color:red;}
选择器的优先级
在HTML文本中如果有不同的选择器选中了相同的标签,并赋予了不同的CSS样式,那应该按照那个CSS样式来进行渲染呢?当浏览器打开HTML文件的时候是从上至下读取的,如果是同一级的标签,写在后面的CSS样式会覆盖前面的CSS样式:
<style>
a{
color: yellow;
}
a{
color: pink;
}
a{
color: blue;
}
</style>
<body>
<a href=>点我</a> <!--最终为蓝色-->
</body>
而优先级又会根据样式的权重值来衡量,权重值越大优先级就越高,优先级越高对应选择器的样式就会被优先显示。在组合选择器中,各选择器的权重会相加在一起,但是权重不进位,也就是说组合了11个类选择器优先级也不会比一个id选择器的高;对于权重相同的选择器,谁写在后面就用谁的。
此外,还可以用!important
的方式强制让样式优先生效,但不推荐使用。
#p1{color: darkgreen!important;}