一、引入CSS样式与 CSS选择器
1.css入门：
（1）什么CSS？
1）CSS 指层叠样式表 (Cascading Style Sheets)；
2）样式定义如何显示 HTML 元素；
3）外部样式表可以极大提高工作效率；
4）外部样式表通常存储在 CSS 文件中；
（2）为什么学习CSS？
1）HTML 虽然可以在一定程度上修饰页面，但是页面的整体还是不够美观。
2）HTML 进行网页的书写重复的代码比较多，后期的维护性不好。
2.引入CSS样式：
（1）行内式（不推荐）：在标签内部直接使用；
style=“key:value;”style="font-size:像素;color: 颜色;"；
（2）内嵌式：使用style标签，style标签写建议写到head里面，因为这个中的内容需要展现到用户面前的。
（3）链接式：rel:当前的文档和引入的文档的关系；href:是指引入文档的关系。
语法：<link rel="stylesheet" href="css路径"；
3.CSS选择器：
（1）标签选择器：
p{
color: red;
}
（2）ID选择器：
1）ID命名规则：
id:(唯一性)；可以是数字、字母、下划线、中划线（-），不能用数字开头。
2）id 选择器以 "#" 来定义；
#ID名{
font-size: 30px;
color: yellowgreen;
}
（3）Class选择器：
.类名{
font-weight: bold;
color: yellow;
}
（4）三种选择器的优先级：
id 选择器>class 选择器>标签选择器；
（5）其他选择器：
1）后代选择器（父选择器 后代选择器）：
匹配父选择器下的所有后代。
2）子选择器（父选择器>直系子标签）：
匹配父选择器下的直接子元素。
3）伪类选择器：
二、CSS中常用的属性
1.字体（font）：
1）颜色：color：gray；
2）大小：font-size；
3）加粗：font-weight：bold；
4）风格：font-family：样式；
5）倾斜：font-style：italic;
2.文本（text）:
1）去除下划线：text-decoration：underline；
2）展示下划线:text-decoration：none；
3）文本居中：text-align：center；
4）行高：line-height；
3.border边框：
可以使用border统一设置
1）border: 1px solid red；
2）border-right: 5px dotted blue；
4.背景：
1）背景图片：background:url(图片位置)repeat-x；
2）背景图片大小：background-position：center；
5.行元素和块元素：
（1）.行元素（span，font，img，a）；
（2）块元素（div，h1-h6，ul，p等）；
（3）其他样式：超出隐藏：overflow：hidden；
三、CSS中的定位与框模型
1.CSS中的定位：
（1）绝对定位：
absolute :定位离开之后释放的之前的位置，基于外层父级标签来说。
（2）相对定位：
relative: 定位离开之后之前的位置没有释放 基于之前的位置来说。
（3）固定定位：
fixed ：始终是基于浏览器的左上角定位 。
（4）默认定位：
static ：初始的定位的操作。
2.框模型（盒模型）：
盒子模型示意图：
（1）内边距（padding）：
padding 属性定义元素边框与元素内容之间的空白区域。
1）padding 属性接受长度值或百分比值，但不允许使用负值。
2）设置内边距属性：
（2）外边距（margin）：
围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白”。
1）margin 属性接受任何长度单位，可以设置为 auto，可以是像素、英寸、毫米或 em。
2）设置外边距属性：
网友评论