第6章 CSS 层叠样式表

F2022697486

已于 2023-04-20 16:52:25 修改

阅读量263

点赞数

文章标签：前端 html css

于 2023-03-24 09:30:54 首次发布

本文链接：https://blog.csdn.net/F2022697486/article/details/129743159

版权

基本语法规则

CSS语法包括三部分：选择符、样式属性和属性值

<selector {property:value;property:value; ....property:value;}>

例如：body {color: pink} 此例的效果是页面文字为粉色

选择器分类

1.HTML 选择符

HTML 选择符的名称为HTML的元素名，会影响页面中所有的同名元素（区分大小写)。

设置页面中所有的段落文本为红色

<p color:red; >

2.类选择符

类选择符的名称以符号“.”开头，会影响页面中所有class属性值相同的元素。用类选择符可以把相同的元素分类定义为不同的样式。

.red< color:red;>
<p class = "red">

3.ID 选择符

ID选择符的名称以符号#开头，会影响页面中id属性值相同的元素（区分大小写，且id属性值应该是唯一的）

#blue{ color:red; }
<p id="blue">

4.包含选择符

包含选择符是对某种元素是包含关系定义的样式（如元素1里包含元素2)。此时，单独的元素1或元素2无效果。

#nav  ul{ font-size:14px }

5.CSS 3 组合选择符

后代选择器（以空格分隔）
子元素选择器（以>分隔）
相邻兄弟选择器（以+分隔）
普通兄弟选择器（以~分隔）

1）后代选择器

后代选择器使用空格来连接前后两个选择器。

	<body>
	<ul>
	<li><a href="#">首页</a></li>
	<li><a href="#">文章</a></li>
	<li><a href="#">参考</a></li>
	</ul>
	</body>

上述代码会将三个li中文字体字体颜色都设置为红色

2）子元素选择器

	<head>
	<style>
		h1 > strong {color: aquamarine;}
	</style>
	</head>
	<body>
	<h1>This is <strong>vary</strong> <strong>very</strong> important</h1>
	</body>

子选择器两边可以有空白符

3）相邻兄弟选择器

	<head>
	<style>
		li+li{font-weight:bold; color:aquamarine;}
	</style>
	</head>
	<body>
	<div>
		<ul>
			<li>List item 1</li>
			<li>List item 2</li>
			<li>List item 3</li>
			<li>List item 4</li>
			<li>List item 5</li>
		</ul>
		<ol>
			<li>List item 1</li>
			<li>List item 2</li>
			<li>List item 3</li>
		</ol>
	</div>
	</body>

4）普通兄弟选择器

普通兄弟选择器使用“~”来连接前后两个选择器查找一个指定元素后面所有的兄弟节点。

	<head>
	<style>
		h1~p{ color: palevioletred;}
	</style>
	</head>
	<body>
	<div>
		<p>1</p>
		<h2>2</h2>
		<p>3</p>
		<p>4</p>
		<p>5</p>
	</div>
	</body>

6.伪类

伪类是一类特殊的选择符，可用来描述超链接的不同状态。依据超链接的4个状态分类如下

a:link:用于修饰尚未单击过的超链接
a:hover:用于修饰鼠标指针悬停在超链接上的超链接
a:active:用于修饰鼠标单击与释放之间的超链接效果
a:visited:用于修饰已访问过的超链接

7.选择符的优先级

id选择符优先于类选择符

样式的引用方法

插入CSS样式表HTML文件有3种方法，分别是：外部样式表、内部样式表、嵌入样式表。

CSS文件定义在HTML文件的外部：链接外部样式表，导入外部样式表
CSS文件定义在HTML文件头部：内部样式表。
CSS文件定义在HTML文件的标记内：嵌入样式表

1.外部样式表

外部样式表要把样式表保存为一个独立的文件，然后在HTML文件中使用<link>标签或@import声明放入head内。

1）链接外部样式表

链接外部样式表的语法格式如下

	<head>
	...
	<link rel="stylesheet" type="text/css" href="样式表文件的地址"/>
	</head>

