第4章-CSS基础

最新推荐文章于 2022-09-20 11:32:56 发布

原创最新推荐文章于 2022-09-20 11:32:56 发布 · 827 阅读

3 ·

CC 4.0 BY-SA版权

《HTML+CSS3+JavaScript项目开发》笔记专栏收录该内容

11 篇文章

订阅专栏

本文深入讲解CSS(Cascading Style Sheets)的基本概念、优势及其在Web前端设计中的应用。涵盖CSS语句格式、选择符类型、文本与字体属性、背景与边框设置等内容，通过实例演示如何实现网页元素的美观布局。

CSS(Cascading Style Sheets)的中文意思是层叠样式表或级联样式表，它的作用是控制页面里每一个元素的表现形式，如字体样式、背景、排列方式、区域尺寸、边框等。

使用CSS具有以下3个优势：

1.CSS将Web前端代码与HTML页面中负责布局、美化及一些特殊效果的代码分隔开。

2.实现了样式重复使用。

3.有利于搜索引擎的搜索

CSS语句格式：

1.内联样式：<h1 style="font-family:宋体;font-size:12pt;color:blue">这里使用了H1标签</h1>

2.嵌入样式：<head><style type="text/css">h1 {font-family:宋体;font-size:12pt;color:blue}</style></head><body><h1>这里使用了H1标签</h1></body>

3.外部样式：<head><link rel="stylesheet" href="h1.css" type="text/css"></head><body><h1>这里使用了H1标签</h1></body>，其中有单独的h1.css文件：h1 {font-family:宋体;font-size:12pt;color:blue}

CSS语句由3部分构成：

选择符、属性和值。其中选择符是限制样式的作用范围。——> 选择符 {属性:值}

如：p {font-size:14px}，选择符是 p，属性是 font-size，值是 14px；语句的作用是将段落文本的字号设置为14像素。

多个属性用分号分隔：p {font-size:14px; color:red}，属性的值是多个单词组成时，必须加引号：h1 {font-family:"Courier New"}

CSS选择符：

CSS选择符主要包括HTML选择符、class选择符和id选择符。

1.HTML选择符：HTML选择符是以HTML标签作为选择符，其作用域为所有符合条件的HTML标签。

h1 {text-align: center; color: blue}

2.class选择符：class选择符是使用HTML标签的class属性值作为选择符。定义class选择符时，前面需要加"."标志。

class选择符可以实现以下两种效果：

a.可以为相同的元素定义不同的样式。

.warning{ font-size:20px}

.danger{ font-size:30px}

.normal{ font-size:40px}

<body>

    <p class="warning">这是warning的样式</p>
    <p class="danger">这是danger的样式</p>
    <p class="normal">这是normal的样式</p>
</body>

b.可以为不同的元素定义相同的样式。

.title {text-align:center;color:blue}
<body>
    <p class="title">蓝色的段落</p>
    <h1 class="title">蓝色的标题</p>
</body>

3.id选择符：

id选择符使用HTML标签的id属性值作为选择符。id属性用来定义某一特定的HTML标签，在id选择符前面需要加"#"标志。

#red {color:red;}
#green {color:green;}
<body>
    <p id="red">这个段落是红色</p>
    <p id="green">这个段落是绿色</p>
</body>

class选择符与id选择符的区别如下：

a.一个id只能在文档中使用一次，而class可以重复使用。

b.不能使用id词列表，而class选择符可以结合使用，如：<div class="box none top"></div>

4.其他选择符：

I.包含选择符：

包含选择符是指用空格隔开的两个或多个单一选择符组成的字符串，如：div p{color:red;font-size:12;} 。使用包含选择符定义的样式就只能对在元素1里面的元素2起作用，而对单独元素1和元素2不起作用。注：包含选择符的优先级要比单一选择符定义的样式规则优先级高，如：table a {color:green;font-size:36px;text-decoration:none;}，a {color:red}，这时表格中的超链接文本是绿色、字号是36像素。

II.组合选择符：

为了减少样式表的重复声明，可以在一条样式规则定义语句中组合若干个选择符，每个选择符之间用逗号隔开。这样既减少了代码量，也更便于阅读修改。

