8 文本属性

font-style(字体样式风格)

/*
属性值:
normal:设置字体样式为正体。默认值。 
italic:设置字体样式为斜体。这是选择字体库中的斜体字。
oblique:设置字体样式为斜体。人为的使文字倾斜,而不是去使用字体库的斜体字。
*/

font-weight(字体粗细)

/*
属性值:
normal:设置字体为正常字体。相当于数字值400
bold:设置字体为粗体。相当于数字值700。
bolder:设置字体为比父级元素字体更粗的字体。
lighter:设置字体为比父级元素字体更细的字体。
number:用数字表示字体粗细。从小到大,越来约粗,取值范围:100、200、300、400、500、600、700、800、900。

注意:font-weight的常用值有两个normal和bold,其他的值在浏览器中的支持并不好。
*/

font-size(字体大小)

/*
font-size的值有很多,有xx-small、x-small、small、medium、large、x-large、xx-large、smaller和larger,也可以设置值为具体的数值加上对应的计算单位来表示字体的大小。字体单位有像素( px )、字符( em,默认1em等于16px,2em等于32px,根据不同浏览器的默认字体大小而决定 )、百分比( % ),磅[点]( pt )。
字体不指定大小时,主流浏览器默认是15像素到16像素。旧版本的谷歌浏览器,字体最小只能设置成12像素,新版已经修复。*/

font-family(字体族)

/*
font-family可以指定元素使用的字体系列或字体族。当我们使用font-family指定字体族的时候,可以指定多种字体,作为候补。指定多个字体的时候,需要使用逗号隔开。
如果css中没有声明当前内容使用的字体族的时候,默认:
	中文:  宋体 [ win7以后默认是 微软雅黑 ]
	英文:  Arial
*/

color(字体颜色)

// 可以使用color来表示字体的颜色,颜色值最常用的有三种形式,英文单词,十六进制,RGB十进制。更高级的有 RGBA、HSL、HSLA,不过低版本的浏览器并不支持。
<style>
        .c1{
            color: red;
        }
        .c1{
            color: #369;
        }
        .c1{
            color: RGB(0,0,255);
        }
</style>
另外要注意,使用十六进制表示颜色值的时候,如果字符的格式类似于“AAAAAA”的这种,六个字符一样的;又或者是“AABBCC”,这种,一二,三四,五六 位置上的数字一样的,我们可以使用简写来表达。

text-align(文本对齐方式)

/*
text-align属性可以设置文本内容的水平对齐方式。属性值常用的有
左对齐left、居中对齐center、右对齐right。justify 实现两端对齐文本效果。
*/

line-height(字体行高)

// 字体行高即字体最底端与字体内部顶端之间的距离。值可以是normal、px、number、%。

image

行高 = 字体大小 + 上半行距 + 下半行距

vertical-align 属性设置元素的垂直对齐方式。

<img src="" alt=""><span>woaixianrenzhang</span>

text-decoration

// 使用text-decoration可以设置文本内容的装饰线条,正常的文本是没有线条的,常用的值有none,underline,overline,line-through四种。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css文本属性操作</title>

    <style>
        .c1 {
            /*字体大小*/
            font-size: 32px;
            /*font-size: 3em;*/

            /*字体*/
            font-style: oblique;
            /*font-family:"新宋体";*/

            /*加粗*/
            font-weight: 600;

            /*字体颜色*/
            color: red;
            /*color: #1cd5b0;*/
            /*color: #1124;*/
            /*color: RGB(123,23,45);*/
            /*color: rgba(123,23,54,0.5);*/
        }
        .c2 {
            /*文本背景颜色*/
            background-color: #1cd5b0;

            /*文本对齐方式 居中*/
            text-align: left;
        }
        p {
            /*文本两端对齐*/
            text-align: justify;
        }
        .c3 {
            width: 400px;
            height: 100px;
            background-color: #616161;
        }
        .c4 {
            width: 200px;
            height: 60px;
            background-color: lightskyblue;

            text-align: center;
            line-height: 30px;
        }
        img {
            /*vertical-align: bottom;*/
            vertical-align: -1px;
        }
        a{
            /*有无下划线*/
            text-decoration: none;
            /*text-decoration: underline;*/
        }
        span{
            text-decoration: underline;
        }

    </style>
</head>
<body>

<div class="c1">姓名:干将莫邪</div>
<div class="c2">hello world!</div>
<p>
    独坐幽篁里,弹琴复长啸。<br>
    深林人不知,明月来相照。
</p>

<div class="c3">
    道可道,非常道;名可名,非常名。
    无名,天地之始,有名,万物之母。
    故常无欲,以观其妙,常有欲,以观其徼。
    此两者,同出而异名,同谓之玄,玄之又玄,众妙之门。
</div>

<div class="c4">
    众鸟高飞尽,孤云独去闲。<br>
    相看两不厌,只有敬亭山。
</div>

<a href="">上官婉儿</a>
<span>上官婉儿</span>
<br>
<img src="https://img2.baidu.com/it/u=391363397,3985968789&fm=253&fmt=auto&app=138&f=PNG?w=500&h=500"
     alt="小猴子"><span>woaixianrenzhang</span>

</body>
</html>

代码效果图:
image
image

内容来源于网络如有侵权请私信删除

文章来源: 博客园

原文链接: https://www.cnblogs.com/zczhaod/p/17640599.html

你还没有登录,请先登录注册
  • 还没有人评论,欢迎说说您的想法!