CSS基础之 文字和文本元素

字体

CSS 字体(Font)属性用于定义字体采用字体系列(例如,宋体,黑体等),大小,粗细和文字的样式(如斜体等)。

字体系列

字体的系列使用的是font-family属性定义

选择器{
    font-family: "字体样式"    
}
/* 例子1:比如单一 字体 如果是汉字以及英文中间有空格就需要有双引号*/
p{
    font-family:"微软雅黑"
}
/* 例子2:也可以定义几个字体系列,其按照顺序依次显示如果某一个系统支持显示后面的就不在显示  */

p{
    font-family:"Microsoft YaHei",tahoma,"Hiragino Sans GB"
}

注意:

  • 如果后面又多个字体,那么字体之间必须使用英文状态下的逗号隔开。如何有汉字或者英文中间有空格隔开的多个单词那就需要加引号
  • 尽量使用系统默认自带字体,保证在任何用户的浏览器中都能正确显示。
  • 不过一般对会通过body标签进行设置字体,保证统一,如果有个别需要则再依次定义:body{ font-family: “Microsoft YaHei”,tahoma,arial,“Hiragino Sans GB”}

例子:

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>我的文档</title>
<style type="text/css">
  body{
      font-family: 宋体;
  }
 span{
     font-family: "Microsoft YaHei";
 }
</style>
</head>
<body>
<p>
    黑龙石涛那是比自己等人高出一代人的传奇人物,<span>黑龙吐光,龙角暗殇,石破苍炎,涛涌血魂。</span>竟然是这个老家伙,几人听说过此人,不过此人已经十年没有出现江湖,最近一次出现的地方是石岗崖,然后再无消息。
</p>
</body>
</html>

在这里插入图片描述

字体大小

CSS使用font-size属性定义字体大小。

选择器{
    font-size: 数px ; /* px 是字体的单元 */
}

  • px(像素)大小是网页常用的单位,比如谷歌浏览器默认文字大小是16px,而其它的浏览器是可能就不是16px,所以尽量明确值大小,所以不要使用默认大小。

例子:

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>我的文档</title>
<style type="text/css">
  body{
      font-size: 16px;
  }
 span{
     font-size: 25px;
 }
</style>
</head>
<body>
<p>
    黑龙石涛那是比自己等人高出一代人的传奇人物,<span>黑龙吐光,龙角暗殇,石破苍炎,涛涌血魂。</span>竟然是这个老家伙,几人听说过此人,不过此人已经十年没有出现江湖,最近一次出现的地方是石岗崖,然后再无消息。
</p>
</body>
</html>

在这里插入图片描述

字体粗细

CSS使用font-weight属性设置问题字体的粗细

选择器{
    font-weight: normal | bold | bolder | lighter | number
}

现在解释参数:

  • normal:正常字体。相当于number为400。声明此值将取消之前任何设置。
  • bold:粗体。相当于number为700,也相当于b或strong标签的使用。
  • bolder: IE5+ 支持的特粗体
  • lighger: IE5+ 支持的细体
  • number: IE5+ 支持 数字有100,200,300,400,500,600,700,800,900。不过最常用的是400和700。一般的时候也会用数字,毕竟数字写起来方便。

例子:

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>我的文档</title>
<style type="text/css">
  body{
      font-weight: normal;
  }
 span{
     font-weight: 700;
 }
</style>
</head>
<body>
<p>
    黑龙石涛那是比自己等人高出一代人的传奇人物,<span>黑龙吐光,龙角暗殇,石破苍炎,涛涌血魂。</span>竟然是这个老家伙,<strong>几人听说过此人</strong>,不过此人已经十年没有出现江湖,最近一次出现的地方是石岗崖,然后再无消息。
</p>
</body>
</html>

在这里插入图片描述

字体样式

CSS使用font-style属性设置文本的风格。

选择器{
    /*italic和oblique 都是斜体  */
    font-style:normal  | italic |oblique 
}
  • normal: 标准字体演示,一般浏览器默认font-style: normal.
  • 斜体
    • italic:这个是如果字体如果支持斜体就启动斜体模式,如果不支持就无效果。
    • oblique:设置字体斜体,无论使用的字体是否支持斜体都强制斜体。
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>我的文档</title>
    <style type="text/css">
        body{
            font-style: normal;
        }
        span{
            font-weight: 700;
            font-style: oblique;
        }
        strong{
            font-style: italic;
        }
    </style>
</head>
<body>
<p>
    黑龙石涛那是比自己等人高出一代人的传奇人物,<span>黑龙吐光,龙角暗殇,石破苍炎,涛涌血魂。</span>竟然是这个老家伙,<strong>几人听说过此人</strong>,不过此人已经十年没有出现江湖,最近一次出现的地方是石岗崖,然后再无消息。
