CSS层叠样式表

最新推荐文章于 2024-04-06 05:52:54 发布

shelleyHLX

最新推荐文章于 2024-04-06 05:52:54 发布

阅读量653

点赞数

分类专栏： css 文章标签： css

原文链接：http://www.moretrue.cn/Home/Article/article/id/77.html

版权

css 专栏收录该内容

32 篇文章 1 订阅

订阅专栏

一、概念上课案例下载

CSS（层叠样式表）：用于控制网页的表现

优点：

实现表现和内容相分离（方便维护、错误修改、界面调整更加容易）
便于页面风格的统一和修改（样式重用、高效率开发）
简化网页，提高页面浏览速度（减少文件量，降低服务器带宽成本，加快网页解析速度，有利于SEO）

二、在html中使用css的四种方法

1、行内样式：混合在HTML标记里使用，对每个元素单独定义样式

<p style="color:blue">文字</p>

虽然这种方法比较直接，在制作页面的时候需要为很多的标签设置style属性，所以会导致HTML页面不够纯净，文件体积过大，不利于搜索蜘蛛爬行，仍而寻致后期维护成本高。

2、页面内部样式：在HTML的头部标签<head>与</head>之间添加样式

<head>
<style>
p{color:blue;}
</style>
</head>

如果一个网站页面很多，每一个文件都会变大，重用性差，后期维护难度不小，如果文件很少，CSS代码也不多，这种方式还是很不错的。

3、链入外部样式：把样式表保存为一个样式表文件，然后在页面中使用<link/>标签链接到这个CSS文件。

<head>
<link rel="stylesheet" href="CSS文件URL" type="text/css" />
</head>

这种方式将HTML文件和CSS文件彻底分成两个或者多个文件，实现了页面框架HTML代码与表现CSS代码的完全分离，使得前期制作和后期维护都十分方便，并且如果要保持页面风格统一，只需要把这些公共的CSS文件单独保存成一个文件，其他的页面就可以分别调用自身的CSS文件，如果需要改变网站风格，叧需要修改公共CSS文件就可以了，非常的方便，这才是我们html+CSS制作页面提倡的方式。

4、导入外部样式：导入样式和链接样式比较相似，采用import方式导入CSS样式表（可以将css分成小模块），但兼容性以及用户体验的问题，建议大家使用链接样式。import与link的具体区别

四种样式的优先级按照“就近原则”：行内样式>页面内部样式>链接样式>导入样式

三、CSS的基本语法

选择符{属性1：值1；属性2：值2；……}

CSS选择器：

1、HTML标签选择器（HTML标记）：

h1{font-size:32px;}

HTML选择器很方便，但是一下就把整个页面的所有相应的标记都改变了样式，但是不好细节控制，显得不够灵活。

2、类选择器：允许同一元素有不同样式(通过选择类实现)

定义：

.redone{color:red;}

应用：

<h2 class="redone">标题</h2>
<p class="redone">段落</p>

3、id选择器：id选择器可以在html标记中定位元素，但是相同的id号只能使用一次，不能重复，这与class不同

定义：

#header{width:960px;border:1px solid #666;}

应用：

<div id="header">我的网站</div>

4、通用选择器：*表示所有的html标签

*{
margin:0px;
padding:0px;
}

5、分组选择器：

