Web前端—CSS基础：选择器（标签、类、id、通配符）、盒子尺寸和背景色、文字控制属性、字体大小、字体样式、行高、单行文字垂直居中、字体族、font复合属性、文本（缩进、对齐方式、修饰线、color

发布于：2023-09-22 ⋅ 阅读:(150) ⋅ 点赞:(0)

版本说明

当前版本号[20230920]。

版本 修改说明
20230920 初版

目录

文章目录

知识总览图

CSS基础

CSS基础

目标：掌握 CSS 属性基本写法，能够使用文字相关属性美化文章页。

CSS初体验

层叠样式表 (Cascading Style Sheets，缩写为 CSS），是一种 样式表 语言，用来描述 HTML 文档的呈现（美化内容）。

书写位置：title 标签下方添加 style 双标签，style 标签里面书写 CSS 代码。

<title>CSS 初体验</title>
<style>
  /* 选择器 { } */
  p {
    /* CSS 属性 */
    color: red;
  }
</style>

<p>体验 CSS</p>

提示：属性名和属性值成对出现 → 键值对。

CSS引入方式

  • 内部样式表：学习使用
    • CSS 代码写在 style 标签里面
  • 外部样式表：开发使用
    • CSS 代码写在单独的 CSS 文件中（.css）
    • 在 HTML 使用 link 标签引入
<link rel="stylesheet" href="./my.css">
  • 行内样式：配合 JavaScript 使用
    • CSS 写在标签的 style 属性值里
<div style="color: red; font-size:20px;">这是 div 标签</div>

选择器

作用：查找标签，设置样式。

标签选择器

标签选择器：使用标签名作为选择器 → 选中同名标签设置相同的样式。

例如：p, h1, div, a, img…

<style>
  p {
    color: red;
  }
</style>

注意：标签选择器无法差异化同名标签的显示效果。

类选择器

作用：查找标签，差异化设置标签的显示效果。

步骤：

  • 定义类选择器 → .类名
  • 使用类选择器 → 标签添加 class=“类名”
<style>
  /* 定义类选择器 */
  .red {
    color: red;
  }
</style>

<!-- 使用类选择器 -->
<div class="red">这是 div 标签</div>
<div class="red size">div 标签</div>

注意：

  • 类名自定义，不要用纯数字或中文，尽量用英文命名
  • 一个类选择器可以供多个标签使用
  • 一个标签可以使用多个类名，类名之间用空格隔开

开发习惯：类名见名知意，多个单词可以用 - 连接，例如：news-hd。

id选择器

作用：查找标签，差异化设置标签的显示效果。

场景：id 选择器一般配合 JavaScript 使用，很少用来设置 CSS 样式

步骤：

  • 定义 id 选择器 → #id名
  • 使用 id 选择器 → 标签添加 id= “id名”
<style>
  /* 定义 id 选择器 */
  #red {
    color: red;
  }
</style>

<!-- 使用 id 选择器 -->
<div id="red">这是 div 标签</div>

规则：同一个 id 选择器在一个页面只能使用一次。

通配符选择器

作用：查找页面所有标签，设置相同样式。

通配符选择器： *，不需要调用，浏览器自动查找页面所有标签，设置相同的样式

* {
  color: red;
}

经验：通配符选择器可以用于清除标签的默认样式，例如：标签默认的外边距、内边距。

1680317584651

盒子尺寸和背景色

1680317605797

文字控制属性

字体大小

  • 属性名：font-size
  • 属性值：文字尺寸，PC 端网页最常用的单位 px
p {
  font-size: 30px;
}

经验：谷歌浏览器默认字号是16px。

字体样式（是否倾斜）

作用：清除文字默认的倾斜效果

属性名：font-style

属性值

  • 正常（不倾斜）：normal 如使用 div 标签
  • 倾斜：italic 如使用 em 标签

示例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<em>倾斜 em 标签</em>
		<div>普通 div 标签</div>
	</body>
</html>

输出如下：

image-20230920162001149

行高

作用：设置多行文本的间距

属性名：line-height

属性值

  • 数字 + px
  • 数字（当前标签font-size属性值的倍数）
line-height: 30px;

/* 当前标签字体大小为16px */
line-height: 2;

1680317770048

行高的测量方法：从一行文字的最顶端（最底端）量到下一行文字的最顶端（最底端）。

示例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			p{
				font-size: 30px;
				line-height: 30px;
			}
		</style>
	</head>
	<body>
		<p>ggggggggggggggggggggggggggggggggggggg
		gggggggggggggggggggggggjj
		jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj
		ggggggggggggg</p>
	</body>
