一、CSS文本属性
二、CSS字体属性
- （一）常用文本字体样式属性
- （二）设置整体font属性
三、CSS背景属性
- （一）背景颜色
- （二）背景图片
- （三）图片平铺方式
- （四）图片位置
- （五）设置整体背景属性
四、CSS伪类
- （一）CSS超链接
- （二）创建不同样式的伪类选择器
结语

一、CSS文本属性

以下是一些常用的文本属性，比如设置文本颜色、行高、字号等等。
color用于描述文本的颜色，后跟颜色；
letter-spacing用于描述字符间距，后跟px；
line-height用于描述行高，后跟px、em或百分比；
text-align用于描述文本的对齐，后跟center、left、right、justify；
text-indent用于描述文本的首行缩进，后跟em；
text-decoration用于对文本进行装饰线，后跟overline、line-through、underline、none分别表示处于文字上方、中部、下方和去除超链接下划线，其中line-through也可以作为删除线。
例如，下列代码中，设置文本颜色为紫色、行高为2em、字符间距为2px、首行缩进2em：
css文件代码：

p{color: purple;line-height: 2em;letter-spacing: 2px;text-indent: 2em;
}

html文件代码：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><link rel="stylesheet" href="../CSS/new_file.css" /></head><body><p>层叠样式表是一种用来表现HTML或XML等文件样式的计算机语言。</p><p>CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。</p></body></html>

运行结果如下：

二、CSS字体属性

（一）常用文本字体样式属性

以下是一些常用的文本字体样式设置，比如设置文本的字号、字体等等。
font用于设置所有字体属性，后跟bold表示加粗、italic表示斜体、px或字体类型；
font-size用于描述文本的字号，后跟px或百分比；
font-family用于描述文本的字体样式，后跟字体类型；
font-style用于描述文本斜体样式，后跟italic；
font-weight用于描述文本的粗体样式，后跟bold。

（二）设置整体font属性

当然也可以将所有的字体设置放在一个font属性内，这样方便简化字体设置。
例如，下列代码，设置文本为斜体加粗，字号大小为20px，行高为2em，字体类型为幼圆：
css文件代码：

p{font: italic bold 20px/2em '幼圆';
}

html文件代码：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><link rel="stylesheet" href="../CSS/new_file.css" /></head><body><p>层叠样式表是一种用来表现HTML或XML等文件样式的计算机语言。</p><p>CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。</p></body></html>

运行结果如下：

三、CSS背景属性

CSS背景属性代码用于定义HTML标签的背景，例如定义背景颜色、背景图片等等。

（一）背景颜色

通过background-color属性设置背景的颜色，可以通过颜色的英文名称、RGB或十六进制来表示颜色。
例如，下列代码，设置文本为斜体加粗，字号大小为20px，行高为2em，字体类型为幼圆：
css文件代码：

p {font: italic bold 20px/2em '幼圆';background-color: aquamarine;
}#title_color {background-color: red;
}

html文件代码：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><link rel="stylesheet" href="../CSS/new_file.css" /></head><body><h2 id="title_color">CSS</h2><p>层叠样式表是一种用来表现HTML或XML等文件样式的计算机语言。</p><p>CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。</p></body></html>

运行结果如下：

（二）背景图片

通过background-image属性设置背景图片，它表示为background-image:url("")，url内部填写图片的相对路径，默认下图片是以平铺的方式重复显示，例如下图：
若除了设置了背景颜色，还设置了背景图片，则图片会覆盖背景颜色。
例如，下列代码，设置页面背景颜色为黑色以及背景图片，背景图片覆盖了背景颜色：
css文件代码：

body {background-color: black;background-image: url("../image/mountain.jpg")
}

html文件代码：

<html><head><meta charset="utf-8"><title></title><link rel="stylesheet" href="../CSS/new_file.css" /></head><body><h1>雪山</h1></body></html>

运行结果如下：

（三）图片平铺方式