rel="stylesheet"是指在HTML文件中使用的是外部样式表
type="text/css"指明该文件的类型是样式表文件
href中的样式表文件地址，可以为绝对地址或相对地址
外部样式表文件中不能含有任何HTML标记，如<head>或<style>等

一个样式表文件可以应用在多个HTML文件。

2）导入外部样式表

导入外部样式表是指在样式表的<style> 区域内引入一个外部样式表文件，和链接外部样式表相似，需要放在<head>中

	<head>
	<style type="text/css">
		@import url(外部样式表文件地址);
		...
	</style>
	... 
	</head>

说明

@import语句后面的 “;” 是不可被省略的
外部样式表文件扩展名必须为 .css
@import 在某些浏览器中可能不支持

2.内部样式表

内部样式表是通过<style>标记把样式表的内容直接定义在HTML文件的<head>内。

	<head>
	<style type="text/css">
	<!--
	选择符{样式属性:取值;样式属性:取值;...}
	选择符{样式属性:取值;样式属性:取值;...}
	... 
	...
	-->
	</style>
	</head

内部样式表仅对所在的网页有效

	<head>
		<style type="text/css">
			h2{
				font-size: 36px;color: red;
			}
		</style>
	</head>

3.嵌入样式表

在HTML标记中直接加入样式的方法

内嵌标记仅对所在的标记有效

<p style="font-size: 28px; color: aqua;">字体大小28px,字体颜色变为aqua</p>

HTML标记就是页面中标记HTML元素的标记，例如body、p等
style参数后面引号中的内容就相当于样式表大括号里的内容。需要指出的是，style参数可以应用于HTML文件中的body标记，以及除了basefont、param和script之外的任意元素
用这种方法定义的样式，其效果只能控制某个标记。所以比较适合于指定网页中某小段文字的显示风格，或某个元素的样式

6.2.4 选择器的命名规则

选择器的规则如下：

不要包含特殊符号
风格统一

6.3 CSS属性值中的单位

绝对单位（一般用于传统平面印刷中）

英寸（in） :
厘米（cm）:
毫米（mm）:
磅（pt）:
pica(pc): 1pc=12pt

相对单位

CSS属性常用的相对单位有em、ex、px、%

（1）em:表示元素的字体高度，它根据字体的font-size属性值来确定单位的大小

（2）ex:表示使用字体中小写字母X的高度作为参考。在实际使用中，浏览器通过em的值除以2得到ex的值

（3）px:表示根据屏幕像素点来确定，这样不同的显示分辨率就会使相同取值的像素单位所显示出的效果截然不同。

（4）%:百分比也是一个相对单位值。百分比的值总是通过另一个值来计算，一般参考父元素中相同属性的值

6.4常用CSS属性介绍

6.4.1 设置字体属性

表6-1 字体相关属性及作用
属性名	作用
font-family	设置字体类型
font-size	设置字体大小
font-style	设置字体样式
font-weight	设置字体粗体
color	字体颜色
text-decoration	字体修饰
@font-face	定义服务器字体

1.字体（font-family）设置

font-family:"字体1"，"字体2"，"字体3";

当浏览器不支持第一个字体时，会采用第二个字体，以此类推。如果浏览器不支持定义的字体，则采用系统默认的字体

p{font-family:宋体，楷体;}

2.字号（font-size）设置

font-size属性用于修改字体大小

font-size：取值

取值范围

（1）数值|百分比

（2）绝对大小：xx-small x-small small medium large x-large xx-large

(3)larger smaller

3. 字体风格（font-style）

font-style属性用来设置字体样式

font-style: 字体样式

normal（默认值）是以正常方式显示的；italic表示显示样式为斜体；oblique属于中间状态，以倾斜样式显示（通常情况下，italic和oblique文本在浏览器中看起来完全一样）;inherit指从父元素继承字体样式

4. 加粗字体（font-weight）

font-weight用于设置字体粗细的程度

font-weight: 文本样式

normal(默认值)是正常粗细；bold是将文本设置为粗体；bolder表示为特粗体；lighter表示为特细体；number取值范围为100~vari900，一般情况下取整百值，其中400等价于normal，700等于bold

5.字体变形（font-variant）

font-variant属性用来将英文字体设置为小型的大写字母。

font-variant: 字体变形属性

