使用HTML和CSS开发Web网站（二）_使用html创建一个基本网页结构。2、使用css为网页添加基本样式。3、使用javascrip-优快云博客

本文链接：https://blog.youkuaiyun.com/vipsongtaohong/article/details/94737360

本文详细介绍了CSS（层叠样式表）的基本概念和作用，包括CSS的样式规则声明、选择器类型如HTML选择器、类选择器、ID选择器和伪类选择器等，以及如何通过<style>标签声明样式。此外，还概述了CSS的创建方式，如外部样式表、内部样式表和内联样式，并讨论了背景、边框、文本、字体等常见样式属性的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

五、CSS层叠样式表

理解样式表对控制页面元素外观的作用

掌握样式规则的语法

理解各种选择器

理解样式代码在什么位置编写及它们的作用范围

掌握常用的样式属性

1、什么是CSS？

CSS的英文全称为Cascading Style Sheet，中文翻译一般称为层叠样式表或级联样式表。 CSS的作用是定义如何显示HTML元素。它是一门独立的语言，由万维网联盟（W3C）制定。目前的正式版本为2.0版。

2、CSS解决的问题

CSS的出现，解决了网页内容与表现分离的问题。由HTML的标签告知浏览器网页中有哪些内容，而由CSS的规则告知浏览器这些内容应该如何表现。 CSS对网页文档及其元素的外观样式的控制能力远非HTML语言所能比拟。 CSS能够对网页文档及其元素的外观样式实施完整的和精确的控制。

3、CSS样式规则声明

CSS语法由三部分构成：选择器，属性和值。
三个部分组合起来构成了一条样式规则声明declaration。
选择器selector是某个HTML标签的名称或你自定义的名称。选择器说明这个样式在网页中的适用范围。
属性property是你期望控制的样式的某个方面，如字体，颜色，边框，背景等。
属性需要有一个或多个值value。
属性名和值可以有多对同时出现，多对之间用;分号隔开，属性名和值之间用:冒号连接。它们集中放置在一对{}大括号中。

4、在<style></style>标签中声明样式规则

<head>
	<title>样式规则声明</title>
	<style type="text/css">
	body {background-image:url(image/eg_bg.gif);}
	p {text-indent:32px;font-size:16px;}
	</style>
</head>

<body>
	<p>这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。</p>
</body>

5、选择器

一条样式规则声明中包含选择器，选择器的作用是说明这条样式规则在网页中的适用范围，或者说网页中的哪个地方或哪些地方将要用到它。
上例中，body和p就是这两条样式规则中的选择器。
第一条规则对网页中的<body></body>即网页正文有效。
第二条规则对网页中的所有<p></p>标签即段落都有效。
两条规则中的选择器的名称是合法的HTML标签的名称，这样浏览器在解析这条样式规则时就已经知道它是针对页面中这种标签的。
使用HTML标签名称作为选择器，称为HTML选择器或标签选择器。
其他的选择器还有：类选择器、ID选择器、伪类选择器、伪元素选择器、上下文选择器、群组联合选择器等。

5.1、HTML选择器

使用某种HTML标签的名称作为选择器，当浏览器解析这种标签时，即采用这条样式规则。
这样做的目的是为了覆盖浏览器内部对这种标签显示方式预先定义的规则。

<style>
标签名 {/*……*/}
</style>

5.2、通配符选择器——特殊的HTML选择器

使用*号通配符代表所有HTML标签。
用*号作为选择器名称的样式规则将作用于所有标签。

* {
	/*在这里定义对所有标签都生效的样式*/
}

5.3、类选择器

使用类选择器，将多个应共享同一种外观的标签归为一类。
定义类选择器时，要以 . 点号作为前缀，类名可自己定义，但必须符合命名标识符的规范，不能以数字开头。
类选择器定义好之后，并不会自动生效，这一点和HTML选择器不同。在需要使用这个类选择器定义的样式的标签中，设置class属性，赋值为类的名称，浏览器在显示这个标签时将套用这个类选择器定义的样式。

<style>
.类名{/*……*/}
</style>
<标签 class = “类名” ..….>……
<标签 class = “类名” ..….>……

5.4、ID选择器

为页面中特定的某个标签定制外观。
定义ID选择器时，要以#号作为前缀，ID名可自己定义，但必须符合命名标识符的规范，不能以数字开头。
ID选择器定义好之后，并不会自动生效，跟类选择器相似，需要在要使用此样式的标签中设置ID属性来显式地使用这个ID选择器。
标签的id属性值在整个页面范围内应具有唯一性。
ID选择器样式规则在一个页面中应只被使用一次，即只能在一处标签使用此样式规则。

<style>
#id名{/*……*/}
</style>
<标签 id = “id名” ……>……

5.5、伪类选择器

伪类用于向其他选择器指定适用范围内的特定元素或特定状态制定样式。
使用得比较多的场景是使用锚伪类为页面中的超链接制定在不同状态下不同的外观。