通过background-repeat属性设置背景图片的平铺方式，后跟repeat-x表示水平x轴方向平铺；
repeat-y表示纵向y轴方向平铺；
若不想使图片背景设置平铺，只展示图片正常大小，即使用no-repeat。
例如，下列代码，水平方向x轴方向平铺图片：
css文件代码：

body {background-image: url("../image/酒柜.png");background-repeat: repeat-x;
}

运行结果如下：
设置background-repeat: repeat-y，使图片纵向y轴方向平铺，如下：
css文件代码：

body {background-image: url("../image/酒柜.png");background-repeat: repeat-y;
}

运行结果如下：
设置background-repeat: no-repeat，不使用平铺，如下：
css文件代码：

body {background-image: url("../image/酒柜.png");background-repeat: no-repeat;
}

运行结果如下：

（四）图片位置

通过background-position属性设置图片在背景的位置情况，例如，下列代码，设置图片位于背景的右上角，即background-position: right top;：
css文件代码：

body {background-image: url("../image/酒柜.png");background-repeat: no-repeat;background-position: right top;
}

运行结果如下：

（五）设置整体背景属性

可以将所有的背景设置放在一个background内，这样方便设置整体背景属性，表示为background : 颜色图片相对路径填充方式。
例如，下列代码，设置整体背景属性：
css文件代码：

body {background: orangered url("../image/酒柜.png") no-repeat;
}

运行结果如下：

四、CSS伪类

伪类，简单的来说，就是对特定的HTML元素加上状态和属性。

（一）CSS超链接

在CSS中，超链接有四种状态，如下：
a:link表示未被访问的超链接；
a:visited表示已访问的超链接；
a:hover表示当鼠标停留在超链接上；
a:active表示当超链接被点击时；
像这种由a标签开头，冒号隔开，后面接状态的这种选择器称为伪类选择器。
要注意这四个的顺序，a:hover 必须放在 a:link 和 a:visited 之后，才是有效的，而a:active 必须放在 a:hover 之后，才是有效的。
例如，下列代码，设置不同的超链接点击效果：
css文件代码：

a.title1:link {color: aqua;
}a.title2:visited {color: aqua;
}a.title3:hover {color: aqua;
}a.title4:active {color: aqua;
}

html文件代码：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><link rel="stylesheet" href="../CSS/new_file.css" /></head><body><h2>文章栏目</h2><p><a class="title1" href="#">计算机网络</a></p><p><a class="title2" href="#">数据库原理与应用</a></p><p><a class="title3" href="#">C++</a></p><p><a class="title4" href="#">JAVA</a></p></body></html>

运行结果如下：
当鼠标滑过设置的a:hover伪类选择器，即“C++”时，会有以下显示：
当鼠标点击设置的a:active伪类选择器，即“JAVA”时，会有以下显示：

（二）创建不同样式的伪类选择器

可以通过伪类选择器，进行一些不同样式的伪类选择器设置，比如可以设置当鼠标停留在超链接上时，其字号放大和颜色更改、改变背景颜色、改变字体类型、对文字进行修饰等等。
例如，下列代码，当鼠标停留在超链接上，文字放大且变为橘色：
css文件代码：

a {font-size: 15px;text-decoration: none;
}a:hover {font-size: 20px;color: orange;
}

html文件代码：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><link rel="stylesheet" href="../CSS/new_file.css" /></head><body><h2>文章栏目</h2><p><a href="#">计算机网络</a></p><p><a href="#">数据库原理与应用</a></p><p><a href="#">C++</a></p><p><a href="#">JAVA</a></p></body></html>

运行结果如下：
鼠标停留在链接上时，超链接放大字号且变为橘色：

结语

以上就是全部内容，篇幅较长，感谢您的阅读和支持，若有表述或代码中有不当之处，望指出！您的指出和建议能给作者带来很大的动力！！！

Web前端开发笔记——第三章 CSS语言第三节文本、字体、背景、超链接样式属性相关推荐