h1,h2,h3,h4,h5,h6{color:#900;}

6、后代选择器：通过依据元素在其位置的上下文关系来定义样式，可以使标记更加简洁。

#div1 p a{color:#900;} /*意思是在ID为div1内的p标签内的链接a标签的文字颜色为红色*/

7、子选择器：选择父元素的直接子元素

div > a{color:#f00;} /*将div元素下的a子元素设置为红色的*/

8、属性选择器：选择属性匹配的元素

a[title] 选择带有title属性的a标记
a[title=详细信息] 选择title属性的值为详细信息的a标记
a[href^=http] 选择herf属性以http开头的a标记
a[href$=.pdf] 选择herf属性以pdf结尾的a标记

四、多重样式CSS权重计算

1. 内联样式表的权值最高 1000；

2. ID 选择器的权值为 100

3. Class 类选择器的权值为 10

4. HTML 标签选择器的权值为 1

对于多重样式CSS权重，由上述规则计算而得，权重越大越优先，但是要注意标有“!important”规则的优先级最大

默认样式<标签选择器<类选择器<id选择器<行内样式<!important

0 1 10 100 1000 1000以上

p{color:red;} /*标签，权值为1*/
p span{color:green;} /*两个标签，权值为1+1=2*/
p>span{color:purple;}/*权值与上面的相同，因此采取就近原则*/
.warning{color:white;} /*类选择符，权值为10*/
p span.warning{color:purple;} /*权值为1+1+10=12*/
#footer .note p{color:yellow;} /*权值为100+10+1=111*/
p{color:red!important; } /*!important要写在分号前,优先级最高*/

参考阅读：《CSS:权重和层叠规则决定了其优先级》、《CSS经典权重5道题解析》

五、常用伪类

:focus 将样式添加到被选中的元素

:hover 当鼠标悬浮在元素上方时，向元素添加样式

六、CSS属性

1、字体属性：

属性	属性含义	属性值
font-family	使用什么字体	所有字体
font-style	字体是否斜体	normal、italic、oblique
font-weight	字体的粗细	normal、bold
font-size	字体的大小	绝对大小/相对大小

说明：

1）不建议在font-family中设置超过宋体/黑体之外的字体,会导致未装字体的计算机显示不正常，也可以采用一个字体系列，当某种字体不存在时，用后面的字体

由于中文文字的复杂性,点阵装的字体并不是全都适合于浏览器观看,因此推荐使用标准的宋体或微软雅黑用于中文文字的显示,如果需要其他装饰性字体,应当多使用图片方式来替代纯文本的显示.

2）字体大小的单位，绝对单位：in，cm，mm，pt；相对单位：em，ex，px，%；浏览器默认文字大小为16px

2、文本属性：

属性	属性含义	属性值
color	设置文本颜色
text-indent	设置文本首行缩进	缩进值
text-align	文本对齐	left,right,center,justify
word-spacing	单词间距	间距值
letter-spacing	字母间距	间距值
text-decoration	文本修饰	none,underline,overline,line-through,blink
line-height	设置行高
vertical-align	垂直对齐	baseline、top、bottom、middle等

3、背景属性

属性	属性含义	属性值
background-color	定义背景色	颜色
background-image	定义背景图案	图片路径例:body{background-image:url(.jpg)}
background-repeat	背景图案重复方式	Repeat-x、Repeat-y、no-repeat
background-attachment	设置滚动	Scroll ， Fixed(背景固定)
background-position	背景图案的初始位置	百分数、长度值、top、left、right、bottom、center等
background	合集	color image repeat attachment position

4、列表属性：

属性	描述	值
`list-style-image`	将图象设置为列表项标志。	`ul li {list-style-image : url(xxx.gif)}`
`list-style-position`	设置列表中列表项标志的位置。	`inside`, `outside`
`list-style-type`	设置列表项标志的类型。	`disc`, `circle`,`square`, `decimal`等
`list-style`	简写属性。用于把所有用于列表的属性设置于一个声明中。	合集`type postion image`

5、边框属性

1）每个元素外面都可以有一个边框

2）边框可分为上，下，左，右，四个边框

3）每个边框可以有颜色（color），样式（style）、宽度（width）三种属性

属性	描述	值
`border-style`	边框样式	`solid` \| `none` \| `dotted` \| `dashed` \| `double`等
`border-width`	边框宽度	`border-width:2px;`
`border-color`	边框颜色	颜色值

6、表格属性

属性	描述	值
`border-collapse`	设置是否把表格边框合并为单一的边框。	`separate`，`collapse`

设置表格边框

table{
border-collapse:collapse;
}
table,th, td{
border: 1px solid black;
}

7、尺寸属性

属性	描述	值
`width`	宽度	`width:960px;`百分比
`min-width`	最小宽度
`max-width`	最大宽度
`height`	高度	`height:100px;`百分比
`min-height`	最小高度
`max-height`	最大高度

8、溢出属性

属性	描述	值
`overflow`	溢出处理方式	`visible`:默认值 `hidden`:溢出隐藏 `scroll`:滚动条 `auto`:必要时加滚动条
`overflow-x`	在x轴方向处理溢出
`overflow-y`	在y轴方向处理溢出
`text-overflow`	文本溢出处理	`clip`:裁剪溢出文本 `ellipsis`:省略号替代溢出文本

五、块级元素与行内元素

块级元素（block）：一般是其他元素的容器，可容纳内联元素和其他块级元素，块级元素独占一行，宽度(width)默认为100%，高度(height)由内容决定。常见块级元素为div和p，h，ul

内联元素（inline）：内联元素只能容纳文本或者其他行内元素，它允许其他行内元素与其位于同一行，但宽度(width)和高度(height)不起作用，元素的宽度就是它包含的文字或图片的宽度，不可改变。常见的行内元素为a和span。

块级元素和行内元素可通过display属性进行强制转换

display : block || inline || none || inline-block

内联块状元素（inline-block）：就是同时具备内联元素、块状元素的特点，代码display:inline-block就是将元素设置为内联块状元素。，<img>、<input>标签就是这种内联块状标签。inline-block元素特点：1、和其他元素都在一行上；2、元素的高度、宽度、行高以及顶和底边距都可设置。

	块级元素	行内元素	行块元素
默认大小	默认宽度100% 默认高度由内容决定	默认宽度和高度都由内容决定	默认宽度和高度都由内容决定
表现形式	独占一行	可以和其他元素同用一行	可以和其他元素同用一行
高宽设置	有效	无效	有效
html元素	`h1-h6`,`div`,`p`,`ul`,`ol`,`li`等	`span`,`a`,`strong`,`em`等	`input`,`img`
`display`值	`block`	`inline`	`inline-block`

六、盒模型

盒模型是xhtml+css布局页面中的核心

每个HTML元素都可以看作一个装了东西的盒子，盒子具有宽度（width）和高度（height），盒子里面的内容到盒子的边框之间的距离即填充（padding），盒子本身有边框（border），而盒子边框外和其他盒子之间，还有边界（margin）。

盒模型的四要素：content（内容）、border（边框）、padding（内边距）、margin（外边距）

margin：是盒子外面与其他元素的距离，用1到4个值来设置元素的外边距，每一个值都是长度、百分比或auto，允许使用负值。还可以使用margin-top、margin-right、margin-bottom、margin-left，外边距顺序依次是上、右、下、左

padding：内边距，指文本边框与文本之间的距离，使用方法和margin相同。

鸡蛋.jpg

可以用鸡蛋来帮助理解盒模型，其中蛋黄表示content，蛋白表示padding，蛋壳表示border，鸡蛋之间的间距表示margin。

在盒子大小的理解上，存在如下两种模型：

1、W3C盒模型（内容盒子 content-box）

在W3C盒模型中，width和height表示内容（content）的大小，也就是蛋黄的大小，此时增加padding（蛋白）和border（蛋壳）会增加整个元素的大小（也就是鸡蛋会变大）。

如果有如下的CSS定义

#box{
width:70px;
margin:10px;
padding:5px;
}

则整个盒子占用的空间计算如下

2、IE6 盒模型（边框盒子 border-box）

Microsoft认为盒子的大小是边框（border）的大小，也就是蛋壳的大小，在这种模型下，改变padding（蛋白）、border（蛋壳厚度）的大小，并不会改变鸡蛋的大小，但内容的大小会变（也就是说蛋黄的大小会变化）。

这种盒模型实际上更符合我们对客观世界的认知，但是同时我们要知道，W3C是标准，现代的浏览器都采用的内容盒子（content-box）模型。在CSS3当中，提供了box-sizing属性来实现两种模型间的切换。

属性	描述	值
`box-sizing`	设置当前元素采用的盒模型。	`content-box`，`border-box`

七、实例

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>盒子实例1</title>
<style>
*{
margin: 0px;
padding: 0px;
}
div{
border: 8px solid #6d8bc1;
width: 200px;
background: #aad9f7;
}
h2{
font-size: 14px;
color: #336;
/*border: 1px solid blue;*/
padding:18px 0px 0px 18px;
}
p{
font-size: 12px;
padding: 18px;
}
</style>
</head>
<body>
<div>
<h2>求职意向</h2>
<p>寻一份互联网相关专职工作.</p>
</div>
</body>
</html>

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>盒子实例2</title>
<style>
*{
margin:0px;
padding: 0px;
}
body{
padding: 20px;
font-size: 12px;
}
dl{
width: 200px;
border: 1px solid #c5c6c4;
border-top: none;
}
dt{
padding: 4px;
font-weight: bold;
border-top:1px solid #c5c6c4;
background: #f4f4f4;
}
dd{
padding: 4px 12px;
}
</style>
</head>
<body>
<dl>
<dt>CSS</dt>
<dd>CSS入门</dd>
<dd>CSS进阶</dd>
<dd>CSS高级技巧</dd>
<dt>WebUI</dt>
<dd>理论知识</dd>
<dd>实战应用</dd>
<dd>高级技巧</dd>
</dl>
</body>
</html>

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>盒子实例3</title>
<style>
*{
margin: 0px;padding: 0px;
}
a{
margin: 100px;
color:#000;
text-decoration: none;
font-size: 12px;
background: #d4d0c8;
height: 30px;
line-height: 30px;
width: 100px;
display: block;
text-align: center;
border:1px solid #000;
border-top: 1px solid #fff;
border-left: 1px solid #fff;
}
a:hover{
background: #ddd;
}
</style>
</head>
<body>
<a href="#">链接按钮</a>
</body>
</html>

素材下载

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>盒子实例4</title>
<style>
*{
margin: 0px;padding: 0px;
}
#b1{
margin: 50px;
background: none;
border: none;
font-weight: bold;
background: url('xml.jpg') no-repeat 0px -12px;
padding: 4px;
padding-left: 40px;
border: 1px solid #000;
}
</style>
</head>
<body>
<input type="submit" name="Submit2" value="RSS订阅" id="b1"/>
</body>
</html>

