CSS

CSS:层叠式样式表
作用：
通过HTML编写的所有的网页的页面，都称为静态页面。就是说编写的页面里面的代码都是固定的，一旦编写结束，就不能在自动的发生变化了，如果我们想要页面里的内容能发生改变的话，我们必须重新对页面进行编码。这种编写是非常麻烦的，我们可以使用简单的方式来进行处理，比如我们需要对页面的显示效果进行更改的话，我们可以考虑使用CSS样式表。CSS样式表说白了，就是给我们的网页添加一个华丽的外衣。

CSS样式表中的常用的属性：
一：关于字体
1.color:gray; 设置文字的颜色
2.font-family:宋体; 设置文字的字体
3.font-size:100px; 设置文字的大小
4.font-style:italic; 设置文字是否是斜体，如果是则编写italic 否则编写normal ,默认的值就是normal
5.font-weight:bold; 设置字体的宽度，如果设置粗体显示则是bold，默认的是normal
6.text-decoration:overline; 设置文字的是否存在下划线以及下划线的位置，
取值: none:默认值,无装饰
blink:闪烁
underline:下划线
line-through:贯穿线
overline:上划线
二：关于背景
1.background-color:red; 设置组件的背景颜色，颜色的取值是颜色名称，rgb(r,g,b),十六进制的颜色数值.
2.background-image:url(“hp.png”); 设置组件的背景的图片
3.background-repeat:no-repeat; 设置组件的背景的图片如何进行平铺的，取值：
repeat:默认值。背景图像在纵向和横向上平铺
no-repeat:背景图像不平铺
repeat-x:背景图像仅在横向上平铺
repeat-y:背景图像仅在纵向上平铺

4.background-attachment:fixed;	设置组件的背景图片是否根据组件进行移动：取值：
	scroll:默认值。背景图像是随对象内容滚动 
	fixed:背景图像固定 

三、关于组件的宽高
width:100px; 设置组件的宽度
height:200px; 设置组件的高度
min-height:200px; 设置组件的最低的高度
min-width:500px; 设置组件的最低的宽度
max-height:200px; 设置组件的最大的高度
max-width:500px; 设置组件的最大的宽度
四、关于边框
border-style:solid ; 设置边框的显示的样式
取值：
none:默认值。无边框。不受任何指定的 border-width值影响
hidden:隐藏边框。IE不支持
solid:实线边框
double:双线边框。两条单线与其间隔的和等于指定的 border-width 值

border-color:red;	设置边框的颜色
border-width:10px;	设置边框的宽度,如果提供全部四个参数值，将按上－右－下－左的顺序作用于四个边框。如果只提供一个，将用于全部的四条边。如果提供两个，第一个用于上－下，第二个用于左－右。如果提供三个，第一个用于上，第二个用于左－右，第三个用于下。

五、关于外边距
margin 设置当前组件相对于其他组件或父级组件边框的距离，默认值为 0 0。如果提供全部四个参数值，将按上－右－下－左的顺序作用于四边。如果只提供一个，将用于全部的四边。如果提供两个，第一个用于上－下，第二个用于左－右。如果提供三个，第一个用于上，第二个用于左－右，第三个用于下。
margin-left: 设置当前组件的左侧距离其他组件或者是父级组件边框的距离
margin-right: 设置当前组件的右侧距离其他组件或者是父级组件边框的距离
margin-top: 设置当前组件的上侧距离其他组件或者是父级组件边框的距离
margin-bottom: 设置当前组件的下方距离其他组件或者是父级组件边框的距离
六、关于内边距
padding 设置当前组件相对于其内部组件的距离，默认值为 0 0。如果提供全部四个参数值，将按上－右－下－左的顺序作用于四边。如果只提供一个，将用于全部的四边。如果提供两个，第一个用于上－下，第二个用于左－右。如果提供三个，第一个用于上，第二个用于左－右，第三个用于下。
padding-left: 设置当前组件的左侧距离内部组件边框的距离
padding-right: 设置当前组件的右侧距离内部组件边框的距离
padding-top: 设置当前组件的上侧距离内部组件边框的距离
padding-bottom: 设置当前组件的下方距离内部组件边框的距离

CSS样式表的选择器：
1.全局选择器：全局选择器，对应的是页面中的所有的标签
语法：
*{
属性1:属性值1;
属性2:属性值2;
…
属性n:属性值n;
}
2.ID选择器：配置对应的ID属性的组件
语法：
#id值{
属性1:属性值1;
属性2:属性值2;
…
属性n:属性值n;
}
3.类选择器：配置对应的class属性的组件
语法：
.class属性值{
属性1:属性值1;
属性2:属性值2;
…
属性n:属性值n;
}
4.标签选择器:配置对应的标签名的组件
标签名{
属性1:属性值1;
属性2:属性值2;
…
属性n:属性值n;
}

5.组合选择器：我们可以统一的对每种不同的选择器进行统一的设置
语法：
选择器1,选择器2,…,选择器n{
属性1:属性值1;
属性2:属性值2;
…
属性n:属性值n;
}
6.子选择器:必须是父选择器直接包含的子选择器
语法：
父选择器 > 子选择器{
属性1:属性值1;
属性2:属性值2;
…
属性n:属性值n;
}
7.后代选择器:只要是负选择包含的后代选择器
语法：
祖先选择器 后代选择器{
属性1:属性值1;
属性2:属性值2;
…
属性n:属性值n;
}
8.伪类也是选择器的一种，但是用伪类定义的CSS样式并不是作用在标签上的，伪类作用在标签的状态上。由于很多浏览器支持不同类型的伪类，没有一个统一的标准，所以很多伪类都不常被用到。但是有一组伪类是主流浏览器都支持的，就是超链接的伪类，包括:link 最初的样式
:active 按下的状态
:vistited 访问过的样式
:hover 悬停的样式。

