CSS

最新推荐文章于 2023-08-11 10:17:42 发布

漂游大叔

最新推荐文章于 2023-08-11 10:17:42 发布

阅读量216

点赞数

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

本文链接：https://blog.csdn.net/qq_29764065/article/details/82862554

版权

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

为网页添加样式

CSS的作用

--使用CSS定义样式

--各元素使用统一的样式声明！且提高来样式的可重用性和可维护性！

<!doctype html>

<html>

<head>

<title>CSS的作用</title>

<style>

body{

background-color:silver;

color:#00f;

}

h2{

background-color:orange;

color:#f00;

}

</style>

</head>

<body>

<h2>CSS的作用</h2>

各元素使用统一的样式声明！

且提高来样式的可重用性和可维护性！

</body>

</html>

什么是CSS

CSS(cascading style sheets)：层叠样式表，又叫级联样式表，简称样式表

用于HTML文档中元素的样式定义

--实现来将内容与表现分离

--提高代码的可重用性和可维护性

CSS样式基本知识

CSS样式表

内联方式

--样式定义在单个的HTML元素中

内部样式表

--样式定义在HTML页的头元素中

外部样式表

--将样式定义在一个外部的CSS文件中(.css文件)

--由HTML页面引用样式表文件

内联方式使用CSS

样式定义在HTML元素的标准属性style里

CSS语法

--只需要将分号隔开的一个或多个属性/值对作为元素的style属性的值

--属性和属性值之间用：连接

--多对属性之间用；隔开

CSS的作用

</h2>

内部样式表

样式表规则位于文档头元素中的<style>元素内

--在文档的<head>元素内添加<style>元素

--在<style>元素中添加样式规则

在<style>元素中添加样式规则

--可以定义多个样式规则

--每个样式规则有两个部分：选择器和样式声明

选择器：决定哪些元素使用这些规则

样式声明：一对大括号，包含一个或者多个属性/值对

<!doctype html>

<html>

<head>

<title>CSS的作用</title>

h2{color:#f00;}

</style>

</head>

<body>

</body>

</html>

外部样式表

第一步：创建一个单独的样式表文件用来保存样式规则

--一个纯文本文件，文件后缀为.css

--该文件中只能包含样式规则

--样式规则由选择器和样式声明组成

h2{color:#f00;}

P{background-color:silver;color:blue;}

第二步：在需要使用该样式表文件的页面上，使用<link>元素链接需要的外部样式表文件

--在文档的<head>元素内添加<link>元素

<!doctype html>

<html>

<head>

<title>CSS的作用</title>

</head>

<body>

</body>

</html>

优点：可以实现内容与表现分离，可以被站点中的所有页面重用

CSS语法规范

内联样式：由样式声明组成

样式表：由多个样式规则组成

--每个样式规则有两个部分：选择器和样式声明

CSS样式表特征

继承性

--大多数CSS的样式规则可以被继承

层叠性

--可以定义多个样式表

--不冲突时，多个样式表中的样式可层叠为一个

优先级

--样式定义冲突时，按照不同样式规则的优先级来应用样式

样式优先级

浏览器缺省设置 |低

外部样式表或者内部样式表 |

--就近优先 |

内联样式 ↓高

备注：相同的样式，如果重复定义，以最后一次的定义为准

CSS选择器

元素选择器

html文档的元素就是选择器

--比如<p>、<h1>等

<!DOCTYPE HTML>

<html>

<head>

<title>认识html标签</title>

h1{

font-weight:normal;

color:red;

}

</style>

</head>

<body>

<p>三年级时，我还是一个胆小如鼠的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p>

<p>到了三年级下学期时，我们班上了一节公开课，老师提出了一个很简单的问题，班里很多同学都举手了，甚至成绩比我差很多的，也举手了，还说着："我来，我来。"我环顾了四周，就我没有举手。</p>

</body>

</html>

类选择器

类选择器允许以一种独立于文档元素的方式来指定样式

--语法为：className{color:red;}

所有能够附带class属性的元素都可以使用此样式声明

--将元素的class属性的值设置为样式类名

<!DOCTYPE HTML>

<html>

<head>

<title>认识html标签</title>

.stress{

color:red;

}

.setGreen{

color:green;

}

</style>

</head>

<body>

<p>三年级时，我还是一个<span class="stress">胆小如鼠</span>的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个<span class="stress">勇气</span>来回答老师提出的问题。学校举办的活动我也没勇气参加。</p>

<p>到了三年级下学期时，我们班上了一节<span class="setGreen">公开课</span>，老师提出了一个很简单的问题，班里很多同学都举手了，甚至成绩比我差很多的，也举手了，还说着："我来，我来。"我环顾了四周，就我没有举手。</p>

</body>

</html>

可以将类选择器和元素选择器结合起来使用，以实现对某种元素中不同样式的细分控制

语法为：元素选择器.className{}

--先声明一个元素选择器

--然后使用一个点号(.)代表将使用类选择器

--然后声明一个类的名称

--最后使用一对大括号声明样式规则

将样式规则与附带class属性的某种元素匹配

--元素的class属性的值为分类选择器中指定的样式类名

样式表中：定义一个类选择器

p.myClass{

Color:red;

Border:1px solid black;

font-size:20px;

}

Html文档中：将相应元素的class属性的值设置为样式类的名称

id选择器

id选择器以一种独立于文档元素的方式来指定样式

它仅作用于id属性的值

语法为：

--选择器前面需要有一个#号

--选择器本身则为文档中某个元素的id属性的值

<!DOCTYPE HTML>

<html>

<head>

<title>认识html标签</title>

#stress{

color:red;

}

#setGreen{

color:green;

}

</style>

</head>

<body>

<p>三年级时，我还是一个<span id="stress">胆小如鼠</span>的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p>

<p>到了三年级下学期时，我们班上了一节<span id="setGreen">公开课</span>，老师提出了一个很简单的问题，班里很多同学都举手了，甚至成绩比我差很多的，也举手了，还说着："我来，我来。"我环顾了四周，就我没有举手。</p>

</body>

</html>

类和ID选择器的区别

相同点：可以应用于任何元素

不同点：

1.ID选择器只能在文档中使用一次。与类选择器不同，在一个HTML文档中，ID选择器只能使用一次，而且仅一次。而类选择器可以使用多次

2.可以使用类选择器词列表方法为一个元素同时设置多个样式，我们可以为一个元素同时设多个样式，但只可以用类选择器的方法实现，ID选择器是不可以的(不能使用ID词列表)