七、CSS定位

CSS 有三种基本的定位机制：普通流、浮动和绝对定位（固定）。

普通流

除非专门指定，否则所有框都在普通流中定位。也就是说，普通流中的元素的位置由元素在X(HTML)中的位置决定。

块级框从上到下一个接一个地排列，框之间的垂直距离是由框的垂直外边距计算出来。

浮动

浮动定位：可以设置元素的float属性为left或right，让元素浮动，使得块级元素可以并排显示。

但一定注意，设置浮动的同时一定要先设置块状元素的宽度，且需要浮动的几个元素宽度加起来一定要小于容器元素的宽度。

请看下图，当把框 1 向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘：

再请看下图，当框 1 向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框 2，使框 2 从视图中消失。

如果把所有三个框都向左移动，那么框 1 向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框。

如下图所示，如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”：

行框和清理

浮动框旁边的行框被缩短，从而给浮动框留出空间，行框围绕浮动框。

因此，创建浮动框可以使文本围绕图像：

要想阻止行框围绕浮动框，需要对该框应用 clear 属性。clear 属性的值可以是 left、right、both 或 none，它表示框的哪些边不应该挨着浮动框。

为了实现这种效果，在被清理的元素的上外边距上添加足够的空间，使元素的顶边缘垂直下降到浮动框下面：

