CSS学习
CSS
全称Cascading Style Sheets
一种样式表语言，为html标签修饰定义外观，分工不同
CSS与HTML关系
html是网页的内容
css是网页的样式（结构）
行内样式表
只能对所在标签进行修饰，优先级最高，相对用的少
微博
内嵌样式表
平常练习用的多，写在style标签内
cxk
通配选择器
匹配所有的标签，优先级最低
*{
font-size: 20px;
}id选择器
蔡徐坤
选择器优先级
匹配标签越多，优先级越低，重叠选中标签时，使用优先级高的样式
但低优先级与高优先级没有重叠的样式，也会添加低优先级的样式
由高到低：行内样式表->id选择器->类选择器->标签选择器->通配选择器
后代选择器
对某个父标签的下级标签修饰
如列表
- 列表项1
- 列表项2
- 列表项3
- 列表项4
文本
color：字体颜色
可使用十六进制颜色代码，如#ff7f50
也可使用颜色所表示的英文字母，如red
color: #ff7f50;
font-size：字体大小
需要在设置的大小后加上像素单位px，如20px
px：像素单位 css中尺寸需要添加单位
font-size: 20px;
font-family：字体
需使用字体库中拥有的字体，如font-family: 楷体;
text-align：文本对齐
text-align: center;
文字水平对齐
text-decoration:line-through
定义穿过文本下的一条线，即给文本添加删除线
text-decoration:underline
定义文本下的一条线，即添加下划线
text-decoration:none：定义标准的文本
font-style: italic;斜体文本
font-weight:字体粗细
font-weight: 700;
line-height:设置行高
line-height: 50px;
letter-spacing可以指定字符间距
letter-spacing: 20px;
text-indent用来设置首行缩进
text-indent: 2em;
em：当前文本中一个字符的大小
背景
background-color背景颜色
与为字体添加颜色相同
使用时 background-color: aquamarine;
background-image背景图片
background-image: url(img/bg.jpg);
background-repeat背景重复
background-repeat: no-repeat;
设置背景不重复
background-size背景尺寸
background-size:400px 500px;
先宽，后高
background- position 背景位置
background-position: right top;
背景图片位置，先设置水平，后垂直，上述代码表示背景在右上角
CSS列表
属性可以放置、改变列表项标志，或者将图像作为列表项标志 。
list-style-image 将图象设置为列表项标志。
list-style-image: url();
list-style-position 设置列表中列表项标志的位置。
list-style-position: inside;
图标位置，在列表里(inside)还是列表外(outside)
list-style-type 设置列表项标志的类型。
list-style-type: none;
list-style 简写属性。
list-style: none url() inside;
CSS伪类
专门用来表示标签的一种的特殊的状态，当我们需要为处在这些特殊状态的标签设置样式时，就可以使用伪类 。
伪类的语法：
:hover伪类表示鼠标移入的状态
a{
color: cadetblue;
}
a:hover{/* 鼠标移进去显示 */
color: crimson;
}:active表示的是被点击的状态
a:active{
color: coral;
}
/*一般给按钮设置 点击后显示*/:focus向拥有键盘输入焦点的标签添加样式
/* 当拥有输入功能的标签 获得鼠标焦点时 自动切换到此样式表 */
input:focus{
background-color: aqua;
}透明
opacity:0-1
0完全透明，但图片还存在 1不透明
img{
opacity: 0.5;
}display: none;
使内容在网页上消失
块级标签
无论内容多少都会独占一行
可以设置宽高
主要用来进行网页布局
例如：p，h1...h6等标签
div标签
块级标签，没有任何附加样式，可以放置任何标签，设置什么样式就变成什么样式
div标签是一个纯净版的块级标签
行级标签
只占内容大小，不会占一行，设置宽高也无效
例如 a，b，s，i 等标签
主要用来对网页的文字进行修饰
span标签
一个纯净版的行级标签，对网页的文字进行选中，修饰
行级块标签
不占一行，又可以设置宽高。例如：img input
因此常用标签 div span a 表格 表单 列表
盒子模型
每一个标签都像一个盒子，网页布局其本质就是摆放盒子
每一个盒子又分成4个区域
内容区：放内容的区域
通过width和height两个属性可以设置内容区的大小，而不是整个盒子的大小。
内边距：内容区到边框的距离
使用padding属性来设置标签的内边距。
padding-top: 10px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 10px;
/* 四个方向都相同时 */
padding: 10px;
/* 上 右 下 左 */
padding: 5px 10px 15px 20px;
/* 先上下 后左右 */
padding: 10px 20px;边框：标签的最外层
使用border属性来设置盒子的边框。
border-top-width: 2px;
/*边框宽度*/
border-color: red;
/*边框颜色*/
border-top-style: solid;
/*边框样式dotted （点线） dashed （虚线） solid （实线） double （双线）groove （槽线）*/
/* border-top: 2px red solid; */
border: 2px red solid;
/* 圆角框 */
border-radius: 10px;
/*四个角*/
border-top-right-radius: 10px;
/*右上角*/
border-top-left-radius: 10px;
/*左上角*/外边距：一个标签距离另一个标签之间的距离
使用margin属性可以设置外边距。
margin-top/right/bottom/left。
margin的值可以为负值。
margin的值还可以auto，设置外边距为最大值，当将左右外边距设置为auto时，浏览器会将左右外边距设置为相等.
只设置左外边距或右外边距，外边距会变为最大值，当左右都为auto时，标签就会居中
垂直设置为auto时值为0，所以水平居中也可以简写为margin:0 auto
标签大小 = 内容区大小+内边距大小+边框
文档流
标签在网页二维平面内默认的排放方式
网页布局
本质就是打破默认的文档流规则
浮动
会使标签脱离原来的文档流（二维平面），悬浮起来
float：left
浮动后会产生一个问题：浮动后的标签，不会占用原来文档流的位置，下面的标签就会上移，跑到浮动标签的下面，影响后面的网页布局
清除浮动
定位
使用position属性
相对定位
position: relative;
开启相对定位，只开启了相对定位，但未设置偏移，标签不会发生变化
left: 100px;
相对定位是以自己本身位置为参照物定位的，不会让标签脱离文档流
绝对定位
position: absolute;
开启绝对定位，立即脱离原来的文档流
left right top bottom四个属性来设置标签的偏移量
left: 100px;
移动时参照物：
离他最近的，开启了定位的父级标签，如果所有的父级标签都没有开启定位，那么它以浏览器的边框为参照物
一般情况下，开启一个标签的绝对定位，都会开启父级标签的相对定位