CSS知识保姆级总结

前言：以前一直以为前端最难的是JS,学完JS之后才发现，CSS才是最繁琐的，已经很多东西都记不清了，所有觉得很有必要复习一下啦。本人水平有限，写的不一定全面，有不对的地方还希望各位大牛不吝指教，废话不多说，进入正题。

CSS样式规范

1.选择器是用于指定 CSS 样式的 HTML 标签，花括号内是对该对象设置的具体样式 

2.属性和属性值以“键值对”的形式出现

3.属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等

4.属性和属性值之间用英文“:”分开

5.多个“键值对”之间用英文“;”进行区分

基础现择器比较简单，就做个简单的总结！

1.基础选择器总结

2.css字体属性:

1.字体大小

font-size

 p { font-size: 20px; }

2.字体粗细

font-weight

 p { font-weight: bold; }

 3.字体样式

font-style

p { font-style: normal; }

 字体总结：

3. css文本属性：

1.文本颜色

color 属性用于定义文本的颜色

 div { color: red; }

 开发中最常用的是十六进制

2.文本对齐

text-align 属性用于设置元素内文本内容的水平对齐方式

div { text-align: center; }

 3.修饰文本

text-decoration

div {
     text-decoration :underline
     }

重点记住如何添加下划线 ? 如何删除下划线 ?

  <a href=""  style="text-decoration: none;">删除下划线</a>
    <p style="text-decoration: underline;">添加下划线</p>

 4.文本缩进

text-indent

 div { text-indent：2em； }

em 是一个相对单位，就是当前元素（font-size) 1 个文字的大小, 如果当前元素没有设置大小，则会按照父元素的 1 个文字大小。

5.行间距

line-height 属性用于设置行间的距离（行高）

 p { line-height: 26px; }

实际应用中想要文本在盒子里垂直对齐，最常用的就是行高等于高 line-height = height

4.css样式表

1.行内样式表（行内式）

行内样式表（内联样式表）是在元素标签内部的 style 属性中设定 CSS 样式。适合于修改简单样式.

  <div style="color: red; font-size: 12px;">青春不常在，抓紧谈恋爱</div>

2.内部样式表（嵌入式）

内部样式表（内嵌样式表）是写到html页面内

 m,\部. 是将所有的 CSS 代码抽取出来，单独放到一个 <style> 标签中

 <style> div { color: red; font-size: 12px; } </style>

3.外部样式表（链接式）

引入外部样式表分为两步：

1.新建一个后缀名为 .css 的样式文件，把所有 CSS 代码都放入此文件中。

2.在 HTML 页面中，使用<link> 标签引入这个文件。例 ：<link rel="stylesheet" href="css文件路径">

css引入方式总结

 5.css的复合选择器

1.后代选择器 (重要）

语法 ：

元素一  元素二  {样式声明}

ul li {样式声明}   选择ul里的所有li元素标签

语法说明

（1）元素1 和 元素2 中间用空格隔开

（2）元素1 是父级，元素2 是子级，最终选择的是元素2

（3）元素2 可以是儿子，也可以是孙子等，只要是元素1 的后代即可

（4）元素1 和 元素2 可以是任意基础选择器

2.子代选择器

语法：

元素一  > 元素二  {样式声明}

div > p {样式声明}  选择div里最近一级的p标签

语法说明：

（1）元素1 和 元素2 中间用 大于号 隔开

（2）元素1 是父级，元素2 是