CSS初级教程(文本)【第六天】

最新推荐文章于 2024-10-15 22:21:38 发布
最新推荐文章于 2024-10-15 22:21:38 发布
阅读量623 收藏 2
点赞数 4
分类专栏： CSS 文章标签： css 前端 html css3 ui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_45463480/article/details/128603827
版权

文章目录

CSS上回学习链接
CSS初级教程 颜色【第一天】
CSS初级教程 背景【第二天】
CSS初级教程 边框【第三天】
CSS初级教程 边距、高度、宽度【第四天】
CSS初级教程(轮廓)【第五天】

【1】CSS 文本[字体颜色|背景色]

TEXT FORMATTING
文本格式化
This text is styled with some of the text formatting properties. The heading uses the text-align, text-transform, and color properties. The paragraph is indented, aligned, and the space between characters is specified. The underline is removed from this colored “Try it Yourself” link.

该文本使用某些文本格式属性来设置样式。标题使用 text-align、text-transform 和 color 属性。段落缩进、对齐，并指定了字符间距。然后从这个彩色的“亲自试一试”链接中删除了下划线。
在这里插入图片描述
实例

<!DOCTYPE html>
<html>
<head>
<style>
div {/*内部风格 边距大小1px 实线 边距颜色灰色*/
  border: 1px solid gray;
  padding: 55px;/*文本缩进 上下左右8px*/
}

h1 {
  text-align: center;
  text-transform: uppercase;/*大写字母*/
  color: #4CAF50;/*字体颜色*/
}

p {
  text-indent: 20px;/*首行缩进*/
  text-align: justify;
  letter-spacing: 1px;/*间距*/
}

a {
  text-decoration: none;
  color: #ff0000;
}
</style>
</head>
<body>

<div>
  <h1>text formatting</h1>
  <p>This text is styled with some of the text formatting properties. The heading uses the text-align, text-transform, and color properties.
  The paragraph is indented, aligned, and the space between characters is specified. The underline is removed from this colored
  <a target="_blank" href="tryit.asp?filename=trycss_text">"Try it Yourself"</a> link.</p>
</div>

</body>
</html>

在这里插入图片描述

【1】文本颜色

color 属性用于设置文本的颜色。颜色由以下值指定：

颜色名 - 比如 "red"
十六进制值 - 比如 "#ff0000"
RGB 值 - 比如 "rgb(255,0,0)"

查看 CSS 颜色值，以获取可能颜色值的完整列表。

页面的默认文本颜色是在 body 选择器中定义的。

实例

<!DOCTYPE html>
<html>
<head>
<style>
body {
  color: blue;
}

h1 {
  color: green;
}
</style>
</head>
<body>

<h1>这是标题 1</h1>

<p>这是一段普通的段落。请注意文本为蓝色。页面的默认文本颜色在 body 选择器中定义。</p>

<p>另一段文本。</p>

</body>
</html>

在这里插入图片描述

提示：对于 W3C compliant CSS：如果您定义了 color 属性，则还必须定义 background-color 属性。

【2】文本颜色和背景色
在本例中，我们定义了 background-color 属性和 color 属性：

实例

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color: lightgrey;
  color: blue;
}

h1 {
  background-color: black;
  color: white;
}
</style>
</head>
<body>

<h1>此标题是带黑色背景的白色文本</h1>
<p>此页面有灰色背景和蓝色文本。</p>
<p>另一段文本。</p>

</body>
</html>

在这里插入图片描述

【2】CSS 文本对齐

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

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

下例展示了居中对齐以及左右对齐的文本（如果文本方向是从左到右，则默认为左对齐；如果文本方向是从右到左，则默认是右对齐）：

实例

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  text-align: center;
}

h2 {
  text-align: left;
}

h3 {
  text-align: right;
}
</style>
</head>
<body>

<h1>标题 1（居中对齐）</h1>
<h2>标题 2（左对齐）</h2>
<h3>标题 3（右对齐）</h3>

<p>上面的三个标题是居中、左和右对齐。</p>

</body>
</html>

在这里插入图片描述

当 text-align 属性设置为 "justify" 后，将拉伸每一行，以使每一行具有相等的宽度，并且左右边距是直的（就像在杂志和报纸中）：

实例

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 5px solid black;
  padding: 10px;
  width: 200px;
  height: 200px;
  text-align: justify;
}
</style>
</head>
<body>

<h1>text-align: justify; 实例</h1>

<p>text-align: justify; 值会拉伸线条，使每条线都有相等的宽度（比如报纸和杂志）。</p>

<div>
In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'
</div>

</body>
</html>

在这里插入图片描述

【2】文本方向
direction 和 unicode-bidi 属性可用于更改元素的文本方向：

实例