</p>
</body>
</html>

在这里插入图片描述

复合写法

如果设置字体的话:

选择器{
    font-family: 文字字体;
    font-size: 字体大小;
    font-style: 斜体还是正常显示;
    font-weight: 粗体还是细体;    
}

这样写的话有点琐碎,设置有点麻烦,可以使用font写复合方式

选择器{
    /* 四个属性的顺序不能改变 */
    font: font-style属性 font-weight属性  font-size属性  font-family属性
}

也就是再font属性后面依次写出四个属性即可。

  • 使用font属性时,必须按照上面语法个数顺序写,而且不能修改顺序,并且各个属性间以空格隔开。

  • 不需要设置的属性可以省略(省略后是默认值),但是必须保留font-size和font-family属性,否则属性将不起作用

    意思就是前面两个可以都写都不写,以及写其中一个,但是后面两个必须有。

举例:

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>我的文档</title>
    <style type="text/css">
        body{
            font-family: "宋体";
            font-style: normal;
            font-weight:400;
            font-size: 16px;
        }
 #t1{
    font-style: italic;
     font-weight: 700;
     font-size: 22px;
     font-family: "宋体";
 }
        #t2{
            font: italic 700 22px "宋体";
        }

    </style>
</head>
<body>
<p>
    黑龙石涛那是比自己等人高出一代人的传奇人物,<span id="t1">黑龙吐光,龙角暗殇,石破苍炎,涛涌血魂。</span>竟然是这个老家伙,<span id="t2">几人听说过此人</span>,不过此人已经十年没有出现江湖,最近一次出现的地方是石岗崖,然后再无消息。
</p>
</body>
</html>

在这里插入图片描述

文本

CSS 文本(text)属性可定义文本的外观(比如文本颜色等),文本对齐方式,文本缩进,以及行间距等。

文本颜色

通过color属性用于定义文本的颜色。

选择器{
    color:颜色
}

其实颜色有三种表示方式:

颜色表示属性值
预定义的颜色值red,greed等颜色
十六进制#FF0000,#FF6600等
RGB代码rgb(255,0,0)等
  • 预定义的颜色值: 这个是是英语,所以不用解释

  • 十六进制:

    理解这个首先需要值得光学的三原色,而这个十六进制也是根据这个三原色进行呈现的,需要简单看一张表:

    redgreebblue
    00----ff00----ff00----ff

    所有如果用十六进制显示一个红色:ff0000.

  • RGB代码:

    其实这个和十六进制就是一个数字的显示不同而已:

    redgreebblue
    0—2550–2550—255
我的文档

黑龙石涛那是比自己等人高出一代人的传奇人物,黑龙吐光,龙角暗殇石破苍炎,涛涌血魂。竟然是这个老家伙,几人听说过此人,不过此人已经十年没有出现江湖,最近一次出现的地方是石岗崖,然后再无消息。

~~~

在这里插入图片描述

对齐文本

通过text-align属性设置元素内文本内容的水平对齐方式。

选择器{
    text-align: left | right | center
}
  • left : 左对齐这个是默认值
  • right:右对齐。
  • center: 居中对齐

例子:

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>我的文档</title>
    <style type="text/css">
        h2{
            text-align: center;
        }
        #t1{
            text-align: left;
        }
        #t2{
            text-align: right;
        }
    </style>
</head>
<body>
<p>
<h2>《丑杀手》</h2>
<p id="t1">  黑龙石涛那是比自己等人高出一代人的传奇人物,黑龙吐光,龙角暗殇,石破苍炎,涛涌血魂。</p>
<p id="t2"> 竟然是这个老家伙,几人听说过此人,不过此人已经十年没有出现江湖,最近一次出现的地方是石岗崖,然后再无消息。</p>

</body>
</html>

在这里插入图片描述

装饰文本

这个说实话看名字有点懵,所以先看说明,然后演示就理解。

通过css-decoration属性添加到文本的修饰,可以为文本添加下划线,删除线,上划线等。

选择器{
    text-decoration: none | underline | overline | line-through
}
属性值描述
none默认,没有装饰线,最常用。
underline下划线。(其中a标签自带下划线)常用的
overline上划线,几乎不用
line-through删除线。不常用

演示:

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>我的文档</title>
    <style type="text/css">
        h2{
           text-decoration: none;
        }
        #t1{
            text-decoration:underline;
        }
        #t2{
            text-decoration:overline;
        }
        #t3{
            text-decoration:line-through;
        }
    </style>
