当前位置： 首页 > news >正文

CSS详细基础（二）文本样式

news 2025/7/3 15:13:27

插播一条CSS的工作原理：

CSS是一种定义样式结构如字体、颜色、位置等的语言，被用于描述网页上的信息格式化和显示的方式。CSS样式可以直接存储于HTML网页或者单独的样式单文件。无论哪一种方式，样式单包含将样式应用到指定类型的元素的规则。外部使用时，样式单规则被放置在一个带有文件扩展名_css的外部样式单文档中。

样式规则是可应用于网页中元素，如文本段落或链接的格式化指令。样式规则由一个或多个样式属性及其值组成。内部样式单直接放在网页中，外部样式单保存在独立的文档中，网页通过一个特殊标签链接外部样式单。

名称CSS中的“层叠（cascading）”表示样式单规则应用于HTML文档元素的方式。具体地说，CSS样式单中的样式形成一个层次结构，更具体的样式覆盖通用样式。样式规则的优先级由CSS根据这个层次结构决定，从而实现级联效果。

CSS 的版本可以从 1996 年开始追溯，当时所推行的版本为 CSS1；而到了 1998 年，CSS2 在原来的基础上增加了定位、z-index、media 等；到了 2004～2011 年，CSS2.1 的出现，使其成为了到目前为止最为广泛的版本；而从 1999 年起，CSS3 成为最为现代的版本，出现了分模块的操作，CSS4 只是在其基础上进行分模块的升级。

目录

​编辑

一.外链样式

二.文本样式

一.外链样式

CSS外链样式是网页设计中一种常用的方法，能够有效地减少代码量、提高网站的性能和可维护性。

前文我们说到前端开发中要遵循“结构——样式——行为”相分离的设计思想，即各模块之间应该互不干扰，体现在代码中，CSS所规定的样式设计均写在了头部标签style的内部。然而这只是一定程度上实现了分离——实际上结构与样式的代码仍在同一文件中~

因此CSS中还有一种叫做外链样式的技术——即将样式代码写在单独的CSS文件中，这样即可实现结构与样式的完全分离~

如下，创建后缀为.css的独立文件

然后再该文件中写独立的样式 ：

.blue
{color: dodgerblue;
}
.strong
{font-weight: 900;
}
big
{font-size: 23px;
}

如下是核心代码：声明外链样式

<link rel="stylesheet" href="10号自己的样式.css">

整体代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.red{color: red;}.strong{font-weight: 800;}.big{font-size: 23px;}</style><link rel="stylesheet" href="10号自己的样式.css"></head>
<body><!-- 第一个使用内部样式表 --><p class="red strong big">第一首<br>黑云压城城欲摧，甲光向日金鳞开。<br>角声满天秋色里，塞上胭脂凝夜紫。<br>半卷红旗临易水，霜重鼓寒声不起。<br>报群黄金台上意，但携玉龙为君死。<br></p><!-- 第二个使用外部样式表 --><p class="blue">第二首<br>醉里挑灯看剑，梦回吹角连营。<br>八百里分麾下炙，五十弦翻塞外声，沙场秋点兵。<br>马作的卢飞快，弓如霹雳弦惊。<br>了却君王天下事，赢得生前身后名。可怜白发生！<br><!-- 外部样式表仍不能成功使用 --></p><!-- 第三个使用行内样式表 --><p><div style="color: aquamarine; font-size: 23px;font-weight: 800;">第三首<br></div><div style="color: aquamarine; font-size: 23px;font-weight: 800;">僵卧孤村不自哀，尚思为国戍轮台。</div><div style="color: aquamarine; font-size: 23px;font-weight: 800;">夜阑卧听风和雨，铁马冰河入梦来。</div>
</p>
</body>
</html>

 

 如上图所示，虽然.blue属性位于独立的CSS文件之中，仍然可以通过类选择器的使用方式应用于标签元素。

总的来说，在开发大型项目时，外链样式的存在有助于提升代码复用率~

二.文本样式

接下来介绍一些有关文本的样式：

  • font-family:字体类型
  • font-size:字体大小
  • font-weight:字体粗细程度
  • text-indent：首行缩进

