css 层叠样式表 解释

* 整个文件

创新互联主要从事网站设计制作、网站设计、网页设计、企业做网站、公司建网站等业务。立足成都服务大宁,十余年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:18982081108

{

border: 0;没有边框

margin: 0;外间距为0

padding: 0;内间距为0

}

a

{

text-decoration: none; 所有默认超链接没有下划线

}

body 所有内容

{

background: #000000; 背景色为黑色

color: #777; 文字颜色为#777

margin: 0 auto; 样式左右局中 上下顶头

padding: 50px; 内间距50像素

position: relative; 对象不可层叠

width: 620px; 样式宽度为620px

}

h1

{

background: inherit; 背景色继承父本

/*

border-bottom: 1px dashed #ccc; 被注视掉了

*/

color: #933; 文字颜色#933

font: 17px Georgia, serif; 文字属性

margin: 0 0 10px; 外间距 上左右0像素 下10像素

padding: 0 0 5px; 内间距 上左右0像素 下5像素

text-align: center; 文字水平局中

}

p

{

clear: both; 清除浮动

font: 10px Verdana, sans-serif; 文字样式

padding: 10px 0; 内间距 上下10像素 左右0像素

text-align: center; 文字水平局中

}

p a

{

background: inherit; 段落背景色继承父色

color: #777; 超链接文字颜色为#777

}

p a:hover

{

background: inherit;

color: #000; 段落超链接鼠标经过时颜色为黑色

}

/* =Hoverbox Code

----------------------------------------------------------------------*/ 被注视掉

.hoverbox

{

cursor: default; 鼠标样式不显示

list-style: none; 清除样式

}

.hoverbox a

{

cursor: default; 鼠标样式不显示

}

.hoverbox a .preview

{

display: none; 鼠标样式不显示

}

.hoverbox a:hover .preview 鼠标经过

{

display: block; 鼠标样式显示

position: absolute; 对象不可层叠

top: -33px; 据顶端-33个像素

left: -45px; 据左边-45个像素

z-index: 1; 纵坐标为1

}

.hoverbox img boverbox里的图片

{

background: #fff; 背景色白色

border-color: #aaa #ccc #ddd #bbb; 边框上右下左的颜色

border-style: solid; 边框为实线

border-width: 1px; 边框1个像素

color: inherit; 文字颜色继承父色

padding: 2px; 内间距2个像素

vertical-align: top; 竖直顶端对齐

width: 100px; 宽度100像素

height: 75px; 高度75像素

}

.hoverbox li hoverbox里的li标记

{

background: #eee; 背景色 #eee

border-color: #ddd #bbb #aaa #ccc;边框上右下左的颜色

border-style: solid;边框为实线

border-width: 1px;边框1个像素

color: inherit;文字颜色继承父色

display: inline;内联对象

float: left;左浮动

margin: 3px;外间距3像素

padding: 5px;内间距5像素

position: relative;对象不可层叠

}

.hoverbox .preview

{

border-color: #000; 边框颜色#000

width: 200px; 宽度200像素

height: 150px; 高度150像素

}

给分吧 很辛苦的哦

什么是css，层叠样式表

.css文件是指样式表文件，就是把你在HTML里面写的CSS样式代码拿出来做为一个单独的文件，在需要使用导入到页面里面去。 用.css文件可以提高css样式的重复使用率并简化HTML代码。 所谓层叠是因为CSS样式后面的属性会覆盖前面的属性。

css层叠样式表有哪几种类型

CSS（Cascading Style Sheets）

层叠样式表

优势：

CSS可以提高页面的浏览速度。

缩短改版时间，降低维护费用。

强大的字体控制能力和排版能力。

css容易编写。

可以一次设计随处发布。

更好的控制页面布局。

实现表现和结构、内容相分离。

更方便搜索引擎的搜索/page Rank

样式规则：

语法：选择器｛属性1：值1；属性2：值2；...属性N：值N；｝

选择器就是要改变页面中的哪些标签元素

声明要用｛｝括起来，；结束

如果属性中包含空格要用“”括起来

可以指定多个选择器使用相同的样式

样式表：

外部样式表，新建.css文件，在文件中写入样式规则link rel="stylesheet" href = "xxx.css"

内联样式表，在元素中添加style属性

嵌入式样式表，在html使用style标签，style type="text/css"/style

选择器：

元素选择器，元素名

id选择器，用#id

类选择器，用.class

后代选择器，选择器1 选择器2

css深化：

就近原则，！important提高元素优先级，伪类选择器，伪对象选择器，@import导入其他css文件，响应式布局可以解决多设备的兼容问题。

文本属性：

font-family：字体

font-size：字体大小

font-style：斜体

font-weight：粗体

color：颜色

line-height：行高

letter-spacing：字符间距

text-decoration：文本修饰

text-overflow：文字溢出处理

white-space : no wrap

text-overflow:hidden

text-align：文本对齐

背景属性：

background-color：背景颜色

background-image：背景图片

background-repeat：背景重复

background-attachment：背景图片附着

基于占满一整行与否，标签分为两大类（文档流）：

占满：行级元素（div，p，h1~h6）

不占满：行内元素（span，）

定位属性：

position：定位

absolute：绝对定位

relative：相对定位

css为什么叫层叠样式表

层叠就是浏览器对多个样式来源进行叠加，最终确定结果的过程.

css之所以有“层叠”的概念，是因为有多个样式来源。

其中css样式来源有5个，分别是内联样式（a style=""）,内部样式(style/style),

外部样式（写在css文件中的样式），浏览器用户自定义样式，浏览器默认样式；

按照其来源优先级为内联样式内部样式外部样式浏览器用户自定义样式浏览器默认样式

按照选择器优先级为id class元素选择器

如果有important,important优先级最高。