CSS详细基础(二)文本样式
插播一条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的工作原理: CSS是一种定义样式结构如字体、颜色、位置等的语言,被用于描述网页上的信息格式化和显示的方式。CSS样式可以直接存储于HTML网页或者单独的样式单文件。无论哪一种方式,样式单包含将样式应用到指定类型的元素的规则。…...
win10系统任务栏图标变成白色的解决办法
我平时都是用滴答清单进行管理这个自己的日程代办的,但是今天打开的时候发现这个快捷方式突然变成纯白色的了,重启电脑之后,这个图标的样式仍然没有变化。上网查找解决办法之后,终于搞好了,于是就有了下面的教程。 为什…...
hadoop生态现状、介绍、部署
一、引出hadoop 1、hadoop的高薪现状 各招聘平台都有许多hadoop高薪职位,可以看看职位所需求的技能 ----> hadoop是什么,为什么会这么高薪?引出大数据,大数据时代,大数据与云计算 2、大数据时代的介绍 大数据的故事…...
二、EFCore 数据库表的创建和迁移
文章目录 一、数据库连接二、数据库表迁移一、数据库连接 在NuGet上安装EntityFramework 代码如下: Microsoft.EntityFrameworkCoreMicrosoft.EntityFrameworkCore.SqlServerMicrosoft.Extensions.Configuration.Json配置数据连接 appsettings.json 增加数据库连接配置 &quo…...
在nodejs中使用typescript
在nodejs中使用typescript 如果我们正在使用nodejs来开发应用,那么对于管理和扩展一个大型代码库来说是一个非常大的挑战。克服这一问题的方法之一是使用typescript,为js添加可选的类型注释和高级功能。在本文中,我们将探讨如何使用在nodejs中使用types…...
数据结构与算法基础(青岛大学-王卓)(8)
哎呀呀,sorry艾瑞波地,这次真的断更一个月了,又发生了很多很多事情,秋风开始瑟瑟了,老父亲身体查出肿瘤了,有病请及时就医,愿每一个人都有一个健康的身体,God bless U and FAMILY. 直…...
【生物信息学】使用谱聚类(Spectral Clustering)算法进行聚类分析
目录 一、实验介绍 二、实验环境 1. 配置虚拟环境 2. 库版本介绍 3. IDE 三、实验内容 0. 导入必要的工具 1. 生成测试数据 2. 绘制初始数据分布图 3. 循环尝试不同的参数组合并计算聚类效果 4. 输出最佳参数组合 5. 绘制最佳聚类结果图 6. 代码整合 一、实验介绍…...
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 平铺方式 …...
ThreeJS - 封装一个GLB模型展示组件(TypeScript)
一、引言 最近基于Three.JS,使用class封装了一个GLB模型展示,支持TypeScript、支持不同框架使用,具有多种功能。 (下图展示一些基础的功能,可以自行扩展,比如光源等) 二、主要代码 本模块依赖…...
HashMap面试题
1.hashMap底层实现 hashMap的实现我们是要分jdk 1.7及以下版本,jdk1.8及以上版本 jdk 1.7 实现是用数组链表 jdk1.8 实现是用数组链表红黑树, 链表长度大于8(TREEIFY_THRESHOLD)时,会把链表转换为红黑树,…...
Java编程技巧:swagger2、knif4j集成SpringBoot或者SpringCloud项目
目录 1、springbootswagger2knif4j2、springbootswagger3knif4j3、springcloudswagger2knif4j 1、springbootswagger2knif4j 2、springbootswagger3knif4j 3、springcloudswagger2knif4j 注意点: Api注解:Controller类上的Api注解需要添加tags属性&a…...
第三章:最新版零基础学习 PYTHON 教程(第九节 - Python 运算符—Python 中的除法运算符)
除法运算符允许您将两个数字相除并返回商,即,第一个数字或左侧的数字除以第二个数字或右侧的数字并返回商。 Python 中的除法运算符 除法运算符有两种类型: 浮点数除法整数除法(向下取整除法)整数相除时,结果四舍五入为最接近的整数,并用符号“//”表示。浮点数“/”…...
【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() #创建游…...
【Java 进阶篇】JDBC ResultSet 遍历结果集详解
在Java数据库编程中,经常需要执行SQL查询并处理查询结果。ResultSet(结果集)是Java JDBC中用于表示查询结果的关键类之一。通过遍历ResultSet,我们可以访问和操作从数据库中检索的数据。本文将详细介绍如何使用JDBC来遍历ResultSe…...
华为数通方向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.…...
【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 测试固定公网地址远程 前言 远程…...
java并发编程 守护线程 用户线程 main
经常使用线程,没有对守护线程和用户线程的区别做彻底了解 下面写4个例子来验证一下 源码如下 /* Whether or not the thread is a daemon thread. */ private boolean daemon false;/*** Marks this thread as either a {linkplain #isDaemon daemon} thread*…...
wxWidgets(1):在Ubuntu 环境中搭建wxWidgets 库环境,安装库和CodeBlocks的IDE,可以运行demo界面了,继续学习中
1,选择使用 wxWidgets 框架 选择这个主要是因为完全的开源,不想折腾 Qt的库,而且打包的文件比较大。 网络上面有很多的对比,而且使用QT的人比较多。 但是我觉得wxwidgets 更加偏向 c 语法本身,也有助学习C。 没有太多…...
[VIM]VIM初步学习-3
3-1 编写 vim 配置,我的 vim 我做主_哔哩哔哩_bilibili...
RocketMQ Dashboard说解
RocketMQ Dashboard 是 RocketMQ 的管控利器,为用户提供客户端和应用程序的各种事件、性能的统计信息,支持以可视化工具代替 Topic 配置、Broker 管理等命令行操作。 介绍 功能概览 面板功能运维修改nameserver 地址; 选用 VIPChannel驾驶舱查看 …...
【RabbitMQ实战】05 RabbitMQ后台管理
一、多租户与权限 1.1 vhost的概念 每一个 RabbitMQ服务器都能创建虚拟的消息服务器,我们称之为虚拟主机(virtual host),简称为 vhost。每一个 vhost本质上是一个独立的小型RabbitMQ服务器,拥有自己独立的队列、交换器及绑定关系等,并且它拥…...
PHP8中final关键字的应用-PHP8知识详解
在PHP8中,final的中文含义是最终的、最后的意思。被final修饰过的类和方法就是“最终的版本”。 如果关键字final放在类的前面,则表示该类不能被继承。 如果关键字final放在方法的前面,则表示该 方法不能被重新定义。 如果有一个类的格式为…...
基于Java的校园失物招领平台设计与实现(源码+lw+部署文档+讲解等)
文章目录 前言具体实现截图论文参考详细视频演示为什么选择我自己的网站自己的小程序(小蔡coding)有保障的售后福利 代码参考源码获取 前言 💗博主介绍:✌全网粉丝10W,CSDN特邀作者、博客专家、CSDN新星计划导师、全栈领域优质创作…...
〔024〕Stable Diffusion 之 模型训练 篇
✨ 目录 🎈 训练集准备🎈 训练集预处理🎈 数据清洗🎈 下载训练源码🎈 训练文件配置🎈 脚本运行🎈 实战测试🎈 训练集准备 声明: 该文中所涉及到的女神图片均来自于网络,仅用作技术教程演示,图片已码一般同一个训练集需要准备 20~40 张不同角度的照片,当然可…...
【MySQL入门到精通-黑马程序员】MySQL基础篇-DML
文章目录 前言一、DML-介绍二、DML-添加数据三、DML-修改数据四、DML-删除数据总结 前言 本专栏文章为观看黑马程序员《MySQL入门到精通》所做笔记,课程地址在这。如有侵权,立即删除。 一、DML-介绍 DML(Data Manipulation Language…...
【ARMv8 SIMD和浮点指令编程】NEON 加载指令——如何将数据从内存搬到寄存器(LDxLDxR)?
将内存中的数据搬到 NEON 寄存器,有很多指令可以完成,熟悉这些指令是必须的。 1 LD1 (multiple structures) 将多个单元素结构加载到一个,两个,三个或四个寄存器上。该指令从内存中加载多个单元结构,并将结果写入一、二、三或四个 SIMD&FP 寄存器。 无偏移 一个寄存…...
华为云云耀云服务器L实例评测 | 实例场景体验之搭建个人博客:通过华为云云耀云服务器构建个人博客
华为云云耀云服务器L实例评测 | 实例场景体验之搭建个人博客:通过华为云云耀云服务器构建个人博客 介绍华为云云耀云服务器 华为云云耀云服务器 (目前已经全新升级为 华为云云耀云服务器L实例) 华为云云耀云服务器是什么华为云云耀…...
问题记录 springboot 事务方法中使用this调用其它方法
原因: 因为代理对象中调用了原始对象的toString()方法,所以两个不同的对象打印出的引用是相同的...
【Spring Cloud】Ribbon 实现负载均衡的原理,策略以及饥饿加载
文章目录 前言一、什么是 Ribbon二、Ribbon 实现负载均衡的原理2.1 负载均衡的流程2.2 Ribbon 实现负载均衡的源码剖析 三、Ribbon 负载均衡策略3.1 负载均衡策略3.2 演示 Ribbon 负载均衡策略的更改 四、Ribbon 的饥饿加载4.1查看 Ribbon 的懒加载4.2 Ribbon 的饥饿加载模式 前…...
Linux下基本指令(上)
文章内容: 1. ls 指令 语法: ls [选项][目录或文件] 功能:对于目录,该命令列出该目录下的所有子目录与文件。对于文件,将列出文件名以及其他信息。 单个ls显示当前目录下的文件和目录 常用选项&#…...
网站建设项目团队/网络营销案例分析论文
删除 Microsoft SQL Server 2000 前应考虑的事项 删除 SQL Server 的步骤 删除 SQL Server 的特定实例 删除 SQL Server 的所有已知实例 删除 SQL Server 的默认实例 删除 SQL Server 的命名实例 如何包含全文检索删除 重新安装 SQL Server 前删除临时文件夹中的内容 参考 这篇…...
公司做影视网站侵权/百度seo霸屏软件
原标题:iOS便签如何实现扫描二维码界面功能这是一款多功能便签软件工具,有“二维码”功能:它支持用户将便签内容制作成二维码,然后通过敬业签app扫描该二维码,显示相应的便签内容。那么,如何扫描便签二维码…...
wordpress固定连接nginx/希爱力跟万艾可哪个猛
本文转自博客园 原文地址为:http://www.cnblogs.com/hhdllhflower/archive/2012/10/04/2711675.html我对原文做了一点改动:我将lfFaceName[LF_FACESIZE]称作“字体的字样名称”LOGFONT是Windows内部字体的逻辑结构,主要用于设置字体格式&am…...
专业的西安免费做网站/baidu百度首页
建信金融科技有限公司项目管理部项目经理郭会莉女士受邀为2020第九届PMO大会演讲嘉宾,演讲议题为“如何打造数字化的项目管理系统”。大会将于11月28-29日在北京举办,敬请关注!议题大致内容:在目前信息大爆炸的时代,社…...
李沧网站建设公司/seo排名诊断
点击↑↑技成培训 ,关注并置顶即可长期免费订阅20万工控人关注的微信平台:技术分享、学习交流、工控视频当一个或者多个指令(程序)重复多次(次数可知)时,可使用FOR指令。FOR为有限次循环指令。如上图,程序的执行过程主要分为3个步…...
广州做网站seo/seo sem是指什么意思
Solr 是一种可供企业使用的、基于 Lucene 的搜索服务器,它支持层面搜索、命中醒目显示和多种输出格式。在这篇文章中,将介绍 Solr 并展示如何轻松地将其表现优异的全文本搜索功能加入到 Web 应用程序中。 开发环境: System:Window…...