版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_37597439/article/details/82938070
CSS
CSS指的是层叠样式表
样式定义如何显示HTML元素
样式通常存储在样式表中
内联方式
样式定义在单个的HTML元素中
内部样式表
样式定义在HTML页的头元素中
外部样式表
样式定义在一个外部的CSS文件中
由HTML页面引用样式表文件
规则特性：
继承性：
父元素的CSS的声明可以被子元素继承，如字体、颜色等
层叠性：
同一元素若存在多个CSS规则，对于不冲突的声明可以叠加
优先级：
同一个元素若存在多个CSS规则，对于冲突的声明以优先级高的为准
语法规范
由多个样式规则组成
每个样式有两个部分
选择器和样式声明
如：
h1 {color:red; font-size:14px
}
选择器
元素选择器
通过元素名来选择CSS作用的目标
如果页面中有多个相同元素需要同样效果，建议使用元素选择器
类选择器
类选择器允许以一种独立于文档元素的方式来指定样式
语法为：className {color : red;}
所有能够附带class属性的元素都可以使用此样式声明
将元素的class属性的值设置为样式类名
如果页面中有多个不同元素需要重用相同的效果，建议使用类选择器。
id选择器
id选择器以一种独立于文档元素的方式来指定样式
他仅仅作用于id属性的值
语法为：#id{}
选择器组：
写出一组选择器，选中每个选择器对应的目标的并集
派生选择器
派生选择器用来选择子元素：
后代选择器
选择某元素所有后代（子孙）元素
子元素选择器
选择某元素的所有子元素
伪类选择器
伪类常用于设置同一个元素下在不同状态下的样式
常用伪类：
link：向未被访问的超链接添加样式
visited：向已被访问的超链接添加样式
active：向被激活的元素添加样式
hover：当鼠标悬停至元素上方时，向该元素添加样式
focus：当元素获取焦点时，向该元素添加样式
声明
border：
属性：用来设置元素的边框
样式单位：
%：百分比
in：英寸
cm：厘米
mm：毫米
pt：磅
px：像素
em：1em相当于当前的字体尺寸，2em等于当前字体尺寸的两倍
四边设置：
border:width的值 style值 color值
单边设置：
border-left:width style值 color值
border-right:width style值 color值
border-top:width style值 color值
border-bottom:width style值 color值
overflow：当前内容溢出元素框如何处理
块元素一般默认宽度是100%
高度会自适应，内容越多，越高
当给它固定高度时，可能会导致内容溢出
visible：继续显示（默认）
hidden：隐藏
scroll：加滚动条（溢出不溢出都加）
auto：加滚动条（溢出了才加）
box：框模型定义了元素框处理元素内容，内边距，边框和外边框的方式
背景：
background-color 属性用于为元素设置背景色，该属性接收任何合法的颜色值
body{
background-color: #ccc;
}
bankground-image属性用于设置背景图片
默认值是none，表示背景上没有放置任何图像
如果需要设置一个背景图像，需要用起始字母url附带一个图像URL值
可以是相对URL或者绝对URL
body {
background-image:（'.../image/backround.png'）
}
background-positio 改背景在元素中的位置
X% Y% 第一个水平，第二个垂直
左上角是0% 0% 右下角是100% 100%
X Y
第一个是水平位置。第二个是垂直位置
左上角是0 0
left
center
right
top
bottom
默认情况，背景图会随页面滚动而滚动
可以通过background-attachment属性来改变此特征
默认值是scroll：默认情况下，背景会随文档滚动
可取值是fixed：背景图像固定，并不随页面其余部分滚动，常用于实现成为水印的图像
baody{
background-attachment:fixed;
}
文本化格式：
指定字体：
font-family: value1, value2;
字体大小：
font-size：value;
字体加粗：
font-weight: normal/bold;
body{
font-family: '隶书' '楷书' ；
}
h1{
font-size: 40px;
text-align: center;
}
选择器的优先级：
选择器是有优先级的，可以通过权重来计算其优先级
ID选择器：100
类选择器：10
元素选择器：1
.content div : 10+1
.data: 10
.content .data : 10+10