css样式

秋_.

已于 2022-12-09 19:49:26 修改

阅读量91

点赞数 1

文章标签： css 前端 html

于 2022-12-09 18:45:16 首次发布

本文链接：https://blog.csdn.net/m0_67285201/article/details/128256842

版权

2 文本

2.1 文本颜色

color 属性用于设置文本的颜色。
页面的默认文本颜色是在 body 选择器中定义的。

2.2 文本对齐

text-align 属性用于设置文本的水平对齐方式。

文本可以左对齐或右对齐，或居中对齐。

2.3 垂直对齐

vertical-align 属性设置元素的垂直对齐方式。

实例：

img.top {
  vertical-align: top;
}

img.middle {
  vertical-align: middle;
}

img.bottom {
  vertical-align: bottom;
}

2.4 文本装饰

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

text-decoration: none; 通常用于从链接上删除下划线：

a {
  text-decoration: none;
}

h1 {
  text-decoration: overline;
}

h2 {
  text-decoration: line-through;
}

h3 {
  text-decoration: underline;
}

效果：

标题一，上划线

标题二，删除线

标题三，下划线

2.5 文本缩进

text-indent 属性用于指定文本第一行的缩进。

实例：

p {
  text-indent: 2em;
}

效果：

根据现有病例资料，新型冠状病毒肺炎以发热、干咳、乏力等为主要表现，少数患者伴有鼻塞、流涕、腹泻等上呼吸道和消化道症状。重症病例多在1周后出现呼吸困难，严重者快速进展为急性呼吸窘迫综合征、脓毒症休克、难以纠正的代谢性酸中毒和出凝血功能障碍及多器官功能衰竭等。

值得注意的是重症、危重症患者病程中可为中低热，甚至无明显发热。轻型患者仅表现为低热、轻微乏力等，无肺炎表现。从目前收治的病例情况看，多数患者愈后良好，少数患者病情危重。

老年人和有慢性基础疾病者预后较差。儿童病例症状相对较轻。

2.6 字符间距

letter-spacing 属性用于指定文本中字符之间的间距。

实例：

h2 {
  letter-spacing: 12px;
}

效果：

千方百计帮助高校毕业生就业

2.7 文本阴影

text-shadow 属性为文本添加阴影。

最简单的用法是只指定水平阴影（2px）和垂直阴影（2px）：

h1.simple {
  text-shadow: 2px 2px;
}

效果：

文字阴影效果

接下来，向阴影添加颜色（红色）：

h1.red {
  text-shadow: 2px 2px red;
}

效果：

文字阴影效果

然后，向阴影添加模糊效果（5px）：

h1.blur {
  text-shadow: 2px 2px 5px red;
}

效果：

文字阴影效果

3 字体

3.1 字体选择很重要

选择正确的字体会对网站的用户体验产生巨大影响。

正确的字体可以为商业品牌创造强有力的形象。

使用易于阅读的字体很重要。为字体选择正确的颜色和文本大小也很重要。

3.2 `font-family` 属性

在 CSS 中，我们使用 font-family 属性规定文本的字体。

font-family 属性应包含多个字体名称作为备用字体，以确保浏览器/操作系统之间的最大兼容性。字体名称应以逗号分隔。

如果字体名称不止一个单词，则必须用引号引起来，例如：“Times New Roman”。

3.3 字体样式

font-style 属性主要用于指定斜体文本。

此属性可设置三个值：

normal - 文本正常显示
italic - 文本以斜体显示

3.4 字体粗细

font-weight 属性指定字体的粗细。

实例：

p.normal {
  font-weight: normal;
}

p.thick {
  font-weight: bold;
}

效果：

文本正常显示

文本加粗显示

3.5 字体大小

font-size 属性设置文本的大小。
font-size 值可以是绝对或相对大小。

绝对尺寸：

将文本设置为指定大小
不允许用户在所有浏览器设置中更改文本大小（可访问性不佳）
当输出的物理尺寸已知时，绝对尺寸很有用

相对尺寸：

设置相对于周围元素的大小
允许用户在浏览器中更改文本大小

如果未指定字体大小，则普通文本（如段落）的默认大小为 16px（16px = 1em）。

3.5.1 以像素设置字体大小

使用像素设置文本大小可以完全控制文本大小：





`

视口（Viewport）是浏览器窗口的大小。 1vw = 视口宽度的 1％。如果视口为 50 厘米宽，则 1vw 为 0.5 厘米。


## 4 图像

### 4.1 背景图像

`background-image` 属性指定用作元素背景的图像。

默认情况下，图像会重复，以覆盖整个元素。

实例：

```css
div {
  background-image: url('img/paper.jpg');
}

效果：

4.1.1 背景重复

默认情况下，background-image 属性在水平和垂直方向上都重复图像。

某些图像应只适合水平或垂直方向上重复，否则它们看起来会很奇怪，如下所示：

如果上面的图像仅在水平方向重复（ background-repeat: repeat-x; ），则背景看起来会更好：

如需垂直重复图像，请设置 background-repeat: repeat-y; ：

