CSS相关属性

最新推荐文章于 2022-08-31 09:54:00 发布

点康慕

最新推荐文章于 2022-08-31 09:54:00 发布

阅读量274

点赞数

分类专栏： H5

本文链接：https://blog.csdn.net/MOOG007/article/details/108012941

版权

H5 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

CSS字体属性

CSS Fonts（字体）属性用于定义字体系列、大小、粗细和文字样式（如斜体）

字体系列

CSS使用font-family属性定义文本的字体系列

<style>
    P {
        font-family: "微软雅黑";
    }
    div {
        font-family: Arial, "Microsoft Yahei", "微软雅黑";
    }
</style>

各种字体之间必须使用英文状态下的逗号隔开
一般情况下，如果有空格隔开的多个单词组成的字体：需要加引号
尽量使用系统默认自带的字体：保证在任何用户的浏览器中都能正确显示
最常见的几个字体：body { font-family: "Microsoft Yahei", Tahoma, Arial, "Hiragino Sans GB"; }

CSS使用font-size属性设置文字的大小
px（像素）大小是我们网页的最常用的单位
google浏览器默认的文字大小为：16px
不同浏览器可能默认显示的字号大小不一致，我们尽量给一个明确值大小，不要默认大小
可以给body指定整个页面文字的大小

<style>
    body {
        font-size: 16px;
    }
</style>

字体粗细

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

属性值	描述
normal	默认值：不加粗的
bold	定义粗体：加粗的
100 - 900	400等同于normal；700等同于bold：注意后面没有单位

在实际项目开发中：font-weight的属性值推荐使用数字

字体复合属性

选择器 {
	font: font-style font-weight font-size/line-height font-family;
}

使用font属性时，必须按照上面语法格式中的顺序书写，不能更换顺序，并且各个属性间以空格隔开
不需要设置的属性可以省略（采用默认值），但必须保留font-size和font-family属性，否则font属性将不起作用

<style>
	body {
		font: 20px "黑体";
	}
</style>

字体属性总结

属性	表示	总结
font-size	字号	我们通常用的单位是px像素，一定要跟上单位
font-family	字体	实际工作中按照团队约定来写字体
font-weight	字体粗细	记住加粗是700或bold；不加粗是400或normal；数字不带单位
font-style	字体样式	记住倾斜是italic，不倾斜是normal：工作中常用的是normal
font	字体连写	字体连写是有顺序的，不能随意换位置；其中字号和字体必须同时出现

CSS文本属性

CSS Text（文本）属性可以定义文本的外观：比如文本的颜色、对齐文本、装饰文本、文本缩进、行间距等

文本颜色

CSS中使用color属性定义文本的颜色

颜色表示	属性值
预定义的颜色值	red、green、blue等等
十六进制	#FF0000、#00FF00、#29D794
RGB代码	rgb(255, 0, 0)、rgb(0, 255, 0)或rgb(100%, 0%, 0%)

实际开发中文本颜色color属性的取值做常用的就是十六进制

文本对齐

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

属性值	解释
left	文本水平左对齐：默认值
right	文本水平右对齐
center	文本水平居中对齐

<head>
    <title>Document</title>

    <style>
        div {
            width: 400px;
            height: 100px;
            border: 1px solid red;
            text-align: center;
        }
    </style>
</head>

<body>
    <div>
        <img src="1.png" />
    </div>
</body>

</html>

img标签是文本

文本装饰

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

属性值	描述
none	默认值：没有装饰线：最常用
underline	下划线：链接a标签自带下划线：常用
overline	上划线：几乎不用
line-through	删除线：不常用

文本缩进

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

<head>
    <title>Document</title>

    <style>
        body {
            font-size: 16px;
        }
        
        p {
            text-indent: 10px;
        }
        
        div {
            text-indent: 2em;
        }
    </style>
</head>

<body>
    <p>我是段落</p>
    <div>我是div标签</div>
</body>

在这里插入图片描述

em是一个相对单位，就是当前标签的1个文字的大小，即2em = 2 * font-size：如当前标签没有设置文字大小，当前标签会继承父标签的文字大小，即会按照父标签的文字大小来计算

行间距

line-height属性用于设置行间距，即行高：可以控制文字行与行之间的距离
行间距由三部分组成：上间距、文本高度、下间距
使用行间距=盒子的大小，可以使盒子中的单行文本垂直居中
改变行高实际修改的是上间距与下间距的距离
测量设计稿的行号：粗略的测量方式：从上一行的下边沿到当前行的下边沿

文本属性总结

属性	表示	注意点
color	文本颜色	我们通常使用十六进制，简写形式#FFF
text-align	文本对齐	可以设定文字水平对齐方式
text-indent	文本缩进	通常我们用于段落首行缩进2个字的距离：text-indent: 2em;
text-decoration	文本修饰	记住：添加下划线underline与取消下划线none
line-height	行高	控制行与行之间的距离

CSS引入方式

CSS的三种样式表：按照CSS样式书写的位置或者引入的方式，CSS样式表可以分为三大类：
（1）行内样式表：行内式
（2）内部样式表：嵌入式
（3）外部样式表：链接式

内部样式表

内部样式表是写到html页面内部，是将所有的CSS代码抽取出来，单独放到一个<style>标签中

<head>
    <title>Document</title>

    <style>
        p {
            font-size: 40px;
            line-height: 90px;
        }
    </style>
</head>

<style>标签理论上可以放到HTML文档的任何地方，但一般会放在文档的<head>标签中
通过此种方式，可以方便控制当前整个页面中的元素样式设置
代码结构清晰，但是并没有实现结构与样式相分离

行内样式表

行内样式表就是在元素标签内部的style属性中设定的CSS样式，适合于修饰简单的样式

<body>
    <p style="font-size: 14px; line-height: 20px;">我是段落</p>
</body>

style其实就是标签的属性
在引号中间要写符号CSS规范的代码
可以控制当前标签的样式
由于书写繁琐，且没有实现结构与样式的分离的思想：所以不推荐大量使用：只有对当前元素添加简单的样式的时候才考虑使用

外部样式表

实际开发都是外部样式表：适合于样式比较多的情况！核心是：样式单独写到CSS文件中，之后把CSS文件引入到HTML页面中使用

<head>
    <title>Document</title>
    <link rel="stylesheet" href="css路径名">
</head>

属性	作用
rel	定义当前文档与被链接文档之间的关系，在这里需要制定为"stylesheet"，表示被链接的文档是一个样式表文件
href	定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径

CSS引入方式总结

样式表	优点	缺点	使用情况	控制范围
行内样式表	书写方便，权重高	结构样式混写	较少	控制一个标签
内部样式表	部分结构与样式相分离	没有彻底分离	较多	控制一个页面
外部样式表	完全实现结构和样式相分离	需要引入	最多，强烈推荐	控制多个页面