<style>
a : 普通状态 {/*……*/}
a : 已被访问状态 {/*……*/}
a : 鼠标悬停状态 {/*……*/}
a : 被激活状态 {/*……*/}
</style>

5.5.1、锚伪类选择器

<style type="text/css">
a {text-decoration:none;font-size:14px;}
a:link {color:blue;}
a:visited {color:gray;}
a:hover {color:red;font-size:16px;text-decoration:underline;}
a:active {font-style:italic;}
</style>

5.5.2、伪元素选择器

伪元素用于向其他选择器指定适用范围内的元素特定部分制定样式。
一般应用于文本块的首行或文本块的首字符。

<style>
选择器 : first-line {/*……*/}
选择器 : first-letter {/*……*/}
</style>

5.6、上下文选择器

<style type="text/css">
ol li {list-style-type:upper-alpha;font-size:14px;}
ul li {list-style-image:url(image/li.gif);font-weight:bold;}
</style>

5.7、群组联合选择器

多个样式规则的定义相同，但选择器名称不同。
可以将这些样式规则合并成为一个样式规则，选择器名称之间使用逗号分隔。

<style>
选择器一  , 选择器二  , … {/*……*/}
</style>

5.8、属性选择器

属性选择器

为带有 title 属性的所有元素设置样式：
[title]
{
color:red;
}

属性和值选择器

为 title="learn" 的所有元素设置样式：
[title=learn]
{
border:5px solid blue;
}

属性和值选择器 - 多个值

空格分隔的属性值：
<style type="text/css">
[title~=hello]
{
color:red;
} 
</style>
</head>

<body>
<h1>可以应用样式：</h1>
<h2 title="hello world">Hello world</h2>
<p title="student hello">Hello students!</h1>
<hr />

<h1>无法应用样式：</h1>
<h2 title="world">Hello world</h2>
<p title="student">Hello students!</p>
</body>

连字符分隔的属性值：

<style type="text/css">
[lang|=en]
{
color:red;
}
</style>
</head>

<body>
<h1>可以应用样式：</h1>
<p lang="en">Hello!</p>
<p lang="en-us">Hi!</p>
<hr />

<h1>无法应用样式：</h1>
<p lang="us">Hi!</p>
<p lang="zh">Hao!</p>
</body>

设置表单的样式

input[type="text"]
{
  width:150px;
  display:block;
  margin-bottom:10px;
  background-color:yellow;
  font-family: Verdana, Arial;
}

input[type="button"]
{
  width:120px;
  margin-left:35px;
  display:block;
  font-family: Verdana, Arial;
}

6、怎么创建css？

1、外部样式表

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

2、内部样式表

<head>
<style type="text/css">
  hr {color: sienna;}
  p {margin-left: 20px;}
  body {background-image: url("images/back40.gif");}
</style>
</head>

3、内联样式

<p style="color: sienna; margin-left: 20px">
This is a paragraph
</p>

4、多重样式

外部样式表：

h3 {
  color: red;
  text-align: left;
  font-size: 12px;
  }

内部样式表:

h3 {
  text-align: right; 
  font-size: 20px;
  }

h3最终得到的样式：

color: red; 
text-align: right; 
font-size: 20pt;

六、css样式

理解并掌握与背景相关的样式属性

理解并掌握与边框相关的样式属性

理解并掌握与文本相关的样式属性

理解并掌握与字体相关的样式属性

理解并掌握与列表相关的样式属性

理解并掌握其他常用的样式属性。

1、css背景

使用与背景相关的CSS属性，可以设置一个区域的背景颜色、背景图像。

属性	意义	取值
background-color	设置元素的背景颜色。	rgb颜色、十六进制颜色、颜色名称、透明色。如:rgb(255,0,0)或#ff0000或red都可表示红色。
background-image	把图像设置为背景。	url(图像的URL地址)或none。
background-repeat	设置背景图像是否及如何重复平铺。	repeat:沿水平和垂直两个方向重复平铺； repeat-x:仅沿水平方向重复平铺； repeat-y:沿垂直方向重复平铺； no-repeat:不重复平铺即图像在背景上只出现一次。
background-attachment	背景图像是否固定或者随着页面的其余部分滚动。	scroll:背景图像随着容器一起滚动； fixed:背景图像在容器滚动时固定不动。
background-position	设置背景图像的起始位置。	水平方向上有left、center、right三种位置，垂直方向上有top、center、bottom三种位置，
background	简写属性，作用是将背景属性设置在一个声明中。	依次提供background-color、 background-image、 background-repeat 、 background-attachment 、 background-position属性的值。之间用空格分隔。