<!DOCTYPE html>
<html>
<head>
<style>
p.ex1 {
  direction: rtl;
  unicode-bidi: bidi-override;
}
</style>
</head>
<body>

<p>This is the default text direction.</p>

<p class="ex1">This is right-to-left text direction.</p>

</body>
</html>

在这里插入图片描述

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

本例演示如何设置文本中图像的垂直对齐方式：

实例

<!DOCTYPE html>
<html>
<head>
<style>
img.top {
  vertical-align: top;
}

img.middle {
  vertical-align: middle;
}

img.bottom {
  vertical-align: bottom;
}
</style>
</head>
<body>

<p>一幅 <img src="/i/logo/w3logo-3.png" alt="W3School" width="180" height="167"> 默认对齐方式的图像。</p><br>

<p>一幅 <img class="top" src="/i/logo/w3logo-3.png" alt="W3School" width="180" height="167"> 上对齐的图像。</p><br>

<p>一幅 <img class="middle" src="/i/logo/w3logo-3.png" alt="W3School" width="180" height="167"> 居中对齐的图像。</p><br>

<p>一幅 <img class="bottom" src="/i/logo/w3logo-3.png" alt="W3School" width="180" height="167"> 下对齐的图像。</p>

</body>
</html>

在这里插入图片描述

【3】CSS 文字装饰

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

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

实例

<!DOCTYPE html>
<html>
<head>
<style>
a {
  text-decoration: none;
}
</style>
</head>
<body>

<p>没有下划线的链接：<a href="https://www.w3school.com.cn">W3School.com.cn</a></p>

</body>
</html>

在这里插入图片描述

其他 text-decoration 值用于装饰文本：

实例

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  text-decoration: overline;/*在文本上的线*/
}

h2 {
  text-decoration: line-through;/*删除线*/
}

h3 {
  text-decoration: underline;/*下划线*/
}
</style>
</head>
<body>

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>

</body>
</html>

在这里插入图片描述
注释：建议不要在非链接文本加下划线，因为这经常会使读者感到困惑。

【4】CSS 文本转换[大写或小写]

文本转换
text-transform 属性用于指定文本中的大写和小写字母。

它可用于将所有内容转换为大写或小写字母，或将每个单词的首字母大写：

实例

<!DOCTYPE html>
<html>
<head>
<style>
p.uppercase {
  text-transform: uppercase;/*大写*/
}

p.lowercase {
  text-transform: lowercase;/*小写*/
}

p.capitalize {
  text-transform: capitalize;/*首字母大写*/
}
</style>
</head>
<body>

<p class="uppercase">This is some text.</p>
<p class="lowercase">This is some text.</p>
<p class="capitalize">This is some text.</p>

</body>
</html>

在这里插入图片描述

【5】CSS 文字间距

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

实例

<!DOCTYPE html>
<html>
<head>
<style>
p {
  text-indent: 50px;
}
</style>
</head>
<body>

<p>In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'</p>

</body>
</html>

在这里插入图片描述

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

下例演示如何增加或减少字符之间的间距：

实例

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  letter-spacing: 3px;
}

h2 {
  letter-spacing: -5px;
}
</style>
</head>
<body>

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>

</body>
</html>

在这里插入图片描述

行高
line-height 属性用于指定行之间的间距：

实例

<!DOCTYPE html>
<html>
<head>
<style>
p.small {
  line-height: 0.7;
}

p.big {
  line-height: 1.8;
}
</style>
</head>
<body>

<p>
这是有标准行高的段落<br>
大多数浏览器中的默认行高大概是 110% 到 120%。<br>
</p>

<p class="small">
这是行高更小的段落。<br>
这是行高更小的段落。<br>
</p>

<p class="big">
这是行高更大的段落。<br>
这是行高更大的段落。<br>
</p>

</body>
</html>

在这里插入图片描述

字间距
word-spacing 属性用于指定文本中单词之间的间距。

下例演示如何增加或减少单词之间的间距：

实例

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  word-spacing: 20px;
}

h2 {
  word-spacing: -12px;
}
</style>
</head>
<body>

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>

</body>
</html>

在这里插入图片描述

空白
white-space 属性指定元素内部空白的处理方式。

此例演示如何禁用元素内的文本换行：

实例

<!DOCTYPE html>
<html>
<head>
<style>
p {
  white-space: nowrap;
}
</style>
</head>
<body>

<h2>空白</h2>
<!-- 以下文本不会换行-->
<p>
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</p>

<p>请尝试删除 white-space 属性来看一下区别。</p>

</body>
</html>

在这里插入图片描述

【6】CSS 文本阴影

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

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

文字阴影效果！

实例

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  text-shadow: 2px 2px;
}
</style>
</head>
<body>

