【CSS3】练气篇

目录

  • CSS 基本概念
    • CSS 的定义
    • CSS 的作用
    • CSS 语法
  • CSS 引入方式
    • 内部样式表
    • 外部样式表
    • 行内样式表
  • 选择器
    • 基础选择器
      • 标签选择器
      • 类选择器
      • id 选择器
      • 通配符选择器
  • 画盒子
  • 文字控制属性
    • 字体大小
    • 字体粗细
    • 字体倾斜
    • 行高
    • 字体族
    • font 复合属性
    • 文本缩进
    • 文本对齐
    • 文本修饰线
    • 文字颜色

CSS 基本概念

CSS 的定义

CSS(Cascading Style Sheets)即层叠样式表,是一种用于描述网页呈现样式的标记性语言,主要用于定义 HTML(超文本标记语言)或 XML(可扩展标记语言)文档的显示风格。

CSS 的作用

CSS 可以用来设置网页元素的字体、颜色、大小、布局、背景等各种样式属性。通过将样式与内容分离,使得网页的维护和更新更加容易,同时也提高了网页的性能和用户体验。例如,通过 CSS 可以将整个网站的标题字体统一设置为某种特定的字体和大小,而无需在每个 HTML 文件中单独设置。

CSS 语法

CSS 语法由选择器(Selector)和声明块(Declaration Block)组成。

选择器{属性名 : 属性值;
}

选择器用于指定要应用样式的 HTML 元素,声明块则包含一个或多个属性 - 值对,用于定义元素的样式。

p {color: blue;font-size: 16px;
}

上述代码中,p是选择器,表示要选择所有的<p>标签元素;color: blue;font-size: 16px;是声明块中的属性 - 值对,分别设置了文本颜色为蓝色和字体大小为 16 像素。

CSS 引入方式

内部样式表

将 CSS 代码写在 HTML 代码中:

<!DOCTYPE html>
<html lang = "en"><head><meta charset = "UTF-8"><title>Title</title><style>p{color: red;}</style></head><body><p>内部样式表</p></body>
</html>

注意事项

  1. CSS 应该写在 HTML 中 title 标签的下方
  2. CSS 代码要写在 <style></style> 块中

外部样式表

CSS 代码写在单独的 CSS 文件中(.css),在 HTML 中使用 link 标签引入:<link rel = "stylesheet" href = "css文件相对路径">

p{color: green;
}
<!DOCTYPE html>
<html lang = "en"><head><meta charset = "UTF-8"><title>Title</title><link rel="stylesheet" href="./CSS/style.css"></head><body><p>外部样式表</p></body>
</html>

行内样式表

CSS 写在标签的 style 属性值里:

<!DOCTYPE html>
<html lang = "en"><head><meta charset = "UTF-8"><title>Title</title></head><body><p style="color: purple;">外部样式表</p></body>
</html>

选择器

基础选择器

标签选择器

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

语法格式:

标签名{属性名 : 属性值;
}

代码示例:

<!DOCTYPE html>
<html lang = "en"><head><meta charset = "UTF-8"><title>Title</title><style>p{color: red;}</style></head><body><p>这是第一行字</p><div>这是第二行字</div><p>这是第三行字</p><div>这是第四行字</div><p>这是第五行字</p></body>
</html>

注意事项:选中同名标签设置相同的样式,无法差异化同名标签的样式

类选择器

作用:查找标签,差异化设置标签的显示效果

步骤:

  1. 定义类选择器 → .类名
  2. 使用类选择器 → 标签添加 class = “类名”

语法格式:

.类名{属性名 : 属性值;
}

代码示例:

<!DOCTYPE html>
<html lang = "en"><head><meta charset = "UTF-8"><title>Title</title><style>.red{color: red;}</style></head><body><p>这是第一行字</p><p class="red">这是第二行字</p><p>这是第三行字</p><p class="red">这是第四行字</p><p>这是第五行字</p></body>
</html>