normal（默认值）显示正常字体

small-caps将英文显示为小型大写字母

6.字体复合属性(font)

font是复合属性，包括多种属性，如字体、字号、粗细等，属性值之间用空格分隔

7.文本颜色（color）

color属性用于设置文本的颜色。

color:颜色值；

常用颜色值的格式如下。

颜色值可以是颜色的英文名称，如blue
6位或3位的十六进制数如#FFF000、#CCC
3位十进制数（0~255的整数）如RGB(255,0,0)
百分比，如RGB（80%,0,0）

8.文字修饰（text-decoration）

text-decoration: 文字修饰属性

none(默认值)对文本不进行修饰；underline对文本加下划线；overline对文本加上划线；line-through在文本上加删除线；

字体属性综合设置。

		<style>
		h1{font:italic bold 300%/30px 楷体,sans-serif}
		p.serif{font-family: "Times New Roman",Georgia,serif;
				font-size: 28px;
				font-style: italic;
				font-weight: bold;}
		p.sansserif{font-family: Arial, Helvetica, sans-serif;
					font-style: oblique;
					font-variant: small-caps;
					font-weight: 200;
		}
		</style>

HTML代码段

		<h1>css字体属性</h1>
		<p class="serif">This is a paragraph,shown in the Times New Roman font .</p>
		<p class="sansserif">This is a paragraph,shown in the Arial font.</p>

浏览效果如图

CSS3新增的字体属性

添加字体需要字体时在CSS 3 @font-face规则中定义

在@font-face规则中，首先定义字体的名称，在指向该字体文件

		<style>
	@font-face{
		font-family: myFirstFont;
		src: url('Sansation_Light.ttf'),
	url('Sansation_Light.eot'); 
	}
	div{font-family: myFirstFont;}
		</style>

该例中，font-family属性定义字体名称为myFirstFont,src设置自定义字体的相对路径或绝对路径。在<div>元素中，通过font-family属性来引用字体的名称。

背景属性

背景属性作用
属性名	作用
background-color	设置背景色
background-image	设置背景图
background-repeat	设置重复背景
background-attachment	设置背景图片的移动方式
background-position	设置背景图的位置

background-repeat属性取值说明
属性的取值	说明
repeat	背景图片在水平和垂直方向平铺（默认值）
repeat-x	背景图片在水平方向平铺
repeat-y	背景图片在垂直方向平铺
no-repeat	背景图片不平铺

1.背景颜色（background-color）

background-color:颜色取值;

2.背景图像（background-image）

background-image 属性用来设置标记的背景图片

background-image:url(URL)

3.背景关联（background-attachment）

此属性用来设置用来设置背景图像是随文档内容滚动还是固定在可视化区域

background-attachment: 属性；

scroll(默认值)随文档滚动

fixed表示背景固定在可视化区域内

水印效果

body{background-image:url(images/.jpg);background-attachment:fixed;}

4.背景图像重复（backgrounnd-repeat）

该属性设置图片的重复方式即当背景图像比元素的空间小时，将如何显示。其中包括水平重复、垂直重复

background-repeat: 属性值

repeat：表示在水平垂直方向平铺

no-repeat：表示背景图像在水平垂直方向都不平铺

repeat-x:为水平方向平铺

repeat-y:为垂直方向平铺

5.背景图片位置（background-position）

background-position属性设置图像在背景中的位置，这个属性智能应用于块级元素和替换元素。在HTML中，替换元素包括img、input、textarea、select和object

background-position有三种定位方法

图像左上角指定绝对距离，通常以像素为单位。
可以使用水平和垂直方向的百分比来指定位置
可以使用关键字来描述水平和垂直方向的百分比来指定位置水平方向上的关键词有left、center和right;垂直方向上的关键字为top、center和bottom.在使用关键字时，未指明方向上的默认取值为center

background-position:属性

区块属性（文本）

CSS区块属性可以设置文本的间距及对齐方式，特别是display:block;可以将元素显示为区块元素

属性名	作用
text-align	设置文本水平对齐
vertical-align	设置垂直对齐方式
text-indent	设置文本缩进
display	设置框类显示方式（区块属性）

1.水平对齐（text-align）