<!DOCTYPE HTML>

<html>

<head>

<title>类和ID选择器的区别</title>

.stress{

color:red;

}

.bigsize{

font-size:25px;

}

#stressid{

color:red;

}

#bigsizeid{

font-size:25px;

}

</style>

</head>

<body>

<p>到了<span class="stress bigsize">三年级</span>下学期时，我们班上了一节公开课，老师提出了一个很简单的问题，班里很多同学都举手了，甚至成绩比我差很多的，也举手了，还说着："我来，我来。"我环顾了四周，就我没有举手。</p>

<p>到了<span id="stressid bigsizeid">三年级</span>下学期时，我们班上了一节公开课，老师提出了一个很简单的问题，班里很多同学都举手了，甚至成绩比我差很多的，也举手了，还说着："我来，我来。"我环顾了四周，就我没有举手。</p>

</body>

</html>

子选择器

子选择器即大于符号(>)，用于选择指定标签元素的第一代子元素

<!DOCTYPE HTML>

<html>

<head>

.food>li{border:1px solid red;}/*添加边框样式（粗细为1px，颜色为红色的实线）*/

.first>span{border:1px solid red;}

</style>

</head>

<body>

<p class="first">三年级时，<span>我还是一个<span>胆小如鼠</span>的小女孩</span>，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p>

<li>水果

<ul>

</ul>

</li>

<li>蔬菜

<ul>

</ul>

</li>

</ul>

</body>

</html>

包含(后代)选择器

包含选择器，即加入空格，用于选择指定标签元素下的后辈元素

请注意这个选择器与子选择器的区别，子选择器仅是指它的直接后代，或者你理解为作用于子元素的第一代后代。而后代选择器是作用域所有子后代元素。后代选择器通过空格来进行选择，而子选择器是通过>进行选择

总结：>作用域元素的第一代后代，空格作用于元素的所有后代

<!DOCTYPE HTML>

<html>

<head>

<title>后代选择器</title>

.first span{color:red;}

.food li{

border:1px solid red;/*添加边框样式（粗细为1px，颜色为红色的实线）*/

}

</style>

</head>

<body>

<p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p>

<li>水果

<ul>

</ul>

</li>

<li>蔬菜

<ul>

</ul>

</li>

</ul>

</body>

</html>

通用选择器

通用选择器*号指定，它的作用是匹配html中所有标签元素

<!DOCTYPE HTML>

<html>

<head>

* {color:red;}

font-size:20px;

}

</style>

</head>

<body>

</body>

</html>

伪类选择器

伪类用于向某些选择器添加特殊的效果

使用冒号(:)作为结合符，结合符左边是其他选择器，右边是伪类

常用伪类

--:link

--:active

--:visited

--:hover

--:focus

<!doctype html>

<html>

<head>

<title>伪类选择器</title>

<style>

a:link{color:red;}

a:visited{color:green;}

a:hover{color:blue;}

a:active{color:yellow;}

img{

width:500px;

height:500px;

}

img:hover{

width:700px;

height:700px;

}

</style>

<!--伪类选择器

a:link{color:red;}未访问的连接状态

a:visited{color:green;}已访问的链接状态

a:hover{color:blue;}鼠标滑过链接状态

a:active{color:yellow;}鼠标按下时的状态-->

</head>

<body>

<div>

<a href="#">伪类选择器</a>

</div>

<div>

<div>

</body>

<!--选择符的权重

CSS中用四位数字表示权重，权重的表达方式如0，0，0，0

类型选择符的权重为0001 a p div form....1

class选择符的权重为0010 .class 10

id选择符的权重为0100 # 100

子选择符的权重为0000

属性选择符的权重为0010

伪类选择符的权重为0010

伪元素选择符的权重为0010

包含选择符的权重：为包含选择符的权重之和

内联样式的权重为1000

继承样式的权重为0000

注：如果权重相同时，则执行后写的样式-->

</html>

选择器分组

选择器声明为以逗号隔开的选择器列表

--将一些相同的规则作用于多个元素

<!DOCTYPE HTML>

<html>

<head>

<title>分组选择符</title>

.first,#second span{color:green;}

</style>

</head>

<body>

<p id="second">到了三年级下学期时，我们班上了一节公开课，老师提出了一个很<span>简单</span>的问题，班里很多同学都举手了，甚至成绩比我差很多的，也举手了，还说着："我来，我来。"我环顾了四周，就我没有举手。</p>

</body>

</html>

派生选择器

通过依据元素在其位置的上下文关系来定义样式

--选择器一端包括两个或多个用空格分隔的选择器

样式表中：定义选择器分组

h1 span{

color:#00f;

}

Html文档中：

<h1>a<span>important</span>question.</h1>

<span>other</span>

CSS的继承、层叠和特殊性

继承

CSS的某些样式是具有继承性的，那么什么是继承呢？

继承是一种规则，它允许样式不仅应用于某个特定HTML标签元素，而且应用于其后代

注意：有些CSS样式是不具有继承性的

<!DOCTYPE HTML>

<html>

<head>

p{color:red;}/*color具有继承性*/

p{border:1px solid red;}/*border:1px solid red 不具有继承性*/

</style>

</head>

<body>

</body>

</html>

特殊性

有时候我们为同一个元素设置了不同的CSS样式代码，那么元素会启用哪个CSS样式？

浏览器是根据权值来判断使用哪种CSS样式，权值高的就使用哪种CSS样式

权值的规则：

标签的权值为1，类选择器符的权值为10，ID选择符的权值最高为100

例如如下代码：

P{color:red;}/*权值为1*/

P span{color:green;}/*权值为1+1=2*/

.warning{color:white;}/*权值为10*/

P span.warning{color:purple;}/*权值为1+1+10=12*/

#footer .note p{color:yellow;}/*权值为100+10+1=111*/

注意：还有一个权值比特殊--继承也有权值但很低，有的文献提出它只有0.1，所以可以理解为继承的权值最低

<!DOCTYPE HTML>

<html>

<head>

p{color:red;}

.first{color:green;}/*因为权值高显示为绿色*/

span{color:pink;}/*设置为粉色*/

p span{color:purple;}

</style>

</head>

<body>

<p id="second">到了三年级下学期时，我们班上了一节公开课，老师提出了一个很简单的问题，班里很多同学都举手了，甚至成绩比我差很多的，也举手了，还说着："我来，我来。"我环顾了四周，就我没有举手。</p>