</head>
<body>
<p>
<h2>《丑杀手》</h2>
<p id="t1">  黑龙石涛那是比自己等人高出一代人的传奇人物,黑龙吐光,龙角暗殇,石破苍炎,涛涌血魂。</p>
<p id="t2"> 竟然是这个老家伙,几人听说过此人,不过此人已经十年没有出现江湖。</p>
<p id="t3">  最近一次出现的地方是石岗崖,然后再无消息。</p>

</body>
</html>

在这里插入图片描述

文本缩进

其实很多文章都会第一行有缩进,所以文本自己有这个属性。

通过text-indent来设置文本的第一行的缩进,通常是将段落的首行缩进。

选择器{
    text-indent: 数字px | 数字 em
}

px是像素,这个很容易理解,然后这个em可能需要解释一下。

em是一个相对单位,就是当前元素(font-size)1个文字的大小,如果当前元素没有设置大小,就会按照父元素的1个文字大小。

演示:

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>我的文档</title>
    <style type="text/css">
        #t1{
            text-indent:100px;
        }
        #t2{
            text-indent:2em;
        }
    </style>
</head>
<body>
<p>

<p id="t1">  黑龙石涛那是比自己等人高出一代人的传奇人物,黑龙吐光,龙角暗殇,石破苍炎,涛涌血魂。</p>
<p id="t2"> 竟然是这个老家伙,几人听说过此人,不过此人已经十年没有出现江湖。</p>
<p>最近一次出现的地方是石岗崖,然后再无消息</p>
</body>
</html>

在这里插入图片描述

行间距

通过text-height设置行间的距离(这个其实是行高)。可以控制行与行之间的距离。

看图:

在这里插入图片描述

其实行间距包括字高以及上线两个距离。

选择器{
    line-height: 数字px;| 数字 /* 这个数字一般只是大于字的高度,不然文字会重叠,毕竟行间距还有上下间距 */
}

px前面说过, 如果直接是数字的话,那就是表示:此数字会与当前的字体尺寸相乘来设置行间距。

当然还使用%号,表示这个文字占这个行间距的高度比例。

演示:

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>我的文档</title>
    <style type="text/css">
        #t1{
           line-height: 1;
        }
        #t2{
            line-height:26px;
        }
        #t3{
            line-height:1.5;
        }
    </style>
</head>
<body>
<p>

<p id="t1">离开片刻卷轴慢慢的化成粉末,最后消失不见。反杀说白了就是护卫而已,也就会暗中保护,不过这种顾主的理由让仇囚诧异不已,竟然找杀手保护自己,不会是个局让自己入,最后死的是自己吧?仇囚身影在夜幕上掠过,心中的想法也悄然消失,因为是景山开口的,那就绝对错不了。</p>

<p id="t2">每个地方都有这样的江湖势力,像是帝王一般君临一方沃土,而在这座城的帝王就是胡家。半月古城三千流水,胡家独占近七,可见其威望或者说是霸气。</p>

<p id="t3">半月古城为中心,方圆千里都是胡家统治的势力范围。城门通道直指胡家堡,一般城门大道都是避开直通关键之地,但是胡家却不依然。因为在世上刚动胡家的人还真是难找。街道宽广面如玉石,靠近其八丈竟然没有任何建筑。高达三丈,朱漆大门,门檐外吐,足有半间房屋,左右各站四个壮汉。虎目外射,头部一转看着出现一个头顶带黑纱斗笠,且腰间配有一把长剑的灰衣人。 </p>

</body>
</html>

在这里插入图片描述

补充

前面聊了一个font的复合写法,其实这个写法里面也包含了行高,只不过其格式如下:

选择器{
    /* 四个属性的顺序不能改变 */
    font: font-style属性 font-weight属性/行高属性  font-size属性  font-family属性
}

简单的演示一下:

<!DOCTYPE html>
<html lang="zh">
<head>
 <meta charset="UTF-8">
 <title>我的文档</title>
 <style type="text/css">
  #id1{
     background-color: #d10000;
     line-height: 100px;
     font-size: 16px;
     font-family: "Microsoft YaHei;
  }
 #id2{
     background-color: #d10000;
     font: 16px/100px  "Microsoft YaHei";
  }
 </style>
</head>
<body>

<div id="id1">
line-height的写法
</div>
&nbsp;
&nbsp;
&nbsp;
&nbsp;
<div id="id2">
font 带/的写法
</div>

</body>
</html>

在这里插入图片描述

需要注意一点如果使用了font还想用line-height定义行高,就需要将line-height放在font后面,不然line-height的值会被覆盖掉。

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值