CSS核心属性-文本属性

最新推荐文章于 2023-06-29 18:47:57 发布

房东的喵

最新推荐文章于 2023-06-29 18:47:57 发布

阅读量105

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/luxunlx123/article/details/105844148

版权

前端专栏收录该内容

30 篇文章 0 订阅

订阅专栏

1.文本类属性
css语法
css语法由两部分组成：选择符、声明
语法：
选择符{属性：属性值；属性：属性值；}


font-family:字体类型
语法：{font-family：字体1，字体2，字体3；}
说明：
浏览器首先会寻找字体1.如果存在就是用改字体来显示内容，如在字体1不存在的情况下，则会寻找字体2，如字体2也不存在，按字体3显示内容，如字体3也不存在，则会按系统默认字体显示。
当字体是中文时需加双引号：
当英文字体中有空格时，需加双引号
当英文字体只有一个单词组成不用加双引号

font-size：文本大小
语法：{font-size：数值；}
说明：
属性值为数值时；必须给属性值加单位，属性值为0时除外。
为了减小系统间的字体显示差异，16px为标准字体大小默认值即1em
默认情况下：1em=16px；0.75em=12px

color：文本颜色
语法：{color：颜色值；}
说明：
十六进制颜色模式：0,1,2,3,4,5,6，7,8,9，A,B,C,D,E,F
color：#FF000
rgb颜色模式：color:rgb(0,204,204)
rgba颜色模式：color:grba(0,204,204,0,0.6)rgb三原色，a表示透明度

font-weight：字体加粗
语法：{font-weight：bolder/bod/normal/100-900;}
说明：
bolder（更粗的）/bod（加粗）/normal（常规）
在css规范中，把字体的粗细分为9个等级，分别为100-900，其中100对应最轻的字体变形，而900对应最重的字体变形，一般500常规字体，600-900加粗字体

font-style：字体倾斜
语法：{font-style:italic/oblique/normal;}
说明：
italic和oblique都表示倾斜，不过oblique的幅度更大一点，但一般浏览器对他们的区分不是很明显。 

text-align：水平对齐
语法：{text-align:left/right/center/justify;}
说明：
justify对内容以两端边界线对齐显示

line-height：行高
语法：{line-height：normal/数值；}
说明：
当单行文本的行高等于容器高时，可实现单行文本在容器中垂直方向居中对齐
当单行文本的行高小于容器高时，可实现单行文本在容器中垂直中齐以上任意位置的定位
当单行文本的行高大于容器高时，可实现单行文本在容器中垂直中齐以下任意位置的定位
（IE6及以下版本存在浏览器兼容问题）

text-decoration：文本修饰
语法：{text-decoration：none/underline/overline/line-through；}
说明：
none：没有修饰
underline：下划线
overline：上划线
line-through：删除线

text-indent：首行缩进
语法：{text-indext：数值；}
说明：
text-indent可以取负值，可实现隐藏文本，悬挂缩进
text-indent属性只对第一行起作用，若第一行不是文本则没变化

例：
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            body {width: 550px;   font-family: "Times New Roman","微软雅黑";font-size: 24px;color: #ff0000;font-weight: bolder; font-style: oblique;
            /* text-align: left;text-align: right;text-align: center; */text-align: justify;line-height: 36px;}
            h1 {height: 200px; font-weight: normal;text-align: center;line-height: 200px;background: #0f0;font-style: italic;
            /* text-decoration: underline;}text-decoration: overline; } */text-decoration: line-through;
            text-indent:}
            a {text-decoration: none;}
            a:hover {text-decoration: underline;}
            p {text-indent: 36px;}
        </style>
    </head>
    <body>
        <h1>寿星龙王</h1>
        <p>指尖星火，请君共赏；整个宇宙，邀你共舞</p>
        Fingertip spark, please enjoy; The universe invites you to dance
        <a href="#">不要有趣，要有用</a>
    </body>
</html>

房东的喵

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS核心属性-文本属性

1.文本类属性css语法css语法由两部分组成：选择符、声明语法：选择符{属性：属性值；属性：属性值；}font-family:字体类型语法：{font-family：字体1，字体2，字体3；}说明：浏览器首先会寻找字体1.如果存在就是用改字体来显示内容，如在字体1不存在的情况下，则会寻找字体2，如字体2也不存在，按字体3显示内容，如字体3也不存在，则会按系统默认字体显示。当...
复制链接

扫一扫