浮动本来是用来实现图文混排的，可是在具体实践中，常常用来将纵向排列的块级元素变成水平排列，但是浮动有一个缺陷，就是浮动元素会脱离文档流，从而造成父元素的塌陷，为了使得父元素也能包裹浮动元素，需要做浮动的清理。

清理浮动的方法1：

<div class="container">
<div class="sidebar"></div>
<div class="content"></div>
<br style="clear:both">
</div>

清理浮动的方法2：使父元素形成BFC

<div class="container" style="overflow: hidden;">
<div class="sidebar"></div>
<div class="content"></div>
</div>

总结：

由此可以看出，浮动可以使块级元素横向排列，可以解决布局中盒子横向摆放的问题，浮动元素有“block”化和“包裹性”的特性，在实际使用中要注意。

浮动具有方向性，很灵活，可以很方便的用于布局的调整。

但是浮动有一个副作用，就是浮动元素会脱离文档流，造成父元素的塌陷。因此在使用浮动时，需要使用“清理”来消除它的副作用。

扩展阅读

CSS浮动(float,clear)通俗讲解

学习BFC

Float 和 inline-block

相对、绝对定位

定位属性

position属性：

static静态定位

position的默认值，一般不设置position属性时，会按照正常的文档流进行排列

relative相对定位

