css层叠样式表
1.作用：调整标签样式
2.语法结构：
选择器 {
属性名1:属性值1;
属性名2:属性值2;
}
3.注释语法
4.三种编写css的方式：
1.head中style标签内部直接编写
2.head中用link引入外部css文件(推荐)
3.直接在标签内部通过style属性编写(不推荐)
css基本选择器
1.标签选择器：直接编写标签名来查找所有该类型的标签
span {
color: red;
}
2.类选择器：通过标签的class值来查找标签
.p {
color: green;
}
3.id选择器：通过标签的id属性来精准查找标签(在一个html文件中id不能重复)
#p1 {
font-size: 20px;
}
4.通用选择器：查找所有的标签(全选)
* {
background-color: grey;
}
css组合选择器
预备知识：标签之间的关系
<p>我是第一个p</p>
<div>我是div
<p>我是div下面的p
<span>我是div下面的p下面的span</span>
</p>
<span>我是div下面的span</span>
</div>
<p>我是第二个p</p>
父子、兄弟、后代、毗邻
需求：查找div标签内所有的span(后代)
1.后代选择器：两个选择器之间空格隔开，查找前面选择器获取到的标签内部所有符合空格后面选择器要求的标签
#d1 span {
color: red;
}
需求：查找div标签内所有的儿子span
2.儿子选择器：两个选择器之间大于号隔开 查找前面的选择器获取到的标签内部第一层符合大于号后面的选择器要求的标签
#d1>span {
color: blue;
}
需求：查找div标签同级别下面紧挨着的第一个span标签(第一个弟弟)
3.毗邻选择器：两个选择器之间加号隔开 查找前面选择器获取到的标签相邻的且满足后面的选择器要求的标签
#d1+span {
color: yellow;
}
需求：查找div同级别的下面所有的span标签(所有的弟弟们)
4.弟弟选择器：两个选择器之间~间隔 查找第一个选择器同级别下面的所有符合第二个选择器的弟弟标签
#d1~span {
coloe: orange;
}
css属性选择器
所有的标签除了拥有自身默认的属性之外，还可以拥有自定义的任意属性
比如：默认属性：id class
自定义属性：x=1 y=2
1.查找属性名含有name的标签
[name] {
background-color: red;
}
2.查找属性名含有name且值是username的标签
[name='username'] {
background-color: red;
}
3.查找input标签并且属性名含有name且值是username的
input[name='username'] {
background-color: red;
}
css选择器之分组与嵌套
当多个选择器查找到的标签需要调整相同的样式 那么可以合并：
div,p,span {
color: red;
}
并且合并的选择器彼此不干扰也没有类型的限制
#d1,.c1,span {
background-color: red;
}
还可以在选择器的基础之上添加额外的选择器使得查找结果更精确
span.c1
div#d1
css伪类选择器
补充知识：a标签默认的颜色有蓝色和紫色
紫色：链接地址已经被点过了
蓝色：链接地址还未被点过
a:hover {
color: red;
}
hover：鼠标悬浮到元素之上样式改变，适用于所有富含文本的标签
css伪元素选择器
通过css代码来操作标签的文本内容
p:first-letter {
font-size: 40px;
color: red;
}
p:before {
content:"元素前添加";
color:red;
}
p:after {
content:"元素后添加";
color:blue;
}
伪元素在网页上是不可被选中的。
伪元素选择器可以解决标签浮动带来的负面影响，也可以用来做数据的防爬
css选择器优先级
1.选择器相同 引入位置不同：
就近原则
2.选择器不同的情况
行内 > id选择器 > 类选择器 > 标签选择器
3.强制修改选择器的优先级：!important 不建议使用
字体样式
width属性可以为元素设置宽度
height属性可以为元素设置高度
块级标签才能设置宽度，行内标签的宽度由内容决定
p {
font-size: 20px; 设置字体大小
font-weight: lighter: 设置字体粗细
font-family: "微软雅黑" 设置字体样式
}
p {
color:red; 直接单词设置颜色
color:rgb(); rgb设置颜色
color:#3e3e3e; 二进制数设置颜色
color:rgba(1,1,1,0.5) rgba设置颜色(a指透明度)
}
p {
text-align:center; 居中对齐
text-decoration: none; 文本装饰
text-indent: 32px; 首段空格
}
背景属性
background-color: red;
background-image: url('1.jpg');
background-repeat: no-repeat;
background-position: left top;
支持简写：
background:#336699 url('1.png') no-repeat left top;
边框属性
border-width 边框宽度
border-style 边框样式
border-color 边框颜色
边框样式：
none：无边框
dotted：点状虚线边框
dashed：矩形虚线边框
solid：实现边框
通常使用简写形式：
#i1 {
border: 2px solid red;
}
除了整体设置，还可以单独为某一个边框设置样式
#i1 {
border-top-style:dotted;
border-top-color: red;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:none;
}
圆角边框 border-radius
对一个正方形元素使用这个属性可以得到一个圆
display属性
| 值 | 意义 |
|---|
| display:"none" | HTML文档中元素存在，但是在浏览器中不显示。一般用于配合JavaScript代码使用。 |
| display:"block" | 默认占满整个页面宽度，如果设置了指定宽度，则会用margin填充剩下的部分。 |
| display:"inline" | 按行内元素显示，此时再设置元素的width、height、margin-top、margin-bottom和float属性都不会有什么影响。 |
| display:"inline-block" | 使元素同时具有行内元素和块级元素的特点。 |
display:"none"与visibility:hidden的区别：
visibility:hidden: 可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。
display:none: 可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。