注意事项

  1. 一个类选择器可以给多个标签使用
  2. 一个标签可以使用多个类名,class 属性值写多个类名,类名之间用空格隔开

id 选择器

作用:查找标签,差异化设置标签的显示效果

步骤:

  1. 定义 id 选择器 → #id 名
  2. 使用 id 选择器 → 标签添加 id = “id 名”

语法格式:

#id 名{属性名 : 属性值;
}

代码示例:

<!DOCTYPE html>
<html lang = "en"><head><meta charset = "UTF-8"><title>Title</title><style>#red{color: red;}</style></head><body><p>这是第一行字</p><p id="red">这是第二行字</p><p>这是第三行字</p><p>这是第四行字</p><p>这是第五行字</p></body>
</html>

注意事项:同一个 id 选择器在一个页面只能使用一次

通配符选择器

作用:查找页面所有标签,设置相同样式

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

语法格式:

*{属性名 : 属性值;
}

代码示例:

<!DOCTYPE html>
<html lang = "en"><head><meta charset = "UTF-8"><title>Title</title><style>*{color: yellow;}</style></head><body><p>这是第一行字</p><p>这是第二行字</p><p>这是第三行字</p><p>这是第四行字</p><p>这是第五行字</p></body>
</html>

画盒子

目标:使用合适的选择器画盒子

新属性:

属性名说明
width宽度
height高度
background-color背景色

如图,《关雎》的宽为 360、高为 125,背景色为红色;《蒹葭》的宽为 700、高为75,背景色为蓝色,按照该要求画盒子
在这里插入图片描述

代码示例:

<!DOCTYPE html>
<html lang = "en"><head><meta charset = "UTF-8"><title>Title</title><style>.first{width: 360px;height: 125px;background-color:red;}.second{width: 700px;height: 75px;background-color:blue;}</style></head><body><div class="first"><ul><li>关关雎鸠,在河之洲。窈窕淑女,君子好逑。</li><li>参差荇菜,左右流之。窈窕淑女,寤寐求之。</li><li>求之不得,寤寐思服。悠哉悠哉,辗转反侧。</li><li>参差荇菜,左右采之。窈窕淑女,琴瑟友之。</li><li>参差荇菜,左右芼之。窈窕淑女,钟鼓乐之。</li></ul></div><div class="second"><ul><li>蒹葭苍苍,白露为霜。所谓伊人,在水一方。溯洄从之,道阻且长。溯游从之,宛在水中央。</li><li>蒹葭萋萋,白露未晞。所谓伊人,在水之湄。溯洄从之,道阻且跻。溯游从之,宛在水中坻。</li><li>蒹葭采采,白露未已。所谓伊人,在水之涘。溯洄从之,道阻且右。溯游从之,宛在水中沚。</li></ul></div></body>
</html>

文字控制属性

字体大小

属性名:font-size

属性值:文字尺寸,PC 端网页最常用的单位 px(像素)

格式:

选择器{font-size: 30px;
}

代码示例:

<!DOCTYPE html>
<html lang = "en"><head><meta charset = "UTF-8"><title>Title</title><style>.bigger{font-size: 30px;}</style></head><body><p>这是一段普通文字</p><p class="bigger">这是一段加大了的文字</p></body>
</html>

结果如下:
在这里插入图片描述

字体粗细

属性名:font-weight

属性值:

  • 正常:normal(400)
  • 加粗:bold(700)

格式:

选择器{font-weight: normal;font-weight: 400;font-weight: bold;font-weight: 700;
}

代码示例:

<!DOCTYPE html>
<html lang = "en"><head><meta charset = "UTF-8"><title>Title</title><style>h3{font-weight: normal;}p{font-weight: bold;}h4{font-weight: 400;}div{font-weight: 700;}</style></head><body><h3>这是h3标签</h3><p>这是一句文字</p><h4>这是h4标签</h4><div>这是一段文字</div></body>
</html>

结果如下:
在这里插入图片描述

字体倾斜

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

属性名:font-style

属性值:

  • 正常:normal
  • 倾斜:italic

