css文字样式

最新推荐文章于 2023-06-22 21:36:28 发布

谈谈的心情

最新推荐文章于 2023-06-22 21:36:28 发布

阅读量608

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/ljw124213/article/details/47126847

版权

css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1，设置字体：

css中字体通过font-family属性来控制。font-family属性属性可以同时声明多种字体，字体之间用逗号隔开。如：

p { font-family:Arial,"Times New Roman"; }

注意：如字体由多个单词组成，单词之间要用空格隔开，而且还要用双引号将其括起来，使浏览器知道这是一种字体的名称。如上面的Times New Roman。

2，文字大小：

css中文字大小通过font-size属性来控制。如：

p { font-size:12px; }

此外，还有两个特殊的长度单位：em和xm。1em表示的长度是其父元素中字母m的标准宽度，1ex则表示字母x的标准高度。

通过对em的设置可以实现下沉显示的效果。如：

<html>
<head>
<title>FontTest</title>
<style type="text/css">

.p2{font-size:2em;float:left;}

</style>
<body>
<title>Home Town</title>
<p><span class="p2"> H</span>enan has a humid warm-temperate
climate.Dry and windy in winter and spring, the province
is hot and rainy in summer and bakes in strong sunlight
during the autumn months. Rainfall averages about 600-1000
millimeters increasing from north to south, as does the
annual temperature which increases from about 12.8C in the
north to 15.5C in the south.

</p>
</body>
</html>

在浏览器上显示的结果为“H”下沉。

3，行高：

设置行高的属性是：line-height.

经验：上面介绍的三种属性可以定义在一条css规则中。如：

font:12px/18px Arial;

字体和行高之间要用斜线隔开。

4，文字的颜色和背景：

在html页面中，颜色统一采用RGB格式，也就是“红绿蓝”三原色。范围：（0%~100%）、（0~255）、（#000000~#ffffff）。

以下几种方法都可以将文字设置为红色：

p{ color:red;}

p{color:#ffoooo;}

p{color:rgb(255,0,0);}

p{color:rgb(100%,0%,0%);}

设置背景颜色的属性为：background-color。如背景设为红色：

p{ background-color:#ff0000;}

5,文字加粗、倾斜、大小写：

控制文字粗细的属性为font-weight;

font-weight:normal; /*正常*/

font-weight：bold; /*加粗*/

控制文字倾斜的属性为：font-style;

font-style:normal; /*正常字体*/

font-style:oblique; /*倾斜体*/

font-style:italic; /*意大利体*/

控制文字大小写的属性为text-transform;

p.one{text-transform:capitalize;} /*单词首字大写*/

p.two{text-transform:uppercase;} /*全部大写*/

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

6，文字的装饰效果：

css通过设置文字的text-decoration属性来实现特殊效果：

p.one{text-decoration:underline;} /*下划线*/

p.two{text-decoration:line-through;} /*删除线*/

p.three{text-decoration:overlin;} /*顶划线*/

p.four{text-decoration:blink;} /*闪烁*/

闪烁在IE中无效，在Firefox中有效。

说明：几种属性可以同时实现，中间有空格隔开。

以下为练习笔记：

<html>
<head>
<title>FontTest</title>
<style type="text/css">
.p1{font-size:18px;}
.p2{font-size:2em;float:left;}
.p3{line-height:24px}
.p4{color:#ff0000;}
.p5{text-decoration:underline;}
.p6{text-decoration:overline;}
.p7{text-decoration:line-through;}
.p8{text-decoration:blink;}
.p9{font-style:italic;}
.p10{background:#fff0ac;}
</style>
<body>
<title>Home Town</title>
<p class="p7 p10"><span class="p2"> H</span>enan has a humid warm-temperate climate.
Dry and windy in winter and spring, the province
is hot and rainy in summer and bakes in strong sunlight
during the autumn months. Rainfall averages about 600-1000
millimeters increasing from north to south, as does the
annual temperature which increases from about 12.8C in the
north to 15.5C in the south.
</p>
<p class="p1 p3 p4 p5 p9">enan province is considered the cradle of Chinese
civilization due to its location on the Yellow River.
This rich historic heritage has endowed Henan with
numerous historic treasures, from primitive dwellings
to earliest wheel thrown pottery.
</p>
</body>
</html>