CSS（2）_css id class选择器-CSDN博客

本文链接：https://blog.csdn.net/m0_70251011/article/details/134703843

本文详细介绍了CSS的相关知识，包括ID和Class选择器的使用规则，背景属性如颜色、图像设置，文本属性如颜色、对齐、修饰等，还阐述了字体属性，如字体类型、样式、大小、加粗等的设置方法，以及Web安全字体组合举例。

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

CSS（ID和Class选择器）

ID和class选择器

Id选择器，可以为标有特定id的html元素指定特定的样式，HTML元素以ID属性来设置ID选择器CSS中 id选择器以#来定义
ID属性不能以数字开头数字开头的ID在浏览器中不起作用

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>ID选择器</title> 
<style>
#para1
{
	text-align:center;
	color:red;
} 
</style>
</head>

<body>
<p id="para1">123123</p>
<p>这个段落不受该样式的影响。</p>
</body>
</html>

显示结果为
在这里插入图片描述
2.Clsaa选择器，可以在多个元素中使用，用于描述一组元素的样式，以Class属性表示，在CSS中，类选择器以一个点(.)号显示：
所有拥有Center类元素都居中

也可以指定特定的HTML元素使用class，在以下示例中，所有P元素在这里插入图片描述

Background背景

CSS属性定义背景效果：
background-color（背景颜色）
background-image（背景图像）
background-repeat（背景图像是否/如何重复）
background-attachment（背景图像是否固定）
background-position（背景图像起始位置）

背景颜色Background-color:
在这里插入图片描述
CSS中，颜色值通常以以下方式定义:

十六进制 - 如：“#ff0000”
RGB - 如：“rgb(255,0,0)”
颜色名称 - 如：“red”
以下实例中, h1, p, 和 div 元素拥有不同的背景颜色:
在这里插入图片描述
背景图像Background-image

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>背景图像</title> 
<style>
body 
{
	background-image:url('https://static.runoob.com/images/mix/paper.gif');
	
}
</style>
</head>

<body>
<h1>Hello World!</h1>
</body>

</html>

默认情况下 background-image 属性会在页面的水平或者垂直方向平铺。在这里插入图片描述
让背景图像不影响文本的排版

如果你不想让图像平铺，你可以使用 background-repeat 属性:

body
{
background-image:url(‘img_tree.png’);
background-repeat:no-repeat;
}

在这里插入图片描述
让页面排版更加合理，不影响文本的阅读，我们可以改变图像的位置。

body
{
background-image:url(‘img_tree.png’);
background-repeat:no-repeat;
background-position:right top;
}

在这里插入图片描述

CSS Text（文本）

颜色属性被用来设置文字的颜色。

颜色是通过CSS最经常的指定：

十六进制值 - 如: ＃FF0000
一个RGB值 - 如: RGB(255,0,0)
颜色的名称 - 如: red

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>文本</title> 
<style>
body {color:red;}
h1 {color:#00ff00;}
p.ex {color:rgb(0,0,255);}
</style>
</head>

<body>
<h1>这是标题 1</h1>
<p>这是一个普通的段落。请注意,本文是红色的。页面中定义默认的文本颜色选择器。</p>
<p class="ex">这是一个类为"ex"的段落。这个文本是蓝色的。</p>
</body>
</html>

在这里插入图片描述
对于W3C标准的CSS：如果你定义了颜色属性，你还必须定义背景色属性。

文本对齐方式
文本排列属性是用来设置文本的水平对齐方式。

文本可居中或对齐到左或右,两端对齐.

当text-align设置为"justify"，每一行被展开为宽度相等，左，右外边距是对齐（如杂志和报纸）。

h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}

文本修饰
text-decoration 属性用来设置或删除文本的装饰。

从设计的角度看 text-decoration属性主要是用来删除链接的下划线：

a {text-decoration:none;}

同时也可以这样装饰文字

h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}

不建议强调指出不是链接的文本，因为这常常混淆用户。

文本转换
文本转换属性是用来指定在一个文本中的大写和小写字母。

可用于所有字句变成大写或小写字母，或每个单词的首字母大写。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>文本中字母大小写</title> 
<style>
p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}
</style>
</head>

<body>
<p class="uppercase">This is some text.</p>
<p class="lowercase">This is some text.</p>
<p class="capitalize">This is some text.</p>
</body>
</html>

在这里插入图片描述

p.uppercase {text-transform:uppercase;}字母大写
p.lowercase {text-transform:lowercase;}字母小写
p.capitalize {text-transform:capitalize;}首字母大写

文本缩进
文本缩进属性是用来指定文本的第一行的缩进。
在这里插入图片描述

如何增加或减少字符之间的空间。

<style>
h1 {letter-spacing:2px;}
h2 {letter-spacing:-3px;}
</style>
</head>

<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
</body>

在这里插入图片描述
如何指定一个段落中行之间的空间

<style>
p.small {line-height:70%;}
p.big {line-height:200%;}
</style>
</head>

<body>
<p>
这是一个标准行高的段落。<br>
这是一个标准行高的段落。<br>
大多数浏览器的默认行高约为110%至120%。<br>
</p>

<p class="small">
这是一个更小行高的段落。<br>
这是一个更小行高的段落。<br>
这是一个更小行高的段落。<br>
这是一个更小行高的段落。<br>
</p>

<p class="big">
这是一个更大行高的段落。<br>
这是一个更大行高的段落。<br>
这是一个更大行高的段落。<br>
这是一个更大行高的段落。<br>
</p>

