一、CSS概述
CSS：层叠样式表。
CSS能够对HTML设计出的页面更加美化，能够对网页中元素位置的排版进行像素级精确控制, 实现美化页面的效果. 能够做到页面的样式和结构分离.
二 、CSS的语法规则
一个CSS的语句包含有两部分：选择器+应用的属性。
例如：
<style> p{ /*字体颜色*/ color: blueviolet; /*字体样式*/ font-family: 宋体; } </style>
在{ }中使用键值对的结构来表示CSS中的各种属性。
CSS代码通常是放到HTML文件的style标签中。
在CSS代码中注释样式：/* 注释 */
三、CSS的引入方式
1、内部样式表
通过style标签来写CSS样式，直接放到HTML代码的内部。
例如：
<div> <p>120uuj <style> p { color: pink; } </style> </div>
2、行内样式表
通过style来指定HTML中某个标签的样式。
例如：
<p style="font-family: 微软雅黑" style="color: chocolate">909</p>
3、外部样式
需要首先创建一个CSS文件，然后使用link标签来引入CSS。
<head> <meta charset="UTF-8"> <title>Test</title> <link rel="stylesheet" href="style.css"> </head> 在head标签中引入link标签，在CSS文件中可以指定样式： p{ color:red }
四、代码风格
1、紧凑风格
例如：p { color: red; font-size: 30px;}
这样写看起来比较紧凑，但是节省带宽，能提高代码的效率。
2、展开风格
例如：
p { color : red ; font-size : 30px ; }
这样写整体看起来美观，但是带宽增加了传输效率低，
注意：
- CSS代码不区分大小写，但是在开发过程中统一使用小写编写代码。
- 在CSS的代码中冒号后面要有空格 ，并且选择器和{之间也要有一个空格。
五、选择器
1、基础选择器
由单一选择器组成。
标签选择器
只针对某一标签来设计样式。
例如：
<style> p { color: aqua; font-family: 微软雅黑; font-size: 10px; } </style>
类选择器
类选择器也是要嵌套在style标签中，类选择以.开头来进行定义：
<style> .one { color: red } </style>
应用类选择器时，只要被让标签的class属性指向指定的类：
例如在div标签中应用one选择器
<div class="one"> <span>计算机</span> <span>电脑</span> <span>键盘</span> </div>
一个类选择器可以同时被多个标签调用。
id选择器
id选择器与类选择器的使用十分类似，但是 id选择器是以#开头的。
例如：
<style> #one { color: red } </style>
在某个p标签中利用id属性来指定one选择器：
<p id="one">
i love you
</p>
一个id选择器最多只能被一个标签调用。
通配符选择器
使用*来进行定义，选择了所有标签。
例如：
<style> * { color: darkblue; } </style>
当标签没有指定选择器时就默认使用通配符选择器中的样式。
2、复合选择器
多个选择器复合使用。
后代选择器
选择器1 选择器2 ……{
样式
}
注意：
- 选择器1和选择器2之间必须有空格。
- 选择器1是选择器2的父级，选择器2可以是选择器1的子级或者孙子级改变选择器2并不影响选择器1.
- 选择的步骤是先找到选择器1，然后再寻找选择器2。
- 选择器的类型可以是类选择器、id选择器和标签选择器。
例如将div标签中指定类选择器的设置为如下样式：
<style> div .two{ font-family: 微软雅黑; color: antiquewhite; } </style>
子选择器
选择器1>选择器2 ……{
样式
}
注意：
- 选择器2只能是选择器1的子级，不能是孙子级。
- 其余要求与后代选择器类似。
例如：
<style> div>span{ color: aquamarine; font-size: 20px; } </style>
并集选择器
选择器1，选择器2 ……{
样式
}
并集选择器可以同时选择多组标签。
例如：
<style> div>span,div a{ color: aquamarine; font-size: 20px; } </style>
伪选择器
链接伪类选择器
a:link 选择未被访问过的链接
a:visited 选择已经被访问过的链接
a:hover 选择鼠标指针悬停上的链接
a:active 选择活动链接 ( 鼠标按下了但是未弹起 )
例如：
<style> a:hover{ color: #990000; } a:visited{ font-family: 微软雅黑; font-size:15px; } </style>
伪类选择器
选取获取焦点的 input 表单元素。
例如：
<input type="text"> <style> input:focus{ color: #678123; } </style>
六、常用的元素属性
1、字体属性
字体家族：font-family
字体大小：font-size
字体粗细：font-weight
字体样式：font-style
2、文本属性
文本颜色
color属性值的写法：
- 预定义的颜色值：直接是颜色的英文单词，例如：red、pink等。
- 十六进制形式：#908980。
- RGB方式：rgb(190,90,99)。
文本对齐方式
控制文字水平方向的对齐：
使用text-align：center/left/right,可以实现居中对齐、左对齐和右对齐。
文本装饰
使用text-decoration
常用取值 :
- underline 下划线.
- none 啥都没有. 可以给 a 标签去掉下划线.
- overline 上划线.
- line-through 删除线
文本缩进
主要是用于段落的首行缩进，不会影响到其他行。
使用text-indent。
单位是px或者em，1个em就是缩进1个字符，1em=16px
行高
行高指的是上下文本之间的基线距离。
在HTML中通常会涉及的基准线有：顶线、中线、基线和底线。
行高=字体大小+行间距。
使用line-height来进行设置。
3、背景属性
背景颜色
设置背景颜色background-color，与字体color类似。
background-color属性值的写法：
- 英文单词。
- RGB。
- 十六进制数字。
- rgba。
- transparent来设置背景透明，表示应用了父元素背景。
背景图片
设置背景图片使用background-image，当设置完背景图片之后，默认是一个平铺的效果。
格式为：
background-image：url("图片路径")
设置背景图片效果
使用background-repeat：平铺方式
平铺方式有：
- repeat：平铺。
- no-repeat：不平铺。
- repeat-x:水平平铺。
- repeat-y：垂直平铺。
背景颜色与背景图片是可以同时存在的，并且背景图片会在背景颜色的上方。
背景图片位置
使用background-position：x，y；来修改图片的位置。
可以使用以下三种风格：
- 方位名词：top、left、right和bottom。
- 精确单位：坐标或者是百分比，以左上角为原点。
- 混合单位：同时包含方位名词和精确单位。
计算机中使用的坐标系是左手坐标系。
设置背景图片大小
使用background-size：x px,y px;来设置背景图片的大小.
也可以使用contain或者cover来让背景图片自适应元素大小。
4、圆角矩形
通过border-radius来设置边框带圆角的效果。
使用：border-radius：px；
七、元素的显示模式
1、块级元素
常见的块级元素有：h1~h6、p、div、ol、ul、li……
特点：
- 独占一行。
- 高度、宽度、内外边距和行高都是可控制的。
- 宽度默认和父级元素一样宽。
- 是一个容器，里面可以放置行内元素和块级元素。
2、行内元素
常见的行内元素有：a、span、img、strong、ins……
特点：
- 不独占一行, 一行可以显示多个。
- 设置高度, 宽度, 行高无效。
- 左右外边距有效(上下无效). 内边距有效。
- 默认宽度就是本身的内容。
- 行内元素只能容纳文本和其他行内元素, 不能放块级元素。
八、盒子模型
在盒子模型中每一个HTML的元素就相当于是一个矩形的盒子。
一个盒子模型由如下几部分组成：
- 边框：border。
- 内容：content。
- 内边距：padding。
- 外边距：margin。
注意在设置内外边距时会增大元素整体的大小，所以可以使用
box-sizing: border-box;
来挤压内容而不是撑大元素。
border边框
基础属性有：
- 粗细: border-width
- 样式: border-style, 默认没边框. solid 实线边框 dashed 虚线边框 dotted 点线边框
- 颜色: border-color
padding内边距
指的是内容和边框之间的距离。
默认内容是顶着边框来放置的， 用 padding 来控制这个距离
也可以给四个方向都加上边距：
- padding-top
- padding-bottom
- padding-left
- padding-right
margin外边距
指的是控制盒子和盒子之间的距离。
可以给四个方向都加上边距
- margin-top
- margin-bottom
- margin-left
- margin-right
九、弹性布局
弹性布局主要是安排页面上的元素的排列方式。
在上述介绍的属性中都只是针对元素本身来进行设置的，但是在元素与元素之间有时候还需要设置样式。
默认的网页布局是从上到下的，块级元素独占一行，而实际的网页中不仅仅需要从上到下，还需要从左到右。
那么通过flex布局就可以调整子元素的排列方式。
水平排列方式：just-content：设置主轴上的子元素排列方式.
垂直排列方式：align-items
十、综合实现典型的页面布局
要求：
代码实现：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Test</title> </head> <body> <style> *{ margin: 0; padding: 0; box-sizing: border-box; } </style> <style> .nav{ background-color: aquamarine; height: 100px; text-align:center; line-height: 40px; font-size:30px } </style> <style> .content{ height:500px; justify-content: center; display: flex; align-items: center; } </style> <style> .content .left,.content .right{ width: 20%; height:500px; background-color: pink; text-align: center; } </style> <style> .content .middle{ width: 60%; height:500px; background-color: red; text-align: center; } </style> <style> .footer{ height:200px; background-color: lightsteelblue; font-size: 30px; display: flex; text-align: center; line-height: 60px; justify-content: center; } </style> <div class="nav"> <span>导航区</span> </div> <div class="content"> <span class="left">左侧边栏</span> <span class="middle">内容区</span> <span class="right">右侧边栏</span> </div> <div> <span class="footer">页脚区</span> </div> </body> </html>
效果展示：