元素框相对于原本的位置偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留

1、定位的原点为原来的位置

2、相对定位元素不脱离文档流，因此其占据的空间不会因为相对定位元素的位置改变而变化

3、使用top、bottom、left、right来调整位置。如无设置，则保留在原来位置。

4、使用z-index属性来调整元素z轴的位置关系，z-index默认值为0，值小的，在前面。

5、常用于元素位置的微调、子元素的绝对定位

absolute绝对定位

当元素的父对象(或曾祖父，只要是父级对象)parent的position属性不是默认值的情况，此时按照这个parent来进行定位，如果没有这个对象，相对<html>元素定位（元素将脱离文档流）

1、定位的原点默认为<html>元素的左上角（除非上级元素有绝对或相对定位）

2、绝对定位元素将脱离文档流，其占据的空间将释放

3、使用top、bottom、left、right来调整位置。如无设置，则保留在原来位置。

4、使用z-index属性来调整元素z轴的位置关系，z-index默认值为0，值小的，在前面。

5、常用于相对祖先元素的定位(与relative元素组合使用)

relative元素与absolute元素的比较：定位原点、是否脱离文档流

fixed固定定位

总是以<html>为定位对象的，按照浏览器的窗口进行定位，元素将脱离文档流

属性	描述	值
position	把元素放置到一个静态的、相对的、绝对的、或固定的位置中。	`absolute/fixed/relative/static`
top	定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。
right	定义了定位元素右外边距边界与其包含块右边界之间的偏移。
bottom	定义了定位元素下外边距边界与其包含块下边界之间的偏移。
left	定义了定位元素左外边距边界与其包含块左边界之间的偏移。
clip	设置元素的形状。元素被剪入这个形状之中，然后显示出来。	`rect (top, right, bottom, left)`
z-index	设置元素的堆叠顺序。	如果为正数，则离用户更近，为负数则表示离用户更远

可见性

属性	描述	值
`visibility`	规定元素是否可见（不脱离文档流）	`visible/hidden`
`display`	设置为`none`值，元素不可见（脱离文档流）	`none/block/inline/inline-block`

float浮动与清除请参考：

http://www.w3school.com.cn/css/css_positioning_floating.asp

实例