</body>

</html>

层叠

如果在HTML文件中对于同一个元素可以有多个css样式存在并且这多个css样式具有相同权重值怎么办？

层叠就是在html文件中对于同一个元素可以有多个css样式存在，当有相同权重的样式存在时，会根据这些css样式的前后顺序来决定，处于最后面的css样式会被应用

<!DOCTYPE HTML>

<html>

<head>

p{color:red;}

p{color:green;}

p{color:pink;}/*层叠，权重相同按先后顺序覆盖前面的*/

</style>

</head>

<body>

</body>

</html>

重要性

做网页代码时，有些特殊的情况需要为某些样式设置具有最高权值？

我们可以使用!Important来解决

注意：!Important要卸载分号的前面

<!DOCTYPE HTML>

<html>

<head>

<title>!important</title>

p{color:red!important;}

p.first{color:green;}

</style>

</head>

<body>

<p id="second">到了三年级下学期时，我们班上了一节公开课，老师提出了一个很<span class="first">简单</span>的问题，班里很多同学都举手了，甚至成绩比我差很多的，也举手了，还说着："我来，我来。"我环顾了四周，就我没有举手。</p>

</body>

</html>

CSS格式化排版

样式单位

%：百分比

in：英寸

cm：厘米

mm：毫米

pt：磅(1pt等于1/72英寸)

px：像素(计算机屏幕上的一个点)

em：1em等于当前的字体尺寸，2em等于当前字体尺寸的两倍

rgb(x,x,x)：RGB值，如rgb(255,0,0)

rgb(x%,x%,x%)：RGB百分比值，如rgb(100%,0%,0%)

#rrggbb：十六进制数，如#ff0000

#rgb：简写的十六进制数，如#f00

表示颜色的英文单词，如red

文字排版-字体

css样式为网页中的文字设置字体、字号、颜色等样式属性

指定字体

--font-family:value1,value2;

<!DOCTYPE HTML>

<html>

<head>

<title>认识html标签</title>

body{font-family:"Microsoft Yahei";}

</style>

</head>

<body>

</body>

</html>

文字排版-字号、颜色

css样式为网页中的文字设置字体、字号、颜色等样式属性

字体大小

--font-size:value;

<!DOCTYPE HTML>

<html>

<head>

body{font-size:12px;color:#666;}

.stress{font-size:20px;color:red;}

</style>

</head>

<body>

<p>三年级时，我还是一个<span class="stress">胆小如鼠</span>的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p>

<p>到了三年级下学期时，我们班上了一节公开课，老师提出了一个很简单的<span>问题</span>，班里很多同学都举手了，甚至成绩比我差很多的，也举手了，还说着："我来，我来。"我环顾了四周，就我没有举手。</p>

</body>

</html>

文字排版-粗体

css样式来改变文字的样式：粗体、斜体、下划线、删除线

字体加粗

--font-weight:normal/bold/bolder/lighter;

normal：正常

bold：粗体

bolder：特粗体

lighter：细体

<!DOCTYPE HTML>

<html>

<head>

p span{font-weight:bold;}

a{font-weight:bold;}/*给批评加粗*/

</style>

</head>

<body>

<p>三年级时，我还是一个<span class="stress">胆小如鼠</span>的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会<a href="http://www.imooc.com">批评</a>我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p>

</body>

</html>

文字排版-斜体

css样式来改变文字的样式：粗体、斜体、下划线、删除线

字体斜体

--font-style:normal/italic/oblique;

normal：正常

italic：斜体

oblique：倾斜的字体

<!DOCTYPE HTML>

<html>

<head>

a {

font-style:italic;

}

font-style:italic;

}/*把段落中的文字全部设置为斜体*/

</style>

</head>

<body>

<p>三年级时，我还是一个<a>胆小如鼠</a>的小女孩。</p>

</body>

</html>

文字排版-下划线

css样式来改变文字的样式：粗体、斜体、下划线、删除线

字体下划线

--text-decoration:underline;

<!DOCTYPE HTML>

<html>

<head>

<title>下划线样式</title>

a {

text-decoration:underline;

}

span{text-decoration:underline;}/*给三年级加下划线*/

</style>

</head>

<body>

<p><span>三年级</span>时，我还是一个<a>胆小如鼠</a>的小女孩。</p>

</body>

</html>

文字排版-删除线

css样式来改变文字的样式：粗体、斜体、下划线、删除线

文字删除线

--text-decoration:line-through;

<!DOCTYPE HTML>

<html>

<head>

.oldPrice{text-decoration:line-through;}/*对300加删除线*/

</style>

</head>

<body>

</body>

</html>

段落排版-缩进

中文文字中的段前习惯空两个文字的空白，这个特殊的样式

text-indent:length/percentage

length:用长度值指定文本的缩进。可以为负值

percentage:用百分比指定文本的缩进。可以为负值

<!DOCTYPE HTML>

<html>

<head>

p{text-indent:2em;}/*给文字前面加缩进*/

</style>

</head>

<body>

<h1>了不起的盖茨比</h1>

<p>1922年的春天，一个想要成名名叫尼克?卡拉威（托比?马奎尔Tobey Maguire 饰）的作家，离开了美国中西部，来到了纽约。那是一个道德感渐失，爵士乐流行，走私为王，股票飞涨的时代。为了追寻他的美国梦，他搬入纽约附近一海湾居住。</p>

<p>菲茨杰拉德，二十世纪美国文学巨擘之一，兼具作家和编剧双重身份。他以诗人的敏感和戏剧家的想象为"爵士乐时代"吟唱华丽挽歌，其诗人和梦想家的气质亦为那个奢靡年代的不二注解。</p>

</body>

</html>

段落排版-行间距(行高)

line-height:normal/length/percentage/number

normal:允许内容顶开或溢出指定的容器边界

length：用长度值指定行高。可以为负值

percentage：用百分比指定行高，其百分比取值是基于字体的高度尺寸。可以为负值

number：用乘积因子指定行高。可以为负值

<!DOCTYPE HTML>

<html>

<head>

p{line-height:2em;}/*设置行高*/

</style>

</head>

<body>

</body>

</html>

段落排版-中文字间距、字母间距

中文字间隔、字母间隔设置：

想在网页排版中设置文字间隔或者字母间隔就可以使用letter-spacing来实现

单词间距设置：

设置英文单词之间的间距可以使用word-spacing来实现

<!DOCTYPE HTML>

<html>

<head>