在这里插入图片描述
如何改变元素的文本方向

<style type="text/css">
div.ex1 {direction:rtl;}
</style>
</head>
<body>

<div>一些文本。 默认书写方向</div>
<div class="ex1">一些文本。从右到左的书写方向。</div>

增加一个段落中的单词之间的空白空间。

<style type="text/css">
p
{ 
	word-spacing:30px;
}
</style>
</head>
<body>

<p>
This is some text. This is some text.
</p>

禁用一个元素内的文字不换行。

<style type="text/css">
p
{
	white-space:nowrap;
}
</style>

设置文本的垂直对齐图像。

<style>
img.top {vertical-align:text-top;}
img.bottom {vertical-align:text-bottom;}
</style>
</head>

<body>
<p>一个<img src="logo.png" alt="w3cschool" width="270" height="50" />默认对齐的图像。</p> 
<p>一个<img class="top" src="logo.png" alt="w3cschool" width="270" height="50" />  text-top 对齐的图像。</p> 
<p>一个<img class="bottom" src="logo.png" alt="w3cschool" width="270" height="50" /> text-bottom 对齐的图像。</p>
</body>

设置文本阴影。

<head>
<style>
h1 {text-shadow:2px 2px #FF0000;}
</style>
</head>
<body>

<h1>Text-shadow 效果</h1>
</body>

所有CSS文本属性

在这里插入图片描述

Fonts（字体）

CSS字体属性定义字体，加粗，大小，文字样式。
在这里插入图片描述

在CSS中有两种类型的字体系列名称：

通用字体类型：拥有相似外观的字体系统组合（如 “Serif” 或 “Monospace”）
特定字体类型：一个特定的字体系列（如 “Times” 或 “Courier”）

字体类型：font-family 属性设置文本的字体系列。

font-family 属性应该设置几个字体名称作为一种"后备"机制，如果浏览器不支持第一种字体，他将尝试下一种字体。

注意: 如果字体系列的名称超过一个字，它必须用引号，如Font Family：“宋体”。

多个字体系列是用一个逗号分隔指明：

p{font-family:“Times New Roman”, Times, serif;}

CSS Web安全字体组合举例

在这里插入图片描述

在这里插入图片描述
字体样式
主要是用于指定斜体文字的字体样式属性。

这个属性有三个值：

正常 - 正常显示文本
斜体 - 以斜体字显示的文字
倾斜的文字 - 文字向一边倾斜（和斜体非常类似，但不太支持）

<style>
p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}
</style>
</head>

<body>
<p class="normal">这是一个段落,正常。</p>
<p class="italic">这是一个段落,斜体。</p>
<p class="oblique">这是一个段落,斜体。</p>
</body>

在这里插入图片描述
字体大小
font-size 属性设置文本的大小。

能否管理文字的大小，在网页设计中是非常重要的。但是，你不能通过调整字体大小使段落看上去像标题，或者使标题看上去像段落。

请务必使用正确的HTML标签，就< h1> - < h6>表示标题和< p>表示段落：

字体大小的值可以是绝对或相对的大小。

绝对大小：

设置一个指定大小的文本
不允许用户在所有浏览器中改变文本大小
确定了输出的物理尺寸时绝对大小很有用
相对大小：

相对于周围的元素来设置大小
允许用户在浏览器中改变文字大小
Remark 如果你不指定一个字体的大小，默认大小和普通文本段落一样，是16像素（16px=1em）。
设置字体大小像素
设置文字的大小与像素，让您完全控制文字大小：

h1 {font-size:40px;}
h2 {font-size:30px;}
p {font-size:14px;}

虽然可以通过浏览器的缩放工具调整文本大小，但是，这种调整是整个页面，而不仅仅是文本，可以用em来设置字体大小

1em和当前字体大小相等。在浏览器中默认的文字大小是16px。因此，1em的默认大小是16px。可以通过下面这个公式将像素转换为em：px/16=em

h1 {font-size:2.5em;} /* 40px/16=2.5em /
h2 {font-size:1.875em;} / 30px/16=1.875em /
p {font-size:0.875em;} / 14px/16=0.875em */

还可以使用百分比和EM组合
在所有浏览器的解决方案中，设置元素的默认字体大小的是百分比：

body {font-size:100%;}
h1 {font-size:2.5em;}
h2 {font-size:1.875em;}
p {font-size:0.875em;}

设置字体加粗

<style>
p.normal {font-weight:normal;}
p.light {font-weight:lighter;}
p.thick {font-weight:bold;}
p.thicker {font-weight:900;}
</style>
</head>

<body>
<p class="normal">This is a paragraph.</p>
<p class="light">This is a paragraph.</p>
<p class="thick">This is a paragraph.</p>
<p class="thicker">This is a paragraph.</p>
</body>

设置字体转变

<style>
p.normal {font-variant:normal;}
p.small {font-variant:small-caps;}
</style>
</head>

<body>
<p class="normal">My name is Hege Refsnes.</p>
<p class="small">My name is Hege Refsnes.</p>
</body>

简写属性将字体属性设置在一个声明之内。

<style>
p.ex1
{
	font:15px arial,sans-serif;
}

p.ex2
{
	font:italic bold 12px/30px Georgia,serif;
}
</style>
</head>

<body>
<p class="ex1">This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.</p>
<p class="ex2">This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.</p>
</body>

在这里插入图片描述