实例1、盒子定位

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>浮动</title>
<style>
*{
margin: 0px;padding: 0px;
}
div{
width: 100px;height: 100px;
border: 1px solid #000;
background: #ccc;
}
h1{
border: 2px solid blue;
}
#d2{
position: relative;
/*position: absolute;*/
left: 50px;
top: 50px;
/*float: right;*/
}
/*#d1{
float: left;
}
#d3{
float: right;
}*/
.clear{
clear: both;
}
</style>
</head>
<body>
<h1>
<div id="d1">盒子1</div>
<div id="d2">盒子2</div>
<div id="d3">盒子3</div>
<p></p>
</h1>
</body>
</html>

实例2：

捕获.PNG

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>绝对定位</title>
<style>
*{padding: 0;margin: 0;}
.header{
width: 500px;
height: 100px;
border: 1px solid #333;
background-color: #ddd;
position: relative;
font-family: '宋体';
}
.header h1{
font-size: 18px;
}
.header a{
font-size: 12px;
color: #333;
text-decoration: none;
position: absolute;
right: 5px;
bottom: 5px;
}
</style>
</head>
<body>
<div class="header">
<h1>慕楚教育</h1>
<a href="#">登录</a>
</div>
</body>
</html>

实例3、

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>导航</title>
<style>
*{margin: 0;padding:0;}
ul{
margin: 50px;
padding-left: 50px;
border-bottom:2px solid #2788da;
height: 26px;
list-style:none;
overflow: hidden;
}
a.home{
background: #2788da;
color: #fff;
}
ul li{
float: left;
}
ul li a{
width: 97px;
height: 26px;
line-height: 26px;
background: #ececec;
display: block;
color: #000;
text-align: center;
text-decoration: none;
letter-spacing: 0.8em;
margin-left:2px;
}
a:hover{
background: #bbb;
color: #fff;
}
a.home:hover{
background: #2788da;;
}
.english{
letter-spacing: normal;
}
</style>
</head>
<body>
<ul>
<li><a href="#" class="home">首页</a></li>
<li><a href="#">文章</a></li>
<li><a href="#">参考</a></li>
<li><a href="#" class="english">Blog</a></li>
<li><a href="#">论坛</a></li>
<li><a href="#">联系</a></li>
</ul>
</body>
</html>

上课案例下载

实例4、布局

固定布局：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>布局</title>
<style>
*{margin: 0;padding: 0;}
.container{
width: 960px;
margin: 0 auto;
}
header{
background-color: #fcc;
}
aside{
float: left;
width: 180px;
background-color: #cfc;
height: 300px;
}
.content{
float: left;
width: 780px;
background-color: #ccf;
height: 300px;
}
footer{
clear: both;
background-color: #ccc;
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>头部</h1>
</header>
<aside>侧边栏</aside>
<div class="content">内容</div>
<footer>底部</footer>
</div>
</body>
</html>

弹性布局：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>布局</title>
<style>
*{margin: 0;padding: 0;}
.container{
width: 90%;
margin: 0 auto;
}
header{
background-color: #fcc;
}
aside{
float: left;
width: 150px;
background-color: rgba(0,255,0,0.3);
height: 300px;
}
.content{
/*float: left;*/
/*width: calc(100% - 150px);*/
margin-left: 150px;
background-color: #ccf;
height: 300px;
}
footer{
clear: both;
background-color: #ccc;
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>头部</h1>
</header>
<aside>侧边栏</aside>
<div class="content">内容</div>
<footer>底部</footer>
</div>
</body>
</html>

shelleyHLX

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS层叠样式表

一、概念上课案例下载CSS（层叠样式表）：用于控制网页的表现优点：实现表现和内容相分离（方便维护、错误修改、界面调整更加容易）便于页面风格的统一和修改（样式重用、高效率开发）简化网页，提高页面浏览速度（减少文件量，降低服务器带宽成本，加快网页解析速度，有利于SEO）二、在html中使用css的四种方法1、行内样式：混合在HTML标记里使用，对每个元素单独定义样式<pstyle="color:blue">文字</p&gt...
复制链接

扫一扫