CSS(概念&元素 &选择器&框模型&背景&渐变 1.1)

1、概念
层叠样式表（级联样式表），简称为样式表；html是网页的内容，css是内容的表现，css主要是给html中的页面元素定义样式，实现了内容与表现的分离，提高了代码的可读性和可重用性
2、css与html的关系
html用于构建网页的结构，css用于构建html元素的样式
3、html属性与css样式的使用原则
w3c建议我们尽量使用css来代理样式属性，实现内容与表现的分离，除非样式为html属性特有
4、css的使用方式
1）内联样式表：样式定义在单个html元素中
语法：通过style属性添加样式
style = “样式1:取值;样式2:取值;…”

2）内部样式表
内部样式表规则位于文档头元素中，通过style标记实现；所有的样式属性均写在style元素中
语法：由一个或多个样式规则组成，每个样式规则由一个或多个样式属性组成
选择器{
样式属性1: 取值;
样式属性2: 取值;
}
选择器{
样式属性1: 取值;
}

3）外部样式表
将所有的样式放在一个单独的.css文件中，再在html文档的头部通过link元素进行引入
第一步：创建css文件，css文件中直接定义样式规则，其中的语法与内部样式表语法一致
第二步：通过link元素进行引入

注意：一个html文档可以引入多个css文件，同样，一个css文件，可以被多个html文档引入

CSS（元素）
1.尺寸单位
百分比（相对于父元素） px像素 in英寸 cm厘米 mm毫米 pt磅 em（1em会参照父元素的尺寸，2em等于父元素尺寸的2倍）
2.颜色单位
颜色的单词
rgb(red,green,blue);
rgba(red,green,blue,alpa);最后一个表示透明度
十六进制色值(#ff0000)
3、尺寸属性
尺寸属性用于给元素设置宽和高，单位一般为像素或百分比
宽度属性(行内元素没有该属性)：width、min-width(当浏览器宽度小于该值时，不再折叠,一般取值为px)、max-width（最大宽度，当浏览器宽度超出该范围时，元素宽度不再变大）
高度属性：height（取值为百分比或px，注意考虑父元素的高度）、min-height（最小高度）、max-height（最大高度）
4、溢出
使用尺寸属性控制元素的大小时，如果内容所占据的控件大于元素本身的控件，会造成内容溢出；会覆盖后面的元素内容
处理溢出
overflow:visible(可见)、hidden(隐藏)、scroll(滚动,无论是否溢出，都会有滚动条)、auto(自动，溢出时则滚动，不溢出则不出现滚动条);
overflow-x(设置水平方向溢出)：visible、hidden、scroll、auto
overflow-y(设置垂直方向是否溢出)：visible、hidden、scroll、auto
哪些元素可以使用尺寸属性：p、div、hn、img、ul、ol、li、table、td、tr、form表单元素

5、边框属性
所有的元素都可以添加边框
1）边框的简写方式
border:尺寸 边框样式 边框颜色;
-尺寸一般取值为px
-边框样式：none(无边框)、dotted(点状边框、在部分浏览器中表现为实线)、dashed（虚线）、solid（实线）、double（双线）
-边框颜色：取值为颜色单位
2）单边定义
border-left：尺寸 样式 颜色;
border-right
border-top
border-bottom
3）其他
border-width:left/right/top/bottom
border-style
border-color
6、边框圆角
1)简写方式
border-radius: value;(尺寸单位)，四个角圆角弧度一致
border-radius:value1 value2;value1表示左上和右下的弧度，value2表示右上和左下的弧度
border-radius:value1 value2 value3;alue1表示左上，value2是右上和左下，value3是右下
border-radius:value1 value2 value3 value4;从左上角开始，顺时针设置四个角弧度
注意：如果某元素是正方形，当圆角值大于宽或高的一半时，则是一个圆
实现椭圆，宽高尺寸中较大的/较小的
2）单边设置
border-top-left-radius
border-top-right-radius
border-bottom-left-radius
border-bottom-right-radius
7、边框阴影
box-shadow:水平阴影位置(尺寸单位) 垂直阴影位置(尺寸单位) 模糊距离 阴影尺寸 阴影颜色 内外阴影样式
-水平距离：值为正数时，阴影在右侧，值为负数时阴影在左侧
-垂直距离：值为正数时，阴影在下册，反之在上侧
-模糊距离：阴影有模糊效果的尺寸，取值为尺寸单位

8、轮廓
轮廓指的是绘制于元素周围一条线，位于边框的外围，可以起到突出元素的作用
语法：
outline:颜色 样式 尺寸;
轮廓可以使用的样式与边框相同