该属性设置文本行之间的对齐方式

text-align: 属性

属性值

left right center 左右居中

justify 两端对齐

start 为文本向行的开始边缘对齐

end为文本向行的结束边缘对齐

string 针对的是单个字符的对齐方式

2.垂直对齐（vertical-align）

vertical-align 属性可以设置一个内部元素的纵向位置相对于他的上级元素或相对于元素行。内部元素指前后没有断开的元素

baseline 使元素和父元素的基线对齐；

sub为下标

super为上标

top使元素与行中最多的元素向上对齐

text-top使元素与上级元素的字体向上对齐

middle使元素与上级元素的中部对齐

bottom使元素的顶端与中间行中最低的元素的顶端对齐

text-bottom使元素的底端与上级元素字体的底端对齐

3.文本缩进（text-indent）

text-indent属性用来设定段落的首行缩进。允许取负值，可以实现“悬挂缩进”

```
text-indent:取值；
```

取值可以是一个长度，或是一个百分比，百分比是依上级元素的值而定的

4.框类显示（display）

display属性用来显示框类元素的内部和外部显示类型

display：属性值；

display-outside：指定元素的外部显示类型即在流式布局中的表现
display-inside：指定元素的内部显示类型
display-listitem: 将这个元素的外部显示类型变为block盒，并将内部显示类型变为多个list-item inline盒
display-internal: 有些布局模型（如table和ruby）有这复杂的内部结构，因此它们的子元素可能扮演着不同的角色。这一类关键字就是用来定义这些“内部”显示类型，并且只有在这些特定的布局模型中才有意义
display-box: 这些值决定元素是否使用盒模型
display-legacy: CSS 2 对于display属性使用単关键字语法，对于相同布局模式的block级和inline级变体需要单独的关键字

display属性的取值及说明
属性值	说明
none	此元素不会被显示
inline	将对象设置为行内元素，在行内显示
block	将对象设置为块级元素，以块状显示，自动换行
inline-block	将对象设置为行内块标记
inherit	规定应该从父元素继承display属性的值

CSS 3 新增的文本属性

1.给文本添加阴影（text-shadow）

text-shadow: x-offset y-offset blur-radius color

x-offset指阴影的横向距离，可以取负值。当x-offset为正时，阴影在对象的右边，反之在左边

y-offset指阴影的纵向距离，可以取负值。当y-offset为正时，阴影在对象的底部，反之在上部

blur-radius指阴影的模糊半径，表示阴影向外模糊的范围。值越大，阴影向外模糊的范围越大，当值为0时表示不具有模糊效果

color 表示阴影的颜色当未设置此选项时，会使用文本的颜色作为阴影颜色