h1{letter-spacing:20px;}/*将字母间距设置为20像素*/

</style>

</head>

<body>

<h1>hello world!你好！</h1>

</body>

</html>

段落排版-对齐

想为块状元素的文本、图片设置居中样式可以使用text-align样式代码

text-align:left/center/right/justify/start/end

left:内容左对齐

center：内容居中对齐

right：内容右对齐

justify：内容两端对齐(firefox能看到效果)

start：内容对齐开始边界

end：内容对齐结算边界

<!DOCTYPE HTML>

<html>

<head>

div{text-align:center;}/*为图片设置水平居中*/

</style>

</head>

<body>

</body>

</html>

CSS盒模型

元素分类

html中的标签元素分为三种不同类型：块状元素、内联元素(行内元素)和内联块状元素

常用的块状元素：

常见的内联元素:

常见的内联块状元素:

元素分类-块级元素

html中<div>、<p>、<h1>、<from>、<ul>和<li>就是块级元素

display:block就是将元素设置为块级元素

none：让生成的元素根本没有框，该框及其所有内容就不再显示，不占用文档中的空间

block：让行内元素(比如<a>元素)表现得像块级元素一样

块级元素特点：

1.每个块级元素都从新的一行开始，并且其后的元素也另起一行

2.元素的高度、宽度、行高以及顶和底边距都可设置

3.元素宽度在不设置的情况下，是它本身父容器的100%(和父元素的宽度一致)，除非设定一个宽度

<!DOCTYPE HTML>

<html>

<head>

<title>内联块状元素</title>

div,p,a{background:pink;}

a{display:block;}/*将内联元素a转换为块状元素*/

</style>

</head>

<body>

<p style="display:none">kanbujaikanbujain</p>

</body>

</html>

元素分类-内联元素

html中<span>、<a>、<label>、<strong>和<em>就是内联元素(行内元素)(inline)元素

display:inline就是将块级元素设置为内联元素

inline：让块级元素(比如<p>元素)表现得像内联元素一样

内联元素特点：

1.和其它元素都在一行上

2.元素的高度、宽度及顶部和底部边距不可设置

3.元素的宽度就是它包含的文字或图片的宽度，不可改变

<!DOCTYPE HTML>

<html>

<head>

<title>行内元素标签</title>

a,span,em,div{

background:pink;/*设置a、span、em标签背景颜色都为粉色*/

}

div{

display:inline;/*将块级元素设置成内联元素*/

}

</style>

</head>

<body>

<div>div块级元素</div>

</body>

</html>

元素分类-内联块状元素

内联块状元素(inline-block)就是同时具备内联元素、块状元素的特点display:inline-block就是将元素设置为内联块状元素

<img><input>就是内联块状标签

Inline-block元素特点：

1.和其他元素都在一行上

2.元素的高度、宽度、行高以及顶和底边距都可设置

<!DOCTYPE HTML>

<html>

<head>

<title>内联块状元素</title>

display:inline-block;/*将内联元素设置为内联块状元素*/

width:20px;/*在默认情况下宽度不起作用*/

height:20px;/*在默认情况下高度不起作用*/

background:pink;/*设置背景颜色为粉色*/

text-align:center; /*设置文本居中显示*/

}

</style>

</head>

<body>

</body>

</html>

盒子模型

盒子模型(box model)所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素

不同部分的说明：

Margin(外边距) - 清除边框外的区域，外边距是透明的

Border(边框) - 围绕在内边距和内容外的边框

Padding(内边距) - 清除内容周围的区域，内边距是透明的

Content(内容) - 盒子的内容，显示文本和图像

盒模型-边框(一)border

边框可以设置粗细、样式和颜色(边框三个属性)

简写方式

border：width style color;

单边定义

border-left/right/top/bottom：width style color;

注意：

1.border-style(边框样式)：dashed(虚线)/dotted(点线)/solid(实线)

2.border-color(边框颜色)：可以是十六进制颜色

3.border-width(边框宽度)：thin/medium/thick(不常用)，常用像素(px)

<!DOCTYPE HTML>

<html>

<head>

p{border:2px dotted #ccc;}/*给p标签添加边框宽度为2px、样式为虚线、颜色为#ccc*/

</style>

</head>

<body>

</body>

</html>

盒模型-边框(二)border

只为一个方向的边框设置样式：

border-top:width style color;

border-bottom:width style color;

border-left:width style color;

border-right:width style color;

<!DOCTYPE HTML>

<html>

<head>

li{

border-bottom:1px dotted #ccc;/*为li标签设置下边框样式*/

}

</style>

</head>

<body>

<ul>

<li>别让不会说话害了你</li>

<li>二十七八岁就应该有的见识</li>

<li>别让不好意思害了你</li>

</ul>

</body>

</html>

盒模型-宽度和高度

CSS内定义的width和height指的是填充以里的内容范围

因此一个元素时间宽度(盒子的宽度)=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界

增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸

<!DOCTYPE HTML>

<html>

<head>

<title>宽度和高度</title>

li{

border-bottom:1px dotted #ccc;

width:200px;height:30px;/*为列表每项设置长度200px高度30px*/

}

</style>

</head>

<body>

<ul>

<li>别让不会说话害了你</li>

<li>二十七八岁就应该有的见识</li>

<li>别让不好意思害了你</li>

</ul>

</body>

</html>

特点之一：在不设置宽度的情况下，显示为父容器的100%

盒模型-填充(内边距padding)

元素内容与边框之间是可以设置距离的。称为填充(内容与框线之间的距离)

padding:value;

单边设置

padding-top/right/bottom/left:value;

简写方式

passing:value1 value2 value3 value4;

top right bottom left

填充的顺序：上、右、下、左(顺时针)

<!DOCTYPE HTML>

<html>

<head>

#box1{

width:100px;/*设置内容宽度100px*/

height:100px;/*设置内容高度100px*/

padding:10px;/*设置填充为10px*/

border:1px solid red;/*设置边框1px 实线红色*/

}

</style>

</head>

<body>

</body>

</html>

背景色-background-color

Background-color属性用于为元素设置背景色，该属性接受任何合法的颜色值

为元素背景设置一种纯色

背景图片-background-image

默认值是none，表示背景上没有放置任何图像

如果需要设置一个背景图像，需要用起始字母url附带一个图像的URL值

--可以是相对URL或者绝对URL

body{

Background-image:url("img/1.jpg");

}

背景重复-background-repeat

