CSS：(Cascading Style Sheets) 层叠样式表，多个样式层层叠加
作用：修饰HTML页面，更丰富地展示超文本信息(文本内容，图片外形，版面布局)
HTML属性单独使用有一定局限性，配合CSS样式使用可以展示更丰富效果
每个HTML标签都有个style属性，用于设置css样式
CSS代码规范
- style标签要放于head标签之中
- 在style标签内容体中写css样式代码
选择器 指定CSS样式作用域什么HTML标签
格式：选择器名称{属性名1:属性值1;属性名2:属性值2;}
- 属性名与属性值用冒号隔开，分号结尾
- 当属性有多个值，用 空格 隔开
<style>
span{
font-size:100px;
color:red;
border:5px red solid; /*多个值*/
}
</style>
选择器
元素选择器 HTML标签可称为HTML元素，元素选择器作用于对应相同样式，多个同名标签
可作用于页面内所有span标签
<style>
span{
font-size:100px;
}
</style>
类选择器 每个HTML标签都有class属性，属性值为类名，以类名作为选择器名，作用于对应相同类名的HTML标签
可用于相同标签需要使用不同样式，对于如下标签，要设置span和div标签内容体为红色，给标签的属性定义class
<body>
<span class="redC">red</span>
<div class="redC">red</div>
</body>
可设置
<style>
.redC{ /*点号表示类，不可少*/
color:red;
}
</style>
ID选择器 每个HTML标签都有一个id属性，其值在当前页面内唯一，id属性值为选择器名称，作用于设置该id值的HTML标签（单个），注意id不可重复
<body>
<span id="s1">black</span>
</body>
可设置
<style>
#s1{ /*＃表示id，不可省*/
color:black;
}
</style>
注：代码后段的内容会更新前段的设置
选择器的层级关系
标签之间具有层级关系，如body为html的子标签
可以对基本组合器进行组合，表现层级关系，更具有针对性地把样式作用于某些标签
使用情况：当需要作用的标签为某标签的子标签，为了不影响其他无需更改的标签
只改变div下的font标签内容体
<body>
<div>
<font>get red</font>
</div>
<font>get black</font>
</body>
可设置
<style>
div font{ /*表示div下的font标签*/
color: red;
}
</style>
嵌套选择器
有四种为选择器内部设置选择器的方法
- p{ } ：为所有p元素指定样式
- .st{ } ：为所有 class=“st” 的元素指定样式
- .st p{ } ：为所有 class=“st” 内的 p元素指定样式
- p .st{ } ：为所有 class=“st” 的p元素指定样式
注：区分后两种，是否是元素在选择器内，或是选择器为其的元素
CSS样式
边框属性 html默认所有标签都有边框，默认不可见
属性：
- border样式
- width宽度
- height高度
- background背景颜色
样式border可设置线条宽度，样式，颜色
样式有：实线solid，双线double，无边none
<style>
font{
border: solid 1px red;
width: 100px;
height: 100px;
background: green;
}
</style>
对于颜色设置，可以使用英文单词，也可使用颜色代码，颜色代码可对展示颜色进行微调
代码格式为#和六位十六进制数，每两位表示红R，绿G，蓝B的颜色深度
如#ff1100为红色，#ff0011ff为蓝色，设置不同的值可以调整出更丰富的颜色
布局
浮动 float，通常默认排版格式，用于将页面元素按一定顺序排列
注：设置浮动后元素会按照设置顺序一一排列，如按顺序挤到右侧
而浮动会使元素脱离当前页面，即原有内容可能被遮挡，所以页面需要重新调整
属性值可设置 向左left，向右right，默认不浮动none
<style>
font{
border: solid 1px red;
width: 100px;
height: 100px;
background: green;
float:left; /*浮动到左侧*/
}
</style>
转换 HTML中的标签一般分为 块级元素 和 行内元素
块级元素：以区块方式出现，每个标签独占一行或多行，自动换行
如：标题h1，段落p，块div，列表ul，ol
行内元素：根据内容的多少占用行内空间，不会自动换行
如：块span，超链接a，图片img，列表项目li
标签的display属性可以试标签在块级和行内间呼唤
属性值：块级元素block，行内元素inline，隐藏不显示none
<style>
span{
display: block;
}
div{
display: inline;
}
a{
display: none;
}
</style>
字体样式 可设置字体大小font-size和颜色color
<style>
span{
font-size:100px;
color:red;
}
</style>
css优先级，当样式类型冲突，只显示权重最高的样式
CSS盒子模型
所有HTML元素都可看成一个四边形，可看作一个盒子
设置盒子的边框border，内边距padding，外边距margin样式的方式，称为盒子模型，都为style的属性
内边距：元素内容体与盒子上下左右的距离
外边距：元素之间上下左右的距离
可分别设置上下左右：xxx-top，xxx-bottom，xxx-left，xxx-right
也可直接设置xxx
可设置边框粗细，样式和颜色（同CSS样式的边框属性）
<style>
span{
border-top: 1px solid red;
paadding-bottom: 2px solid green;
}
div{
border: 1px solid blue;
margin: 2px solid yellow;
}
</style>
快速设置盒子模型属性：
- padding: 10px 25px 25px 10px 分别为上右下左
- padding: 10px 25px 10px 分别为上，左右，下
- padding: 10px 25px 分别为上下，左右
- padding: 10px 上下左右均为
CSS与HTML的结合方式
内部样式
行内样式 通过标签的style属性来设置元素样式
<body>
<font style="fontsize: 2px; color: red; ">111</font>
</body>
可具有针对性地对某个标签设置样式
style标签 在head内设置style标签，可同时设置多个标签
<style>
font{
font-size:2px;
color:red;
}
</style>
外部样式
当不同的HTML文件需要使用相同的样式时，避免多次写重复代码，可使用外部样式
需要建立css文件，在文件中写入需要的样式
span{
font-size:2px;
color:red;
}
再在HTML中导入CSS
在HTML中的head标签内添加链入式 link 标签，属性：
- 文件路径href
- 关系rel=“stylesheet”，与当前html文件的关系，此处作为样式表
- 类型type=“text/css”，导入文件类型
<head>
<link rel="stylesheet" type="text/css" href="1.css">
</head>
即可得到对应效果
2069
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