具体的属性值什么的大家可以自行查阅，接下来给大家一段样例代码参考：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.xinziti{font-family: 'Times New Roman', Times, serif;}/* 类标签的字体属性用了三种样式，若无法识别自动跳转下一个 */.song{font-family:宋体;}.sixteen{font-size: 20px;}.bold{font-weight:700;}.normal{font-weight: lighter;}div{text-indent: 2em;}/* 最后一个类选择器使字体变细 */</style>
</head>
<body><h3 class="song">  南园十三首·其五</h3>  <p class="xingziti sixteen"> 【作者】李贺 【朝代】唐</p><p class="xingziti"> 男儿何不带吴钩，收取关山五十州。</p><p class="xingziti">请君暂上凌烟阁，若个书生万户侯？</p><br><hr size="20" color="orange"><!-- 使用一个换行符分割两首古诗 --><h3>献钱尚父</h3><p class="normal">【作者】贯休 【朝代】唐</p><P>贵逼人来不自由，龙骧凤翥势难收。</P><p class="bold">满堂花醉三千客，一剑霜寒十四州。</p><p>鼓角揭天嘉气冷，风涛动地海山秋。</p><p>东南永作金天柱，谁羡当时万户侯。</p><hr size="20px" color="red"> <h3>首行缩进效果展示</h3><div>此处为首行缩进的效果图</div>
</body>
</html>

此外，CSS还支持为文本设置符合选择器，如下：

    <style>div{font: italic 800 40px 宋体;color: brown;}/* 顺序为style 大小 行高 字体样式 */span{font: normal 600 30px 宋体;color:burlywood;}</style>

 需要注意的是，上述的font属性中，各种子属性的顺序一定不能颠倒！

 接下来展示一段字体属性的综合案例——新闻排版~：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>奥运会乒乓球战报</title><style>.red {color: red;}.xie {font-style: italic;}.big {font-size: 20px;}.center {text-align: center;}span {color: rgba(67, 71, 71, 0.89);}a {text-decoration: none;}body {line-height: 25px;}.suo {text-indent: 3em;}</style>
</head><body><h2 class="red center">乒乓球男团中国3比0完胜韩国 率先闯进决赛</h2><hr size="2" color="black"><div class="center"><span>2021年08月04日 15:47 </span><a href="https://www.chinanews.com/">中国新闻网</a></div><hr size="1" color="black"><h4>原标题：乒乓球男团中国3比0完胜韩国 率先闯进决赛</h4><p>新网8月4日电 北京时间8月4日，在东京奥运会乒乓球男团半决赛中，由马龙、许昕、樊振东组成的中国队3比0战胜韩国队，率先进入决赛。决赛中，中国队的对手将是德国队和日本队之间的胜者。</p><p>率先进行的男双对决中，马龙搭档许昕出战，很快以11:5、11:5、11:8拿下韩国组合李尚洙/郑荣植，先下一城。</p><div class="center"><img src="/乒乓球比赛.jpg" width="450"> </div><!-- text-align属性同样适用于图片？ --><p class="suo">之后进行的首场男单比赛中，樊振东对阵韩国选手张禹珍。第一局，樊振东11:7轻松拿下。第二局，樊振东一度2:7落后，但樊振东稳扎稳打，很快追至8平。樊振东反拉出界后，8:9落后。随后，他连得3分，11:9再下一局。第三局，樊振东又是开局落后，不过很快从3:6追至6平。10平、11平、12平、13平、14平，比赛进入相持阶段，最终樊振东16:14赢下第三局，中国队再下一城。</p><p class="suo">第二场男单比赛，马龙对阵韩国选手李尚洙。首局，马龙有些慢热，一度3:7落后，随着远台拧拉得分，马龙追至7平。11:9，马龙后来居上拿下第一局。11:8，马龙随后拿下第二局。第三局，马龙9:11被对手扳回一局。第四局，双方打得胶着，9平、10平、11平、12平，13平，最终马龙13:15再丢一局。第五局，马龙没有再手软，11:6拿下。</p><p>这样，中国队就以总比分3:0战胜韩国队，率先闯进决赛。</p><p>关键字 : 乒乓球马龙韩国中国樊振东</p>
</body></html>

 

相关文章：

CSS详细基础（二）文本样式

插播一条CSS的工作原理&#xff1a; CSS是一种定义样式结构如字体、颜色、位置等的语言&#xff0c;被用于描述网页上的信息格式化和显示的方式。CSS样式可以直接存储于HTML网页或者单独的样式单文件。无论哪一种方式&#xff0c;样式单包含将样式应用到指定类型的元素的规则。…...

编程日记 2023/10/3 0:07:05

win10系统任务栏图标变成白色的解决办法

