- 冗余代码多，代码量大
- 不利于维护和修改
- 优先级相对来说较高，个别特殊的效果可以使用，但是不要滥用
在<head>标签里面通过<style>标签来写
在<head>标签里面通过<link>标签把样式表给链接过来
1、清除页面中元素默认自带的margin值和padding值
` * `是通配符选择器，代表选中页面中所有的元素，下面代码的意思就是，
把页面中所有元素默认自带的margin值和padding值都归为0.
2、清除列表前面默认的样式
3、清除a标签下划线
color属性: 设置文字颜色（可以继承的）
① 可以直接设置颜色的名字（开发中很少使用，因为不精确）
- red
- green
- yellow
- pink
- blue
- grey
- purple
- orange
- lightblue
- lightgreen
- greenyellow
- yellowgreen
- .........
② 设置为三原色 红r 绿g 蓝b
-
- 所有颜色都是由这三种颜色调制出来的
- 每一个颜色的值都是 0-255之间
- rgb(30,120,200)
- 颜色还可以设置不透明度 ,可以使用 rgba(20,111,111,.7)
③ 颜色还可以设置为十六进制（不能设置透明度）
-
- #加上16进制的颜色值 6位
- #112233--> 11代表red的十六进制值 22代表green颜色的十六进制值 33代表blue颜色十六进制值
- 十六进制颜色提供简写：当1,2位一样并且3,4位一样并且5,6一样的时候 可以每一位简写一个#112233-->#123 #aabb11-->#ab1 #000000-->#000 #111222-->#111222
- a标签比较特殊，如果a标签没有href属性，a标签没有默认样式，那么继承颜色生效
- 但是如果a标签拥有href属性，a标签链接的自带样色会盖过继承
- 所以在开发中给a标签设置颜色，需要直接对a标签进行设置
- 常见中文字体："Microsoft YaHei"、"SimHei"、"SimSun"
- 但是我们设置的字体用户可能没有，我们需要设置备用字体在font-famliy后书写多个字体，使用逗号隔开，浏览器会依次检测支持为止，否则将执行默认字体
- 如果是中文字体，或者是英文字体由多个单词组成需要加单引号或者双引号
- 常用的单位是px、em、rem
- 可以设置小数（低版本ie不支持）
- 字号最好不要设置为奇数
- 浏览器都有自己的默认字号大小和最小字号，谷歌浏览器默认字号大小是16px，谷歌浏览器支持的最小字号多数是12px如果设置12以下，字体不支持，但是如果设置字号为0 那么文字高度为0，消失！
- normal：正常多数元素的默认值对于默认倾斜或斜体的元素 i em 可以调整成正常非倾斜样式
- italic 让元素呈现斜体 一般指的是一个字体在字体设计的过程中，会对一个文字设计 正常体 斜体 粗体 等状态而italic只是选择让使用斜体显示
用来定义字体的粗细 其实目前浏览器只支持3个级别 细 正常 粗
- normal：正常粗细 可以将默认加粗的字体进行改变为正常 比如 b strong
- bold：加粗
- 100-900 整除100的整数：因为浏览器只支持 细 粗 正常3个 所以100-300 是细，400-500 正常，600-900 加粗
- 单位是px 缩进的像素
- em单位 em是一个相对单位，1em=当前文字的字号大小 如果缩进两个文字 那么2em
- 只针对块级元素生效
- 规定行内的内容如何相对于它的块级父元素水平方向对齐
- 并不是控制元素自己的对齐，只是控制它里边的行内容水平方向对齐
- left：默认 左对齐
- center：居中
- right：右对齐
- 背景颜色设置：background-color:颜色值（和color的颜色一致 十六进制 rgba 颜色单词）
虽然不继承，但是延伸到后代元素，因为后代元素属于这个元素的下划线范围
- none：取消下划线
- underline:下划线
- overline:上划线
- line-through：删除线
可以按顺序设置如下属性：
- border-width
- border-style
- border-color
两个块级元素之间会有缝隙（原因回车造成的）
不仅仅两个块元素在一行，两张图片在一行都会存在这个问题
解决的办法：
- 在结构中消除换行符
- 给他们的父级设置font-size:0;如果里面的子元素需要设置文字大小，再单独设置即可。
- 浮动也可以解决（后面学）
- overflow属性定义一个内容太大无法适应容器的时候应该怎么做
- 设置给被超出的元素
-
- visible：默认，内容不会被修剪，而是显示在元素的框外
- hidden:超出内容被修剪，修剪掉的内容不可见，并且没有滚动条
- scroll：超出内容被修剪，浏览器显示滚动条方便查看被修剪的内容
- auto：浏览器定夺，如果内容超出就生成滚动掉，否则不生成
- overflow：auto和scroll的区别：
-
- auto:是自动生成滚动条，不超出不生成 超出才生成
- scroll：无论是否超出都会生成滚动条
- overflow-x：overflow-y：只控制x和y的超出情况
控制元素显示或者隐藏
- hidden:控制元素隐藏
- 保留原来的位置，其他元素的布局没有发生改变
- 相当于此元素变透明
- visibility属性是继承的，里边的子元素也全部都继承属性，并且隐藏了
- 如果给子元素设置visible覆盖，那么子元素可以进行显示
- visible：让visibility：hidden隐藏的元素显示