<html>
    <head>
        <style type="text/css">
            h1,h2,h3{color:#CC66FF;}
        </style>
    </head>
    <body>
        <h1>这里是h1标签</h1>
        <h2>这里是h2标签</h2>
        <h3>这里是h3标签</h3>
    </body>
</html>

III.伪元素选择符：

伪元素选择符是指同一个HTML元素的各种状态和部分内容的一种定义方式。

如超链接元素a的4种伪类分别是：

a:link表示超链接标签<a>的正常状态；

a:visited表示访问过的超链接状态；

a:hover表示鼠标移动到超链接上的状态；

a:active表示超链接选中的状态。

一般它们的声明按：:link、:visited、:hover、:active顺序进行。

其他元素也可以使用这些伪元素选择符，如：

p:hover{
    color:green;
    background:yellow;
    font-size:large;
}

还有，段落的首字母和首行都可以用伪元素选择符定义样式，如：

p:first-letter{font-size:20px;font-weight:bold}
p:first-line{line-height:20px;text-indent:2em}

各种选择符的优先级一般有如下规定：

⊙ id选择符 > class选择符 > HTML标签选择符

⊙ 内联样式表 > 嵌入样式表 > 外部样式表

<html>
	<head>
		<style type="text/css">
			#title {
				color: blue;
				font-size: 30;
			}
			.head {
				color: red;
				font-size: 20;
			}
			div {
				color: green;
				font-size: 10;
			}
		</style>
	</head>
	<body>
		<div id="title" class="head">猜猜是什么样式在起作用</div>
	</body>
</html>

上例中，id选择符起作用，最终显示为蓝色字体、30号字。

<html>
	<head>
		<style type="text/css">
			p {text-align: right;}
		</style>
	</head>
	<body>
		<p style="text-align: center;">中国</p>
	</body>
</html>

上例中，内联样式起作用，文字居中显示。

<html>
	<head>
		<meta charset="utf-8" />
		<title>世界杯胜负榜</title>
		<style>
			table, th, td {
				border: 1px solid black;
				font-size: 50px;
			}
			.medal th {
				color: red;
			}
			.sheng {
				color: yellow;
			}
			.ping {
				color: gray;
			}
			.fu {
				color: green;
			}
		</style>
	</head>
	<body>
		<table class="medal">
			<tr>
				<th>国家</th>
				<th>胜</th>
				<th>平</th>
				<th>负</th>
			</tr>
			<tr>
				<td>西班牙</td>
				<td class="sheng">6</td>
				<td classs="ping">0</td>
				<td class="fu">1</td>
			</tr>
			<tr>
				<td>荷兰</td>
				<td class="sheng">6</td>
				<td classs="ping">0</td>
				<td class="fu">1</td>
			</tr>
		</table>
	</body>
</html>

注：.medal th选中表头单元格。

文本和字体相关的属性：

1.指定字体：

p {font-family:"Time New Roman", Times, serif}，字体按顺序依次判断有无，有则显示相关字体。

2.字体大小：

p {font-size:14px;}，像文章的标题等应该显示大字体，但此时不应使用字体大小属性，应使用h1 h2等HTML标签。

一般使用px作为字体大小的单位，设置时也可以使用em单位替代px。em是相对大小，这里的相对指的是相对于元素父元素的font-size。例如，在一个<div>设置字体大小为“16px”，此时这个<div>的后代元素将继承它的字体大小，除非重新在其后代元素中进行显式的设置。此时如果将其子元素字体大小设置为"0.75em"，那么其字体大小计算出来后就相当于"0.75*16px=12px"。

font-size属性的合法取值：

值	描述
xx-small x-small small medium large x-large xx-large	把字体的尺寸设置为不同的尺寸，从xx-small到xx-large。默认值为medium。
smaller	把font-size设置为比父元素更小的尺寸
larger	把font-size设置为比父元素更大的尺寸
length	把font-size设置为一个固定的值
%	把font-size设置为基于父元素的一个百分比值
inherit	规定应该从父元素继承字体尺寸

3.字体风格：

p.normal {font-style:normal}，p.italic {font-style:italic;}，p.oblique {font-style:oblique}