Web前端开发笔记——第三章 CSS语言第六节 CSS定位
目录一.定义二.文档流定位 (一)block类型元素 (二)inline类型元素 (三)inline-block类型元素三.浮动定位 (一)左浮动和右浮动 (二)清除浮动四.层定位 (一)st ...
Web前端开发笔记——第三章 CSS语言第四节 CSS列表、表格样式
目录一.CSS列表样式 (一)设计列表项前标志类型 (二)设计列表项前标志位置 (三)设计列表项图片 (四)设计整体列表属性二.CSS表格样式 (一)设计表格大小 (二)设计表格边框 (三)奇偶选 ...
Web前端开发笔记——第三章 CSS语言第五节盒子模型
目录一.CSS布局与定位二.盒子模型三.盒子模型的组成四.设置边框的属性五.设置外.内边距的属性六.overflow 属性结语一.CSS布局与定位在CSS中对一个网页进行布局与定位, ...
Web前端开发笔记——第三章 CSS语言第一节 CSS的基本概念和样式表
目录一.CSS和HTML 二.CSS的基本语法格式三.CSS样式设置 (一)行内样式 (二)内嵌样式 (三)引用外部CSS文件四.多重样式优先级结语一.CSS和HTML CSS,又称为层叠样 ...
Web前端开发笔记——第三章 CSS语言第七节圆角边框、阴影
目录前言一.圆角边框 (一)border-×-×-radius (二)border-radius 二.阴影 (一)基本阴影设置 (二)内部阴影设置结语前言本节介绍仅在CSS3中的新内容,例如 ...
Web前端开发笔记——第三章 CSS语言第八节 CSS3文本文字设置
目录前言一.文本阴影二.强制换行三.字体设置结语前言本节中的仅支持CSS3中的新语法,比如文字的阴影.长文本的换行等等. 一.文本阴影通过定义text-shadow来对文本进行阴影设置 ...
Web前端开发笔记——第三章 CSS语言第二节 CSS选择器
目录前言一.CSS选择器 (一)标签选择器 (二)id选择器 (三)类别选择器二.针对标签的选择器嵌套三.集体声明和全局声明 (一)集体声明 (二)全局声明结语前言 CSS代码由选择器和一 ...
Web前端开发笔记——第四章 JavaScript程序设计第三节数据类型
目录一.基本数据类型 (一)String类型 (二)Number类型 1.字面量 2.无穷大 3.非数值 (三)Boollean类型 (四)Undefined类型和Null类型二.引用数据类型 ( ...
【前端学习笔记】(三)（CSS基础、选择器、字体和文本样式）
目录一.基础认知 1.1 CSS介绍 1.2 CSS语法规则 1.3 CSS常见属性 1.4 CSS引入方式 1.5 CSS常见三种引入方式的区别二.基础选择器 1.标签选择器 2.类选择器 3. ...

Web前端开发笔记——第三章 CSS语言第三节文本、字体、背景、超链接样式属性

目录

一、CSS文本属性

二、CSS字体属性

（一）常用文本字体样式属性

（二）设置整体font属性

三、CSS背景属性

（一）背景颜色

（二）背景图片

（三）图片平铺方式

（四）图片位置

（五）设置整体背景属性

四、CSS伪类

（一）CSS超链接

（二）创建不同样式的伪类选择器

结语

Web前端开发笔记——第三章 CSS语言第三节文本、字体、背景、超链接样式属性相关推荐

最新文章

热门文章

Web前端开发笔记——第三章 CSS语言 第三节 文本、字体、背景、超链接样式属性

目录

一、CSS文本属性

二、CSS字体属性

（一）常用文本字体样式属性

（二）设置整体font属性

三、CSS背景属性

（一）背景颜色

（二）背景图片

（三）图片平铺方式

（四）图片位置

（五）设置整体背景属性

四、CSS伪类

（一）CSS超链接

（二）创建不同样式的伪类选择器

结语

Web前端开发笔记——第三章 CSS语言 第三节 文本、字体、背景、超链接样式属性相关推荐

最新文章

热门文章

Web前端开发笔记——第三章 CSS语言第三节文本、字体、背景、超链接样式属性

Web前端开发笔记——第三章 CSS语言第三节文本、字体、背景、超链接样式属性相关推荐