我平时都是用滴答清单进行管理这个自己的日程代办的&#xff0c;但是今天打开的时候发现这个快捷方式突然变成纯白色的了&#xff0c;重启电脑之后&#xff0c;这个图标的样式仍然没有变化。上网查找解决办法之后&#xff0c;终于搞好了&#xff0c;于是就有了下面的教程。 为什…...

编程日记 2023/10/3 0:05:03

hadoop生态现状、介绍、部署

一、引出hadoop 1、hadoop的高薪现状 各招聘平台都有许多hadoop高薪职位&#xff0c;可以看看职位所需求的技能 ----> hadoop是什么&#xff0c;为什么会这么高薪&#xff1f;引出大数据&#xff0c;大数据时代&#xff0c;大数据与云计算 2、大数据时代的介绍 大数据的故事…...

编程日记 2023/10/3 0:03:01

二、EFCore 数据库表的创建和迁移

文章目录 一、数据库连接二、数据库表迁移一、数据库连接 在NuGet上安装EntityFramework 代码如下： Microsoft.EntityFrameworkCoreMicrosoft.EntityFrameworkCore.SqlServerMicrosoft.Extensions.Configuration.Json配置数据连接 appsettings.json 增加数据库连接配置 &quo…...

编程日记 2023/10/3 0:02:00

在nodejs中使用typescript

在nodejs中使用typescript 如果我们正在使用nodejs来开发应用&#xff0c;那么对于管理和扩展一个大型代码库来说是一个非常大的挑战。克服这一问题的方法之一是使用typescript&#xff0c;为js添加可选的类型注释和高级功能。在本文中,我们将探讨如何使用在nodejs中使用types…...

编程日记 2023/10/3 0:00:59

数据结构与算法基础（青岛大学-王卓）(8)

哎呀呀&#xff0c;sorry艾瑞波地&#xff0c;这次真的断更一个月了&#xff0c;又发生了很多很多事情&#xff0c;秋风开始瑟瑟了&#xff0c;老父亲身体查出肿瘤了&#xff0c;有病请及时就医&#xff0c;愿每一个人都有一个健康的身体&#xff0c;God bless U and FAMILY. 直…...

编程日记 2023/10/2 23:58:57

【生物信息学】使用谱聚类（Spectral Clustering）算法进行聚类分析

目录 一、实验介绍 二、实验环境 1. 配置虚拟环境 2. 库版本介绍 3. IDE 三、实验内容 0. 导入必要的工具 1. 生成测试数据 2. 绘制初始数据分布图 3. 循环尝试不同的参数组合并计算聚类效果 4. 输出最佳参数组合 5. 绘制最佳聚类结果图 6. 代码整合 一、实验介绍…...

编程日记 2023/10/2 23:57:56

CSS基础语法第二天

目录 一、复合选择器 1.1 后代选择器 1.2 子代选择器 1.3 并集选择器 1.4 交集选择器 1.4.1超链接伪类 二、CSS特性 2.1 继承性 2.2 层叠性 2.3 优先级 基础选择器 复合选择器-叠加 三、Emmet 写法 3.1HTML标签 3.2CSS 四、背景属性 4.1 背景图 4.2 平铺方式 …...

编程日记 2023/10/2 23:56:55

ThreeJS - 封装一个GLB模型展示组件（TypeScript）

一、引言 最近基于Three.JS&#xff0c;使用class封装了一个GLB模型展示&#xff0c;支持TypeScript、支持不同框架使用&#xff0c;具有多种功能。 &#xff08;下图展示一些基础的功能&#xff0c;可以自行扩展&#xff0c;比如光源等&#xff09; 二、主要代码 本模块依赖…...

编程日记 2023/10/2 23:55:55

HashMap面试题

1.hashMap底层实现 hashMap的实现我们是要分jdk 1.7及以下版本&#xff0c;jdk1.8及以上版本 jdk 1.7 实现是用数组链表 jdk1.8 实现是用数组链表红黑树&#xff0c; 链表长度大于8&#xff08;TREEIFY_THRESHOLD&#xff09;时&#xff0c;会把链表转换为红黑树&#xff0c…...

编程日记 2023/10/2 23:53:53

Java编程技巧：swagger2、knif4j集成SpringBoot或者SpringCloud项目