网页元素的背景显示时，背景图像优先于背景颜色。
background-color属性设置为transparent表示透明。
一般应为background-position属性赋两个值，第一个值表示垂直方向，第二个值表示水平方向。如top left表示顶部左侧，center right 表示中部右侧，bottom center表示底部中间。如果仅设置一个方向的位置关键字，则它表示垂直方向，而缺少的第二个水平方向默认为center。
可使用两个像素值描述背景图像与容器左边界及顶边界的距离，如:50px 100px；
可使用百分数描述背景图像与容器左边界及顶边界的距离。

2、css边框

使用与边框相关的CSS属性，可以设置一个区域的边框粗细、线型及颜色。

属性	意义	取值
border-*-width	top\|right\|bottom\|left边框的宽度。	可使用thin、medium、thick三种值，还可使用以像素单位的数字值。
border-*-style	top\|right\|bottom\|left边框的线型。	常用的有solid、dashed、dotted、 double等，使用none是则无边框。
border-*-color	top\|right\|bottom\|left边框的颜色。	可使用rgb颜色，十六进制颜色和颜色名称及透明色。透明由transparent表示。
border-width、 border-style、 border-color	为各个边框设置宽度、线型和颜色。	按top\|right\|bottom\|left的顺序依次设置各个边框的宽度、线型和颜色，各个值之间用空格分隔。
border-*	top\|right\|bottom\|left边框的宽度，线型和颜色。	按宽度、线型、颜色的顺序依次提供值，各个值之间用空格分隔。
border	在一个声明中设置四个边框的所有属性。	按宽度、线型、颜色的顺序依次提供值，各个值之间用空格分隔。
border-collapse	相邻的两条边框线是否合并为一条	常用的值是collapse,意思是要将相邻的两条边框线合并为一条。

border-width（border-style、border-color）属性
如果只赋一个值，则它表示四条边框共同的宽度（线型、颜色）；
如果有两个值，则第一个值表示顶边框和底边框的宽度（线型、颜色），而第二个值表示右边框和左边框的宽度（线型、颜色）；
如果有三个值，则第一个值表示顶边框的宽度（线型、颜色），第二个值表示右边框和左边框的宽度（线型、颜色），第三个值表示底边框的宽度（线型、颜色）。
左右相邻的两个单元格本来有各自独立的四个边框，大部分时候我们希望左边单元格的右边框与右边单元格的左边框合并在一起。可以在这些单元格所属的表格上设置单元格边框的合并属性值为collapse即可。上下相邻的单元格边框合并亦同此理。

3、css文本

<style type="text/css">
	p{font-size:14px;}			
	#myp1{
		color:red; text-indent:28px;
	}
	.myspan{
		color:blue; text-decoration:underline; letter-spacing:10px;
	}
	#myp2{
		text-align:center; text-transform:uppercase;
	}
</style> 


<p id="myp1">
这是一个段落。<span class="myspan">这里有一个文字块</span>这是一个段落。</p>
<p id="myp2" style="word-spacing:14px;text-transform:capitalize;">
one two three four five
</p>

4、css字体

使用与字体相关的CSS属性，可以设置文字块的字体或字体组、字号大小、行间距以及加粗、倾斜、小型大写字体等特殊格式。

属性	意义	取值
font-style	设置字体样式。	normal:正常；italic:斜体；oblique:倾斜
font-variant	以小型大写字体或者正常字体显示文本。	normal:正常；small-caps:小型大写
font-weight	设置字体的粗细。	可使用normal、bold、bolder、lighter 。
font-size	设置字体的尺寸。	一般使用基于px或pt单位的数字。
font-family	字体类型名称或者字体组列表。	各字体名称之间用,逗号分隔。
font	将所有针对字体的属性设置在一个声明中。	依次设置font-style、font-variant、font-weight、font-size、font-family等属性
line-height	设置文本块的行高。	可使用px像素单位或%百分比。

5、列表

使用与列表相关的CSS属性，可以设置有序列表和无无序列表的列表项目的标记（编号或项目符号）、列表项标记的位置、列表项标记的图像。

属性	意义	取值
list-style-type	设置列表项标记的类型。	较常用的值有disc、circle、square decimal、lower-roman、 upper-roman、lower-alpha、 upper-alpha。
list-style-position	设置列表中列表项标记的位置。	outside:列表项标志位于列表区域外面，默认值。 inside:列表项标志插入到列表区域开始处，就像是第一个字符。
list-style-image	将图像设置为列表项标记。	提供图像的地址，也可设置为none。
list-style	用于将所有用于列表的属性设置于一个声明之中。	依次设置list-style-type、list-style-position、list-style-image 。值之间用空格分隔。

6、其他杂项

属性	意义	取值
display	设置元素如何显示	可使用inline、 block方式显示，设置为none则不显示。
visibility	设置元素的可见性	可设置为visible或hidden。被隐藏的元素仍然占据页面正文的空间。
cursor	设置元素上方光标的样式。	常用的值有help 、wait 、move、 pointer等。