font-style属性的值：

值	描述
normal	默认值。浏览器显示一个标准的字体样式
italic	浏览器会显示一个斜体的字体样式
oblique	浏览器会显示一个倾斜的字体样式
inherit	规定应该从父元素继承字体样式

4.字体加粗：

.normal {font-weight:normal;}，.thick {font-weight:bold/bolder/lighter;}，.thicker {font-weight:900;}

font-weight属性的值：

值	描述
normal	默认值。定义标准的字符
bold	定义粗体字符
bolder	定义更粗的字符
lighter	定义更细的字符
100 200 300 400 500 600 700 800 900	定义由粗到细的字符。400等同于normal，700等同于bold
inherit	规定应该从父元素继承字体的粗细

5.其他字体属性：

属性	描述
font-family	设置字体系列
font-size	设置字体大小
font-style	设置字体风格
font-variant	以小型大写字体或正常字体显示文本
font-weight	设置字体粗细
color	定义颜色

font是所有字体属性的简写，可以在一个声明中设置所有字体属性。其属性排列顺序是font-style、font-variant、font-weight、font-size、font-family。其中，font-size和font-family属性必须按照固定顺序出现，如果font-size和font-family属性顺序不对或缺少一个，则整个样式规则可能会被忽略，正确格式如：{font:normal 15px 宋体}。

文本属性：

1.缩进文本：

p {text-indent: 2em;}

2.对齐方式：

p {text-align:center;}

3.字母间隔：

p {letter-spacing:20px;}

4.文本阴影：