</html>

当line-height = 30px 时，就会出现字居中存在，上下间隔距离相同；

image-20230920163411470

当line-height < 30px 时，就会出现字与字重叠的现象；

font-size: 30px;
line-height: 10px;

image-20230920163529941

当line-height > 30px 时，就会出现字与字之间存在很大的间距；

font-size: 30px;
line-height: 80px;

image-20230920163701636

单行文字垂直居中

垂直居中技巧：行高属性值等于盒子高度属性值

注意：该技巧适用于单行文字垂直居中效果

div {
  height: 100px;
  background-color: skyblue;

  /* 注意：只能是单行文字垂直居中 */
  line-height: 100px;
}

字体族

属性名：font-family

属性值：字体名

font-family: 楷体;

拓展（了解）：font-family属性值可以书写多个字体名，各个字体名用逗号隔开，执行顺序是从左向右依次查找

  • font-family 属性最后设置一个字体族名，网页开发建议使用无衬线字体

1680318278244

font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;

如示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			p{
				font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
			}
		</style>
	</head>
	<body>
		<p>gggggggggggggggggggggggggggggggggggggg</p>
	</body>
</html>

输出如下：

image-20230920164329492

font复合属性

使用场景：设置网页文字公共样式

1680318326214

复合属性：属性的简写方式，一个属性对应多个值的写法，各个属性值之间用空格隔开。

font: 是否倾斜 是否加粗 字号/行高 字体（必须按顺序书写）

div {
  font: italic 700 30px/2 楷体;
}

注意：字号和字体值必须书写，否则 font 属性不生效 。

字号和字体值为font的必填选项，其余的按需填写。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
				font: 30px 楷体;
			}
		</style>
	</head>
	<body>
		<div>测试一下这个代码是不是楷体！</div>
		<p>这个代码不是楷体！</p>
	</body>
</html>

输出的结果如下：

image-20230920165523170

文本缩进

属性名：text-indent

属性值：

  • 数字 + px
  • 数字 + em（推荐：1em = 当前标签的字号大小）
p {
  text-indent: 2em;
}

text-indent: 2em; 代表了是文本首行收进两字符

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
				text-indent: 2em;
			}
		</style>
	</head>
	<body>
		<div>在最近结束的亚运会上，各国运动员展现了出色的竞技实力和精彩的表现，赛场上激烈的角逐引发了观众们的热情。
		中国队以强大的整体实力获得了总奖牌榜的榜首，取得了令人瞩目的成绩。
		亚运会不仅是体育盛事，也是不同国家间友谊和合作的平台，为亚洲国家的交流和合作发挥了积极的作用。</div>
	</body>
</html>

输出如下：

image-20230920171921111

文本对齐方式

作用：控制内容水平对齐方式

属性名：text-align

1680318461130

text-align: center;

text-align本质是控制内容的对齐方式，属性要设置给内容的父级。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
				text-align: center;
			}
		</style>
	</head>
	<body>
		<div>在最近结束的亚运会上，各国运动员展现了出色的竞技实力和精彩的表现，赛场上激烈的角逐引发了观众们的热情。
		中国队以强大的整体实力获得了总奖牌榜的榜首，取得了令人瞩目的成绩。
		亚运会不仅是体育盛事，也是不同国家间友谊和合作的平台，为亚洲国家的交流和合作发挥了积极的作用。</div>
	</body>
</html>

输出如下：

image-20230920172012023

文本修饰线

属性名： text-decoration

1680318548558

设计代码让文字首行缩进两字符，并且加上下划线：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
				text-indent: 2em;
				text-decoration: underline;
			}
		</style>
	</head>
	<body>
		<div>在最近结束的亚运会上，各国运动员展现了出色的竞技实力和精彩的表现，赛场上激烈的角逐引发了观众们的热情。
		中国队以强大的整体实力获得了总奖牌榜的榜首，取得了令人瞩目的成绩。
		亚运会不仅是体育盛事，也是不同国家间友谊和合作的平台，为亚洲国家的交流和合作发挥了积极的作用。</div>
	</body>
</html>

输出如下：

image-20230920172203922

color 文字颜色

1680318569852

提示：只要属性值为颜色，都可以使用上述四种颜色表示方式，例如：背景色。

调试工具

作用：检查、调试代码；帮助程序员发现代码问题、解决问题

  1. 打开调试工具
  • 浏览器窗口内任意位置 / 选中标签 → 鼠标右键 → 检查
  • F12
  1. 使用调试工具