<h1>文本阴影效果！</h1>

</body>
</html>

在这里插入图片描述

接下来，向阴影添加颜色（红色）：
在这里插入图片描述
实例

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  text-shadow: 2px 2px red;
}
</style>
</head>
<body>

<h1>文本阴影效果！</h1>

</body>
</html>

在这里插入图片描述

然后，向阴影添加模糊效果（5px）：
在这里插入图片描述
实例

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  text-shadow: 2px 2px 5px red;
}
</style>
</head>
<body>

<h1>文本阴影效果！</h1>

</body>
</html>

在这里插入图片描述

【7】所有 CSS 文本属性

属性描述
color设置文本颜色。
direction指定文本的方向 / 书写方向。
letter-spacing设置字符间距。
line-height设置行高。
text-align指定文本的水平对齐方式。
text-decoration指定添加到文本的装饰效果。
text-indent指定文本块中首行的缩进。
text-shadow指定添加到文本的阴影效果。
text-transform控制文本的大小写。
text-overflow指定应如何向用户示意未显示的溢出内容。
unicode-bidi与 direction 属性一起使用，设置或返回是否应重写文本来支持同一文档中的多种语言。
vertical-align指定文本的垂直对齐方式。
white-space指定如何处理元素内的空白。
word-spacing设置单词间距。

在这里插入图片描述

