文本属性 | 学习笔记

简介: 快速学习文本属性。

开发者学堂课程【CSS 快速掌握文本属性】学习笔记,与课程紧密联系,让用户快速学习知识。

课程地址:https://developer.aliyun.com/learning/course/611/detail/9171


文本属性


内容介绍

一、文本属性


一、文本属性

1.

属性名

 

含义

color.

 #ff0000 或 red  rgb(3,5,8)

给文本设置颜色。

text-aligne

left(居左)right(居右)center(居中)

设置文本的水平对齐方向。

text-decoration

none(去掉文本修饰线)、设置文本修饰线。

underline(下划线),overline(上划线)line-through(删除线)

设置文本修饰线

text-transforme

capitalizeuppercase lowercase

大小写转换或者首字母大写

Line-height

 固定值或百分比

设置行高

text-indent

px 或者 em

设置首行缩进允许负值。

letter-spacing

px

设置字符间距

word-spacing

px

设置单词间距

<style type=“text/css”

.zhang{

color:rgb(255,0,0);

}

/*十进制表示颜色的方式在 CSS 中没有浏览器兼容性的问题 text-decoration: underline; /*下划线*/

}

h2{

text-align:center;/*水平居中*/

text-decoration:overline;/*上划线*/

}

.jyqht{

text-decoration:line-through/*删除线*/

}

u{

text-decoration:none;/*去掉文本修饰线*/

}

.cap{

text-transform;capitalize/*将英文字母的首字母转换为大写*/

}

.upper{

text-transform:uppercase/*将小写转换为大写*/

word-spacing:20px;

}

.lower{

text-transform: lowercase/*将大写转换为小写*/

Letter-spacing:20px;

}

p{

text-indent:-2em;/*1em就表示一个汉字的位置*/

}

.lh{

/*行高的主要作用是用来设置文本的垂直方向居中对齐

*以现文本的垂直方向居中对齐 height:40px;

Line-height:40px;

border:1px solid #f00;/*设置边框 1px 实线 红色*/

}

</style>

相关文章
|
5月前
文本居中显示
文本居中显示
|
9天前
|
前端开发
前端基础(五)_CSS文本文字属性、背景颜色属性
本文详细介绍了CSS中关于文本和背景颜色的样式属性。包括字体大小、字体族、字体加粗、字体样式、文本行高、`font`属性、文本颜色、文本对齐方式、文本装饰线、首行缩进等文本属性,以及背景颜色、背景图片、背景重复、背景位置等背景属性。文章通过示例代码展示了这些属性的具体应用和效果。
12 3
前端基础(五)_CSS文本文字属性、背景颜色属性
|
3月前
|
前端开发
css 实用技巧 —— 文字和图标垂直居中对齐(四种方法)
css 实用技巧 —— 文字和图标垂直居中对齐(四种方法)
1295 1
|
4月前
|
前端开发 UED 容器
CSS基础-文本样式:颜色、字体、大小、对齐
【6月更文挑战第8天】本文介绍了CSS中设置文本颜色、字体、大小和对齐的基础知识。通过color属性改变文本颜色,使用font-family设置字体,用font-size调整大小,text-align控制对齐方式。注意浏览器兼容性、文本溢出和响应式设计的问题。提供的代码示例展示了这些属性的用法,帮助创建更具吸引力的网页。
42 6
|
5月前
|
前端开发
css样式字体、文本、背景属性,盒子模型详解,轻松调教出优美的字体和网页背景色
css样式字体、文本、背景属性,盒子模型详解,轻松调教出优美的字体和网页背景色
|
11月前
easyUI 设置datagrid的行高 + 文字超宽换行
easyUI 设置datagrid的行高 + 文字超宽换行
400 0
|
前端开发
css如何显示文字垂直居中
css如何显示文字垂直居中
64 0
|
前端开发
Day02 了解Html+CSS的学习内容Css属性 内边距 外边距呀 边框 选择器 实操(二)
Day02 了解Html+CSS的学习内容Css属性 内边距 外边距呀 边框 选择器 实操(二)
194 0
|
前端开发
Day02 了解Html+CSS的学习内容Css属性 内边距 外边距呀 边框 选择器 实操(一)
Day02 了解Html+CSS的学习内容Css属性 内边距 外边距呀 边框 选择器 实操(一)
192 0
|
前端开发
Day02 了解Html+CSS的学习内容Css属性 内边距 外边距呀 边框 选择器 实操(三)
Day02 了解Html+CSS的学习内容Css属性 内边距 外边距呀 边框 选择器 实操(三)
71 0