默认情况下，背景图像在水平和垂直方向上重复出现，创建一种称为“墙纸”的效果

可以使用background-repeat属性控制背景图像的平铺效果

Background-repeat可取值为

--repeat:在垂直方向和水平方向重复，为重复值

--repeat-x:仅在水平方向重复

--repeat-y:仅在垂直方向重复

--no-repeat:仅显示一次

<!doctype html>

<html>

<head>

<title>CSS背景重复</title>

#bar{

height:76px;

width:200px;

background-image:url(img/1.jpg);

background-repeat:repeat-x;

}

</style>

</head>

<body>

</div>

</body>

</html>

背景定位-background-position

Background-position属性改变图像在背景中的位置

该属性的取值为：

--x% y%：第一个值是水平位置，第二个值是垂直位置，表示沿着x轴(水平)和y轴(垂直)的百分比，左上角是0%0%，右下角是100%100%

--x y：第一个值是水平位置，第二个值是垂直位置，表示沿着x轴(水平)和y轴(垂直)的绝对长度，左上角是0 0

--left：在页面或者包含元素的左边显示

--center：在页面或者包含元素的中间显示

--right：在页面或者包含元素的右边显示

--top：在页面或者包含元素的顶部显示

--bottom：在页面或者好包含元素的底部显示

<head>

<title>CSS背景图片定位</title>

background-image:url(img/1.jpg);

background-position:center;

background-repeat:no-repeat;

height:200px;

border:1px solid gray;

}

</style>

</head>

<body>

<p>这是一个具有背景图像的段落</p>

</body>

背景图片的固定-background-attachment

默认情况下，背景图像会随着页面的滚动而移动

可以通过background-attachment属性来设置

--默认值是scroll：默认情况下，背景会随文档滚动

--可取值为fixed：背景图像固定，并不会随着页面的其余部分滚动，常用于实现称为水印的图像

盒模型-边界(外边距margin)

外边距：与下一个元素之间的空间量

margin:value;

单边设置

margin-top/right/bottom/left:value;

简写方式

margin:value1 value2 value3 value4;

top right bottom left

总结：padding和margin区别，padding在边框里，margin在边框外

<!DOCTYPE HTML>

<html>

<head>

div{

width:300px;

height:300px;

border:1px solid red;

}

#box1{margin-bottom:30px;}/*为第一个div设置下边距30像素*/

</style>

</head>

<body>

</body>

</html>

CSS布局模型

Css包含3种基本的布局模型：

1.流动模型(flow)

2.浮动模型(float)

3.层模型(layer)

流动模型(一)(flow)

流动(flow)是默认的网页布局模式。

流动布局模型具有2个典型的特征：

1.块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，默认状态下块状元素的宽度都为100%，实际上块状元素都会以行的形式占据位置(元素框之间的垂直距离是由框的垂直外边距计算出来的)

<!DOCTYPE HTML>

<html>

<head>

<title>流动模式下的块状元素</title>

#box1{

width:300px;

height:100px;

}

div,h1,p{

border:1px solid red;

}

</style>

</head>

<body>

<p>文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段。</p>

</body>

</html>

流动模型(二)(flow)

流动布局模型具有2个典型的特征：

2.流动模型下，内联元素都会在所处的包含元素内从左到右水平分布显示(内联元素可不像块状元素独占一行)

<!DOCTYPE HTML>

<html>

<head>

<title>流动模式下的内联元素</title>

</style>

</head>

<body>

<a href="http://www.imooc.com">www.imooc.com</a><span>强调</span><em>重点</em>

</body>

</html>

浮动概述

浮动定位是指

--将元素排除在普通流之外

--将浮动元素放置在包含框的左边或者右边

--浮动元素依旧位于包含框之内

浮动的框可以向左或者向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止

--经常使用它来实现特殊的定位效果

浮动定位

包含框中有三个元素框，如果把框1向右浮动，则它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘

当框1向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘

因为框1不再处于文档流中，所以它不占据空间，实际上覆盖住了框2，使框2从视图中消失

如果把所有三个框都向左移动，那么框1向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框：三个框在同一行上显示

备注：在需要设置多个块级元素同行排列的情况下会非常有用

如果包含框太窄，那么其它浮动块会自动向下移动，直到足够的空间

如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”

浮动(float)属性

如果需要设置框浮动在包含框的左边或者右边，可以通过float属性来实现

float属性定义元素在哪个方向浮动

--在CSS中，任何元素都可以浮动

float:none/left/right;

<!doctype html>

<html>

<head>

<title>CSS浮动属性</title>

div{

border:2px red solid;

width:200px;

height:400px;

float:left;/*div向左浮动*/

}

</style>

<!--CSS浮动属性，float：定义网页中其它文本如何环绕该元素显示

left：元素活动浮动在文本左面

right：元素浮动在右面

none：默认值，不浮动-->

</head>

<body>

</body>

</html>

什么是层模型

层布局模型就像图像软件ps中非常流行的图层编辑功能一样，每个图层能够精确定位操作，但是网页设计领域，由于网页大小的活动性，层布局没能收到热捧。但是在网页上局部使用层布局还是有其方便之处

css定义了一组定位(positioning)属性来支持层布局模型

定位：定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置

层模型有三种形式：

1.绝对定位(position:absolute)

2.相对定位(position:relative)

3.固定定位(position:fixed)

层模型-定位属性(position)

position：规定元素的定位类型，可取值：static/relative/absolute/fixed

偏移属性：top、bottom、left、right属性，用于定义元素框的偏移位置

z-index：设置元素的堆叠顺序

float/clear：浮动定位属性

备注：使用position属性和偏移属性，实现普通流定位、相对定位、绝对定位和固定定位，使用float属性实现浮动定位、其他属性为辅助属性

Position属性：更改定位模式为相对定位、绝对定位或者固定定位

--position：static/relative/absolute/fixed;

偏移属性：实现元素框位置的偏移

--top/bottom/right/left：value;

堆叠顺序

--z-index：value;

层模型-绝对定位

绝对定位：需要设置position：absolute(表示绝对定位)，作用将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口

<!doctype html>

<html>

<head>

<style>

div{

border:1px solid black;

width:80px;height:30px;

background-color:silver;

}

div.parent{

border:1px solid gray;width:200px;height:150px;

}

div.parent1{

border:1px solid gray;

width:200px;height:150px;

position:relative;

}

</style>

</head>

<body>

<span>没有设置定位属性时<span>

</div>

<span>设置为绝对定位：<span>

