给一个网站加上登录界面 如何做,app定制开发公司排名,网站建设结束的售后服务,查询网站开发#xff08;大家好#xff0c;今天我们将继续来学习CSS文本属性的相关知识#xff0c;大家可以在评论区进行互动答疑哦~加油#xff01;#x1f495;#xff09; 目录
四、CSS文本属性
4.1 文本颜色 4.2 对齐文本 4.3 装饰文本 4.4 文本缩进
4.5 行间距 4.6 文本…大家好今天我们将继续来学习CSS文本属性的相关知识大家可以在评论区进行互动答疑哦~加油 目录
四、CSS文本属性
4.1 文本颜色 4.2 对齐文本 4.3 装饰文本 4.4 文本缩进
4.5 行间距 4.6 文本属性总结 四、CSS文本属性
CSS Text(文本)属性可定义文本的外观比如文本的颜色、对齐文本装饰文本文本缩 进、行间距等。
4.1 文本颜色 color属性用于定义文本颜色。 div { color: red; } 表示属性值预定义的颜色值red,green,blue,pink......十六进制#FF0000#FF6600#26D794RGB代码rgb25500或rgb100%0%0%
预定义颜色值 十六进制 代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleCSS之文本颜色/titlestylediv {/* 预定义标识符 *//* color: deeppink; *//* 十六进制 */color: #ad2191;}/style
/head
bodydiv一个人为什么要努力 我见过最好的答案就是因为我喜欢的东西都很贵我想去的地方都很远我爱的人超完美。/div
/body
/html 4.2 对齐文本 text-align属性用于设置元素内文本内容的水平对齐方式。 div { text-align: center; } 属性值解释left左对齐默认值right右对齐center居中对齐
居中 靠右 代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleCSS之文本对齐/titlestyleh1 {/* 本质上是让h1盒子里的文字水平居中对齐 *//* text-align: center; *//* 本质上是让h1盒子里的文字水平向右对齐 */text-align: right;}/style
/head
bodyh1居中的标题/h1
/body
/html 4.3 装饰文本 text-decoration属性规定添加到文本的修饰。可以给文本添加下划线册除线上划线等。 div { text-decoration: underline; } 属性值描述none默认没有装饰线最常用underline下划线链接a自带下划线常用overline上划线几乎不用line-through删除线不常用
下划线 删除线 上划线 没有装饰线用于链接 重点记住:如何添加下划线如何删除下划线
代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleCSS之文本装饰/titlestylediv {/* 下划线 *//* text-decoration: underline; *//* 删除线 *//* text-decoration: line-through; *//* 上划线 */text-decoration: overline;}a {text-decoration: none;color: #333}/style
/head
bodydiv少年的肩应该担起草长莺飞和明月清风/diva href#努力的生活/a
/body
/html 4.4 文本缩进 text-indent属性用来指定文本的第一行的缩进通常是将段落的首行缩进。 div { text-indent: 20px; } 通过设置该属性所有元素的第一行都可以缩进一个给定的长度甚至该长度可以是负值。 p { text-indent: 2em; } em是一个相对单位就是当前元素(font-size)1个文字的大小如果当前元素没有设置大小则会按照父元素的1个文字大小。
px缩进 em缩进 代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleCSS之文本首行缩进/titlestylep {/* 文本第一行首行缩进 多少距离 *//* text-indent: 20px; *//* 如果此时写了2em 则是缩进当前元素 2个文字大小距离 */text-indent: 2em;}/style
/head
bodyp如果你爱上了某个星球的一朵花。那么只要在夜晚仰望星空就会觉得漫天的繁星就像一朵朵盛开的花。《小王子》/pp是你浪费在我身上的时间使我变得如此珍贵。《小王子》/pp夜里你要抬头仰望满天的星星。我那颗实在太小了我都没法指给你看它在哪儿。这样倒也好我的星星对你来说就是满天星星中的一颗。所以你会爱这满天的星星。所有的星星都会是你的朋友。《小王子》/pp仪式感就是使某一天与其他日子不同使某一个时刻与其他时刻不同。《小王子》/pp只有心灵才能洞察一切最重要的东西用眼睛是看不见的。《小王子》/pp所有的大人都曾经是小孩虽然只有少数的人记得。《小王子》/pp如果不去遍历世界我们就不知道什么是我们精神和情感的寄托但我们一旦遍历了世界却发现我们再也无法回到那美好的地方去了。当我们开始寻求我们就已经失去而我们不开始寻求我们根本无法知道自己身边的一切是如此可贵。《小王子》/pp星星之所以美丽是因为它的某一颗上有朵看不见的花。沙漠之所以美丽是因为它的某一个地方藏着一口井。/p/body
/html
4.5 行间距 line-height属性用于设置行间距离(行高)可以控制文字行与行之间距离。 p { line-height: 26px; } 代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleCSS之文本行间距/titlestylediv {line-height: 26px;}p{line-height: 25px;}/style
/head
bodydiv中国人/divp如果你爱上了某个星球的一朵花。那么只要在夜晚仰望星空就会觉得漫天的繁星就像一朵朵盛开的花。《小王子》/pp是你浪费在我身上的时间使我变得如此珍贵。《小王子》/pp夜里你要抬头仰望满天的星星。我那颗实在太小了我都没法指给你看它在哪儿。这样倒也好我的星星对你来说就是满天星星中的一颗。所以你会爱这满天的星星。所有的星星都会是你的朋友。《小王子》/pp仪式感就是使某一天与其他日子不同使某一个时刻与其他时刻不同。《小王子》/pp只有心灵才能洞察一切最重要的东西用眼睛是看不见的。《小王子》/pp所有的大人都曾经是小孩虽然只有少数的人记得。《小王子》/pp如果不去遍历世界我们就不知道什么是我们精神和情感的寄托但我们一旦遍历了世界却发现我们再也无法回到那美好的地方去了。当我们开始寻求我们就已经失去而我们不开始寻求我们根本无法知道自己身边的一切是如此可贵。《小王子》/pp星星之所以美丽是因为它的某一颗上有朵看不见的花。沙漠之所以美丽是因为它的某一个地方藏着一口井。/p
/body
/html 4.6 文本属性总结
属性表示注意点color文本颜色我们通常用十六进制简写形式text-align文本对齐可以设定文字水平的对齐方式text-indent文本缩进通常我们用于段落首行缩进2个字的距离text-decoration文本修饰记住 添加下划线underline取消下划线none line-height行高控制行与行之间距离
今日分享暂时到此为止啦为不断努力的自己鼓鼓掌吧。今日文案分享生命有裂缝阳光才能照进来没用永恒的黑夜只有未到的黎明。
