顶楼如何永久防漏-家庭风格装修效果图

Web前端开发笔记——第三章CSS语言第三节文本、字体、背景、超链接样式属性
2023年4月30日发(作者：普通地板砖多少钱一块)

Web前端开发笔记——第三章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_" />

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_" />

head>

<body>

<p>层叠样式表是⼀种⽤来表现HTML或XML等⽂件样式的计算机语⾔。p>

<p>CSS不仅可以静态地修饰⽹页，还可以配合各种脚本语⾔动态地对⽹页各元素进⾏格式化。p>

body>

html>

运⾏结果如下：

三、CSS背景属性

CSS背景属性代码⽤于定义HTML标签的背景，例如定义背景颜⾊、背景图⽚等等。

（⼀）背景颜⾊

通过属性设置背景的颜⾊，可以通过颜⾊的英⽂名称、RGB或⼗六进制来表⽰颜⾊。

background-color

例如，下列代码，设置⽂本为斜体加粗，字号⼤⼩为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_" />

head>

<body>

<h2 id="title_color">CSSh2>

<p>层叠样式表是⼀种⽤来表现HTML或XML等⽂件样式的计算机语⾔。p>

<p>CSS不仅可以静态地修饰⽹页，还可以配合各种脚本语⾔动态地对⽹页各元素进⾏格式化。p>

body>

html>

运⾏结果如下：

（⼆）背景图⽚

通过属性设置背景图⽚，它表⽰为，url内部填写图⽚的相对路径，默认下图⽚是以平铺的⽅式重

background-imagebackground-image:url("")

复显⽰，例如下图：

若除了设置了背景颜⾊，还设置了背景图⽚，则图⽚会覆盖背景颜⾊。

例如，下列代码，设置页⾯背景颜⾊为⿊⾊以及背景图⽚，背景图⽚覆盖了背景颜⾊：

css⽂件代码：

body {

background-color: black;

background-image: url("../image/")

}

html⽂件代码：

<html>

<head>

<meta charset="utf-8">

<title>title>

<link rel="stylesheet" href="../CSS/new_" />

head>

<body>

<h1>雪⼭h1>

body>

html>

运⾏结果如下：

（三）图⽚平铺⽅式

通过属性设置背景图⽚的平铺⽅式，后跟表⽰⽔平x轴⽅向平铺；

background-repeatrepeat-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: right

background-position

top;：

css⽂件代码：

body {

background-image: url("../image/酒柜.png");

background-repeat: no-repeat;

background-position: right top;

}

运⾏结果如下：

（五）设置整体背景属性

可以将所有的背景设置内，这样⽅便设置整体背景属性，表⽰为。

放在⼀个backgroundbackground : 颜⾊ 图⽚相对路径 填充⽅式

例如，下列代码，设置整体背景属性：

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⽂件代码：

1:link {

color: aqua;

}

2:visited {

color: aqua;

}

3:hover {

color: aqua;

}

4:active {

color: aqua;

}

html⽂件代码：

DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>title>

<link rel="stylesheet" href="../CSS/new_" />

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="#">JAVAa>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_" />

head>

<body>

<h2>⽂章栏⽬h2>

<p><a href="#">计算机⽹络a>p>

<p><a href="#">数据库原理与应⽤a>p>

<p><a href="#">C++a>p>

<p><a href="#">JAVAa>p>

body>

html>

运⾏结果如下：

⿏标停留在链接上时，超链接放⼤字号且

变为橘⾊：

结语

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

⼒

家用跑步机什么牌子好-家装窗帘一般多少钱一米

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

更多推荐

各种酒柜款式图片大全