<p>元素框不再占用原有位置，会产生重叠，相对于最近的已定位祖先元素定位</p>

<p>如果没有已定位的祖先元素，那么它的位置相对于最初的包含块，比如body元素</p>

</div>

<span>设置为绝对定位<span>

<p>会根据父元素div的位置进行定位，因为父元素设置了定位属性</p>

</div>

</body>

</html>

层模型-相对定位

相对定位：设置position：relative(表示相对定位)，它通过left、right、top、bottom属性确定元素在正常文档中的偏移位置。相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来)，然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动

<!DOCTYPE HTML>

<html>

<head>

<title>relative样式</title>

#div1{

width:200px;

height:200px;

border:2px red solid;

position:relative;/**/

left:100px;

top:50px;

}

</style>

</head>

<body>

<div id="div1"><span>偏移前的位置还保留不动，覆盖不了前面的div没有偏移前的位置</span></div>

</body>

</html>

层模型-固定定位

fixed：表示固定定位，与absolute定位类型类似，但它的相对移动的坐标是视图(屏幕内的网页窗口)本身。由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响，这与background-attachment:fixed;属性功能相同

<!DOCTYPE HTML>

<html>

<head>

<title>relative样式</title>

#div1{

width:200px;

height:200px;

border:2px red solid;

position:fixed;/*实现浏览器视图右下角定位div层*/

bottom:0;

right:0;

}

</style>

</head>

<body>

<p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。</p>

</body>

</html>

Relative与absolute组合使用

绝对定位的方法：使用position：absolute可以实现被设置元素相对于浏览器(boy)设置定位以后，大家有没有想过可以相对于其它元素进行定位？可以使用position：relative

<!DOCTYPE HTML>

<html>

<head>

<title>相对参照元素进行定位</title>

div{border:2px red solid;}

#box1{

width:200px;

height:200px;

position:relative;

}

#box2{

position:absolute;

top:20px;

left:30px;

}

/*下面是任务部分*/

#box3{

width:200px;

height:200px;

position:relative;

}

#box4{

width:99%;

position:absolute;/*把box4定位到图片(box3)的底部*/

bottom:0;

left:0;

}

</style>

</head>

<body>

<div id="box2">相对参照元素进行定位</div>

</div>

<h1>下面是任务部分</h1>

<div id="box4">当我还是三年级的学生时是一个害羞的小女生。</div>

</div>

</body>

</html>

CSS代码缩写，占用更少的带宽

盒模型代码简写

盒模型外边距(margin)、内边距(padding)和边框(border)设置上下左右四个方向的边距是按照顺时针方向设置的：上右下左

三种缩写方法：

1.如果top、right、bottom、left的值相同可缩写：margin：10px

2.如果top和bottom值相同、left和right的值相同可缩写：margin：10px 20px

3.如果left和right的值相同可缩写：margin：10px 20px 30px

注意：padding、border的缩写方法和margin一致

<!DOCTYPE HTML>

<html>

<head>

<title>relative样式</title>

padding:13px;

margin:10px 40px;

}

</style>

</head>

<body>

</body>

</html>

颜色值缩写

