初识CSS 第四节
🌹CSS 文本
🌸文本颜色
color 属性可用于设置文本的颜色。颜色由以下几个值指定
- 颜色名 - 比如 “red”
- 十六进制值 - 比如 “#ff0000”
- RGB 值 - 比如 “rgb(255,0,0)”
实例：
<!DOCTYPE html>
<html>
<head>
<style>
body {
color: blue;
}
h1 {
color: green;
}
</style>
</head>
<body>
<h1>这是绿色的标题</h1>
<p>这是一段文本为蓝色的段落。页面的默认文本颜色在 body 选择器中定义。</p>
<p>这是另一段文本。</p>
</body>
</html>
🍊文本颜色和背景色
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightgrey;
color: blue;
}
h1 {
background-color: red;
color: white;
}
</style>
</head>
<body>
<h1>黑色背景的白色文本</h1>
<p>灰色背景和蓝色文本。</p>
</body>
</html>
🍡文本对齐
text-align 属性可用于设置文本的对齐方式。文本可以左对齐或右对齐或居中对齐。
实例：
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-align: center;
}
h2 {
text-align: left;
}
h3 {
text-align: right;
}
</style>
</head>
<body>
<h1>居中对齐</h1>
<h2>左对齐</h2>
<h3>右对齐</h3>
</body>
</html>
当 text-align 属性设为 “justify” 后，会拉伸每一行，使每一行都具有相等的宽度，并且左右边距是直的。
实例：
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid black;
padding: 10px;
width: 200px;
height: 245px;
text-align: justify;
}
</style>
</head>
<body>
<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>
🍓文本方向
direction 和 unicode-bidi 属性可用于更改元素的文本方向
实例：
<!DOCTYPE html>
<html>
<head>
<style>
p.ex1 {
direction: rtl;
unicode-bidi: bidi-override;
}
</style>
</head>
<body>
<p>正着显示的</p>
<p class="ex1">反着显示的</p>
</body>
</html>
🌼垂直对齐
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="JG.png" alt="JG" width="100" height="100"> 默认对齐方式的图像。</p><br>
<p>一幅 <img class="top" src="JG.png" alt="JG" width="100" height="100"> 上对齐的图像。</p><br>
<p>一幅 <img class="middle" src="JG.png" alt="JG" width="100" height="100"> 居中对齐的图像。</p><br>
<p>一幅 <img class="bottom" src="JG.png" alt="JG" width="100" height="100"> 下对齐的图像。</p>
</body>
</html>
🍎文字装饰
text-decoration 属性用于设置或删除文本装饰。text-decoration: none; 通常用于从链接上删除下划线：
实例：
<!DOCTYPE html>
<html>
<head>
<style>
a {
text-decoration: none;
}
</style>
</head>
<body>
<p>没有下划线的链接：<a href="https://www.baidu.com">百度</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>第一个标题</h1>
<h2>第二个标题</h2>
<h3>第三个标题</h3>
</body>
</html>
🍇文本转换
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">jg全部大写</p>
<p class="lowercase">JG全部小写</p>
<p class="capitalize">jg首字母大写</p>
</body>
</html>
🥝文字缩进
text-indent 属性用来指定文本第一行的缩进
实例：
<!DOCTYPE html>
<html>
<head>
<style>
p {
text-indent: 50px;
}
</style>
</head>
<body>
<p>I will read each scroll for thirty days in this prescribed manner, before I proceed to the next scroll.</p>
</body>
</html>
🍍字母间距
letter-spacing 属性用于指定文本中字符之间的间距。
实例：
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
letter-spacing: 3px;
}
h2 {
letter-spacing: -4px;
}
</style>
</head>
<body>
<h1>abcdefg</h1>
<h2>abcdefg</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>标准的默认行高大概是 110% 到 120%。</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: 10px;
}
h2 {
word-spacing: -6px;
}
</style>
</head>
<body>
<h1>Today I begin a new life.</h1>
<h2>Today I begin a new life.</h2>
</body>
</html>
🌵空白
white-space 属性可以指定元素内部空白的处理方式。
<!DOCTYPE html>
<html>
<head>
<style>
p {
white-space: nowrap;
}
</style>
</head>
<body>
<p>
Today I begin a new life.Today I begin a new life.
Today I begin a new life.Today I begin a new life.
Today I begin a new life.Today I begin a new life.
Today I begin a new life.Today I begin a new life.
</p>
</body>
</html>
🍈文本阴影
text-shadow 属性可以为文本添加阴影。
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-shadow: 2.5px 2.5px 5px red;
}
</style>
</head>
<body>
<h1>文本阴影效果！</h1>
</body>
</html>
🧉CSS 字体
小提示：为网站选择正确的字体是非常重要的！
在CSS里，有五个通用的字体族
- 衬线字体（Serif）- 在每个字母的边缘都有一个小的笔触。它们营造出一种形式感和优雅感。
- 无衬线字体（Sans-serif）- 字体线条简洁（没有小笔画）。它们营造出现代而简约的外观。
- 等宽字体（Monospace）- 这里所有字母都有相同的固定宽度。它们创造出机械式的外观。
- 草书字体（Cursive）- 模仿了人类的笔迹。
- 幻想字体（Fantasy）- 是装饰性/俏皮的字体。
提示：在计算机屏幕上，无衬线字体被认为比衬线字体更易于阅读。
实例：
<!DOCTYPE html>
<html>
<head>
<style>
.p1 {
font-family: "Times New Roman", Times, serif;
}
.p2 {
font-family: Arial, STXingkai, sans-serif;
}
.p3 {
font-family: "Lucida Console", "Courier New", monospace;
}
</style>
</head>
<body>
<p>这是一个段落，以 Times New Roman 字体显示：</p>
<p class="p1">Today I begin a new life.</p>
<p>这是一个段落，以华文行楷字体显示：</p>
<p class="p2">愿你们走出万里，归来仍是少年。</p>
<p>这是一个段落，以 Lucida Console 字体显示：</p>
<p class="p3">Today I begin a new life.</p>
</body>
</html>
🧃字体样式
font-style 属性主要用于指定斜体文本，它有三个值。
- normal - 文字正常显示
- italic - 文本以斜体显示
- oblique - 文本为“倾斜”（倾斜与斜体非常相似，但支持较少）
实例：
<!DOCTYPE html>
<html>
<head>
<style>
p.normal {
font-style: normal;
}
p.italic {
font-style: italic;
}
p.oblique {
font-style: oblique;
}
</style>
</head>
<body>
<p class="normal">Today I begin a new life.</p>
<p class="italic">Today I begin a new life.</p>
<p class="oblique">Today I begin a new life.</p>
</body>
</html>
🍷字体粗细
font-weight 属性用来指定字体的粗细。
实例：
<!DOCTYPE html>
<html>
<head>
<style>
p.normal {
font-weight: normal;
}
p.light {
font-weight: lighter;
}
p.thick {
font-weight: bold;
}
p.thicker {
font-weight: 900;
}
</style>
</head>
<body>
<p class="normal">愿你们走出万里，归来仍是少年。</p>
<p class="light">愿你们走出万里，归来仍是少年。</p>
<p class="thick">愿你们走出万里，归来仍是少年。</p>
<p class="thicker">愿你们走出万里，归来仍是少年。</p>
</body>
</html>
🍦字体变体
font-variant 属性指定是否以 small-caps 字体（小型大写字母）显示文本。
实例：
<!DOCTYPE html>
<html>
<head>
<style>
p.normal {
font-variant: normal;
}
p.small {
font-variant: small-caps;
}
</style>
</head>
<body>
<p class="normal">My name is Jg</p>
<p class="small">My name is Jg</p>
</body>
</html>
🍉字体大小
font-size 属性可以设置文本的大小。
注释：如果您没有指定字体大小，则普通文本（如段落）的默认大小为 16px（16px = 1em）。
大小的单位可以使em、百分比、px、vw等值。
实例：
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-size: 100%;
}
h1 {
font-size: 2.5em;
}
h2 {
font-size: 1.875vw;
}
p {
font-size: 16px;
}
</style>
</head>
<body>
<h1>这是标题</h1>
<h2>这是标题</h2>
<p>以 ％ 和 em 中设置字体大小会允许所有浏览器调整文本大小！</p>
</body>
</html>
🥤字体属性
font 属性是以下属性的简写属性：
- font-style
- font-variant
- font-weight
- font-size/line-height
- font-family
实例：
<!DOCTYPE html>
<html>
<head>
<style>
p.a {
font: 20px Arial, sans-serif;
}
p.b {
font: italic bold 12px/30px Georgia, serif;
}
</style>
</head>
<body>
<p class="a">The truth is, there’s no better time to be happy than right now. If not now, when?</p>
<p class="b">The truth is, there’s no better time to be happy than right now. If not now, when?</p>
</body>
</html>
注意：font-size 和 font-family 的值是必需的。如果缺少其他值之一，则会使用其默认值。
🍭CSS 图标
提示：无需下载或安装！
实例：
<!DOCTYPE html>
<html>
<head>
<script src="https://use.fontawesome.com/34d6ed2650.js"></script>
</head>
<body>
<p>一些 Font Awesome 图标：</p>
<i class="fa fa-ravelry"></i>
<i class="fa fa-snowflake-o"></i>
<i class="fa fa-ravelry"></i>
<i class="fa fa-superpowers"></i>
<i class="fa fa-car"></i>
<p>有样式的 Font Awesome 图标（尺寸和颜色）：</p>
<i class="fa fa-ravelry" style="font-size:24px;"></i>
<i class="fa fa-ravelry" style="font-size:36px;"></i>
<i class="fa fa-ravelry" style="font-size:48px;color:red;"></i>
<i class="fa fa-ravelry" style="font-size:60px;color:lightblue;"></i>
</body>
</html>
🍿CSS 链接
通过 CSS，可以用不同的方式设置链接的样式。链接可以使用任何 CSS 属性（例如 color、font-family、background 等）来设置样式。
实例：
<!DOCTYPE html>
<html>
<head>
<style>
a {
color: hotpink;
}
</style>
</head>
<body>
<p><b><a href="https://www.baidu.com/" target="_blank">这是一个链接</a></b></p>
</body>
</html>
此外还可以根据链接处于什么状态来设置链接的不同样式。
- a:link - 正常的，未访问的链接
- a:visited - 用户访问过的链接
- a:hover - 用户将鼠标悬停在链接上时
- a:active - 链接被点击时
如果为多个链接状态设置样式，请遵循一下的顺序规则。
- a:hover 必须 a:link 和 a:visited 之后
- a:active 必须在 a:hover 之后
🍬CSS 列表
列表分为有序列表和无序列表。
实例：
<!DOCTYPE html>
<html>
<head>
<style>
ul.a {
list-style-type: circle;
}
ul.b {
list-style-type: square;
}
ol.c {
list-style-type: upper-roman;
}
ol.d {
list-style-type: lower-alpha;
}
</style>
</head>
<body>
<p>无序列表</p>
<ul class="a">
<li>一</li>
<li>二</li>
<li>三</li>
</ul>
<ul class="b">
<li>一</li>
<li>二</li>
<li>三</li>
</ul>
<p>有序列表</p>
<ol class="c">
<li>一</li>
<li>二</li>
<li>三</li>
</ol>
<ol class="d">
<li>一</li>
<li>二</li>
<li>三</li>
</ol>
</body>
</html>
🍫CSS 表格
使用 CSS 可以极大地改善 HTML 表格的外观。
如需在 CSS 中设置表格边框，请使用 border 属性。
实例：
<!DOCTYPE html>
<html>
<head>
<style>
#customers {
font-family: Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 100%;
}
#customers td, #customers th {
border: 1px solid #ddd;
padding: 8px;
}
#customers tr:nth-child(even){background-color: #345;}
#customers tr:hover {background-color: #ddd;}
#customers th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: #555;
color: white;
}
</style>
</head>
<body>
<table id="customers">
<tr>
<th>123</th>
<th>456</th>
<th>789</th>
<th>000</th>
</tr>
<tr>
<td>147</td>
<td>258</td>
<td>369</td>
<td>545</td>
</tr>
<tr>
<td>159</td>
<td>357</td>
<td>846</td>
<td>745</td>
</tr>
<tr>
<td>464</td>
<td>254</td>
<td>254</td>
<td>254</td>
</tr>
</table>
</body>
</html>
以下是表格的全部属性
- border 简写属性。在一条声明中设置所有边框属性。
- border-collapse 规定是否应折叠表格边框。
- border-spacing 规定相邻单元格之间的边框的距离。
- caption-side 规定表格标题的位置。
- empty-cells 规定是否在表格中的空白单元格上显示边框和背景。
- table-layout 设置用于表格的布局算法。
🍨第三节到这里就结束了
我们还年轻，长长的人生可以受一点风浪
扫一扫
502
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
