如鹏网学习笔记（八）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 控制鼠标指针进入元素时的样式