颜色的CSS样式也可以缩写，当你设置的颜色是16进制的色彩值时，如果每两位的值相同，可以缩写一半。如：P{color:#000;}

字体缩写

网页中的字体css样式代码也可以缩写

注意：

1.使用简写方式你至少要指定font-size和font-family属性，其他的属性(如font-weight、font-style、font-variant、line-height)如未指定将自动使用默认值

2.在缩写是font-size与line-height中间要加入“/”斜杠

<!DOCTYPE HTML>

<html>

<head>

body{

/*font-style:italic;

font-variant:small-caps;

font-weight:bold;

font-size:12px;

line-height:1.6em;

font-family:"宋体",sans-serif;*/

font:12px/1.5em "宋体",sans-serif;/*缩写*/

}

</style>

</head>

<body>

<p>Littering a dark and dreary road lay the past relics of browser-specific tags, incompatible DOMs, broken CSS support, and abandoned browsers.</p>

<p>We must clear the mind of the past. Web enlightenment has been achieved thanks to the tireless efforts of folk like the W3C, WaSP, and the major browser creators.</p>

<p>The CSS Zen Garden invites you to relax and meditate on the important lessons of the masters. Begin to see with clarity. Learn to use the time-honored techniques in new and invigorating fashion. Become one with the web.</p>

</body>

</html>

单位和值

颜色值

网页中颜色设置是非常重要，有字体颜色(color)、背景颜色(background-color)、边框颜色(border)等，设置颜色的方法有很多种：

1.英文命名颜色 color：red

2.RGB颜色 color：rgb(133,45,200)

3.十六进制颜色 color：#00ffff

<!DOCTYPE HTML>

<html>

<head>

p{color:#0fc;}/*给p标签添加颜色*/

</style>

</head>

<body>

<p>当我还是三年级的学生时是一个害羞的小女生。</p>

</body>

</html>

长度值

长度单位常用到px(像素)、em、%百分比，要注意其实这三种单位都是相对单位

1.像素

像素指的是显示器上的小点(CSS规范中假设“90像素=1英寸”)

2.em

就是本元素给定字体的font-size值，如果元素的font-size为14px，那么1em=14px；如果font-size为18px，那么1em=18px

特殊情况：当给font-size设置单位为em时，此时计算的标准以p的父元素的font-size为基础

3.百分比

设置行高(行间距)为字体的130%(12*1.3=15.6px)

CSS样式设置小技巧

水平居中设置-行内元素

水平居中有两种情况：行内元素还是块状元素，块状元素里面又分为定宽块状元素，以及不定宽块状元素。首先了解一下行内元素怎么进行水平居中？

如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置text-align

:center来实现

<!DOCTYPE HTML>

<html>

<head>

<title>定宽块状元素水平居中</title>

<style>

div{

border:1px solid red;

margin:20px;/*设置外边距*/

}

.txtCenter{

text-align:center;

}

.imgCenter{text-align:center;}/*将图片设置水平居中显示*/

</style>

</head>

<body>

<div class="txtCenter">我想要在父容器中水平居中显示。</div>

</body>

</html>

水平居中设置-定宽块状元素

当被设置元素为块状元素时用text-align:center就不起作用，这时分两种情况：定宽块状元素和不定宽块状元素。定宽块状元素：块状元素的宽度width为固定值

满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中

<!DOCTYPE HTML>

<html>

<head>

<title>定宽块状元素水平居中</title>

<style>

div{

border:1px solid red;/*为了显示居中效果明显为div设置了边框*/

width:200px;/*定宽*/

margin:20px auto;/*margin-left与margin-right设置为auto*/

}

</style>

</head>

<body>

<div>我是定宽块状元素，我要水平居中显示。</div>

</body>

</html>

水平居中总结-不定宽块状元素方法(一)

在实际工作中我们会遇到需要为“不定宽度的块状元素”设置居中，比如网页上的分页导航，因为分页的数量是不确定的，所有我们不能通过设置宽度来限制它的弹性(不定宽块状元素：块状元素的宽度width不固定)

不定宽度的块状元素有三种方法居中：

1.加入table标签

2.设置display：inline方法：与第一种类似，显示类型设为行内元素，进行不定宽元素的属性设置

3.设置position：relative和left：50%：利用相对定位的方式，将元素向左偏移50%，即达到居中的目的

为什么选择方法一加入table标签？

利用table标签的长度自适应性--即不定义其长度也不默认父元素body的长度(table其长度根据其内文本长度决定)，因此可以看做一个定宽度块元素，然后再利用定宽度块状居中的margin的方法，使其水平居中

第一步：为需要设置的居中的元素外面加入一个table标签(包括<tbody>、<tr>、<td>)

第二步：为这个table设置“左右margin居中”(这个和定宽块状元素的方法一样)

<!DOCTYPE HTML>

<html>

<head>

<title>不定宽块状元素水平居中</title>

<style>

table{

margin:0 auto;

border:1px solid;

}

/*下面是任务区代码*/

.wrap{

background:#ccc;

}

</style>

</head>

<body>

<div>

<table>

<tbody>

<ul>

<li>我是第一行文本</li>

<li>我是第二行文本</li>

<li>我是第三行文本</li>

</ul>

</td></tr>

</tbody>

</table>

<table>

<tbody>

<div class="wrap">设置我所在的div容器水平居中</div>

</td></tr>

</tbody>

</table>

</div>

</body>

</html>

水平居中总结-不定宽块状元素方法(二)

第二种实现这种效果的方法，改变元素的display类型为行内元素，利用其属性直接设置

第二种方法：改变块级元素的display为inline类型(设置为行内元素显示)，然后使用text-align:center来实现居中效果

注意：优势是不用增加无语义标签，但也存在着一些问题：它将块状元素的display类型改为inline，变成了行内元素，所以少了一些功能，比如设定长度值

<!DOCTYPE HTML>

<html>

<head>

<title>不定宽块状元素水平居中</title>

<style>

.container{text-align:center;}

.container ul{list-style:none;margin:0;padding:0;display:inline;}/*margin:0;padding:0(消除文本与div边框之间的间隙)*/

.container li{margin-right:8px;display:inline;}/*margin-right：8px(设置li文本之间的间隔)*/

</style>

</head>

<body>

<ul>

</ul>

</div>

</body>

</html>

水平居中总结-不定宽块状元素方法(三)

第三种可以设置浮动和相对定位来实现

方法三：通过给父元素设置float，然后给父元素设置position：relative和left：50%，子元素设置position：relative和left：-50%来实现水平居中

理解：假想ul层的父层(即下面例子中的div层)中间有条平分线将ul层的父层(div层)平均分为两份，ul层的css代码是将ul层的最左端与ul层的父层(div层)的平分线对齐；而li层的css代码则是将li层的平分线与ul层的最左端(也是div层的平分线)对齐，从而实现li层的居中

<!DOCTYPE HTML>

<html>

<head>

<title>不定宽块状元素水平居中</title>

<style>

.container{

float:left;

position:relative;

left:50%

}

.container ul{

list-style:none;

margin:0;

padding:0;

position:relative;

left:-50%;

}

.container li{float:left;display:inline;margin-right:8px;}

/*下面是代码任务区*/

.wrap{float:left;position:relative;left:50%;}

.wrap-center{

background:#ccc;

position:relative;

left:50%;

}

</style>

</head>

<body>

<ul>

</ul>

</div>

<div class="wrap-center">我们来学习一下这种方法。</div>

</div>

</body>

</html>

垂直居中-父元素高度确定的单行文本

实际工作中也会遇到需要设置垂直居中的场景，比如好多报纸的文章标题在左右一侧时，常常会设置为垂直居中，为了用户体验性好

两种情况：父元素高度确定的单行文本，以及父元素高度确定的多行文本

第一种父元素高度确定的单行文本，怎么设置它为垂直居中？

父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的height和line-height高度一致来实现的。(height：该元素的高度，line-height：顾名思义，行高(行间距)，指在文本中，行与行之间的基线间的距离)

line-height与font-size的计算值之差，在CSS中成为“行间距”。分为两半，分别加到一个文本行内容的顶部和底部

这种文字行高与块高一致带来了一个弊端：当文字内容的长度大于块的宽时，就有内容脱离了块

<!DOCTYPE HTML>

<html>

<head>

<style>

.wrap h2{

margin:0;

height:100px;

line-height:100px;

background:#ccc;

}

</style>

</head>

<body>

<h2>hi,imooc!</h2>

</div>

</body>

</html>

垂直居中-父元素高度确定的多行文本(一)

父元素高度确定的多行文本、图片等的竖直居中的方法有两种：

方法1：使用插入table(包括tbody、tr、td)标签，同时设置vertical-align:middle

css中有一个用于竖直居中的属性vertical-align，在父元素设置此样式时，会对inline-block类型的子元素都有用

因为td标签默认情况下就默认设置了vertical-align为middle，所有不需要显示的设置

<!DOCTYPE HTML>

<html>

<head>

<title>父元素高度确定的多行文本</title>

<style>

.wrap{height:300px;background:#ccc}

</style>

</head>

<body>

<div>

<p>看我是否可以居中。</p>

</div>

</td></tr></tbody></table>

<div>

</td></tr></tbody></table>

</div>

</body>

</html>

垂直居中-父元素高度确定的多行文本(二)

除了插入table标签，可以使父元素高度确定的多行文本垂直居中之外，另一种实现方法，这种方法兼容性比较差，只供学习

方法2：在chrome、firefox及IE8以上的浏览器下可以设置块级元素的display为table-cell(设置为表格单元显示)，激活vertical-align属性，但注意IE6、7并不支持这个样式，兼容性比较差

这种方法的好处是不用添加多余的无意义的标签，单缺点也很明显，它的兼容性不是很好，不兼容IE6、7而且这样修改diaplay的block变成了table-cell，破坏了原有的块状元素的性质

<!DOCTYPE HTML>

<html>

<head>

<title>父元素高度确定的多行文本</title>

<style>

.container{

height:300px;

background:#ccc;

display:table-cell;/*IE8以上及Chrome、Firefox*/

vertical-align:middle;/*IE8以上及Chrome、Firefox*/

}

</style>

</head>

<body>

<div>

<p>看我是否可以居中。</p>

</div>

</div>

</body>

</html>

隐性改变display类型

当为元素(无论之前是什么类型元素，display：none除外)设置一下2句之一：

1.position：absolute

2.float：left或float：right

只要html代码中出现以上两句之一，元素的display显示类型就会自动变为以display：inline-block(块状元素)的方式显示，当然就可以设置元素的width和height了，且默认宽度不占满父元素

如下代码a标签是行内元素，所以设置它的width是没有效果的，但是设置为position：absolute以后就可以了

<!DOCTYPE HTML>

<html>

<head>

<title>隐性改变display类型</title>

<style>

.container a{

float:left;

width:300px;

background:#ccc;

}

</style>

</head>

<body>

<a href="#" title="">进入课程请单击这里</a>

</div>

</body>

</html>

overflow

overflow：当内容溢出元素框时如何处理

--visible

--hidden

--scroll

--auto

<!doctype html>

<html>

<head>

<title>CSS文本属性</title>

div{width:130px;height:50px;border:1px solid #000;}

div.hidden{overflow:hidden;}

div.scroll{overflow:scroll;}

div.auto{overflow:auto;}

</style>

</head>

<body>

<div>默认为显示，即使超出尺寸，也显示全部内容</div>

<hr>

<div class="hidden">文本内容超出尺寸时，隐藏文本不显示</div><hr>

<div class="scroll">总显示滚动条</div><hr>

<div class="auto">自动1：不超出不显示</div><hr>

<div class="auto">自动2：文本内容超出尺寸时，显示滚动条</div>

</body>

</html>

表格常用样式属性

边距属性：padding

尺寸属性：width、height

--设置表格或者单元格的尺寸

文本格式化属性

背景属性：设置表格或者单元格的背景色或者背景图像

border属性：设置表格的边框

<!doctype html>

<html>

<head>

<title>CSS表格样式</title>

table{

width:200px;

border:1px solid black;

}

td{

height:50px;

border:3px solid red;

}

</style>

</head>

<body>

<table>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>

垂直方向对齐

vertical-align属性

--在表单元格中，设置单元格框中的单元格内容的对齐方式

取值

--vertiacl-align:top/middle/bottom;

边框合并

如果设置了单元格的边框，相邻单元格的边框会单独显示，类似于双线边框

border-collapse属性：合并相邻的边框

--设置是否将表格边框合并为单一边框

border-collapse:separate/collapse;

<!doctype html>

<html>

<head>

table{border:2px dotted black;}

td{

width:200px;

height:50px;

border:3px solid gray;

}

table.separate{border-collapse:separate;}

table.collapse{border-collapse:collapse;}

</style>

</head>

<body>

<tr>

<td class="solid">第一行第一列</td>

<td class="dashed">第一行第二列</td>

</tr>

</table>

<tr>

<td class="solid">第一行第一列</td>

<td class="dashed">第一行第二列</td>

</tr>

</table>

</body>

</html>

边框边距

border-spacing属性

--设置相邻单元格的边框间的距离

--仅限于分隔单元格边框，即border-collapse属性为separate值的情况下，也称为边框分离模式

取值为长度值，可以为该属性指定一个或者两个值

--指定一个值：该值同时应用于水平和垂直间距

--指定两个值：第一个值指定水平间距，第二个值指定垂直间距，且两个值之间用空格隔开

<!doctype html>

<html>

<head>

table{border:2px dotted gray;

border-spacing:10px 20px;}

td{

background-color:#f0f0f0;

width:200px;

height:50px;

border-collapse:separate;

border:1px solid black;

}

</style>

</head>

<body>

<tr>

<td class="solid">第一行第一列</td>

<td class="dashed">第一行第二列</td>

</tr>

</table>

<tr>

<td class="solid">第一行第一列</td>

<td class="dashed">第一行第二列</td>

</tr>

</table>

</body>

</html>

clear属性

clear属性用于清除浮动所带来的影响

clear:none/left/right/both;

--定义了元素的哪边上下允许出现浮动元素

<!doctype html>

<html>

<head>

<title>clear</title>

</head>

<body>

</body>

</html>

cursor属性

cursor属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状

可取值：--default --pointer --crosshair --text --wait --help等

列表项标志list-style-type

List-style-type属性用于控制列表项标志的样式

--无序列表：出现在各列表项旁边的圆点

--有序列表：可能是字母、数字或另外某种计数体系中的一个符号

无序列表取值

--none：无标记

--disc：实心圆，为默认值

--circle：空心圆

--square：实心方块

有序列表取值

--none：无标记

--decimal：数字(如1,2,3,4,5)，为默认值

--lower-roman：小写罗马数字(如i,ii,iii,iv,v)

--upper-roman：大写罗马数字(如 I,II,III,IV,V)

列表项图像list-style-image

List-style-image属性使用图像来替换列表项的标记

--取值为：url()，指定图像作为有序或无序列表项的标志

堆叠顺序

一旦修改了元素的定位方式，则元素可能会发生堆叠

可以使用z-index属性来控制元素框出现的重叠顺序

z-index属性

--值为数值：数值越大表示堆叠顺序更高，即离用户更近

--拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面，即元素的显示会接近页面表面

--可以设置为负值：表示离用户更远

<!doctype html>

<html>

<head>

<style>

div{

z-index:100;border:1px solid gray;width:200px;height:100px;background-color:white;

}

div.first{

position:relative;top:-10px;left:30px;z-index:-1;background-color:silver;

}

div.second{

position:absolute;top:60px;left:150px;z-index:2;background-color:gray;

}

</style>

</head>

<body>

<div class="first">div.first,z-index:-1</div>

<div class="second">div.second,z-index:2</div>

</body>

</html>

漂游大叔

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS

为网页添加样式CSS的作用--使用CSS定义样式--各元素使用统一的样式声明！且提高来样式的可重用性和可维护性！ &lt;!doctype html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;CSS的作用&lt;/title&gt;
复制链接

扫一扫

专栏目录