蓝鸥零基础学习HTML5第六讲 CSS的常见样式

最新推荐文章于 2025-08-18 22:30:00 发布

蓝鸥_HTML5学习

最新推荐文章于 2025-08-18 22:30:00 发布

阅读量362

点赞数

CC 4.0 BY-SA版权

文章标签： html html5 蓝鸥龙江 css

本文链接：https://blog.youkuaiyun.com/lanoulongjiang/article/details/52618935

本文介绍了CSS中常见的文本样式设置方法，包括字体大小、颜色、行高、对齐方式、缩进、字体粗细等，并通过实例展示了每种样式的具体应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

蓝鸥零基础学习HTML5第六讲 CSS的常见样式

CSS的常见样式

1.css文本样式的设置

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

div {

font-size:160px;

font-family: "sans-Serif";

color:rgb(41,232,32);

}

</style>

</head>

<body>

<div>蓝鸥科技 lanou</div>

</body>

</html>

2.line-height

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

div {

border:1px solid red;

height:100px;

line-height: 100px;

}

</style>

</head>

<body>

<div>我今天晚上吃炸酱面我今天晚上吃炸酱面我今天晚上吃炸酱面我今天晚上吃炸酱面我今天晚上吃炸酱面我今天晚上吃炸酱面我今天晚上吃炸酱面我今天晚上吃炸酱面我今天晚上吃炸酱面我今天晚上吃炸酱面我今天晚上吃炸酱面我今天晚上吃炸酱面我今天晚上吃炸酱面我今天晚上吃炸酱面我今天晚上吃炸酱面我今天晚上吃炸酱面我今天晚上吃炸酱面我今天晚上吃炸酱面我今天晚上吃炸酱面我今天晚上吃炸酱面我今天晚上吃炸酱面我今天晚上吃炸酱面我今天晚上吃炸酱面我今天晚上吃炸酱面我今天晚上吃炸酱面</div>

</body>

</html>

3.text-align

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

div {

width:200px;

height:200px;

line-height: 200px;

border:1px solid red;

text-align: center;

}

</style>

</head>

<body>

</body>

</html>

4.text-indent

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

div {

border: 1px solid red;

font-size:20px;

line-height: 25px;

text-indent: 40px;

}

</style>

</head>

<body>

<div>近日，一则深圳汽车起火爆炸的新闻引起网友的关注。经初步调查，起火汽车的车主一家三口刚从万科红开车回家，停在路边不到三分钟就起火，车头烧毁严重，没有人员伤亡，起火原因正在进一步调查当中。事情是怎么一回事呢？7月17日凌晨，深圳龙岗区布吉湖西路的一辆汽车，在刚停好不到三分钟就突然起火，幸好车主一家三口已离开，否则后果不堪设想。</div>

</body>

</html>

5.font-weight

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

div {

font-size: 50px;

font-weight: bold;

}

</style>

</head>

<body>

</body>

</html>

6.font-style

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

div {

font-size:50px;

/*font-style:oblique;*/

}

em {

font-size:50px;

font-style: normal;

}

</style>

</head>

<body>

</body>

</html>

7.text-decoration

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

div {

font-size:50px;

text-decoration: none;

}

a {

text-decoration: none;

}

</style>

</head>

<body>

</body>

</html>

8.letter-spacing

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

div {

font-size:50px;

letter-spacing: 10px;

word-spacing: 100px;

}

</style>

</head>

<body>

<div>蓝鸥科技蓝鸥科技 i love you</div>

</body>

</html>

9.复合样式

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

div {

width:500px;

height:500px;

background: red url("img/1.jpg") 100px 100px no-repeat;

border: 10px solid yellow;

padding:10px 20px 30px 40px ;

margin:20px 40px 80px 160px ;

font: italic bold 50px/500px "stkaiti";

}

</style>

</head>

<body>

</body>

</html>

10.样式继承

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

#box1 {

color:red;

font-size:50px;

text-decoration: underline;

border:1px solid red;

padding:100px;

}

a {

color:red;

}

</style>

</head>

<body>

蓝鸥科技

就是牛逼

</div>

<a href="###">我是A标签</a>

</div>

</body>

</html>

11、Font-family资料

font-family可以取的值

宋体 SimSun

黑体 SimHei

微软雅黑 Microsoft YaHei

微软正黑体 Microsoft JhengHei

新宋体 NSimSun

新细明体 PMingLiU

细明体 MingLiU

标楷体 DFKai-SB

仿宋 FangSong

楷体 KaiTi

仿宋_GB2312 FangSong_GB2312

楷体_GB2312 KaiTi_GB2312

宋体：SimSuncss中中文字体（font-family）的英文名称

Mac OS的一些：

华文细黑：STHeiti Light [STXihei]

华文黑体：STHeiti

华文楷体：STKaiti

华文宋体：STSong

华文仿宋：STFangsong

儷黑 Pro：LiHei Pro Medium

儷宋 Pro：LiSong Pro Light

標楷體：BiauKai

蘋果儷中黑：Apple LiGothic Medium

蘋果儷細宋：Apple LiSung Light

Windows的一些：

新細明體：PMingLiU

細明體：MingLiU

標楷體：DFKai-SB

黑体：SimHei

新宋体：NSimSun

仿宋：FangSong

楷体：KaiTi

仿宋_GB2312：FangSong_GB2312

楷体_GB2312：KaiTi_GB2312

微軟正黑體：Microsoft JhengHei

微软雅黑体：Microsoft YaHei

装Office会生出来的一些：

隶书：LiSu

幼圆：YouYuan

华文细黑：STXihei

华文楷体：STKaiti

华文宋体：STSong

华文中宋：STZhongsong

华文仿宋：STFangsong

方正舒体：FZShuTi

方正姚体：FZYaoti

华文彩云：STCaiyun

华文琥珀：STHupo

华文隶书：STLiti

华文行楷：STXingkai

华文新魏：STXinwei