格式:

选择器{font-style: normal;ront-style: italic;
}

代码示例:

<!DOCTYPE html>
<html lang = "en"><head><meta charset = "UTF-8"><title>Title</title><style>.normaldemo{font-style: normal;}.italicdemo{font-style: italic;}</style></head><body><em>这是一段倾斜的字</em><br><em class="normaldemo">这是一段倾斜的字使用 font-style 后的效果</em><div>这是一段正常的字</div><div class="italicdemo">这是一段正常的字使用 font-style 后的效果</div></body>
</html>

结果如下:
在这里插入图片描述

行高

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

属性名:line-height

属性值:

  • 数字 + px
  • 数字(当前标签 font-size 属性值的倍数)

格式:

选择器{line-height: 2;line-height: 30px;
}

代码示例:

<!DOCTYPE html>
<html lang = "en"><head><meta charset = "UTF-8"><title>Title</title><style>.style1{line-height: 40px;}.style2{line-height: 2;}</style></head><body><div style="width: 400px;background-color: red;">生命的意义就是在于奋斗,人生的意义则在于积累。不要乞求太多,每天一点点就足够了。所有的失望和不满都是来自于我们自身的贪婪。保持一个平静的心态,我们就会拥有整个世界</div><div style="width: 400px;background-color: gray;" class="style1">生命的意义就是在于奋斗,人生的意义则在于积累。不要乞求太多,每天一点点就足够了。所有的失望和不满都是来自于我们自身的贪婪。保持一个平静的心态,我们就会拥有整个世界</div><div style="width: 400px;background-color: green;" class="style2">生命的意义就是在于奋斗,人生的意义则在于积累。不要乞求太多,每天一点点就足够了。所有的失望和不满都是来自于我们自身的贪婪。保持一个平静的心态,我们就会拥有整个世界</div></body>
</html>

结果如下:
在这里插入图片描述

注意事项

  • 行高 = 文本高度 + 上间距 + 下间距
  • 行高测量方法:从一行文字的最顶端(最低端)量到下一行文字的最顶端(最低端)

利用行高进行垂直居中

技巧:行高属性等于盒子高度属性

代码示例:

<!DOCTYPE html>
<html lang = "en"><head><meta charset = "UTF-8"><title>Title</title><style>div{height: 100px;background-color: red;line-height: 100px;}</style></head><body><div>生命的意义就是在于奋斗,人生的意义则在于积累。不要乞求太多,每天一点点就足够了。所有的失望和不满都是来自于我们自身的贪婪。保持一个平静的心态,我们就会拥有整个世界</div></body>
</html>

结果如下:
在这里插入图片描述
注意事项:只能是单行文字垂直居中

字体族

属性名:font-family

属性值:字体名

格式:

选择器{font-family: "楷体";
}

代码示例:

<!DOCTYPE html>
<html lang = "en"><head><meta charset = "UTF-8"><title>Title</title><style>div{font-family: "楷体";}</style></head><body><div>将进酒</div></body>
</html>

结果如下:
在这里插入图片描述

font 复合属性

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

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

注意事项:字号和字体值必须书写,否则 font 属性不生效

代码示例:

<!DOCTYPE html>
<html lang = "en"><head><meta charset = "UTF-8"><title>Title</title><style>div{font: italic bold 30px/2 "楷体";}</style></head><body><div>君不见黄河之水天上来,奔流到海不复回。</div><div>君不见高堂明镜悲白发,朝如青丝暮成雪。</div><div>人生得意须尽欢,莫使金樽空对月。</div><div>天生我材必有用,千金散尽还复来。</div><div>烹羊宰牛且为乐,会须一饮三百杯。</div></body>
</html>

结果如下:
在这里插入图片描述

文本缩进

属性名:text-indent

属性值:

  • 数字 + px
  • 数字 + em(推荐:1em = 当前标签的字号大小)

格式:

选择器{text-indent: 2em;
}

代码示例:

<!DOCTYPE html>
<html lang = "en"><head><meta charset = "UTF-8"><title>Title</title><style>p{text-indent: 2em;}</style></head><body><p>我们可以度过美好时光,也可以虚度光阴,但我希望你活得精彩。我希望你能看到令你惊叹的事物,我希望你体会从未有过的感觉,我希望你遇见具有不同观点的人,我希望你的一生能让自己过得自豪。如果你发现你的生活并非如此,我希望你能有勇气重新来过。 你是独特的,但你必须向统一让步;你是自由的,但你必须向禁忌妥协。因为你渴望亲近群体,渴望他们的接受。你害怕被群体驱逐。因而你是孤独的,你是独特但孤独的心魂。生来如此。生,就是这样,永远都是这样。</p></body>
</html>

结果如下:
在这里插入图片描述

文本对齐

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

属性名:text-align

属性值:

  • left:左对齐(默认)
  • center:居中对齐
  • right:右对齐

格式:

选择器{text-align: center;
}

代码示例:

<!DOCTYPE html>
<html lang = "en"><head><meta charset = "UTF-8"><title>Title</title><style>p{text-indent: 2em;text-align: center;}</style></head><body><p>我要留下昨晚做的梦,</p><p>把它保存在冰箱里。</p><p>很久很久以后的一天,</p><p>当我变成一个白发老翁,</p><p>便要取出我冻结的美梦,</p><p>把它融化,把它烧开,</p><p>然后我就慢慢坐下,</p><p>用它来浸泡我的一双苍老冰冷的脚。</p></body>
</html>

结果如下:
在这里插入图片描述

注意事项:居中的是文字内容,并不是标签

图片水平居中方式

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

代码示例:

<!DOCTYPE html>
<html lang = "en"><head><meta charset = "UTF-8"><title>Title</title><style>div{text-align: center;}</style></head><body><div><img src="./img/image.png" alt=""></div></body>
</html>

结果如下:
在这里插入图片描述

文本修饰线

属性名:text-decoration

属性值:

  • none:去掉文本修饰线
  • underline:下划线
  • line-through:删除线
  • overline:上划线

格式:

选择器{text-decoration: none;
}

代码示例:

<!DOCTYPE html>
<html lang = "en"><head><meta charset = "UTF-8"><title>Title</title><style>a{text-decoration: none;}p{text-decoration: underline;}div{text-decoration: line-through;}span{text-decoration: overline;}</style></head><body><a href="https://www.baidu.com">去掉a标签访问百度的下划线</a><p>给这行字加下划线</p><div>把这行字删了</div><span>给这行字加上划线</span></body>
</html>

结果如下:
在这里插入图片描述

文字颜色

属性名:color

属性:

颜色表示方式属性值说明使用场景
颜色关键字颜色英文单词red、green、blue…学习测试
rgb 表示法rgb(r, g, b)rgb 表示红绿蓝三原色,取值:0 - 255了解
rgba 表示法rgba(r, g, b, a)a 表示透明度,取值:0 - 1开发使用,实现透明色
十六进制表示法#RRGGBB#000000,#ffcc00,简写:#000,#fc0开发使用(从设计稿复制)

代码示例:

