css简介
# 层叠样式表>>>:就是给HTML标签修改样式
语法结构
选择器 {
属性名1:属性值1;
属性名2:属性值2
}
注释语法
/*注释内容*/
引入方式
1.style内部直接编写css代码
平时学习、练习的时候推荐使用
2.link标签引入外部css文件
正式工作、实际生产环境推荐使用
3.标签内直接书写
一般情况下不推荐使用 容易造成荣誉现象
"""
单独开设的css文件内代码也是非常多的 可以借助于注释管理
/*导航条样式*/
/*侧边栏样式*/
"""
基本选择器(重要)
"""
css是用来调节标签样式的 那为什么需要学选择器呢?
因为同一个页面上有很多相似的标签 并且这些标签在不同的位置有不同的样式 所以为了能够区分 我们肯定先需要学习如何查找指定的标签
"""
1.标签选择器>>>:通过标签名直接查找
/*查找所有的div标签*/
div {
color: red;
}
2.类选择器(关键符号为句点符.)>>>:通过class值查找标签
/*查找所有含有c1样式类的标签*/
.c1 {
color: red;
}
3.id选择器(关键符号为警号#)>>>:通过id值查找标签
/*查找id为d1的标签*/
#d1 {
color: orange;
}
4.通用选择器(了解)
/*body内所有的标签*/
* {
color: darkgray;
}
组合选择器(重点)
"""
为了区分嵌套标签之间的关系 我们发明了一种称呼
<div>
<p>
<span></span>
</p>
</div>
span是p的儿子 是div的孙子也可以说是div的后代
p是div的儿子也是div后代 是span的父亲
div是p的父亲是span的爷爷 也可以说是他们的祖先
"""
1.后代选择器(特征为空格)
/*查找div内部所有的后代span*/
div span {
color: red;
}
2.儿子选择器(特征>)
/*查找div内部所有的儿子span*/
div > span {
color: greenyellow;
}
3.毗邻选择器(特征为+)
/*查找同级别下面紧挨着的第一个span(不能有其他标签间隔)*/
div + span {
color: pink;
}
4.弟弟选择器(特征为~)
/*查找同级别下面所有的span(不需要紧挨着)*/
div ~ span {
color: deeppink;
}
属性选择器
# 标签可以有默认的属性也可以自定义属性
<p id="d1" class="c1" name="jason" pwd="123">123</p>
[name] { /*查找含有name属性名的标签*/
color: red;
}
[name='jason'] { /*查找含有name属性名并且值为jason的*/
color: red;
}
p[name='jason'] { /*查找含有name属性名并且值为jason的p*/
color: red;
}
分组与嵌套
# 多个相同选择器并列使用
div,span,p { /*查找div或者span或者p*/
color: red;
}
# 多个不同选择器并列使用
div,#d1,.c1 { /*标签查找div id查找d1 类查找c1*/
color: red;
}
# 不并列同样可以使用组合选择器
.c1 p { /*查找class为c1的后代p标签*/
color: red;
}
# 直接筛选
div#d1 { /*查找id为d1的div标签*/
color: red;
}
div.c1 { /查找class为c1的div标签/
color: red;
}
"""
练习题
#d1>div>.c1>span.c2
查找id为d1的标签内部的儿子div
并且在儿子div内部查找class为c1的儿子标签
并且在该儿子内部查找class为c2的儿子span
"""
伪类选择器
/*鼠标悬浮在上面*/
a:hover { # 重点掌握 很多网址都在用!!!
color: orange;
}
"""a标签默认的颜色会变化 第一次是蓝色 后面是紫色"""
input:focus {
background-color: red;
}
"""我们将input框被用户点击即将录入数据的过程看成是focus状态(聚焦状态)"""