p {text-shadow:3px 3px 2px #333;}

text-shadow属性的第1个值：水平位移；第2个值：垂直位移；第3个值：模糊半径(可选)；第4个值：阴影颜色。

属性	描述
color	设置文本颜色
direction	设置文本方向
line-height	设置行高
letter-spacing	设置字母间隔
text-align	设置对齐方式
text-decoration	向文本添加修饰，如下划线
text-indent	缩进文本
text-transform	控制文本的大小写
text-shadow	给页面上的文字添加阴影效果
text-overflow	规定当文本溢出包含元素时发生的事情
word-wrap	允许对长的不可分割的单词进行分割，并换行到下一行

背景和边框相关属性：

一、边框

img {border-style:double;}

如果想设置4个边框不同的样式，左边框：border-left-style、上边框：border-top-style、下边框：border-bottom-style、右边框：border-right-style。如：

p {
    border-style:solid;
    border-color:red green blue pink;
}

边框颜色border-color显示为：上红、右绿、下蓝、左粉。

注：border-color:red green blue; -> 上红、左右绿、下蓝。

border-color:red green; -> 上下红、左右蓝。

border-color:red; -> 上右下左顺时针全红色边框。

要始终把border-style属性声明放到border-color属性之前，因为元素必须在赋予其颜色之前获得边框。

border-width属性定义边框的宽度，如：

p {
    border-style: solid;
    border-width: 5px 10px;
}

边框上下为5px，左右为10px。

可以在一个声明中设置所有的边框属性，可以按顺序设置如下属性：border-width、border-style、border-color，如：

p {border:5px solid red;}

属性	描述
border	同时设置4个边框
border-style	设置边框样式
border-width	设置边框宽度
border-color	设置边框颜色
border-bottom	将下边框的所有属性设置在一个声明中
border-bottom-color	设置下边框颜色
border-bottom-style	设置下边框样式
border-bottom-width	设置元素的下边框的宽度

二、边框阴影：

box-shadow属性向边框添加一个或多个阴影。

div {box-shadow:10px 10px 5px #888888;}

box-shadow语法如下：

box-shadow:h-shadow v-shadow blur spread color inset;

值	描述
h-shadow	必需，水平阴影的位置，允许负值
v-shadow	必需，垂直阴影的位置，允许负值
blur	可选，模糊距离
spread	可选，阴影的尺寸
color	可选，阴影的颜色
inset	可选，将外部阴影(outset)改为内部阴影

<html>
	<head>
		<style>
			div {
				width: 300px;
				height: 100px;
				background-color: #ff9900;
				box-shadow: 10px 10px 5px #888888;
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>

三、圆角边框：

border-radius:10px;

border-top-right-radius:定义右上角的圆角，同理border-bottom-left-radius:定义左下角的圆角。

四、图形边框：

border-image是CSS3新增的属性，用于定义图形边框，可以制作出更加多样化的边框效果。

值	描述
border-image-source	用在边框的图片路径
border-image-slice	图片边框剪裁位置向内偏移
border-image-width	图片边框的宽度
border-image-outset	边框图像区域超出边框的量
border-image-repeat	图像边框是否应重复(repeat)、平铺(rounded)、拉伸(stretched)

div {
    border: 15px solid transparent;
    width: 400px;
    height: 300px;
    border-image: url(http://img3.cache.netease.com/photo/0001/2009-10-30/5MSAR3JG00AQ0001.jpg) 30 30 round;
}

（图片尺寸：950 × 760）=》代码效果：

此例中，图片路径http://img3.cache........jpg、剪裁位置向内偏移30像素、图片填充宽度30像素、平铺方式。

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
border:15px solid transparent;
width:300px;
padding:10px 20px;
}

#round
{
-moz-border-image:url(/i/border.png) 30 30 round;	/* Old Firefox */
-webkit-border-image:url(/i/border.png) 30 30 round;	/* Safari and Chrome */
-o-border-image:url(/i/border.png) 30 30 round;		/* Opera */
border-image:url(/i/border.png) 30 30 round;
}

#stretch
{
-moz-border-image:url(/i/border.png) 30 30 stretch;	/* Old Firefox */
-webkit-border-image:url(/i/border.png) 30 30 stretch;	/* Safari and Chrome */
-o-border-image:url(/i/border.png) 30 30 stretch;	/* Opera */
border-image:url(/i/border.png) 30 30 stretch;
}
</style>
</head>
<body>

<div id="round">在这里，图片铺满整个边框。</div>
<br>
<div id="stretch">在这里，图片被拉伸以填充该区域。</div>

<p>这是我们使用的图片：</p>
<img src="/i/border.png">
</body>
</html>

参见CSS3 border-image详解、应用

1、调用边框图片 border-image的url属性，通过相对或绝对路径链接图片。

2、边框图片的剪裁 border-image的数值参数剪裁边框图片，形成九宫格。

3、剪裁图片填充边框，边框图片被切割成9部分，以一一对应的关系放到div边框的九宫格中，然后再压缩（或拉伸）至边框（border-width或border-image-width）的宽度大小。

4、执行重复属性，被填充至边框九宫格四个角落的的边框图片是不执行重复属性的。上下的九宫格执行水平方向的重复属性（拉伸或平铺），左右的格子执行垂直方向的重复属性，而中间的那个格子则水平重复和垂直方向的重复都要执行。

5、完成绘制，实现效果

关于兼容性问题，介绍一下常见浏览器内核：

1.Trident内核：主要IE浏览器系列。

2.WebKit内核：主要Safari、Android默认浏览器、Chrome

3.Blink内核：主要Chrome(28及往后版本)、Opera(15及往后版本)、Yandex

上述代码在浏览器不兼容时需要加前缀，如：

div {
    -webkit-border-image:url(border.png) 30 30 round; /* Safari 5 */
    -o-border-image:url(border.png) 30 30 round; /* Opera */
    border-image:url(border.png) 30 30 round;
}

五、背景：

在CSS中可以使用背景属性创建需要的样式。背景属性包括背景颜色、背景图片以及背景的位置。

如：p {background-color: gray;}

如果需要设置图像背景，则使用background-image属性，必须为这个属性设置一个url值。

如：p {background-image: url(../image/2009.jpg);}

由background-position属性设置背景图片的起始位置，也就是如何定位背景图片。如：

div {
    border:1px solid black;
    width:200px;
    height:200px;
    background-image:url(img/f2.jpg);
    background-position:75% 0%;
}

在图片(x,y)=(75%,0%)的起始点开始截取width和height大小图片背景。默认值为(0%,0%)

注：把background-attachment属性设置为fixed，才能保证该属性在Firefox和Opera中能正常工作。

background-position的取值可能为：top left、top center、top right、center left、center center、center right、bottom left、bottom center、bottom right；以及：x% y%；以及：xpos ypos。

由background-size规定背景图像的尺寸：

div {
    background:url(img_flwr.gif);
    background-size:63px 100px;
    background-repeat:no-repeat;
}

属性	描述
background	将背景属性设置在一个声明中
background-attachment	设置背景图片固定或随元素移动
background-color	设置元素背景颜色
background-image	设置图片背景
background-position	设置背景的位置
background-repeat	设置背景图像是否重复、如何重复
background-size	设置背景图像尺寸

项目实战：

<html>
	<head>
		<title>校训logo</title>
		<meta charset="utf-8">
		<style type="text/css">
			#box1 {
				background: blue;
				width: 500px;
				height: 100px;
			}

			#box2 {
				width: 100px;
				height: 100px;
				background-image: url(img/logo.png);
				background-size: 480px 100px;/*是在background-size基础上裁剪*/
				background-repeat: no-repeat;
				float: left;
			}
			
			#box3 {
				text-align: center;
				font-family: 隶书;
				font-size: 40px;
				line-height: 100px;
				color: white;
			}
		</style>
	</head>
	<body>
		<div id="box1">
			<div id="box2"></div>
			<div id="box3">精勤博学，学以致用</div>
		</div>
	</body>
