CSS文本属性
定义文本的外观(文本颜色、文本对齐、文本装饰、文本缩进、行间距)。
文本颜色
color属性
div {
corlor: red;
}
表示 | 属性值 |
---|---|
(demo测试用)预定义的颜色值 | red,green,blue,pink~~ |
(最常用)十六进制 | #FF0000,#FF6600,#29D794~~ |
RGB代码 | rgb(255,0,0)或(100%,0%,0%) |
文本对齐
text-align属性:设置元素内文本内容的水平对齐方式。
div {
text-align: center;
}
属性值 | 解释 |
---|---|
center | 居中对齐 |
left | 左对齐(默认值) |
right | 右对齐 |
文本装饰
text-decoration属性:可给文本添加下划线、删除线、上划线。
div {
text-decoration: underline;
}
属性值 | 描述 |
---|---|
(取消下划线用)none | (默认)无装饰线(最常用) |
underline | 下划线(常用) |
overline | 上划线(几乎不用) |
line-through | 删除线(不常用) |
文本缩进
text-indent属性:指定文本的第一行缩进(通常段落首段缩进)。
div {
text-indent: 10px;
}
通过设置该属性,所有元素的第一行都可以缩进一个给定的长度,甚至该长度可以为负值。
文本缩进一般取的是字体大小的2个宽度长。
如果font-size:14px;那么一般text-indent:28px;
1个中文是32像素。
p {
text-indent: 2em;
}
em是一个相对单位,就是当前元素(font-size)1个文字大小,如果当前元素没有设置大小,则会按照父元素的1个文字大小。
行间距
line-height属性:用于设置行间的距离(行高),可以控制文字行与行之间的距离。
p {
line-height: 26px;
}
文字高度不变,改变的是上下间距。
文字默认16px。
文本属性总结
属性 | 表示 | 注意点 |
---|---|---|
color | 文字颜色 | 通常用十六进制,比如#fff而且是简写形式 |
text-align | 文本对齐 | 可设定文字水平的对齐方式 |
text-indent | 文本缩进 | 通常用于段落首行缩进2个字的距离text-indent: 2em; |
text-decoration | 文本修饰 | 记住下划线:underline;取消下划线:none |
line-height | 行高 | 控制行与行之间的距离 |
CSS引入方式
三种样式表
按照CSS样式书写的位置(或引入的方式)分类。
1.行内样式表(行内式)
2.内部样式表(嵌入式)
3.外部样式表(链接式)
综合案例
——新闻页面
步骤:
1.搭建HTML结构页面。
2.修改CSS样式。
Chrome调试工具
Chrome浏览器提供的,用来调试HTML结构和CSS样式。
打开调试工具
打开Chrome浏览器,按下F2键或者右击页面空白处–>检查。
使用调试工具
1.Ctrl+滚轮可以放大开发者工具代码大小。
2.左边是HTML元素结构,右边是CSS样式。
3.右边CSS样式可以改动数值(左右箭头或者直接输入)和查看颜色。
4.Ctrl+0复原浏览器大小。
5.如果点击元素,发现右侧没有样式引入,极有可能是类名或者样式引入错误。
6.如果有样式,但是样式前面有黄色叹号提醒,则是样式属性书写错误。
文章内容为观看他人视频学习笔记,仅个人学习记录