注意：
1.无论我们使用哪种选择器，对于属性的设置都是一样的，选择的不同只能实现对不同的组件进行修改。

CSS样式表：
属性的声明：
声明是构成CSS语句的一部分，声明写在选择器之后。CSS的声明写在一对大括号中，其中包含CSS的属性和值。声明的写法有明确的规则，若不遵守声明的规则，则可能导致CSS样式失效。以下为CSS声明的规则：
声明中属性和值之间用冒号隔开；
声明中可以包含多个属性；
使用多重声明时，每个声明用分号隔开；
声明的大括号必须书写完整。
多重声明是指在对同一个选择器设置属性时，可以把所有属性写在同一选择器中，而不需要分开书写。
如： h1{color:blue;font-size:24px;font-weight:bold;}
CSS的层叠原理
CSS的全称为Cascading Style Sheets，中文翻译为层叠样式表。学习CSS的层叠（cascading）是深入学习CSS原理的基础。当出现多个样式共同作用于某个页面元素时，就需要决定哪一个会被应用。CSS的层叠就是一个决定CSS样式优先级的规则。
选择器的优先级
由于CSS的某些属性有继承性，一个页面元素往往应用了多个选择器定义的CSS样式。CSS的选择器具有优先级，用于决定哪个选择器定义的样式最终被应用到页面元素上。选择器的优先级可以简单由高到低排列如下：
!important 最高
inline style 内联样式
id selector id选择器
class selector 类选择器
element selector 标签选择器

• universal selector 全局选择器

当出现多个相同的选择器设置相同的属性时，后定义的选择器优先级较高。

通常定义样式有4种方法：
1）、内联定义样式：内联定义样式是混合在HTML标记里使用的样式，即使用标记的Style属性定义的适用于该标记的样式，
2）、定义内部样式块对象：定义内部样式快就是针对页面中某些公共元素的样式比较类似，如果使用内联定义方法逐个元素地定义比较繁琐，而且维护麻烦，此时就可以在网页的和标记之间插入一个标记之间，利用CSS的@import声明引入外部样式表。
例如：

注意：导入外部样式表必须在样式表的开始部分，即在其他内部样式表上面。

4）、链入外部样式表：链入外部样式表是指在HTML文件的头信息标记…之间，利用标记连接到外部样式表文件。例如：

盒模型是DIV+CSS布局的基础，要实现DIV+CSS布局必须了解盒模型的原理。在页面上的每个元素都能看做一个容器，这个容器就是一个盒子。例如，p标签是一个能装文字的容器，它的高度就是所承载文字的高度。使用DIV+CSS布局，div标签就是布局中所用到的容器。大部分人认为只有div标签能作为容器来安排布局。其实在XHTML页面中几乎所用的标签都是容器，都能被当作容器来使用。页面上的每个容器都占有一定的位置，有一定的大小。页面上的每个容器都会影响其他容器的排布，它们相互作用，从而形成一个页面的布局。

块级元素与行内元素
所有的XHTML页面元素只有两种，一是块级元素一是行内元素。块级元素一般都从新行开始，它可以容纳行内元素和块级元素。行内元素只能容纳文本或其他行内元素。
使用CSS的display属性（的block和inline值）能使行内元素和块级元素相互转换。

CSS有三种基本的布局方式，分别是常规流、浮动和定位。所谓常规流（normal flow）是指页面元素按照所在XHTML文档的位置顺序排列的布局方式。在没有添加其他布局方式的情况下，页面遵循常规流的布局方式。

使用浮动布局是目前网页制作中较为常用的方式。应用了浮动的元素脱离原来的常规流模式。浮动的元素可以向页面的左边或者右边移动，直到其边缘接触到其父元素的边框或者另外一个浮动元素的边框。
CSS提供float属性用于设置元素的浮动，它包含三个值，分别是left、right和none。设置浮动为left值，元素向页面左边浮动；设置浮动为right，元素向页面右边浮动；设置浮动为none，元素不浮动。

使用浮动后，常产生很多意外的结果，因为浮动的元素会脱离原来的常规流。浮动元素可能会覆盖一些非浮动的元素，这时需要使用CSS的clear属性来清除浮动。clear属性有四个值，分别是none、left、right和both，以下是四个值的意义。
none：允许两边都可以有浮动对象；
both：不允许有浮动对象；
left：不允许左边有浮动对象；
right：不允许右边有浮动对象。

除了使用浮动布局外，常用的布局方式还有定位。CSS提供position属性用于定位。使用position定位可以定义元素相对其父元素或者其他元素的精确位置。Position属性共有四个关键字值，分别是static、absolute、relative和fixed。
其中static为默认值，表示无定位，即块保持在原来的位置上，通常不需要特别的去声明它，但有时候遇到继承的情况，我们不愿意见到元素所继承的属性影响本身，从而可以用position:static取消继承，即还原元素定位的默认值。
absolute代表绝对定位，relative代表相对定位，这两种定位方式是最常用的。