1680318624523

综合案例一-新闻详情

网页制作思路：

  1. 从上到下，先整体再局部
  2. 先标签，再 CSS 美化

1680318667113

HTML标签

<h1>在希望的田野上 | 湖北秋收开镰 各地多举措保增产增收</h1>
<div>来源：央视网 | 2222年12月12日 12:12:12</div>
<p><strong>央视网消息：</strong>眼下，湖北省秋收开镰已有一周多的时间。水稻收割已经超过四成，玉米收割七成。湖北省通过大力推广新品种水稻，建设高标准农田等一系列措施，为秋粮稳产提供有力支撑。</p>
<p>中稻占据了湖北全年粮食产量的一半以上。在湖北的主产区荆门市，370万亩中稻已经收割四成以上。</p>
<div class="pic">
  <img src="./1.jpg" alt="">
</div>
<p>王化林说的新品种，是湖北省研发的杂交水稻“华夏香丝”，不仅产量高，还具有抗病、抗倒、抗高温的特性。在荆门漳河镇的一工程示范田内，像“华夏香丝”这样抗旱节水的品种还有20多个，这些水稻新品将在荆门全面推广，确保来年增产增收。</p>
<p>此外，湖北还大力推进高标准农田建设。截至今年6月，已建成3980万亩高标准农田。目前，湖北全省仍有1800多万亩中稻正在有序收割中，预计10月中旬收割完毕。</p>

CSS样式

<style>
  h1 {
    text-align: center;
    font-weight: 400;
    font-size: 30px;
    color: #333;
  }

  div {
    font-size: 14px;
    color: #999;
  }

  p {
    text-indent: 2em;
    font-size: 18px;
    color: #333;
  }

  /* div {
    text-align: center;
  } */

  .pic {
    text-align: center;
  }
</style>

改写示例

同时可以根据以上代码进行改写，示例代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>共赴西湖之约，杭州亚运有何新看点？</title>
		<style>
			h1{
				text-align: center;
				font-weight: 400;
				font-size: 30px;
				color: #333;
			}
			
			div{
				font-size: 14px;
				color: #999;
				position: relative;
			}
			
			p{
				font-size: 18px;
				text-indent: 2em;
				color: #333;
			}
			
			.img{
				 text-align: center;
			}
		</style>
		
	</head>
	<body>
		<h1>共赴西湖之约，杭州亚运有何新看点？</h1>
		
		<div>来源：中国新闻网 | 2023年09月20日 21:04:01</div>
		
		<p><strong>赛事规模新纪录:</strong>作为亚洲规模最大的综合性运动会，从1951年首届亚运会正式举行，亚运会至今已走过70余年光景，
如果追溯其前身远东运动会，亚运之火则已传承百年。即将到来的杭州亚运会有望在赛事规模上再创新高，
成为亚运史上规模最大、项目最多、覆盖面最广的一届。</p>
		<p>本次亚运会，亚洲全部45个亚奥理事会成员超过1.2万名运动员报名，其中不少代表团派出史上最大规模团组，中国、泰国、日本、韩国、印度、中国香港等6个代表团运动员报名人数超600人，
	再加上技术官员、媒体记者等，杭州亚运会总规模将达3万余人，创下亚运新纪录。参与人数增多，竞争程度加剧，赛事更为精彩。</p>
	
		<p>相较于巴黎奥运会32个运动项目，杭州亚运会设项多达40个，细分为61个分项、481个小项，有卡巴迪、龙舟、藤球等亚洲特色运动，武术、棋类、桥牌等“非奥”项目，
	电子竞技、霹雳舞等也将首次正式亮相亚运赛场。奥运项目的对决同样不失新意，这次亚运会上的乒乓球、跳水、羽毛球竞技水平堪称“奥运级别”，杭州亚运会比赛可谓看点十足。</p>
		<div class="img">
		<img src="../img/亚运会.jpg" alt="" width="1200" height="550">
		</div>
		
	　　<p>除了主办城市杭州，本届亚运会前所未有地设置了宁波、温州、湖州、绍兴、金华等5个协办城市，多样呈现之江魅力；共有56个竞赛场馆、31个独立训练场馆以及1个亚运村和5个亚运分村，赛事组织复杂程度也远超往届。
	亚奥理事会代理主席拉贾·兰迪尔·辛格表示，杭州早已做好了举办亚运会的准备，“我相信，我们将看到有史以来最伟大的亚运会。”</p>
	
	</body>
</html>

输出如下：

