CSS学习(二):字体属性和文本属性

1. 字体属性

CSS font属性用于定义字体系列大小粗细文本样式

1.1 字体系列

CSS使用 font-family属性定义文本字体系列,一般来说建议使用默认字体。

<style>
    p {
        font-family: "微软雅黑";
    }
    body {
        font-family: "微软雅黑", Arial, Helvetica, sans-serif;
    }
</style>

可以同时定义多个字体,用逗号分隔即可。当定义了多个字体时,浏览器会从第一个字体开始查找,查找至浏览器可以显示的字体为止,显示该字体。一般情况下,字体系列的定义会放在body 标签中,这样页面中的所有文字的字体就得到了统一。

1.2 字体大小

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

<style>
    p {
        font-size: 20px;
    }
</style>

px 是像素单位,谷歌浏览器默认是16px,可以给body 指定整个页面文字大小。另外,标题标签比较特殊,需要单独指定字体大小。

需要注意的是,定义字体大小时必须要带单位。

1.3 字体粗细

CSS使用 font-weight属性定义字体粗细。

<style>
    p {
        font-weight: 700;
    }
</style>

实际开发中常用数字指定文字粗细,也可用英文字符指定。font-weight 的默认值是normal,对应数字大小为400,其他的还有bold(700),bolderlighter

注意用数字定义文字粗细时,没有单位。

1.4 文字样式

CSS使用 font-style属性定义字体样式。

<style>
    p {
        font-style: italic;
    }
</style>

默认值为normalitalic表示斜体。

1.5 字体复合属性写法

可以使用font属性一行代码定义多个字体属性,节约代码。

body {
  font: font-style font-weight font-size/line-hight font-family;
}

需要严格遵守顺序,font-familyfont-size 必须要有。

例如:

<style>
    div{
        font:italic 700 16px 'Microsoft yahei';
    }
</style>

1.6 总结

属性 表示 注意点
font-size 字号 单位是px像素,一定要跟上单位。
font-family 字体 实际工作中按照团队约定来定义字体。
font-weight 字体粗细 加粗是700或者bold,不加粗是normal或者400,记住数字不要跟单位。
font-style 字体样式 倾斜是italic,默认是不倾斜normal
font 字体连写 有顺序,字号和字体必须同时出现。

2. 文本属性

CSS Text属性用于定义文本的外观(颜色)对齐文本装饰文本文本缩进行间距等。

2.1 文本颜色

color属性定义文本颜色。

<style>
    div{
        color: red;
    }
</style>

可以使用预定义颜色值,十六进制和RGB代码设置文本颜色。

2.2 对齐文本

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

<style>
    div{
        text-align: center;
    }
</style>
属性值 解释
left 左对齐(默认值)
right 右对齐
center 居中对齐

2.3 装饰文本

text-decoration属性规定添加到文本的修饰,可以给文本添加下划线,删除线,上划线等。

<style>
    div{
        text-decoration: underline;
    }
</style>
属性值 描述
none 默认。没有装饰线(最常用,可以给a标签去掉下划线)
underline 下划线。a标签自带下划线(常用)
overline 上划线。(几乎不用)
line-through 删除线。(不常用)

2.4 文本缩进

text-indent属性来指定文本的第一行缩进,通常是将段落首行缩进。

<style>
    p {
        text-indent: 5px;
    }
</style>

文本缩进的单位可以是px,也可以是emem是一个相对单位,1em就是一个字符所占的大小。当text-indent=20em,则恰好缩进两个字符的大小。

2.5 行间距

line-height属性用来设置行间的距离,可以控制文字行与行之间的距离。

<style>
    p {
        line-height: 26px;
    }
</style>

行间距=上间距+文本高度+下间距。当我们指定了文本大小时,文本高度就不会发生变化,这时我们再增大行间距,上下间距就会一起变大。

2.6 总结

属性 表示 注意点
color 文本颜色 通常用十六进制
text-align 文本对齐 可以设定文字水平的对齐方式
text-indent 文本缩进 通常我们用于段落首行缩进2个字的距离
text-decoration 文本修饰 添加下划线underline 取消下划线none
line-height 行高 控制行与行之间的距离
暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