二锅头帮你整理CSS
什么是CSS？
中文名称：层叠样式表 。 英文全称：Cascading Style Sheets ，简称CSS。
CSS的作用：在网页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。
CSS的优势
1.内容与表现分离
2.减少网页代码量
3.有利于被搜索引擎收录
4.提高网页浏览速度
5.网页布局灵活
6.网页风格统一
CSS选择器
1.标签选择器：html中的所有标签都可以作为选择器
2.类（class）选择器：body内的所有元素都有class属性。
3.id选择器：body内的所有元素都有 id 属性。
类（class）选择器
定义：body标签中的所有标签都有class属性。 注：class名称可以重复使用。
使用：类（class）选择器使用标志符（句点）开头 后面写上类的名称。
id选择器
定义：body标签中的所有标签都有id属性。 注：一个页面中只能使用一个id名，id名必须是唯一。
使用：id选择器使用散列符号（#）开头，后面写上id的名称。
网页中引入CSS样式
内联（行内）样式：html中的所有标签都有style属性，在style属性中直接写入css样式。 示例：
内部样式表：将html代码和css样式做简单分离，在网页头部创建style标签，在其中写入css样式。
外部样式表：将css样式单独写入到一个 xxx.css外部文件中。 （1）使用link标签引入外部css文件。 （2）使用@import导入外部css文件
link标签引入外部样式文件
声明外部样式表：rel=“stylesheet”
引入的文件类型：type=“text/css”
引入的文件地址：href=”style.css“
样式优先级 行内（内联）样式 > 内部样式表 > 外部样式表
选择器优先级 id选择器 > 类（class）选择器 > 标签选择器
字体样式
| 字体类型 | font-family |
| 字体大小 | font-size |
| 字体风格 | font-style |
| 字体粗细 | font-weight |
| 字体属性 | font |
文本样式
color 设置文本颜色 red #362596 rgb(32,250,50)
text-align 设置元素水平对齐方式 left center right
text-indent 设置首行文本的缩进
line-height 设置文本的行高
text-decoration 设置文本的装饰 none:默认，标准文本 underline：定义文本下划线 overline：定义文本上划线 line-through：定义穿过文本的一条线
鼠标样式
| defalut | 默认光标 |
| pointer | 超链接指针 |
| wait | 等待状态 |
| help | 指示可用的帮助 |
| text | 指示文档 |
| crosshair | 鼠标呈现十字状 |
背景样式
背景颜色：background-color red #536256 rgb(30,250,13)
背景图片地址：background-image:url(图片路径) 图片绝对路径 图片相对路径
背景重复方式：background-repeat no-repeat 不重复 repeat-x 水平重复 repeat-y 垂直重复 repeat 默认重复
背景定位：background-position 像素：px 水平方向：left、center、right 垂直方向：top、center、bottom
CSS高级选择器
并集选择器 交集选择器 后代选择器 子元素选择器 属性选择器
并集选择器
多个选择器通过逗号连接而成 示例： div,p,span,.codeup,#helloid{
交集选择器
由两个选择器连接构成，选中二者范围的交集，两个选择器之间不能有空格 第一个必须是标签选择器，第二个必须是类选择器或者ID选择器 示例： div.codeup{
后代选择器
外层的选择器写在前面 内层的选择器写在后面 之间用空格分隔
标签嵌套时，内层的标签成为外层标签的后代
使用标签选择器、id选择器、类选择没有先后顺序
示例： div .codeup{
子元素选择器
通过 > 连接在一起而成 仅作用于子元素
示例： div>.codeup{ color:red; font-size:20px; }
属性选择器
选取带有指定属性的元素 选取带有指定属性和值的元素
示例： input[name]{ border:1px soild red; } input[type=”text”]{ border:1px soild red; } div[ class=“codeup”]{ color:red; }
边框样式
边框颜色：border-color
边框粗细：border-width
边框简写：border
盒子模型之内边距：padding
盒子模型之外边距：margin
css浮动
float 属性：left right none
clear 属性：none left right both
overflow 属性
| auto | 自适应，如果内容被修剪，则浏览器会显示滚动条来查看超出内容 |
| scroll | 内容会被修剪，但是浏览器会显示滚动条以便查看超出内容 |
| hidden | 内容会被修剪，并且超出的内容是不可见的 |
| visible | 默认值。内容不会被修剪，会呈现在盒子之外 |
verflow：visible：超出内容不会被修剪，会正常显示在容器外部
overflow：hidden：超出内容会被修剪，并且超出内容是不可见的，隐藏的
overflow：scroll：超出内容会被修剪，但是浏览器会显示滚动条以便查看超出内容
overflow：auto：自适应，如果内容被修剪，则浏览器会显示滚动条来查看超出内容