image-20230920220503941

综合案例二-CSS简介

1680318751246

HTML标签

<h1>CSS（层叠样式表）</h1>
<p>层叠样式表 (Cascading Style Sheets，缩写为 CSS），是一种 <a href="#">样式表</a> 语言，用来描述 HTML 或 XML（包括如 SVG、MathML、XHTML 之类的 XML 分支语言）文档的呈现。CSS 描述了在屏幕、纸质、音频等其它媒体上的元素应该如何被渲染的问题。</p>
<p><strong>CSS 是开放网络的核心语言之一</strong>，由 W3C 规范 实现跨浏览器的标准化。CSS 节省了大量的工作。 样式可以通过定义保存在外部.css 文件中，同时控制多个网页的布局，这意味着开发者不必经历在所有网页上编辑布局的麻烦。CSS 被分为不同等级：CSS1 现已废弃， CSS2.1 是推荐标准， CSS3 分成多个小模块且正在标准化中。</p>
<ul>
  <li>CSS 介绍 如果你是 Web 开发的新手，请务必阅读我们的 CSS 基础 文章以学习 CSS 的含义和用法。</li>
  <li>CSS 教程 我们的 CSS 学习区 包含了丰富的教程，它们覆盖了全部基础知识，能使你在 CSS 之路上从初出茅庐到游刃有余。</li>
  <li>CSS 参考 针对资深 Web 开发者的 <a href="#">详细参考手册</a> ，描述了 CSS 的各个属性与概念。</li>
</ul>

CSS样式

<style>
  h1 {
    color: #333;
  }

  p {
    text-indent: 2em;
    font-size: 14px;
    color: #444;
    line-height: 30px;
  }

  a {
    color: #0069c2;
  }

  li {
    font-size: 14px;
    color: #444;
    line-height: 30px;
  }
</style>

改写示例

同时可以根据以上代码进行改写，示例代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>原神(Genshin Impact)</title>
		<style>
			h1{
				text-align: left;
				font-size: 40px;
				color: #333;
			}
			
			p{
				font-size: 14px;
				color: #444;
				line-height: 30px;
				text-indent: 2em;
			}
			
			a{
				color: #0069c2;
			}
			
			li{
				line-height: 30px;
				font-size: 14px;
				color: #444;
			}
			
		</style>
	</head>
	<body>
		<h1>原神(Genshin Impact)</h1>
		<p><strong>《原神》是一款非常受欢迎的游戏，它获得了许多奖项。</strong>以下是一些获奖情况：
			2020年，从TGS的选择奖，到fami通白金殿堂，到金摇杆年度游戏提名，到TGA最佳移动和最佳RPG的提名，
			再到App Store年度游戏和Google Play的年度最佳游戏•最具创新力游戏•最受欢迎游戏，
			还有GDC (游戏开发者大会)最佳手游奖和年度游戏提名 。
		</p>
		
		<p>
			原神是一款由中国游戏公司<a href="#">miHoYo</a>开发的开放世界动作角色扮演游戏。
			它与其他游戏的不同点有很多，以下是其中的三个：
		</p>
		
		<ul>
			<li>
				开放世界：原神的开放世界非常大，玩家可以在游戏中自由探索。
				这使得玩家可以在游戏中体验到各种不同的场景和任务，而不必局限于游戏中的任务。
			</li>
			
			<li>
				角色塑造与剧情演出：原神的角色塑造与剧情演出远超其他游戏。相比于其他游戏过分老套的勇者打败大魔王拯救公主的剧情设定，
				以及基本为零的剧情演出，原神的优势不能说不大。
			</li>
				
			<li>
				跨平台游戏：原神是一款跨平台游戏，可以在不同的设备上进行游戏，包括PC、PS4和移动设备。
				这使得玩家可以在不同设备上与朋友共享游戏体验，也可以随时随地玩游戏。
			</li>
		</ul>
	</body>
</html>

输出如下：

image-20230920223655645

免责声明

​ 本文内容仅供参考，不构成任何形式的法律、商业或其他专业建议。作者不对任何人因使用、参考或依赖本文信息而造成的损害负责。读者应自行判断并承担风险。对于因本文信息引起的任何纠纷，作者保留采取适当行动的权利。

引用来源：

1、《综合案例一-新闻详情》的文字部分来源于：
共赴西湖之约，杭州亚运有何新看点？

2、《综合案例二-CSS简介》的文字部分来源于：讯飞星火认知大模型-AI自主生成

本文含有隐藏内容，请 开通VIP 后查看

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布