CSS快速入门
CSS(Cascading Style Sheets 层叠样式表)。CSS不能单独使用,必须与HTML或XML一起协同工作,为HTML或XML起装饰作用。层叠指多个样式可以作用在同一个html的元素上,同时生效。
CSS最重要的目标是将文件的内容与它的显示分隔开来。在CSS出现前,几乎所有的HTML文件内都包含文件显示的信息,比如字体的颜色、背景应该是怎样的、如何排列、边缘、连线等等都必须一一在HTML文件内列出,有时重复列出。CSS使作者可以将这些信息中的大部分隔离出来,简化HTML文件,这些信息被放在一个辅助的,用CSS语言写的文件中。HTML文件中只包含结构和内容的信息,CSS文件中只包含样式的信息。
【HTML负责确定网页中有哪些内容,CSS确定以何种外观(大小、粗细、颜色、对齐和位置)展现这些元素。CSS可以用于设定页面布局、设定页面元素样式、设定适用于所有网页的全局样式。CSS可以零散地直接添加在要应用样式的网页元素上,也可以集中化内置于网页、链接式引入网页以及导入式引入网页。
CSS简单地说,是用来控制网页外观的一门技术。提醒初学者css入门容易,想学深还是挺难的, CSS涉及的内容太多了,从https://www.w3schools.cn/css/可以直观的感受到。CSS 样式定义多,属性很多,不同属性的组合会有不同的效果,不直观,无法像编程那样推测结果,需要大量试验试出来,靠经验积累。】
CSS基本规则语法
style-rule ::=
selectors-list {
properties-list
}
其中:
selectors-list ::=
selector[:pseudo-class] [::pseudo-element]
[, selectors-list]
properties-list ::=
[property : value] [; properties-list]
通俗地说
CSS由多组“规则”组成。每个规则由“选择器”(selector)、“属性”(property)和“值”(value)组成:
选择器(Selector):多个选择器可以半角逗号(,)隔开,用于指出网页中要应用样式规则的元素。
属性(property):CSS1、CSS2、CSS3规定了许多的属性,目的在控制选择器的样式。
值(value):指属性接受的设置值,多个关键字时大都以空格隔开。
英文花括号“{}”中的内容就是声明,它由一个属性和一个值组成,属性和值之间用半角冒号(:)隔开,属性和值合称为“特性”。多个特性间用“;”隔开,最后用“{ }”括起来。
设置网页中所有<p>和</p>标签范围内的文字的字体大小为20px,字体颜色为红色,并加粗的CSS代码:
p{
font-size:20px;
color:red;
font-weight:bold;
}
如何观看其效果?可将其嵌入下面的代码中:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS_Test1</title>
<style>
body{
background-color:#d0e4fe;
}
h1{
color:orange;
text-align:center;
}
/* [CSS注释] 设置段落字体大小为20px,字体颜色为红色,并加粗 */
p{
font-size:20px;
color:red;
font-weight:bold;
}
</style>
</head>
<body>
<h1>CSS 使用示例</h1>
<p>这是一个段落,字体大小为20px,字体颜色为红色,并加粗,看到效果了吗。</p>
</body>
</html>
说明,在这个例子中有三个选择器:body、h1和p。
保存文件名:HTML之CSS_Test1.html,保存路径D:\HTML5_CSS示例,用浏览器打开运行显示效果如下图:
CSS注释
CSS注释语法为:
/* 注释内容 */
说明:以“斜杠+星号”开始,“星号+斜杠”结束,需要注意是注释字符均为英文半角小写。CSS中的注释通常用于解释样式规则声明的用途。它将帮助您和其他人理解您在编辑样式表时如何处理样式规则。浏览器不显示注释。
在HTML中CSS引入方式
有4种:行内样式、内嵌样式、链接样式和导入样式。
1)行内样式
行内样式是最简单、最直接的一种CSS引入方式,它通过设置HTML标签的style属性来实现样式的应用,具体的写法如下:
<p style = "color:#F00;font-size:20px;">段落中的文字</p>
从上面的示例代码中可以看出,添加行内样式的做法是在HTML标签中添加style="",引号中放入想设置的样式代码。但这样的做法有很多缺点,如违背网页设计结构与表现分离的原则、网页文件太大、不利于搜索引擎抓取网页内容、网页后期维护不方便等。因此,在设计网页时不推荐使用行内样式。
完整代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS_TestA</title>
</head>
<body>
<h1>CSS 使用示例:行内样式</h1>
<p style = "color:#F00;font-size:20px;">段落中的文字</p>
</body>
</html>
保存文件名:HTML之CSS_TestA.html,保存路径D:\HTML5_CSS示例(提示新手,保存文件名、路径,可根据你的情况而定),用浏览器打开运行显示效果如下图:
2)内嵌样式
内嵌样式的做法是将CSS代码写在网页代码中,并且用<style>和</style>进行声明,具体写法如下:
<style type = "text/css">
p{
color:#F00;
font-size:20px;
}
a{text-decoration:line-through;}
</style>
使用内嵌样式的缺点也很明显,CSS代码写在网页中会使网页文件变大,后期维护也不方便。
具体示例可参见最前面的例子。
3)链接样式
链接样式将CSS代码写在单独的文件中,然后在<head>与</head>之间通过<link>标签引入该文件,从而实现样式的应用。具体写法如下:
<head> <link href = "css/test02.css" rel = "stylesheet" type = "text/css">
</head>
CSS样式的引入是通过<link>标签实现的。该标签的属性href用于指明欲引入的CSS文件的路径;属性type规定被链接文档的MIME类型,这里指明是CSS代码;属性rel规定当前文档与被链接文档之间的关系,目前只有“stylesheet”值得到了所有浏览器的支持,指明被链接的文档是一个样式表。
链接样式实现了负责页面框架的HTML代码与负责页面表现的CSS代码的分离,使网页的前期制作和后期维护变得十分方便,所以建议读者多采用链接样式。
要点:a. 定义css资源文件。 b. 在head标签内,定义link标签,引入外部的资源文件。
完整代码如下:
(1)CSS文件代码如下:
/* 将段落显示为黄底红字粗体 */
p{
color:red; background:yellow; font-weight:bold;
}
提示,此例中CSS文件,内容简单,但足够示意了,现实中可以比较复杂。
保存文件名:ABC.css,保存路径D:\HTML5_CSS示例。
(2)网页文件代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS_TestB</title>
<head> <link href = "ABC.css" rel = "stylesheet" type = "text/css">
</head>
<body>
<h1>CSS 使用示例:链接样式</h1>
<p> 这个段落将被显示为黄底红字粗体。</p>
</body>
</html>
保存文件名:HTML之CSS_TestB.html,保存路径D:\HTML5_CSS示例,注意HTML之CSS_TestB.html和ABC.css路径关系,用浏览器打开运行显示效果如下图:
4)导入样式
导入样式采用@import将CSS样式文件导入网页文件中,在HTML初始化时,被导入的样式文件中的CSS代码会成为文件的一部分,类似第二种内嵌样式。导入样式的具体写法如下:
<head>
<style type = "text/css">
@import url("css/test03.css");
</style>
</head>
样式的导入是通过关键字@import实现的,url()指明样式文件的相对地址。
由于导入样式的原理是将CSS样式文件的内容导入网页中,导入样式与内嵌样式一样会使网页文件变大,后期维护也不方便,因此不建议使用导入样式。
完整代码如下:
(1)CSS文件ABC.css,内容将上例
(2) )网页文件代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS_TestC</title>
<style type = "text/css">
@import url("ABC.css");
</style>
</head>
<body>
<h1>CSS 使用示例:导入样式</h1>
<p> 这个段落将被显示为黄底红字粗体。</p>
</body>
</html>
保存文件名:HTML之CSS_TestC.html,保存路径D:\HTML5_CSS示例,用浏览器打开运行显示效果如下图:
选择器
要使用CSS对HTML页面中的元素实现一对一、一对多或者多对一的控制,就需要用到CSS选择器。HTML页面中的元素就是通过CSS选择器进行控制的。通过CSS选择器可以精确地筛选出想要控制的HTML元素。
每一条CSS样式定义由两部分组成,形式如下:
选择器{
样式;
}
选择器指明了{}中的“样式”的作用对象,也就是作用于网页中的哪些元素。
常用的CSS选择器有标签选择器、类选择器、ID选择器、后代选择器和子选择器、分组选择器、伪类选择器、通用选择器等。
要针对没有标签定义范围进行样式设置时,可利用HTML的<div>与<span>标签。<div> 元素是块级元素,它是可用于组合其他 HTML 元素的容器,当与 CSS 一同使用,<div> 元素可用于对大的内容块设置样式属性。<span> 元素是内联元素,可用作文本的容器,当与 CSS 一同使用时,<span> 元素可用于为部分文本设置样式属性。
常用的CSS选择器的使用
标签选择器
标签选择器其实就是HTML代码中的标签。一个完整的HTML页面由很多不同的标签组成,而标签选择器则决定哪些标签采用相应的CSS样式。如前面的例子中<p>标签。下例给网页中所有图片加红色边框:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS_Test2</title>
<style>
img{
border-width:3px;
border-style:solid;
border-color:#F00;
}
</style>
</head>
<body>
<h2>网页中所有图片加红色边框</h2>
<table>
<tr>
<td>
<a><img src="imgs/tu1.jpg" width="210" height="160" ></a>
</td>
<td>
<a><img src="imgs/tu2.jpg" width="210" height="160" ></a>
</td>
</tr>
</table>
</body>
</html>
保存文件名:HTML之CSS_Test2.html,保存路径D:\HTML5_CSS示例(路径根据你的实际而定),且此路径中建立imgs文件夹,其中有两张图片tu1.jpg和tu2.jpg
用浏览器打开运行显示效果如下图:
☆类选择器(class selector)
类选择器以一种独立于文档元素的方式来指定样式。
该选择器可以单独使用,也可以与其他元素结合使用。
类选择器的命名以“.”开头,可以包含字符[a-zA-Z0-9]、连字号(-)和下画线(_),不能以数字或一个连字号后跟数字开头。如:.important {color:red;}
类选择器可以结合元素选择器来使用——选择器后跟类选择器。如:p.important {color:red;}
下面给出示例代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS_Test3</title>
<style>
.user
{ font-size: 30px;
background-color:red;
}
.login
{ font-size: 20px;
background-color:blue;
}
</style>
</head>
<body>
<div class='user'>你好。这是一个 DIV 元素。</div>
<p class="login">这是一个p元素。</p>
<p>这是一个p元素。</p>
</body>
</body>
</html>
保存文件名:HTML之CSS_Test3.html,保存路径D:\HTML5_CSS示例(路径根据你的实际而定),用浏览器打开运行显示效果如下图:
用浏览器打开运行显示效果如下图:
☆ID选择器
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
id 选择器以 "#" 开头来定义。如:#red {color:red;}
下面的两个 id 选择器,第一个可以定义元素的颜色为红色,第二个定义元素的颜色为绿色:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS_Test4</title>
<style>
#red {color:red;}
#green {color:green;}
</style>
</head>
<body>
<p id="red">这个段落是红色。</p>
<p id="green">这个段落是绿色。</p>
</body>
</body>
</html>
保存文件名:HTML之CSS_Test4.html,保存路径D:\HTML5_CSS示例(路径根据你的实际而定),用浏览器打开运行显示效果如下图::
☆组合选择器
CSS里现在共有4种组合选择符(Combinators):
符号 | 说明 |
A > B | 子代选择器,选择A下一层的元素B |
A ~ B | 兄弟选择器,选择与A同层的元素B |
A + B | 相邻兄弟选择器,选择与A相邻的元素B(不能被任何元素相隔) |
A B | 后代选择器,包含选择符 |
后代选择器和子选择器
当HTML元素发生嵌套时,内层的元素就成为外层元素的后代。如元素B嵌套在元素A内部,B就是A的后代。定义后代选择器时,外层的元素写在前面,内层的元素写在后面,中间用空格分隔。后代选择器会影响到它的各级后代,没有层级限制。代码示例如下:
div p{color: red;}
后代选择器用空格作为连接符号。
子选择器是一种特殊的后代选择器,用来选择特定元素的直接子元素,只会影响它的第一层子元素,其他孙辈元素或更深层次的元素不会受影响。定义子选择器时,外层的元素写在前面,子元素写在后面,中间用大于号相连。代码示例如下:
div>p{color:red;}
子元素选择器用>作为连接符号。
上述CSS代码只会使div下的第一层p元素中的文本变为红色,也就是只会选中特定的儿子标签。
子元素选择器不仅可以使用标签的名称,而且可以使用其他的选择器,如:
div>#red
div>.left。
下面通过示例来讲解子选择器与后代选择器的区别
先来看一下后代选择器div p的效果,源码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS_Test5</title>
<style>
div p{
background-color:yellow;
}
</style>
</head>
<body>
<div>
<p>子元素选择器</p>
<span><p>后代选择器</p></span>
</div>
</body>
</body>
</html>
保存文件名:HTML之CSS_Test5.html,保存路径D:\HTML5_CSS示例(路径根据你的实际而定),用浏览器打开运行显示效果如下图:
再来看一下子选择器div p的效果,源码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS_Test6</title>
<style>
div>p{
background-color:yellow;
}
</style>
</head>
<body>
<div>
<p>子元素选择器</p>
<span><p>后代选择器</p></span>
</div>
</body>
</body>
</html>
保存文件名:HTML之CSS_Test6.html,保存路径D:\HTML5_CSS示例(路径根据你的实际而定),用浏览器打开运行显示效果如下图:
☆分组选择器
当多个对象定义了相同的样式时,就可以把它们分成一组,这样能够简化代码。分组选择器使用逗号把同组内的不同对象分隔,示例代码如下:
h1,h2,h3,p{
line-height:22px;
}
上述分组选择器的目的是,定义所有级别的标题和段落的行高为22px。其中,line-height用于定义一行文字的高度。
完整的示例源码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS_Test7</title>
<style>
h1,h2,h3,p{
line-height:22px;
}
</style>
</head>
<body>
<h1>这是h1级别标题</h1>
<h2>这是h2级别标题</h2>
<h3>这是h3级别标题</h3>
<p>这是个段落</p>
</body>
</body>
</html>
保存文件名:HTML之CSS_Test7.html,保存路径D:\HTML5_CSS示例(路径根据你的实际而定),用浏览器打开运行显示效果如下图:
☆通用选择器
通用选择器的作用就像通配符,它能匹配所有可用元素,一般用来对页面上的所有元素应用样式。所有浏览器都支持通用选择器。通用选择器由一个星号(*)表示,示例代码如下:
*{
margin: 0;
padding: 0;
}
上述代码表示的是,将所有元素的margin(边距)和padding(填充)都设置为0。这个操作常常用来去除一些HTML标签的自带格式。
通用选择器是用来选择所有元素的,当然也可以选择某个元素下的所有元素,示例代码如下:
.demo *{border:1px solid blue;}
完整的示例源码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS_Test8</title>
<style>
* {
margin: 100;
padding: 0;
color:red;
}
</style>
</head>
<body>
<h2>这是h2级别标题</h2>
<h3>这是h3级别标题</h3>
<p>这是段落1</p>
<p>这是段落2</p>
</body>
</body>
</html>
保存文件名:HTML之CSS_Test8.html,保存路径D:\HTML5_CSS示例(路径根据你的实际而定),用浏览器打开运行显示效果如下图:
注意:不建议*在生产环境中使用通用选择器,因为此选择器会匹配页面上的每个元素,这会对浏览器造成不必要的压力——会极大的消耗资源,应该把具体的标签名都列出来,像这样body,div,ul,li,a,{padding:0; margin:0;}。
☆伪类选择器(Pseudo-classes)
伪类选择器可以让同一个HTML标签在不同状态下会显示出不同的样式,伪类用冒号来表示,代码示例如下:
a:hover{color:#F00; text-decoration:none;}
上述代码实现了当鼠标悬停在链接文字上时,链接文字显示为红色、无下画线。
伪类选择器大多时候用在超链接文字的效果设定上,超链接有4种状态,对应<a>标签的4种伪类,如下表所示:
伪类选择器 | 作用 | 应用对象 |
:hover | 定义标记在鼠标悬停(划过)时的样式 | 所有显示标记 |
:link | 定义标记在超链接状态下的样式 | a标签 |
:visited | 定义标记被访问过后的样式 | a标签 |
:active | 定义标记在选定时刻下的样式 | a标签 |
注意:①在CSS定义中,a:hover 必须被置于 a:link 和 a:visited 之后,才是有效的。
②在 CSS 定义中,a:active 必须被置于 a:hover 之后,才是有效的。
③伪类的名称不区分大小写。
下面给出例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> CSS_Test9</title>
<style>
a:link {color:#000000;} /* 未访问链接*/
a:visited {color:#00FF00;} /* 已访问链接 */
a:hover {color:#FF00FF;} /* 鼠标移动到链接上 */
a:active {color:#0000FF;} /* 鼠标点击时 */
</style>
</head>
<body>
<p><b><a href=" https://www.baidu.com/" target="_blank">这是一个链接</a></b></p>
<p><b>提示:</b>鼠标指向上面链接时将变色。</p>
</body>
</html>
保存文件名:HTML之CSS_Test9.html,保存路径D:\HTML5_CSS示例(路径根据你的实际而定),用浏览器打开运行显示效果如下图:
除了<a>标签的4种伪类,还有UI元素的“:enabled”“:disabled”“:checked”状态伪类,这些主要针对HTML中的Form元素操作。除此之外,还有CSS3中的:nth选择器,可以更精确地选择某个元素并指定样式。:nth选择器的常见伪类如下表所示:
伪类 | 状态 |
:first-child | 选择某个元素的第一个子元素 |
:last-child | 选择某个元素的最后一个子元素 |
:nth-child() | 选择某个元素的一个或多个特定的子元素 |
:nth-last-child() | 选择某个元素的一个或多个特定的子元素, 从这个元素的最后一个子元素开始算 |
下面给出例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> CSS_Test10</title>
<style>
p:first-child
{
color:blue;
}
</style>
</head>
<body>
<p>这是段落1。</p>
<p>这是段落2。</p>
</body>
</html>
保存文件名:HTML之CSS_Test10.html,保存路径D:\HTML5_CSS示例(路径根据你的实际而定),用浏览器打开运行显示效果如下图:
下面给出一个较为综合的例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> CSS_Test11</title>
<style>
a:link {color:#000000;} /* 未访问链接*/
a:visited {color:#00FF00;} /* 已访问链接 */
a:hover {color:#FF00FF;} /* 鼠标移动到链接上 */
a:active {color:#0000FF;} /* 鼠标点击时 */
ul{ list-style-type:none; }
ul li{ background-color:#EEE; padding:5px; width:150px;}
ul li:hover{ background-color:#CCC;}
</style>
</head>
<body>
<p><b><a href=" https://www.baidu.com/" target="_blank">这是一个链接</a></b></p>
<ul>
<li>列表文字1</li>
<li>列表文字2</li>
<li>列表文字3</li>
<li>列表文字4</li>
<li>列表文字5</li>
</ul>
</body>
</html>
保存文件名:HTML之CSS_Test11.html,保存路径D:\HTML5_CSS示例(路径根据你的实际而定),用浏览器打开运行显示效果如下图:
☆属性选择器
对带有指定属性的 HTML 元素设置样式。属性选择器可以根据元素的属性及属性值来选择元素。
把包含标题(title)属性的元素变为红色代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> CSS_Test12</title>
<style>
[title]
{
color:red;
}
</style>
</head>
<body>
<p title>这是段落A</p>
<p>这是段落B</p>
</body>
</html>
保存文件名:HTML之CSS_Test12.html,保存路径D:\HTML5_CSS示例(路径根据你的实际而定),用浏览器打开运行显示效果如下图:
属性选择器允许用户自定义属性名称,属性选择器共有7种。
代码 | 说明 |
[attribute] | 元素有attribute的属性。 |
[attribute="value"] | 属性attribute里是value |
[attribute~="value"] | 属性attribute里使用空白分开的字符串里其中一个是value |
[attribute|="value"] | 属性attribute里是value或者以value-开头的字符串 |
[attribute^="value"] | 属性attribute里最前的是value |
[attribute$="value"] | 属性attribute里最后的是value |
[attribute*="value"] | 属性attribute里有value出现过至少一次 |
盒子模型(Box Modle)可以用来对元素进行布局,包括内边距(padding)、边框(border)、外边距(margin),和实际内容(content)这几个部分。CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。掌握盒子模型,将使CSS网页排版变得简单。
W3C盒子模型(标准盒模型)
说明:
1.标准盒模型中width指的是内容区域content的宽度;height指的是内容区域content的高度。
width和height用于设定盒子模型中内容(content)的宽度和高度,常用单位是像素(px)和百分比(%)。
px用于指定具体的宽和高
%则用于设定该元素宽度在父容器中所占的比例。
在没有指定width和height的情况下,元素默认占据父容器的所有宽度,高度则由元素中的内容决定。
2.标准盒模型下盒子的大小 = content + border + padding + margin
margin是指其他元素与本元素的边框之间的距离,分为上边距、右边距、下边距和左边距。在设置外边距时可以设置各属性,分别设置上、右、下、左4个方向的外边距,示例代码如下:
div{margin-top:5px; margin-right:15px; margin-bottom:8px; margin-left: 10px;}
在设置外边距时也可以直接写综合属性,给margin设置多个值。若写了4个值,则意思是按顺时针方向设置外边距,即分别设置上、右、下、左外边距的值;若只写3个值,则设置顺序为上、左右、下外边距;若只写了两个值,则设置顺序为上下、左右外边距。示例代码如下:
div{margin:5px 15px 8px 10px;} /* 上、右、下、左 */
div{margin:5px 15px 8px;} /* 上、左右、下 */
div{margin:5px 15px;} /* 上下、左右 */
padding是本元素内容与本元素边框之间的距离,分为上内边距、右内边距、下内边距和左内边距。与margin一样,在设置内边距时可以设置各属性,也可以直接写综合属性,示例代码如下:
div{padding-top:5px; padding-right:15px; padding-bottom:8px; padding- left:10px;}
div{padding:5px 15px 8px 10px;} /* 上、右、下、左 */
div{padding:5px 15px 8px;} /* 上、左右、下 */
div{padding:5px 15px;} /* 上下、左右 */
border是围绕元素内容和内边距的一条或多条线。CSS允许规定元素边框的样式、宽度和颜色。
CSS控制的边框属性包括:
(1)border-width:设置边框宽度,常用值为1px、2px等。
(2)border-style:设置边框样式,常用值有solid(实线)、dashed(虚线)、dotted(点线)、double(双线)、groove(3D凹槽边框)、ridge(3D垄状边框)、inset(3D inset边框)、outset(3D outset边框)、none(无边框)等。
(3)border-color:设置边框颜色,常用值有red、green、blue等,也可以用#000000、#F00或rgb(100,100,100)设置。
在常见的用法中,习惯将边框的3个属性一起声明,下面的示例代码就是将div的4个边框设置为2px的红色实线,具体如下:
div{border:2px solid #F00;}
也可以分别设置4个边框,示例代码如下:
div{
border-left:2px solid #F00; /* 左边框:2像素,实线,红色 */
border-top:2px dashed #0000FF; /* 上边框:2像素,虚线,蓝色 */
border-right:4px dotted #00FF00; /* 右边框:4像素,点线,绿色 */
border-bottom:2px double #000000; /* 下边框:2像素,双线,红色 */
}
当然,必要的时候还是可以单独设置某个边框的属性。下面的代码是将div的所有边框设置成2px的灰色双线,将p的底边框设置成3px的红色点线,代码如下:
div{
border-width:2px;
border-style:double;
border-color:#999;}
p{
border-bottom-width:3px;
border-bottom-color:#F00;
border-bottom:dashed;}
因默认的呈现方式不同,HTML的标签元素可以分为三类:
块级元素(block)
内联元素(inline)
内联块级元素(inline-block)。
这种分类是针对元素所占的空间来划分的:
块级元素可以用CSS代码设定宽和高,块级元素默认独占一行;
宽和高的设定却对内联元素无效,与内容有关;
内联元素却可以和其他元素同处一行。
1.块级元素
在HTML标签元素中,<div>、<p>、<h1>…<h6>、<form>、<ul>、<li>、<ol>、<dl>、<table>、<address>、<blockquote>都是块级元素,它们具有如下特点:
(1)每个块级元素都独占一行,其后的元素也另起一行;
(2)元素的高度、宽度、行高及边距都可以设置;
(3)在宽度未设置的情况下,元素宽度是它父容器的100%,即和父元素的宽度一致。在设置宽度后,元素才具有指定的宽度。
块级元素支持内边距padding、外边距margin、宽度width、高度height、浮动float、溢出overflow等属性,默认情况下的样式是:{width:100%; height:auto; overflow:hidden;}
2.内联元素
在HTML标签元素中,<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<cite>、<code>、<var>是典型的内联元素。内联元素的特点如下:
(1)可以和其他元素在同一行上显示;
(2)元素的高度、宽度、行高、顶部边距和底部边距不可设置;
(3)元素的宽度就是它包含的文字或图片的宽度,不可改变。
内联元素支持内边距padding、左外边距margin-left、右外边距margin-right等属性,可以通过代码display:block转换为块级元素,当然块级元素也可以通过代码display:inline转换为内联元素。
3.内联块级元素
内联块级元素同时具备内联元素、块级元素的特点,<img>、<input>就是典型的内联块级元素,它们具有如下特点:
(1)可以和其他元素在同一行上;
(2)元素的高度、宽度、行高、顶部边距和底部边距都可设置。
内联块级元素也支持padding、margin、width、height、float、overflow等属性。
下例子中对div标签设置了边距等信息,代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> CSS_Test20</title>
<style>
div{
width: 100px;
height: 100px;
border: 1px solid red;
padding: 20px;
margin: 30px;
}
</style>
</head>
<body>
<div>这是DIV block A</div>
<div>这是DIV block B</div>
</body>
</html>
保存文件名:HTML之CSS_Test20.html,保存路径D:\HTML5_CSS示例(路径根据你的实际而定),用浏览器打开运行显示效果如下图:
按F12键,显示效果如下:
padding的区域有背景颜色,可以设置背景颜色background-color将填充所有border以内的区域,参见下面代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> CSS_Test21</title>
<style>
ul{
width: 100px;
height: 100px;
border: 1px solid red;
padding: 20px;
margin: 30px;
background-color:pink;
}
</style>
</head>
<body>
<ul>
<li>列表文字1</li>
<li>列表文字2</li>
<li>列表文字3</li>
<li>列表文字4</li>
<li>列表文字5</li>
</ul>
</body>
</html>
保存文件名:HTML之CSS_Test21.html,保存路径D:\HTML5_CSS示例(路径根据你的实际而定),用浏览器打开运行显示效果如下图:
padding有四个方向
padding是4个方向的,所以我们能够分别描述4个方向的padding。
方法有两种,第一种写小属性;第二种写综合属性,用空格隔开。
☆小属性的写法:
padding-top: 30px;
padding-right: 20px;
padding-bottom: 40px;
padding-left: 100px;
☆综合属性的写法:(上、右、下、左)(顺时针方向,用空格隔开。margin的道理也是一样的)
padding:30px 20px 40px 100px;
如果写了四个值,则顺序为:上 右 下 左。
如果只写了三个值,则顺序为:上 右 下。左和右一样。
如果只写了两个值,则顺序为:上 右。左和右一样,上和下一样。
border就是边框。边框有三个要素:像素(粗细border-width)、线型(order-style)、颜色(border-color)。换句话说,一个border属性,是由三个小属性像素(粗细)、线型、颜色综合而成的。
下面给出一个示例代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> CSS_Test21</title>
<style>
div{
width:200px;
height:200px;
border-width:10px 20px;
border-style:solid dashed dotted;
border-color:red; green blue yellow;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
保存文件名:HTML之CSS_Test22.html,保存路径D:\HTML5_CSS示例(路径根据你的实际而定),用浏览器打开运行显示效果如下图:
CSS布局模型
CSS布局模型建立在盒子模型的基础上,包含3种基本的布局模型,即流动模型(Flow)、浮动模型(Float)、层模型(Layer)。
1、流动模型(Flow)
流动(Flow)模型是默认的网页布局模式。也就是说网页在默认状态下的 HTML 网页元素都是根据流动模型来分布网页内容的。
流动布局模型具有2个比较典型的特征:
第一点,块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布,因为在默认状态下,块状元素的宽度都为100%。实际上,块状元素都会以行的形式占据位置。(每一个便签都显示着自己本来默认的那个宽高)
第二点,在流动模型下,行内元素都会在所处的包含元素内从左到右水平分布显示。(内联元素可不像块状元素这么霸道独占一行)
在流动模型下,在默认状态下,块状元素的宽度都为100%,示例代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> CSS_Test30</title>
<style>
#box1{
width:300px;
height:100px;
}
div,p{
border:1px solid red;
}
</style>
</head>
<body>
<h3>A </h3>
<div>由于没有设置宽度,宽度默认显示为100%</div>
<h3> B</h3>
<div id="box1">设置了width:300px,height:200px;</div>
<h3>C</h3>
<p>雪梅·其二 卢梅坡〔宋代〕有梅无雪不精神,有雪无诗俗了人。日暮诗成天又雪,与梅并作十分春。</p>
</body>
</html>
保存文件名:HTML之CSS_Test30.html,保存路径D:\HTML5_CSS示例(路径根据你的实际而定),用浏览器打开运行显示效果如下图:
在流动模型下,内联元素都会在所处的包含元素内从左到右水平分布显示,下面示例页面代码中内联元素标签a、span、em、strong都是内联元素:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> CSS_Test31</title>
<style>
</style>
</head>
<body>
<a href="https://www.baidu.com/">百度一下</a>
<span>强调</span> <em>重点</em>
<strong>强调</strong>
</body>
</html>
保存文件名:HTML之CSS_Test31.html,保存路径D:\HTML5_CSS示例(路径根据你的实际而定),用浏览器打开运行显示效果如下图:
2、浮动模型 (Float)
因为块级元素独占一行的特性,在默认情况下是无法将两个块级元素并排显示的,但可以用CSS设置元素的float属性,让元素浮动起来,这样就可以达到并排显示的目的。设置向左浮动的示例代码如下:
div{float:left;}
属性float的值有left、right、none和inherit,分别表示向左浮动、向右浮动、不浮动和从父元素继承float属性的值。
需要注意的是,设置浮动的同时一定要先设置块级元素的宽度,而且几个浮动元素的宽度之和必须小于父容器的宽度,否则就会造成部分元素被挤到下一行显示。
任何元素在默认情况下是不能浮动的,但可以用 CSS 定义为浮动,如 div、p、table、img 等元素都可以被定义为浮动。也可以为不同的div设置不同的浮动方式来布局。
如下代码可以实现两个 div 元素一行显示:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> CSS_Test32</title>
<style>
div{
width:200px;
height:200px;
border:2px red solid; float:left;
}
</style>
</head>
<body>
<div id="div1">这是第一块</div>
<div id="div2">这是第二块</div>
</body>
</html>
保存文件名:HTML之CSS_Test32.html,保存路径D:\HTML5_CSS示例(路径根据你的实际而定),用浏览器打开运行显示效果如下图:
你也可以同时设置两个元素右浮动一行显示:
div{
width:200px;
height:200px;
border:2px red solid;
float:right;
}
完整代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> CSS_Test33</title>
<style>
div{
width:200px;
height:200px;
border:2px red solid;
float:right;
}
</style>
</head>
<body>
<div id="div1">这是第一块</div>
<div id="div2">这是第二块</div>
</body>
</html>
保存文件名:HTML之CSS_Test33.html,保存路径D:\HTML5_CSS示例(路径根据你的实际而定),用浏览器打开运行显示效果如下图:
用浏览器打开运行显示效果如下图:
也可以设置两个元素一左一右一行显示:
div{
width:200px;
height:200px;
border:2px red solid;
}
#div1{float:left;}
#div2{float:right;}
完整代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> CSS_Test34</title>
<style>
div{
width:200px;
height:200px;
border:2px red solid;
}
#div1{float:left;}
#div2{float:right;}
</style>
</head>
<body>
<div id="div1">这是第一块</div>
<div id="div2">这是第二块</div>
</body>
</html>
保存文件名:HTML之CSS_Test34.html,保存路径D:\HTML5_CSS示例(路径根据你的实际而定),用浏览器打开运行显示效果如下图:
3、层(Layer)模型
CSS(Cascading Style Sheets、层叠样式表)用来设定你网页上的元素是如何展示的。Cascading Style Sheets Positioning(CSS-P)是CSS的一个扩展,它可用来控制任何东西在网页上或是说在窗口中的位置。position(位置、放置方式)决定DIV tag(标签)是如何放置的。
div 标签(<div>…</div>) 标签定义 HTML 文档中的分隔(division)或部分(section)。此标签常用于组合块级(block-level)元素,以便通过样式表来对这些元素进行格式化——通过CSS样式为其赋予不同的表现效果(外观)。
层布局模型能实现在网页中对HTML元素进行精确定位,CSS定义了一组定位属性(position)来支持层布局模型。在网页设计领域,一般只在网页的局部使用层布局,如浮动广告、下拉菜单、图片轮换效果等。
可以通过设置属性position来使用层布局,该属性的值有static、relative、absolute、fixed和inherit。
static表示无特殊定位,元素遵循正常文档流;
inherit表示从父元素继承属性值。
下面重点介绍相对定位(relative)、绝对定位(absolute)、固定定位(fixed)三种定位方式。
绝对定位
如果想为元素设置层模型中的绝对定位,需要设置position:absolute(表示绝对定位),将元素从文档流中拖出来,然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。
如果不存在这样的包含块(就是它前面的div并没有设置定位的属性),则相对于body元素,即相对于浏览器窗口。
被设置了绝对定位的元素,在文档流中是不占据空间的,如果某元素设置了绝对定位,那么它在文档流中的位置会被删除;
我们可以通过 z-index 来设置它们的堆叠顺序 。
绝对定位使元素脱离文档流,因此不占据空间 ,普通文档流中元素的布局就当绝对定位的元素不存在时一样,仍然在文档流中的其他元素将忽略该元素并填补他原先的空间。因为绝对定位的框与文档流无关,所以它们可以覆盖页面上的其他元素。
浮动元素的定位还是基于正常的文档流,然后从文档流中抽出并尽可能远的移动至左侧或者右侧,文字内容会围绕在浮动元素周围。它只是改变了文档流的显示,而没有脱离文档流,理解了这一点,就很容易弄明白什么时候用定位,什么时候用浮动了。
下面代码可以实现div元素相对于浏览器窗口向右移动100px,向下移动50px。
div{
width:200px;
height:200px;
border:2px red solid;
position:absolute;
left:100px;
top:50px;
}
完整代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> CSS_Test35</title>
<style>
div{
width:200px;
height:200px;
border:2px red solid;
position:absolute;
left:100px;
top:50px;
}
</style>
</head>
<body>
<div>这是绝对定位测试</div>
<p>……………………………………………………………………………………………………………………………………………………………………………………。</p>
<p>……………………………………………………………………………………………………………………………………………………………………………………。</p>
<p>……………………………………………………………………………………………………………………………………………………………………………………。</p>
</body>
</html>
</html>保存文件名:HTML之CSS_Test35.html,保存路径D:\HTML5_CSS示例(路径根据你的实际而定),用浏览器打开运行显示效果如下图:
如果想为元素设置层模型中的相对定位,需要设置position:relative(表示相对定位),它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来),然后相对于以前的位置移动,移动的方向和幅度由left、right、top、bottom属性确定,偏移前的位置保留不动。
相对于以前的位置移动,偏移前的位置保留不动。在使用相对定位时,就算元素被偏移了,但是他仍然占据着它没偏移前的空间。
如下代码实现相对于以前位置向下移动50px,向右移动100px;
div{
width:200px;
height:200px;
border:2px red solid;
position:relative;
left:100px;
top:50px;
}
完整代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> CSS_Test35</title>
<style>
div{
width:200px;
height:200px;
border:2px red solid;
position:relative;
left:100px;
top:50px;
}
</style>
</head>
<body>
<div>这是相对定位测试</div>
<p>……………………………………………………………………………………………………………………………………………………………………………………。</p>
<p>……………………………………………………………………………………………………………………………………………………………………………………。</p>
<p>……………………………………………………………………………………………………………………………………………………………………………………。</p>
</body>
</html>
保存文件名:HTML之CSS_Test36.html,保存路径D:\HTML5_CSS示例(路径根据你的实际而定),用浏览器打开运行显示效果如下图:
固定定位
fixed:表示固定定位,与absolute定位类型类似,但它的相对移动的坐标是视图(屏幕内的网页窗口)本身。由于视图本身是固定的,它不会随浏览器窗口的滚动条滚动而变化。除非你在屏幕中移动浏览器窗口的屏幕位置,或改变浏览器窗口的显示大小,因此固定定位的元素会始终位于浏览器窗口内视图的某个位置,不会受文档流动影响,这点与background-attachment:fixed;属性功能相同。
以下代码可以实现相对于浏览器视图向右移动100px,向下移动50px。并且拖动滚动条时位置固定不变。
div{
width:200px;
height:200px;
border:2px red solid;
position:fixed;
left:100px;
top:50px;
}
完整代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> CSS_Test37</title>
<style>
div{
width:200px;
height:200px;
border:2px red solid;
position:fixed;
left:100px;
top:50px;
}
</style>
</head>
<body>
<div>这是固定定位测试</div>
<p>……………………………………………………………………………………………………………………………………………………………………………………。</p>
<p>……………………………………………………………………………………………………………………………………………………………………………………。</p>
<p>……………………………………………………………………………………………………………………………………………………………………………………。</p>
</body>
</html>
保存文件名:HTML之CSS_Test37.html,保存路径D:\HTML5_CSS示例(路径根据你的实际而定),用浏览器打开运行显示效果如下图:
当拖动滚动条时位置固定不变。
使用position:absolute可以实现被设置元素相对于浏览器(body)设置定位以后,可不可以相对于其它元素进行定位呢?当然可以。使用position:relative来帮忙,但是必须遵守下面规范:
1、参照定位的元素必须是相对定位元素的前辈元素:
<div id="box1"><!--参照定位的元素-->
<div id="box2">相对参照元素进行定位</div><!--相对定位元素-->
</div>
从上面代码可以看出box1是box2的父元素(父元素当然也是前辈元素了)。
2、参照定位的元素必须加入position:relative;
#box1{
width:200px;
height:200px;
position:relative;
}
3、定位元素加入position:absolute,便可以使用top、bottom、left、right来进行偏移定位了。
#box2{
position:absolute;
top:20px;
left:30px;
}
这样box2就可以相对于父元素box1定位了。
附录
进一步学习资料: CSS 教程