如鹏网学习笔记（八）CSS
CSS
一、CSS简介
1，CSS (Cascading Style Sheets) 级联样式表 ，是一种计算机语言，用来控制HTML内容的显示效果
2，CSS预先定义了众多的和显示效果有关的样式属性，比如color、font-size等。如果希望html内容显示某个效果，就应用对应的CSS样式属性即可
3，CSS对样式的控制是非常精确和精细的
二、CSS语法
1，CSS语言的基本单位是样式声明：proppertyName:value;
2，CSS语言的使用方式：
1，把CSS样式声明作为HTML标签的style属性值
2，使用CSS选择器
三、文本样式
用来控制文本的显示效果，常用样式属性：
color（文本的颜色):颜色值(颜色名、RGB / RGBA 颜色、十六进制颜色..)（见备注）
text-indent（文本缩进）: 长度值(长度单位：px、%、em、in、cm、mm..)
text-align（文本对齐方式）: 枚举值(left、right、center..)
word-spacing（单词间隔）:长度值
letter-spacing（字符间隔）:长度值
text-decoration（文本修饰）:枚举值(none、underline、overline、line-through..)
四、字体样式
font-family 设置字体名称
font-size 设置字体的尺寸
font-style 设置字体风格
font-weight 设置字粗细
font 可以把上面的样式属性合并起来写（值是有序的，使用空格分隔）
（font-weight font-size font-family）
五、CSS的特点
1，有的样式属性子标签可以从父标签那里继承过来，有的则不能
2，一个标签可以同时应用若干个样式属性
3，一个标签的最终显示效果，是由若干个样式属性层叠（叠加）到一起形成的
六、CSS选择器
1，如果不适用元素style属性值的方式，CSS要想控制元素的样式，就要先定位、找到想要控制的元素
2，CSS使用选择器语法来定位元素，选择器有多种类型，并且选择器之间可以通过多种形式组合在一起使用，
CSS选择器灵活、精准、而且强大
3，选择器类型：
标签选择器、id选择器、类选择器、属性选择器、伪类选择器
4，选择器可以书写在Html的<style>标签里面，语法格式为：
<style type="text/css">
选择器1{样式声明列表}
选择器1{样式声明列表}
</style>
七、属性选择器
1，通过元素的属性进行定位
[attr]选择有attr属性的标签
[attr=val] 选择以attr属性值为val的标签
[attr^=val] 选择以attr属性值以val开头的标签
[attr$=val] 选择以attr属性值以val结尾的标签
[attr*=val] 选择以attr属性值中包含val的标签
八、伪类选择器
用来定位处于特定状态下的元素
:link 没有被点击过的超链接
:visited 被点击过的超链接
:hover 鼠标经过的超链接
:focus 获得焦点的标签
:first-child 第一个子标签
:last-child 最后一个子标签
:empty 没有内容的标签
:enabled 可以操作的标签
:disabled 不可操作的标签
:checked 处于选择状态的标签
九、复合选择器
选择器可以进行多种形式的组合：
selector1空格selector2 在1选中的元素中，使用2筛选其后代元素(2不要使用伪类选择器)
selector1>selector2 在1选中的元素中，使用2筛选其子元素
selector1~selector2 在1选中的元素中，使用2筛选其后续兄弟元素
selector1+selector2 在1选中的元素中，使用2筛选其后续紧邻的兄弟元素
selector1,selector2 各个选择器的并集
selector1(没有空格)selector2 各个选择器的交集（复合后可识别才可以这样使用）
十、CSS控制边框效果
很多HTML元素都有边框，如img、table、td、div、input等
border-style 边框样式，枚举值
border-width 边框宽度，长度值
border-color 边框颜色，颜色值
可以合并上面三个样式属性 border:solid 2px red;
还可以分别控制上下左右边框的样式，如border-top-color样式属性
table元素使用border-collaps:collaps;可以合并单元格边框
十一、CSS控制元素背景样式
很多HTML元素都可以设置背景样式（背景色、背景图片），如body、div等
background-color: red;背景色，颜色值
background-image: url("bg1.jpg"); 背景图片
background-repeat: 背景图片平铺方式，枚举值
background-attachment:背景图片是否随内容滚动，枚举值
background-position-x:center; 背景图片水平方向位置，枚举值
同样，背景样式也可以写在一起background: url("bg1.jpg") repeat ;
十二、盒子模型
为了更好的控制页面样式，CSS定义了盒子模型。一个HTML元素就是一个盒子
盒子的元素：
margin 外边距
border 边框
padding 内边距
内容
1，一个盒子在页面中占据的范围大小由外边距、内边距、内容的总面积决定
2，内边距和外边距只能指定宽度样式
3，盒子的背景会对内边距和内容起作用
4，外边距、边框、内边距可对上下左右不分分别进行样式控制
5，设置盒子高度或宽度时只对内容起作用
十三、盒子的定位
1，通过对每个盒子的外边距、边框、内边距、内容、位置的精确控制，CSS可以实现复杂而精准的页面布局
2，需要掌握下面几个概念
块级元素：这类元素默认有换行效果，典型的如div
行内元素：这类元素默认没有换行效果，典型的如span
文档流：HTML元素在页面上显示时，根据在源码中出现的次序，按照从上到下、从左到右、块级元素独占一行、行内元素不换行的规则
依次排列。文档流中的元素会对后续元素的位置产生影响
盒子定位：
相对定位：
元素在显示时，相对自己本来的位置向下或者向右偏移指定数值，
但元素本身并不脱离文档流，也就说后面的元素还认为此元素在原来的位置，
所以会排列在此元素原本位置的后面（但会造成覆盖）
position: relative;
top: 50px;
left: 50px;
绝对定位：
以最近的已经定位的祖先元素为基准进行偏移（如果没有这样的祖先元素则以浏览器窗口为基准），
元素本身脱离文档流，也就说后面元素认为此元素不存在，所以会占据此元素原来的位置
（但会造成覆盖，脱离文档流后就不具有块级元素独占一行的性质了）
position: absolute;
top: 50px;
left: 50px;
固定定位：
和绝对定位类似也会脱离文档流，但总是以浏览器窗口为基准，而且位置不会随着滚动条移动
position: fixed;
top: 50px;
left: 50px;
浮动:
如果一个盒子向左浮动(float: left;)：这个元素会成为行内元素；
它后面的块级元素会失去一半的独占一行的特性，即左边紧靠在浮动元素后面，右边延伸到行尾
向右浮动和向左浮动效果类似
可以使用clear: both;清除浮动效果对后面盒子的影响
十四、z-index层级样式属性
由于元素定位后会产生元素的叠加覆盖情况，为了灵活控制叠加部分的显示，CSS提供了z-index层级样式属性
z-index只能取整数，默认为0，可正可负
z-index值大的元素会覆盖值小的元素
z-index只对进行了定位的元素有效
十五、如何获得元素在页面中的坐标
HTML所有的元素都具有下面这5个只读属性
offsetLeft 元素边框距页面左边界的距离
offsetTop 元素边框距上边界的距离
offsetWidth 元素的宽度（左右边框的跨度）
offsetHeight 元素高度（上下边框的跨度）
offsetParent 返回已经定位的祖先元素，如果没有则返回body元素或者null
十六、使用CSS的五种方式
1，行内样式：写在元素的style属性里
2，内嵌样式：写在<style>元素内
3，导入样式：在<style>元素内，开头使用@import url(index.css);方式引入，这种方式实际上算是内嵌样式
4，链接样式：使用<link>元素引入css文件，如<link type="text/css" rel="stylesheet" href="c1.css"/>
5，默认样式：集合每一种html标签都有默认的css样式
当某个样式属性出现多次时，就需要使用优先级规则解决产生的矛盾：
1，不同引入方式的优先级：行内>内嵌、导入和链接>默认方式
2，同一种引入方式或相同优先级的引用方式中，后出现的会覆盖先出现的
十七、其他常用样式属性
display 控制元素的可见性
cursor 控制鼠标指针进入元素时的样式