<!DOCTYPE html>
<html lang = "en"><head><meta charset = "UTF-8"><title>Title</title><style>h1{color: red;}h2{color: rgb(0, 0, 255)}h3{color: rgba(4, 94, 67, 0.5)}h4{color: #FFAACC;}</style></head><body><h1>颜色关键字</h1><h2>rgb表示法</h2><h3>rgba表示法</h3><h4>十六进制表示法</h4></body>
</html>

结果如下:
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/32202.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Trae AI IDEA安装与使用

文章目录 背景第一步、下载安装第二步、登录与使用优势异常处理 背景 最近比较热的 Trae 开发工具&#xff0c;在本地下载使用&#xff0c;记录下来。 第一步、下载安装 下载地址&#xff1a;【Trae中文版下载地址】&#xff0c;下载的安装文件名为&#xff1a;【Trae CN-Se…

【Godot4.4】写入和读取ZIP文件

概述 Godot提供了ZIPPacker类型来读写ZIP压缩包文件。本文是简单的写入和读取文件操作测试笔记。 写入纯文本文件 extends Buttonfunc _ready():write_zip_file("1.zip",func(zip_packer):write_txt_file_to_zippack(zip_packer,"1.txt","hhhhh&qu…

SpringBoot基础Kafka示例

这里将生产者和消费者放在一个应用中 使用的Boot3.4.3 引入Kafka依赖 <dependency><groupId>org.springframework.kafka</groupId><artifactId>spring-kafka</artifactId> </dependency>yml配置 spring:application:name: kafka-1#kafka…

µCOS-III从入门到精通 第十三章(事件标志组)

参考教程&#xff1a;【正点原子】手把手教你学UCOS-III实时操作系统_哔哩哔哩_bilibili 一、事件标志组简介 1、概述 &#xff08;1&#xff09;事件标志位是一个“位”&#xff0c;用来表示事件是否发生。 &#xff08;2&#xff09;事件标志组是一组事件标志位的集合&am…

LiveGBS流媒体平台GB/T28181常见问题-视频流安全控制HTTP接口鉴权勾选流地址鉴权后401Unauthorized如何播放调用接口流地址校验

LiveGBS流媒体平台GB/T28181常见问题频流安全控制HTTP接口鉴权勾选流地址鉴权后401Unauthorized如何播放调用接口流地址校验&#xff1f; 1、安全控制1.1、HTTP接口鉴权1.2、流地址鉴权 2、401 Unauthorized2.1、携带token调用接口2.1.1、获取鉴权token2.1.2、调用其它接口2.1.…

短视频下载去水印,用什么工具好?

去除视频和图片水印是许多用户的需求&#xff0c;尤其是在分享或保存内容时。以下是6款超好用的工具&#xff0c;帮助你轻松去除水印&#xff0c;享受纯净的视觉体验&#xff1a; 1. 易下载去水印小程序 特点&#xff1a; 操作简单&#xff0c;支持抖音、快手、小红书、哔哩哔哩…

Java Collection(3)——BinaryTree(二叉树)

前言 1.掌握树的基本概念 2.掌握二叉树概念及特性 3.掌握二叉树的基本操作 后面的优先级队列(大根堆&#xff0c;小根堆)也是基于二叉树实现的&#xff0c;所以理解好二叉树至关重要 1.树形结构 1.1描述 树是一种非线性的数据结构&#xff0c;它是由不为零个有限结点组成一…

[Echarts]图例换行时icon对齐标题

当前效果 目标效果 让图例中的“点”和标题同一行 代码 const data [{value: 100,name: 未标注},{value: 100,name: 已标注},{value: 100,name: 标注中} ];option {tooltip: {backgroundColor: #fff,extraCssText: box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.15);,backgro…

Scala编程_实现Rational的基本操作

在Scala中实现一个简单的有理数&#xff08;Rational&#xff09;类&#xff0c;并对其进行加法、比较等基本操作. 有理数的定义 有理数是可以表示为两个整数的比值的数&#xff0c;通常形式为 n / d&#xff0c;其中 n 是分子&#xff0c;d 是分母。为了确保我们的有理数始终…

责任链模式如何减少模块之间的耦合

责任链模式如何减少模块之间的耦合 在复杂的软件系统中&#xff0c;模块之间的耦合是一个常见的问题。高耦合的代码不仅增加了维护成本&#xff0c;还会导致系统的扩展性和灵活性受限。当我们需要为不同的请求设计灵活的处理逻辑时&#xff0c;传统的硬编码方式会将请求的发送…

【最新】DeepSeek 实用集成工具有那些?

deepseek 系列github仓库地址 【主页】deepseek-aiDeepSeek-R1DeepSeek-V3DeepSeek-VL2【本文重点介绍】awesome-deepseek-integration 注意&#xff1a;以下内容来自awesome-deepseek-integration DeepSeek 实用集成&#xff08;awesome-deepseek-integration&#xff09; 将…

如何在Python下实现摄像头|屏幕|AI视觉算法数据的RTMP直播推送

技术背景 在直播应用开发中&#xff0c;RTMP推流是核心功能之一。本文将结合大牛直播SDK的Python接口实现&#xff0c;详细讲解如何在Python环境下进行RTMP推流开发。好多开发者都知道&#xff0c;在发布Python的RTMP推流demo示例之前&#xff0c;我们十年前已经发布了非常稳定…

不用 Tomcat?SpringBoot 项目用啥代替?

在SpringBoot框架中&#xff0c;我们使用最多的是Tomcat&#xff0c;这是SpringBoot默认的容器技术&#xff0c;而且是内嵌式的Tomcat。 同时&#xff0c;SpringBoot也支持Undertow容器&#xff0c;我们可以很方便的用Undertow替换Tomcat&#xff0c;而Undertow的性能和内存使…

LLM训练中常用的Benchmarks

在当今人工智能领域,大语言模型(LLM)凭借其在理解和生成人类自然语言文本方面的卓越表现,成为了备受瞩目的焦点。然而,随着LLM的广泛应用,如何对其性能进行准确、全面的评估成为了一个关键问题。在这样的背景下,大语言模型基准测试应运而生,它是评估LLM不可或缺的重要工…

基于深度学习的医学CT图像肺结节智能检测与语音提示系统【python源码+Pyqt5界面+数据集+训练代码】

《------往期经典推荐------》 一、AI应用软件开发实战专栏【链接】 项目名称项目名称1.【人脸识别与管理系统开发】2.【车牌识别与自动收费管理系统开发】3.【手势识别系统开发】4.【人脸面部活体检测系统开发】5.【图片风格快速迁移软件开发】6.【人脸表表情识别系统】7.【…

Selenium | 无法正常打开Google Chrome浏览器 转 Edge Chrome

目录 背景案例 换成 Edge Chrome 驱动下载 配置环境 代码案例 测试结果 背景案例 Python正常&#xff0c;环境正常&#xff0c;驱动正常&#xff0c;但是就是打不开浏览器&#xff0c;就是一直报错&#xff0c;导致很烦躁 换成 Edge Chrome 与 Google Chrome浏览器一样…

【JavaEE】文件操作和IO

【JavaEE】文件操作和IO 一、认识文件1.1 狭义和广义的文件概念1.2 文件路径1.3 文件的分类 二、Java 中操作⽂件2.1 File类2.2 代码演示 三、文件内容的读写 —— 数据流3.1 字节流和字符流字节流字符流 3.2 特别注意 四、实战演示4.1 查找删除文件4.2 普通文件的复制4.3 文件…

【数据挖掘】通过心脏病数据案例熟悉数据挖掘的完整过程

心脏病数据挖掘过程 一、加载数据源 # 如果没有安装数据源所依赖的库&#xff0c;则先安装数据源所在的python库: pip install ucimlrepo # 引入pandas和ucimlrepo import pandas as pd from ucimlrepo import fetch_ucirepo# fetch dataset Heart Disease dataset的Id为45 h…

【Golang】第二弹-----变量、基本数据类型、标识符

笔上得来终觉浅,绝知此事要躬行 &#x1f525; 个人主页&#xff1a;星云爱编程 &#x1f525; 所属专栏&#xff1a;Golang &#x1f337;追光的人&#xff0c;终会万丈光芒 &#x1f389;欢迎大家点赞&#x1f44d;评论&#x1f4dd;收藏⭐文章 目录 一、变量 1.1基本介绍…

go个人论坛项目

搭建个人论坛 项目地址&#xff1a;MyForum: goginvue搭建论坛 - Gitee.com PS&#xff1a;有些地方没有写好&#xff0c;请选择性查看 初始化项目 创建目录结构 利用ini配置初始化框架 [server] AppMode debug HttpPort :3000 JwtKey "dhjasdkajh321"[databa…