1:认识CSS 1.1：css简介，css全称是层叠样式表，Cascading style sheets 1.2：css的作用，主要是用于定义html内容在浏览器内的显示样式，如文字大小，颜色，字体加粗等 使用css样式的一个好处是通过定义某个样式，可以让不同的网页位置的字体有着统一的字体，字号或者颜色等 1.3：css代码语法 css样式由选择器和声明组成，而声明又由属性和值组成 h1 { color:red;font-size:14px;} 选择器 属性 值{属性和值构成声明} 选择器：指明网页中要应用样式规则的元素 声明：在英文大括号"{}"中的就是声明，属性和值之间用英文冒号":"分割。当有多条声明时，中间可以英文分号":"分隔 css注释代码 2：CSS基本知识（就近原则） 2.1：内联式css样式，直接写在现有的html标签中 2.2：嵌入式css样式，写在当前的文件中 2.3：外部式css样式，写在单独的一个文件中，使用link引入 css样式文件名以称以有意义的英文字母命名 rel="stylesheet" type="text/css"是固定的写法，一定要写到link标签内不可修改 语法格式(<link href="" rel="stylesheet" type="text/css">) <link>标签位置一般写在<head>标签之内 2.4：优先级 内联式>嵌入式>外部式
3：CSS选择器 3.1：什么是选择器 每一条css样式声明或者定义由两部分组成(选择器（样式）) 3.2：标签选择器 3.3：类选择器 《实际开发过程中使用类选择器最多》 类选择器名称(css样式代码;) 3.4：ID选择器 为标签设置id="id名称"，而不是class="类名称"; ID选择符的前面是#号，而不是英文圆点(.); 3.5：类和ID选择器的区别 相同点：可以应用于任何元素 不同点：(1)ID选择器只能在文档中使用一个，与类选择器不同，在一个HTML文档中，ID选择器只能使用一个，而且仅一次，而类选择器可以使用多次 (2)可以使用类选择器词列表方法为一个元素同时设置多个样式，我们可以为一个元素同时设置多个样式，但只可以用类选择器的方法实现，id选择器是不可以的，不能使用id词列表 ID选择器优先于类选择器 3.6：子选择器 还有一个比较有用的的选择器子选择器，即大于符号>，用来选择指定标签元素的第一代元素 3.7：包含(后代)选择器 包含选择器，即加入空格，用于选择指定标签元素下的后辈元素，如右侧代码编辑器中的代码。 3.8：通用选择器(了解即可) *{color:red;}
*{margin:0;padding:0}//去掉页面样式 3.9：伪类选(一般用在链接的标签上面) 伪类选择器：a:link正常连接的方式 a:hover:鼠标放上去的样式 a:active:选择链接时的样式 a:visited:已经访问过的链接的样
4 常见属性 4.1：颜色 color属性定义文本的颜色 color：green; color:#ff6600; color:#f60; color:rgb(255,255,255); color:rgba(255,255,255,1); 4.2：字体属性 font-size:字体大小 font-famliy:定义字体 font-weight:字体加粗 4.3：背景属性 背景颜色：background-color; 背景图片：background-image; 背景重复：background-repeat; 背景位置：background-position; 简写方式： 4.4：文本属性 text-align:横向排列 line-height:文本行高 (1):%基于字体大小的百分比行高 (2):数值来设置固定值 text-indent:首行缩进 letter-spacing:字符间距 属性值：normal默认，length设置具体的数值，可以设置负数，inherit继承 4.5：边框属性 4.5.1:边框风格border-style; (1):统一风格(简写风格)border-style; (2):单独定义某一方向的边框样式 border-bottom-style:下边框样式 border-top-style:上边框样式 border-left-style:左边框样式 border-right-style:右边框样式 (3):边框风格样式的属性值 none:无边框 solid:直线边框 dashed:虚线边框 dotted:点状边框 double:双线边框 groove:吐槽边框 ridge:垄状边框 inset inset边框 outset outset边框 inherit继承 依托border-color的属性值 4.5.2:边框颜色border-color; (1):统一风格(简写风格) border-color; (2):单独风格 border-top-color:上边边框颜色 border-bottom-color:下边边框颜色 border-left-color:左边边框颜色 border-right-color:右边边框颜色 (3):属性值 颜色值得名称：red,yellow; RGB:rgb(255,255,0,0.1) 十六进制：#ff0,#ffff00; (4):属性值的四种方式 一个值：border-color：(上,下,左,右) 两个值：border-color：(上,下)(左,右) 三个值：border-color：(上)(下,左)(右) 四个值：border-color：(上)(下)(左)(右)
5 元素分类--块级元素
在html中<div>、 <p>、<h1>、<form>、<ul> 和 <li>就是块级元素。设置display:block就是将元素显示为块级元素。如下代码就是将内联元素a转换为块状元素，从而使a元素具有块状元素特点。
a{display:block;}
块级元素特点：
每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行）
元素的高度、宽度、行高以及顶和底边距都可设置。
元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。
元素分类--内联元素
在html中，<span>、<a>、<label>、 <strong> 和<em>就是典型的内联元素（行内元素）（inline）元素。当然块状元素也可以通过代码display:inline将元素设置为内联元素。
内联元素特点：
和其他元素都在一行上；
元素的高度、宽度及顶部和底部边距不可设置；
元素的宽度就是它包含的文字或图片的宽度，不可改变。
元素分类--内联块状元素
内联块状元素（inline-block）就是同时具备内联元素、块状元素的特点，代码display:inline-block就是将元素设置为内联块状元素。(css2.1新增)，<img>、<input>标签就是这种内联块状标签。
inline-block 元素特点：和其他元素都在一行上；
元素的高度、宽度、行高以及顶和底边距都可设置
6 css的使用总结
水平居中的做法：
(1)当被设置元素为 块级元素 时用 text-align：center 就不起作用了，这时也分两种情况：定宽块状元素和不定宽块状元素。
定宽块状元素：块状元素的宽度width为固定值
满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的。
<body>
<div>我是定宽块状元素，哈哈，我要水平居中显示。</div>
</body>
css代码：
<div>tttttt<div>
<style>
div{
border:1px solid red;/*为了显示居中效果明显为 div 设置了边框*/
width:200px;/*定宽*/
margin:20px auto;/* margin-left 与 margin-right 设置为 auto */
}
</style>
(2) 不定宽的水平居中：
通过给父元素设置 float(float 可定义为left 和right 浮动后几个元素会出现在同行。有时候也可以用这个方法来实现显示在同一行中)，然后给父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left: -50% 来实现水平居中。