目录 1、springbootswagger2knif4j2、springbootswagger3knif4j3、springcloudswagger2knif4j 1、springbootswagger2knif4j 2、springbootswagger3knif4j 3、springcloudswagger2knif4j 注意点&#xff1a; Api注解&#xff1a;Controller类上的Api注解需要添加tags属性&a…...

编程日记 2023/10/2 23:52:52

第三章：最新版零基础学习 PYTHON 教程（第九节 - Python 运算符—Python 中的除法运算符）

除法运算符允许您将两个数字相除并返回商，即，第一个数字或左侧的数字除以第二个数字或右侧的数字并返回商。 Python 中的除法运算符 除法运算符有两种类型： 浮点数除法整数除法（向下取整除法）整数相除时，结果四舍五入为最接近的整数，并用符号“//”表示。浮点数“/”…...

编程日记 2023/10/2 23:50:50

【python】导出mysql数据，输出excel！

参考https://blog.csdn.net/pengneng123/article/details/131111713 import pymysql import pandas as pd #import openpyxl import xlsxwriterdb pymysql.connect(host"10.41.241.114", port***,user***,password***,charsetutf8mb4 )cursor db.cursor() #创建游…...

编程日记 2023/10/2 23:47:48

【Java 进阶篇】JDBC ResultSet 遍历结果集详解

在Java数据库编程中&#xff0c;经常需要执行SQL查询并处理查询结果。ResultSet&#xff08;结果集&#xff09;是Java JDBC中用于表示查询结果的关键类之一。通过遍历ResultSet&#xff0c;我们可以访问和操作从数据库中检索的数据。本文将详细介绍如何使用JDBC来遍历ResultSe…...

编程日记 2023/10/2 23:45:46