CSS（选择器）
1、css选择器
选择器用于样式表指定使用该样式的html元素，也就是说，通过选择器可以找到html文档中的一个或多个html元素，选择器决定了哪些元素使用选择器对应的样式
1）通用选择器
选择名称格式为 * ，可以与任何元素匹配，常用于设置一些默认样式
语法：
*{
样式…
}
2）元素选择器
选择名称为html元素的名字，可以匹配所有元素名一致的html标记
语法：
元素名{
样式…
}
3）类选择器
根据元素的class属性进行选择（注意class属性的值以字母或下划线开头）
语法：
.类名{
样式…
}
注意：上文的类名指的是元素class属性的值，一个类名可以对应多个元素
类选择器会忽略元素的名字，只关心类名

可以将多个类选择器应用于同一个元素，也就是一个元素可以有多个类名
多个类名的格式为：class = "c1 c2 c3"；类名之间通过空格隔开，每个类名都是一个选择器

可以将类选择器和元素选择器结合起来使用
语法：元素名.class值
会找到指定元素中class值相符合的
4）id选择器
通过元素id属性的值进行定义
语法：
#id值{
    样式...
}
注意：一个id只能对应一个元素，它具有唯一性

CSS（框模型）
1、概念
框模型就是定义元素的外边距、内边距、边框、内容区域，width和height属性只是定义了元素的内容区域大小，增加内外边距或者边框只会改变元素所占空间大小，不会改变内容区域的大小
一切元素皆为框
2、外边距
围绕在元素边框周围的空白区域都叫外边距，可以理解为一个元素距离父元素边框的距离或者与下一个元素之间的距离
语法：
margin:尺寸单位，多为px或百分比;
注意：外边距的取值可以为auto，当水平方向的外边距设置为auto时，元素会被居中(只有块级元素起作用)，默认情况下，所有的块级元素都有外边距/行内、行内块级
单边设置：
margin-left:（距离左侧的外边距）
margin-right:距离右侧的外边距
margin-top:距离顶部的外边距
margin-bottom:距离下部的外边距
margin:value;上下左右同时设置
margin:value(上下) value(左右);
margin:value(上) value(左右) value(下);
margin：value(上) value(右) value(下) value(左)
外边距合并：
当两个垂直外边距相遇时,他们会形成一个外边距，称为外边距合并，二者之间的间距以较大的值为准;
水平方向会叠加
3、内边距
内边距指的是内容与边框之间的距离，一般浏览器默认为0；
设置内边距会扩大元素所占的空间
语法：
padding:value;(尺寸单位)
单边设置
padding-left
padding-top
padding-bottom
padding-right
** 注意：内外边距的取值均可以为负值**
CSS（背景&渐变）
1）概述
背景样式可以控制html的背景色、背景图；背景色可以设置单一的颜色作为背景，颜色可取值为一切颜色单位；背景图可以用图片作为背景，可以设置背景的位置、平铺、尺寸等
2）背景色属性
background-color:color;
其中颜色可取值为transparent（透明）
3）背景图片
-background-image:url(路径);取值为图片的路径
4)背景重复
默认情况下，背景图像在水平和垂直方向会重复出现（平铺，图片尺寸小于元素所占区域）
平铺属性：
background-repeat:repeat（默认值，平铺）/repeat-x(只在水平方向平铺)/repeat-y(只在垂直方向平铺)/no-repeat(不平铺)
5）背景尺寸
设置背景图的大小
属性：
background-size:width(宽) height(高);
取值同时可以为百分比
其他取值：cover（把背景图等比扩展至足够大，以使背景图能够完全覆盖元素，可能会导致图片的部分区域看不到）
contain（把图片等比缩放到宽度或者高度正好适应元素的尺寸，可能会导致元素的部分区域无图片覆盖）
6）背景固定
默认情况下，背景图会随着页面的滚动而移动，我们可以通过背景固定属性来设置是否跟随移动
属性：
background-attachment:scroll(移动，默认值)/fixed(背景固定，不会随着页面的滚动而移动)
7）背景定位
改变背景图在元素中的位置
属性：
background-position
语法：
background-position:x y;取值可以为像素，也可以为百分比
background-position同样可以取值为表示方向的单词：left/right/top/bottom/center
8）选修
背景绘制区域、背景定位区域
9）背景属性
background: 背景色 背景图 背景重复 背景固定 背景定位；如果被设置其中的某个值，则使用默认值

2、渐变
多个颜色相互转换时，以平滑的效果过度
渐变属性：background-image
取值：可以取值为linear-gradient（线性渐变）、redial-gradient(径向渐变)
1）线性渐变
语法：
background-image: linear-gradient(渐变角度,色标1,色标2);
-渐变角度：可以指定某个方向，可以是角度值(45deg)，也可以是关键词（to top）
-色标：色标包含两部分，一是颜色 一是颜色的起始点