css基础-3-文本样式

文章目录

字体

字体作为网页最常用元素,可以使用font设置字体大小、粗细、类型等等,总结常用样式设置如下:

属性 设置类型 注意
font-size 字体大小 单位常用px
font-family 字体族 字体风格视开发需求而定
font-weight 字体粗细 normal/400正常,bold/700加粗,数字没有单位
font-style 字体样式 normal正常,italic倾斜
font 字体符合属性 有顺序;font-sizefont-family必须写,其他可缺省
  • 字体族
    • 可以用中文和英文名称,多个单词名称的需要加引号包裹:font-family: 宋体,'Microsoft Yahei';
    • 多个名称之间以,隔开,浏览器会从前向后寻找是否有安装过的字体,若都没有则会使用默认字体
    • 开发时常常为body设置常用字体,body { font-family: 'Microsoft Yahei', tahoma, Arial, 'Hiragino Sans GB';}
  • 复合属性书写简洁,节约代码
    • 顺序为font: font-style font-weight font-size/line-height font-family
    • 各个属性以空格隔开,其中line-height表示行高,没有可以不写

文本

文本设置包括颜色、行间距、缩进等等,常用属性如下:

属性 设置内容 注意
color 颜色 三种设置方式:1.预定义颜色,如color: red;2.rgb,如color: rgb(255,0,0);3.十六进制,如color: #fff,开发时常用十六进制,通过颜色选择器吸取颜色值
text-align 文本对齐方式 center居中对齐;left靠左对齐;right靠右对齐
text-indent 首行缩进 单位常用em表示相对当前字体大小,常用text-indent: 2em表示首行缩进2字符
text-decoration 文本修饰 underline下划线,none去掉下划线,line-through删除线
line-height 行间距 行间距由字体大小+上/下间距组成,更改行高本质上是修改上下间距,并且上/下间距一样
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>my dream</title>
    <style>
        h3,
        p {
            font: normal 400 16px/30px 'Microsoft Yahei';
            color: aquamarine;
            text-align: center;
        }
    </style>
</head>

<body>
    <h3>My dream</h3>
    <p>
        作曲 : Andy Love <br>
        作词 : 王海涛/张靓颖 <br>
        疯狂的世界<br>
        迎着痛 把眼中 所有梦<br>
        都交给时间<br>
        想飞 就用心地去飞<br>
        谁不经历狼狈<br>
        我想我会 忽略失望的灰<br>
        拥抱遗憾的美<br>
        我的梦说别停留等待<br>
        就让光芒折射泪湿的瞳孔<br>
        映出心中最想拥有的彩虹<br>
        带我奔向那片有你的天空<br>
        因为你 是我的梦<br>
    </p>
</body>

</html>

在这里插入图片描述

展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 游动-白 设计师: 上身试试
应支付0元
点击重新获取
扫码支付

支付成功即可阅读