</html>

原图：尺寸:300*66（注：图片其实是png格式，是镂空透明的没灰色背景，此处只为展示）

效果：

关于float属性：

<html>
	<head>
		<style type="text/css">
			#layout1 {
				height: 300px;
				width: 50px;
				background-color: yellow;
				float: left;
			}
			#layout2 {
				height: 300px;
				width: 50px;
				background-color: green;
				float: left;
			}
			#layout3 {
				height: 300px;
				width: 50px;
				background-color: blue;
				float: left;
			}
		</style>
	</head>
	<body>
		<div id="layout1">
			<p>此处是id为layout1块</p>
		</div>
		<div id="layout2">
			<p> 此处是id为layout2块</p>
		</div>
		<div id="layout3">
			<p>此处是id为layout3块</p>
		</div>
	</body>
</html>

效果：|

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>页脚部分</title>
<style type="text/css">
footer {
	background: #644108;
	color: #A9A9A9;
	padding-bottom: 10px;
	overflow: hidden;
	width: 1210px;
} /*设置页脚背景颜色、字体颜色、宽度等属性*/
footer a {
	color: #FFF;
	text-decoration: none;
} /*设置超链接为白色、无下划线*/
footer a:hover {
	color: #d2d0ce;
	text-decoration: underline;
}/*设置当鼠标悬浮时显示为灰色、带下划线*/
footer .nav {
	top: 45px;
	right: 20px;
	position: absolute;
	line-height: 150%;
	text-align: left;
} /*该部分使用了据对定位并设置了行高和对齐方式*/
footer .footer {
	text-align: center;
	overflow: hidden;
	zoom: 1;
	width: auto;
	height: 68px;
	color: #FFFFFF;
	position: relative;
}
footer .login {
	background-color: #598428;
	color: #FFF;
	padding: 3px 14px;
	margin-left: 10px;
}/*设置会员登录按钮的背景色、字体颜色等属性*/
footer .register {
	background-color: #F36523;
	color: #FFF;
	padding: 3px 14px;
}/*设置会员注册按钮的背景色、字体颜色等属性*/
</style>
</head>
<body>
<footer>
  <div class="footer box">
    <div class="nav"> <a href="#" target="_blank">网站地图</a> / <a target="_blank" href="#">关于我们</a> / <a target="_blank" href="#">沙龙动态</a> / <a target="_blank" href="#">友情链接</a> / <a target="_blank" href="#">联系我们</a> / <a target="_blank" href="#">版权声明</a> <a target="_blank" class="login" href="">会员登录</a> <a target="_blank" class="register" href="">会员注册</a> <br>
     <div style="text-align:left; padding-top:5px;"> </div>
    </div>
  </div>
</footer>
</body>
</html>

关于overflow属性：

div {
    background-color:#00FFFF;
    width:150px;
    height:150px;
    overflow: scroll;
}