华为数通方向HCIP-DataCom H12-831题库(单选题：161-180）

第161题 某台路由器Router LSA如图所示，下列说法中错误的是? A、本路由器已建立邻接关系 B、本路由器为DR C、本路由支持外部路由引入 D、本路由器的Router ID为10.0.12.1 答案： B 解析： 一类LSA的在transnet网络中link id值为DR的route id ,但Link id的地址不是10.0.12.…...

编程日记 2023/10/2 23:44:45

【VsCode】SSH远程连接Linux服务器开发，搭配cpolar内网穿透实现公网访问

文章目录 前言1、安装OpenSSH2、vscode配置ssh3. 局域网测试连接远程服务器4. 公网远程连接4.1 ubuntu安装cpolar内网穿透4.2 创建隧道映射4.3 测试公网远程连接 5. 配置固定TCP端口地址5.1 保留一个固定TCP端口地址5.2 配置固定TCP端口地址5.3 测试固定公网地址远程 前言 远程…...

编程日记 2023/10/2 23:41:42

java并发编程 守护线程 用户线程 main

经常使用线程&#xff0c;没有对守护线程和用户线程的区别做彻底了解 下面写4个例子来验证一下 源码如下 /* Whether or not the thread is a daemon thread. */ private boolean daemon false;/*** Marks this thread as either a {linkplain #isDaemon daemon} thread*…...

编程日记 2023/10/2 23:39:41

wxWidgets（1）：在Ubuntu 环境中搭建wxWidgets 库环境，安装库和CodeBlocks的IDE，可以运行demo界面了，继续学习中

1&#xff0c;选择使用 wxWidgets 框架 选择这个主要是因为完全的开源&#xff0c;不想折腾 Qt的库&#xff0c;而且打包的文件比较大。 网络上面有很多的对比&#xff0c;而且使用QT的人比较多。 但是我觉得wxwidgets 更加偏向 c 语法本身&#xff0c;也有助学习C。 没有太多…...

编程日记 2023/10/2 23:37:39

[VIM]VIM初步学习-3

3-1 编写 vim 配置&#xff0c;我的 vim 我做主_哔哩哔哩_bilibili...

编程日记 2023/10/2 23:36:38

RocketMQ Dashboard说解

RocketMQ Dashboard 是 RocketMQ 的管控利器&#xff0c;为用户提供客户端和应用程序的各种事件、性能的统计信息&#xff0c;支持以可视化工具代替 Topic 配置、Broker 管理等命令行操作。 介绍​ 功能概览​ 面板功能运维修改nameserver 地址; 选用 VIPChannel驾驶舱查看 …...

编程日记 2023/10/2 23:35:37

1688商品列表API与其他数据源的对接思路

将1688商品列表API与其他数据源对接时&#xff0c;需结合业务场景设计数据流转链路&#xff0c;重点关注数据格式兼容性、接口调用频率控制及数据一致性维护。以下是具体对接思路及关键技术点&#xff1a; 一、核心对接场景与目标 商品数据同步 场景&#xff1a;将1688商品信息…...

编程新知 2025/6/23 4:26:05

爬虫基础学习day2

# 爬虫设计领域 工商&#xff1a;企查查、天眼查短视频&#xff1a;抖音、快手、西瓜 ---> 飞瓜电商&#xff1a;京东、淘宝、聚美优品、亚马逊 ---> 分析店铺经营决策标题、排名航空&#xff1a;抓取所有航空公司价格 ---> 去哪儿自媒体&#xff1a;采集自媒体数据进…...

编程新知 2025/6/21 3:33:03

QT： `long long` 类型转换为 `QString` 2025.6.5

在 Qt 中&#xff0c;将 long long 类型转换为 QString 可以通过以下两种常用方法实现&#xff1a; 方法 1&#xff1a;使用 QString::number() 直接调用 QString 的静态方法 number()&#xff0c;将数值转换为字符串&#xff1a; long long value 1234567890123456789LL; …...

编程新知 2025/6/26 0:37:24

mysql已经安装，但是通过rpm -q 没有找mysql相关的已安装包

文章目录 现象&#xff1a;mysql已经安装&#xff0c;但是通过rpm -q 没有找mysql相关的已安装包遇到 rpm 命令找不到已经安装的 MySQL 包时&#xff0c;可能是因为以下几个原因&#xff1a;1.MySQL 不是通过 RPM 包安装的2.RPM 数据库损坏3.使用了不同的包名或路径4.使用其他包…...

编程新知 2025/6/27 16:50:39

什么是Ansible Jinja2

理解 Ansible Jinja2 模板 Ansible 是一款功能强大的开源自动化工具&#xff0c;可让您无缝地管理和配置系统。Ansible 的一大亮点是它使用 Jinja2 模板&#xff0c;允许您根据变量数据动态生成文件、配置设置和脚本。本文将向您介绍 Ansible 中的 Jinja2 模板&#xff0c;并通…...

编程新知 2025/7/3 14:45:13

USB Over IP专用硬件的5个特点

USB over IP技术通过将USB协议数据封装在标准TCP/IP网络数据包中&#xff0c;从根本上改变了USB连接。这允许客户端通过局域网或广域网远程访问和控制物理连接到服务器的USB设备&#xff08;如专用硬件设备&#xff09;&#xff0c;从而消除了直接物理连接的需要。USB over IP的…...

编程新知 2025/6/27 4:05:02

C++.OpenGL （14/64）多光源（Multiple Lights）

多光源（Multiple Lights） 多光源渲染技术概览 #mermaid-svg-3L5e5gGn76TNh7Lq {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-3L5e5gGn76TNh7Lq .error-icon{fill:#552222;}#mermaid-svg-3L5e5gGn76TNh7Lq .erro…...

编程新知 2025/6/11 3:15:20

基于TurtleBot3在Gazebo地图实现机器人远程控制

1. TurtleBot3环境配置 # 下载TurtleBot3核心包 mkdir -p ~/catkin_ws/src cd ~/catkin_ws/src git clone -b noetic-devel https://github.com/ROBOTIS-GIT/turtlebot3.git git clone -b noetic https://github.com/ROBOTIS-GIT/turtlebot3_msgs.git git clone -b noetic-dev…...

编程新知 2025/6/26 1:19:08

STM32HAL库USART源代码解析及应用

STM32HAL库USART源代码解析 前言STM32CubeIDE配置串口USART和UART的选择使用模式参数设置GPIO配置DMA配置中断配置硬件流控制使能生成代码解析和使用方法串口初始化__UART_HandleTypeDef结构体浅析HAL库代码实际使用方法使用轮询方式发送使用轮询方式接收使用中断方式发送使用中…...

编程新知 2025/6/21 8:12:23

LRU 缓存机制详解与实现（Java版） + 力扣解决

&#x1f4cc; LRU 缓存机制详解与实现&#xff08;Java版&#xff09; 一、&#x1f4d6; 问题背景 在日常开发中&#xff0c;我们经常会使用 缓存&#xff08;Cache&#xff09; 来提升性能。但由于内存有限&#xff0c;缓存不可能无限增长&#xff0c;于是需要策略决定&am…...

编程新知 2025/6/21 16:30:22