内容概要
- css选择器
css层叠样式表（Cascading Style Sheets）
css主要是用来调节 HTML 标签的各种样式
/*
我们现在的网页页面都是由HTML构成的，并且上面由很多相同的HTML标签，但是相同的HTML在不同的位置可能会由不同的样式 我们应该如何区分标签？
*/
我们需要注意的是标签的两大重要属性：
1.class属性
给标签分类，主要是用于批量查找！
2.id属性
精确查找标签,主要是用于点对点的查找！
'''
学习css的流程：
1.先学习如何查找标签
2.再学习如何调整样式
'''
让我们来看一下css的语法
1.css 语法结构
选择器 {
样式名：样式值1；
样式名2：样式值2
}
2.css 注释语法
/*注释内容*/
3.引入css的多种方式
1.在html内的head标签内部的style标签内部编写(推荐在学习的时候使用)
2.在head标签内部的link标签引入(最标准的方式)
3.标签内部通过style属性直接编写(不推荐)>>>因为强耦合了
/*我们的代码解耦合度越高越好*/
CSS选择器
css 基本选择器
1.标签选择器(直接根据标签名字查找标签)
div {
color:black;
}
2.类选择器(根据标签内的class属性来查找标签)
.a1 {
color:yellow;
}
3.id选择器(根据标签的id精准查找标签)
#b1 {
color:green;
}
4.通用组合选择器(直接选择页面中的所有标签)
* {
color:red;
}
CSS组合选择器
/*我们在刚刚总结了一下CSS的基本选择器，了解了CSS在选择标签时应该怎么去操作，那么接下来我们需要了解的是标签内部的选择到底是如何操作的，因为我们知道 在html中 块级标签是可以嵌套行内标签的*/
/*针对标签的上层下层以及嵌套由另外的说法*/
父标签>>>子标签
1 <p>ppp</p>
1 <p>ppp</p>
1 <div>div
2<div>divdiv
3<p>divdivp
4<span>divdivpspan</span>
</p>
</div>
2<p>divp</p>
2<span>divspan</span>
</div>
1<p>ppp</p>
1<span>spanspan</span>
我们可以通过看标签前面的数字来确认它们的层数关系！
/*前提！！！>>>>块级标签可以包含行内标签和块级标签，而块级标签只能包含块级标签！*/
我们想要对第三层或者第二层的标签进行css样式的添加就需要通过组合选择器来进行操作了，这样的话就可以保证精准的装饰任意的标签！
1.后代选择器(空格)
div span {
color:red;
}
将'所有'div标签下的所有'span'标签的颜色改为red
只要是div中包含了span 那么都会被css代码修饰
2.子元素选择器(>)：
div>span {
color:deeppink;
}
将div标签下'一层之内！'的span标签颜色改为deeppink
3.毗邻选择器(+)
div+span{
color:yellow;
}
将于div标签'紧跟其后'的span标签的颜色修改为yellow
4.兄弟(同级)选择器(~)
div~span {
color:green;
}
选择与所有div标签'同等级'的span标签颜色修改为green
选择器的分组与嵌套
'''我们变更一下html代码！'''
<div id="d1" class="c1">div</div>
<div id="d2" class="c2">div</div>
<div id="d3" class="c1 c3">div</div>
<p class="c1">p</p>
<span>span</span>
/*多个选择器合并查找*/
div,p,span {
color: blue;
}
相当于 div标签，p标签，span标签 同时选择，并将标签内容颜色修改为blue；
混合查找
#d1,.c1,span {
color:green;
}
相当于寻找 id为 d1 的标签， class属性为c1的 标签， span标签 颜色修改为darkgreen
div.c1 {
color: cadetblue;
}
查找class含有c1的div标签，颜色更改为cadetblue
div#d1 {
color:salmon;
}
将id为d1的div标签内容颜色修改为salmon颜色
<div id="d1" class="c1">div <p class="c2">777</p> </div>
.c1 p.c2 {
color: antiquewhite;
}
查找class属性为c1的标签内部class属性为c2的p标签
属性选择器
| [属性] | 选中含有指定属性的元素 |
|---|---|
| [属性=属性值] | 选中含有指定属性和指定属性值的元素 |
| [属性^=属性值] | 选中含有指定属性和指定属性值开头的元素 |
| [属性$=属性值] | 选中含有指定属性和指定属性值结尾的元素 |
| [属性*=属性值] | 选中指定属性名和含有指定属性值的元素 |
[userinfo] {
color:blue;
}
查找标签中含有userinfo属性名的标签，并将其内容颜色修改为blue
[userinfo="xiaomeimei"] {
color:deeppink;
}
查找标签中含有属性名userinfo且属性值等于"xiaomeimei"的标签，并将其颜色修改为deeppink
伪类选择器
'''
a标签补充说明： 针对没有点击过的网址，默认是蓝色的 点击过后的网址颜色会自动变色！
'''
a:link {color:#000000;} /* 未访问链接*/
a:visited {color:#00FF00;} /* 已访问链接 */
a:hover {color:#FF00FF;} /* 鼠标移动到链接上 */
a:active {color:#0000FF;} /* 鼠标点击时 */
注意： a:hover 必须在 a:link 和 a:visited 之后，需要严格按顺序才能看到效果。
注意： a:active 必须在 a:hover 之后。
a:hover {
color:blue;
}
在鼠标点击到链接上的时候颜色变为blue
input:focus {
background-color:yellow;
}
伪元素选择器
/*
p:first-letter {
font-size:22px;
color:yellow;
}
*/
p:before {
content:"喝喝喝";
color:blue;
}
css添加文本无法正常选中
p:after {
content:"呵呵"
color:red;
}
选择器优先级
1.选择器相同 导入方式不同
就近原则
2.选择器不同 导入方式相同
内联样式 > id选择器 > 类选择器 > 标签选择器
CSS样式调节
字体样式
font-size:14px 24px px是大小单位 字体大小
font-weight: lighter; 字体粗细
color:三种模式
/*color:red;*/
/*color:#ffffff*/
/*color:rgb(255,255,100)*/
rgba()最后一个参数还可以控制透明度 0~1 alpha
text-align:center; 文本居中
text-decoration:none; 主要用于a标签取消下划线
text-indent: 32px; 首行缩进
我们可以通过snipaste 截图软件来进行取色
/*背景属性*/
div {
width: 800px;
height: 800px;
/*background-color: red;*/
/*background-image: url("图片地址");*/
/*background-image: url("图片地址");*/
/*background-repeat: no-repeat;*/
/*background-repeat: repeat-x;*/
/*background-repeat: repeat-y;*/
/*background-position: center center;*/
background: url("图片地址") blue no-repeat center center;
}
/*当多个属性名有相同的前缀 那么可以简写一次性完成*/