<html>
	<head>
		<title>文本阴影</title>
		<style>
			h1{text-shadow: 5px 5px 5px #ff557f;}
		</style>
	</head>
	<body>
		<h1>文本阴影效果!</h1>
	</body>
</html>

文本溢出（text-overflow）

语法：

text-overflow:属性值

clip表示不显示省略标记（...）,只是简单的修建文本
ellipsis表示当对象内文本溢出时显示省略标记（...），省略标记插入的位置是最后一个字符
string 表示使用给定的字符串来代表被修剪等文本

自动换行（word-wrap）

CSS 3 新增了word-wrap文本样式属性，用于设置当前行超过指定容器的边界时自动换行。

word-wrap:normal|break-word

边框属性

1.边框样式（border-style）

border-style属性用于设置边框样式

语法：

border-style：<值>

2.边框颜色（border-color）

border-color属性用来设置边框粗细

语法：

border-color:<值>

3.边框宽度（border-width）

border-width属性用来设置边框粗细

border-width:<值>

设置边框效果。

 <head>
  <style>
	div{height: 80px;
		width: 80px;
		color: #fff;
		padding: 20px;
		border: dashed 10px #FF0000;
		background-color: teal;
		margin: 10px;
		}
		.d1{
			float: left;
		}
		.d2{
			float:left
		}
  </style>
  <title></title>
 </head>
<body>
	<div class="d1"></div>
	<div class="d2"></div>
</body>

4. 边框弧度（border-radius）

border-radius 属性用来设置边框拐度弧度

border-radius:<值>

设置圆角边框，在上个实例添加下面的属性

 border: dashed 10px #00aa7f;

列表属性

CSS列表属性包含列表图片样式设置及样式定位

属性名	作用
list-style-type	设置列表符号的样式
list-style-image	设置列表图片替代列表符号
list-style-position	设置列表样式的位置

1. 改变列表符号（list-style-type）

list-style-type属性用来设定列表项的符号

语法：

list-style-type:<值>

可以用多种符号作为列表项的符号

2.图像符号（list-style-image）

list-style-image属性是使用图像作为项目列表的符号

语法：

list-style-image:url(图像地址)

3.列表缩进（list-style-position）

list-style-position属性用于设定列表缩进

list-style-position:list-style-position: 属性值

inside（默认值）表示列表项目标记放在文本以内，且环绕文本根据标记对齐

outside表示列表项目目标放置在文本以外，且环绕文本不根据标记对齐

方框属性

即盒子属性

利用CSS+DIV进行网页布局

1.宽（width）

width属性用来设置元素的宽

width:<值>

2.高(height)

height:属性用来设置元素的高

height:<值>

3.浮动（float）

float属性用于设定浮动定位

float:<值>

left right inside none

可以设置左浮动定位、右浮动定位和不浮动

4.内边距（padding）

padding属性用于设置元素内边距。

padding:<值>

5.外边距（margin）

margin:<值>

可以设置多个值，设置方法同padding

设置边距

<!DOCTYPE html>
<html>
	<head>
		<style>
	h4{
		background-color:green;
		padding: 50px 20px 20px 50px;
	}
	h3{
		background-color: blue;
		padding: 100px 50px 50px 200px;
	}
		</style>
	</head>
	
	<body>
		<h4>Hello world!</h4>
		<h3>The padding is different in this line.</h3>
	</body>
</html>

小型案例实训

1.内部样式表

内部样式表方法在HTML文件的编写头部CSS中的应用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>内部样式表</title>
		<style type="text/css">
			body{ background-color: beige;}
			h3{ color: black; font-size:35px;font-family: 黑体;text-align: center;}
			#red{color: #F00;font-size: 14px;}
		</style>
	</head>
	<body>
		<h3>编写头部</h3>
		<hr />
		<p id="red">在HTML文件的头部应用内部样式表方法添加CSS。</p>
		<p>此处文字无样式</p>
	</body>
</html>

2.内嵌样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>内嵌样式</title>
	</head>
	<body style="text-align: center;color: aquamarine;font-size: 24px;">编写头部CSS</h3>
		<h3 style="text-align: center; color: black; font-size: 24px;">编写头部CSS</h3>
		<hr />
		<p style="color: beige;">在HTML文件的头部应用内部样式表方法添加CSS</p>
		<p>我没有样式</p>
	</body>
</html>

3.链接外部样式表

HTML文件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>链接外部样式表</title>
		<link rel="stylesheet" type="text/css" href="css/1.css"/>
	</head>
	<body>
		<h3>编写头部CSS</h3>
		<hr />
			<p class="red">在HTML文件的头部应用内部样式表方法添加CSS</p>
			<p>我没有样式</p>
	</body>
</html>

创建一个CSS文件 1.css

body{ background: #999;}
	h3{color:aquamarine;font-size: 35px;font-family: 黑体;text-align: center;}
	.red{background: #999; color: #F00; font-size: 14px;}

F2022697486

关注

0
点赞
踩
1

收藏

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

类选择符的名称以符号“.”开头，会影响页面中所有class属性值相同的元素。用类选择符可以把相同的元素分类定义为不同的样式。ID选择符的名称以符号#开头，会影响页面中id属性值相同的元素（区分大小写，且id属性值应该是唯一的）包含选择符是对某种元素是包含关系定义的样式（如元素1里包含元素2)。此时，单独的元素1或元素2无效果。HTML 选择符的名称为HTML的元素名，会影响页面中所有的同名元素（区分大小写)。普通兄弟选择器使用“~”来连接前后两个选择器查找一个指定元素后面所有的兄弟节点。
复制链接

扫一扫