div.repeat-y {
  width: 440px;
  height: 290px;
  box-sizing: border-box;
  padding: 10px 15px 10px 75px;
  background-image: url('img/notebook_bg.png');
  background-repeat: repeat-y;
}

<p>背景图像仅在垂直方向上重复！</p>

background-repeat: no-repeat; 属性还可指定只显示一次背景图像：

div.no-repeat {
	width: 440px;
	height: 290px;
  box-sizing: border-box;
  padding: 5px 15px 5px 55px;
  background-image: url('img/objective_bg.png');
  background-repeat: no-repeat;
}

4.1.2 背景位置

background-position 属性用于指定背景图像的位置。例如，把背景图片放在右上角：

div.right-top {
	width: 440px;
	height: 290px;
	box-sizing: border-box;
	padding: 5px 15px 5px 55px;
	background-image: url('img/objective_bg.png');
	background-repeat: no-repeat;
	background-position: right top;
}

4.1.3 简写背景属性

如需缩短代码，也可以在一个属性中指定所有背景属性。它被称为简写属性。

实例：

div {
  background: #ececec url("objective_bg.png") no-repeat right top;
}

它等同于：

div {
  background-color: #ececec;
  background-image: url("objective_bg.png");
  background-repeat: no-repeat;
  background-position: right top;
}

4.2 图像精灵

图像精灵是单个图像中包含的图像集合。

包含许多图像的网页可能需要很长时间才能加载，同时会生成多个服务器请求。

使用图像精灵将减少服务器请求的数量并节约带宽。

4.2.1 简单的例子

我们使用以下单幅图像（“navsprites.gif”）而不是使用三幅单独的图像：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ow44S74t-1670578617060)(MD文档.assets\navsprites.gif)]

通过使用 CSS，我们可以仅显示所需图像的某个部分。

在下面的例子中，CSS 指定了显示 “navsprites.gif” 图像的哪部分：

#home {
  width: 44px;
  height: 44px;
  background: url(navsprites.gif) 0 0;
}
``
#### 4.2.2 创建导航列表

我们希望使用精灵图片（"navsprites.gif"）来创建一个导航列表。

我们将使用 HTML 列表，因为它可以是链接，同时还支持背景图片：

```css
#navlist {
	position: relative;
}
#navlist li {
	margin: 0;
	padding: 0;
	list-style: none;
	position: absolute;
	top: 0;
}
#navlist a {
	display: block;
}
#navlist li,
#navlist a {
	width: 44px;
	height: 44px;
	display: block;
}
#home {
	left: 0px;
}
#home a {
	background: url('img/navsprites.gif') 0 0;
}
#prev {
	left: 60px;
}
#prev a {
	background: url('img/navsprites.gif') -45px 0;
}
#next {
	left: 120px;
}
#next a {
	background: url('img/navsprites.gif') -90px 0;
}

4.2.3 图像精灵 - 悬停效果

现在，我们要向导航列表中添加悬停效果。

:hover 选择器可用于所有元素，而不仅限于链接。

我们的新图像（“navsprites_hover.gif”）包含三幅导航图像和三幅用于悬停效果的图像：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9chg4NQd-1670578617062)(MD文档.assets\navsprites_hover.gif)]

因为这是一幅图像，而不是六个单独的文件，所以当用户将鼠标悬停在图像上时，不会有加载延迟。

我们仅添加三行代码来实现悬停效果：

#home a:hover {
  background: url('img/navsprites_hover.gif') 0 -45px;
}

#prev a:hover {
  background: url('img/navsprites_hover.gif') -45px -45px;
}

#next a:hover {
  background: url('img/navsprites_hover.gif') -90px -45px;
}

5 列表

5.1 HTML 列表和 CSS 列表属性

在 HTML 中，列表主要有两种类型：

无序列表（<ul>）- 列表项用的是项目符号标记
有序列表（<ol>）- 列表项用的是数字或字母标记

5.2 不同的列表项目标记

list-style-type 属性指定列表项标记的类型。

下例显示了一些可用的列表项标记：

ul.circle {
  list-style-type: circle;
}

ul.square {
  list-style-type: square;
}

ol.upper {
  list-style-type: upper-roman;
}

ol.lower {
  list-style-type: lower-alpha;
}

5.3 图像作为列表项标记

list-style-image 属性将图像指定为列表项标记：


### 5.4 删除默认设置

`list-style-type:none` 属性也可以用于删除标记/项目符号。

，列表还拥有默认的外边距和内边距。要删除此内容，请在 &lt;ul&gt; 或 &lt;ol&gt; 中添加 `margin:0` 和 `padding:0` ：

```cs

### 5.5 设置列表的颜色样式

我们还可以使用颜色设置列表样式，使它们看起来更有趣。

添加到 &lt;ol&gt; 或 &lt;ul&gt; 标记的任何样式都会影响整个列表，而添加到 &lt;li&gt; 标记的属性将影响各个列表项：

```css

## 6 章节总结

- 文本
- 字体
- 图像
- 列表
dding: 20px;
}

ul li {
  background: #cce5ff;
  margin: 5px;
  margin-left: 35px;
  margin-bottom: 5px;
}

ul li:last-child {
    margin-bottom: 0;
}

## 6 章节总结