Qt历险记
关注
专栏目录
C++ UTF8 编码转换 GB2312
shen_wei的专栏
08-01 1万+
void UTF_8ToUnicode(wchar_t* pOut,char *pText) { char* uchar = (char *)pOut; uchar[1] = ((pText[0] & 0x0F) > 2) & 0x0F); uchar[0] = ((pText[1] & 0x03) << 6) + (pText[2] & 0x3F); } void
CSS入门教程
03-18
### CSS入门教程知识点详解 #### 一、CSS简介与作用 **CSS**(Cascading Style Sheets，级联样式表)是一种强大的工具，用于为HTML文档添加样式和布局效果。掌握CSS能够极大地提升网页的设计水平，使得网页更加美观...
C++ Unicode与UTF_8 编码转换
huazi5dgan的专栏
05-31 604
C++ Unicode与UTF_8 编码转换void UTF_8ToUnicode(wchar_t* pOut,char *pText){ char* uchar = (char *)pOut; uchar[1] = ((pText[0] & 0x0F) << 4) + ((pText[1] >> 2) & 0x0F); uchar[0] = ((pText[1] & 0x0
GB2312与UTF-8编码转换 C++
CodingStart
03-11 1521
旨在进行http传输中文字符，将中文字符转为UTF-8进行传输； #include<iostream> #include<stdio.h> #include<windows.h> using namespace std; string UrlUTF8(char* str); void GB2312ToUTF_8(string& pOut, char* pText, int pLen); void Gb2312ToUnicode(WCHAR* pOut
使用 JavaScript 中的 document 对象的属性，根据下拉框中选择的属性，更改页面中的字体颜色和背景颜色
杨明金的博客
11-01 5021
查看本章节 查看作业目录 需求说明： 使用 JavaScript 中的 document 对象的属性，根据下拉框中选择的属性，更改页面中的字体颜色和背景颜色 实现思路： 在页面的 <body> 节点下加入 <h2> 节点，在 <h2> 节点下加入文本节点，显示为：更改字体颜色和背景颜色 在页面的 <body> 节点下加入 <select> 节点，设置 <select> 节点的 id 属性 在 <select&gt
20-JavaScript核心（二）
中资上事的博客
05-06 164
1.1 今日目标 能够用代码写出JS函数的定义形式和调用形式 能够说出函数的形参和实参的区别 能够理解匿名函数立即调用的定义形式和调用形式 能够理解错误对script段的影响 能够理解变量作用域的概念 能够说出局部变量和全局变量的区别 1.2 JS中三类对象 1.2.1 浏览器对象 1、window对象 常用属性和方法： window.alert('操作成功'); window.con...
CSS初级教程(边框)【第三天】
m0_45463480的博客
12-27 2324
CSS初级教程【第三天】 【1】CSS 边框 【2】CSS 边框宽度 【3】CSS 边框颜色 【4】CSS 边框各边 【5】CSS 简写边框属性 【6】CSS 圆角边框 【7】所有 CSS 边框属性 上回学习链接 CSS初级教程【第一天】
CSS从入门到精通（CSS学习第二天）
学习是最低成本的投资
05-17 880
Emmet语法、CSS复合选择器（后代选择器、子选择器、并集选择器、伪类选择器）、CSS的元素显示模式（块元素、行内元素）、CSS背景
CSS初级教程(轮廓)【第五天】
m0_45463480的博客
01-03 991
CSS初级教程【第五天】 【1】CSS 框模型 【2】CSS 轮廓 【3】CSS 轮廓宽度 【4】CSS 轮廓颜色 【5】CSS 轮廓简写 【6】CSS 轮廓偏移 【7】所有 CSS 轮廓属性 CSS上回学习链接 CSS初级教程【第一天】 CSS初级教程【第二天】 CSS初级教程【第三天】 CSS初级教程【第四天】
3天学会css视频_PHP初级 CSS教程_CSS入门教程
忧郁的蛋的专栏
03-09 124
CSS部分共3天 第1天 第1课：css介绍和语法 第2课：导入css文件的方法 第3课：标签选择器 第4课：类选择器 第5课：类选择器的案例 第6课：id选择器 第7课：综合案例 第8课：通用选择器 第9课：多元素选择器 第10课：后代元素选择器 第11课：伪类 第12课：文本的属性 有需要的朋友可以加 V：fenghehulian ...
CSS网页布局入门教程9：用CSS设计网站导航——横向导航
10-30
本教程为CSS网页布局入门教程的第九篇，主要讲解如何使用CSS设计网站导航，特别是横向导航。网站导航是网站中最重要的元素，是网站提供给用户的最直接最方便的访问网站内容的工具。网站导航从形式上主要由横向导航、...
网页设计与制作教程(HTMLCSSJavaScript)第2版第4章CSS样式入门.pptx
11-12
"网页设计与制作教程（HTML+CSS+JavaScript）第2版第4章CSS样式入门" 本资源主要介绍了CSS（Cascading Style Sheets）样式表的基本概念、发展历史、代码规范、工作环境、优点和局限性等内容。同时，本资源还讲解了...
Dreamweaver CC 从入门到高手视频教程下载第7章 创建网页样式——CSS.zip
04-13
在本“Dreamweaver CC 从入门到高手视频教程下载第7章 创建网页样式——CSS”的学习资源中，我们将深入探讨如何使用Adobe Dreamweaver CC来创建和管理网页样式，特别是通过使用CSS（Cascading Style Sheets）来实现...
【网页设计】CSS 盒子模型
Akiiiira的博客
10-15 993
1. 布局为啥用不同盒子,我只想用div？标签都是有语义的, 合理的地方用合理的标签。比如产品标题 就用 h, 大量文字段落就用p2. 为啥用辣么多类名？类名就是给每个盒子起了一个名字,可以更好的找到这个盒子, 选取盒子更容易,后期维护也方便。3. 到底用 margin 还是 padding？大部分情况两个可以混用，两者各有优缺点，但是根据实际情况，总是有更简单的方法实现。4. 自己做没有思路？布局有很多种实现方式，同学们可以开始先模仿老师的写法，然后再做出自己的风格。
nuxtjs3 使用tailwindcss做自适应
weixin_40466351的博客
10-12 274
在 tailwind.config.js 文件中，你可以配置 Tailwind 的响应式断点和自定义主题。这将生成一个 tailwind.config.js 文件。
css+js实现滚动渐变
m_review的博客
10-11 350
希望在滚动的过程中给这个div加一个rgba(247, 248, 252,1）背景色，要求在滚动1px的时候白色透明度为0,滚动到banner高度的时候透明度为1并且过程是丝滑的。为了实现这一效果，可以采用CSS的linear-gradient结合JavaScript来动态调整背景颜色的透明度。
CSS 居中那些事
潜隐-前端
10-14 1067
这篇文章探讨了 CSS 居中的技巧和方法。它涵盖了水平居中和垂直居中的不同场景, 并提供了多种实用的CSS代码示例。通过使用居中技术, 您可以轻松地在网页设计中实现元素的居中对齐....
深入解析CSS中的!important规则
最新发布
ning的博客
10-15 424
用户可能会通过浏览器扩展或自定义CSS来改变网站的外观。在这种情况下，开发者可以使用!important来确保某些样式声明不被用户自定义样式覆盖，从而尊重用户的视觉偏好。!important是CSS中一个强大的工具，但应该谨慎使用。它应该被视为解决特定样式冲突的最后手段，而不是常规做法。在可能的情况下，通过优化选择器的特异性和结构来避免使用!important会是更好的选择。记住，良好的代码习惯和结构化的设计往往比依赖于!important更能带来长期的维护性和可扩展性。版权声明。
CSS入门教程：页面美化实战技巧
资源摘要信息:"Web-前端教程03 第一次为页面开美颜之 CSS.zip" 本资源是一份专门针对Web前端开发者的教程，讲述了如何使用CSS（层叠样式表）技术来美化网页页面。CSS是一种用来表现HTML或XML等文件样式的计算机语言...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Qt历险记

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值