1.2 CSS文本属性
CSS Text(文本)属性: 定义文本外观,颜色,装饰,缩进,行间距来修饰文本
文本样式
- 文本缩进 text-indent
- 文本水平对齐方式:text-align
- 文本修饰:text-decoration
- 行高 line-height
CSS文本颜色属性color
颜色表示方式 | 表示含义 | 属性值 |
---|---|---|
关键词 | 预设定义的颜色名 | red,green,blue,yellow |
rgb表示法 | 红绿蓝三原色,每项取值:0-255 | rgb(0,0,0),rgb(255,255,255),rgb(255,0,0) |
rgba表示法 | 红绿蓝三+a表示透明度,取值范围:0-1 | rgba(255,255,255,0.5),rgba(255,0,0,0,3) |
十六进制表示法 |
# 开头,将数字转换成十六进制表示
|
# 000000,# ff0000,# e92322
|
常见颜色
- 默认取法
- 基本色
- skyblue:天蓝色
- pink:粉色
- rgb表示法
- rgb(255,0,0) : 红色
- rgb(0,255,0) : 绿色
- rgb(0,0,255) : 蓝色
- rgb(0,0,0):黑色
- rgb(255,255,255):白色
透明度a
a的取值范围:0-1
- 完全不透明:1
- 完全透明: 0
举个栗子
.blue {/* 文本颜色属性color */color: blue; }.red {/* 文本颜色也可以用十六进制定义 # + 6位 *//* 颜色一般不用记忆,一般都是用吸管工具吸取 */color: #f10c0c;/*color: #ff00ff 可以写成 color: #f0f*/}/* 文本颜色也可以用RGB代码定义 rgb(100,25,67)/rgb(20%,15%,26%) */.yellow {color: rgb(201, 245, 7);}
<p class="blus">我是蓝色</p><p class="red">我是红色</p><p class="yellow">我是黄色</p>
CSS文本对齐taxt-align
基本介绍
text-align属性用于设置元素内文本内容的水平对齐方式
元素文本对齐方式
text-align
属性
text-align
的对齐方式有right,left,center
注意:如果想让哪一个标签内的文本水平居中,text-align直接加入文本的父类元素,也就是上一级元素
举个栗子
.p1 {/* text-align的对齐方式有right,left,center *//* text-align设置元素文本居中对齐 */text-align:center;/* text-align:left; *//* text-align:right; */}.p2 {text-align: right;}.p3 {text-align: left;}
<p class="p1">我是居中p标签</p><p class="p2">我是向右p标签</p><p class="p3">我是向左p标签</p>
text-align能使哪些元素水平居中
- 文本
- span标签,a标签
- input标签,img标签
如果这些是子元素,那么将属性设置在父类标签
CCS文本修饰线属性 text-deccoration
text-decoration属性规定添加到文本的修饰,可以给文本添加下划线,删除线,上划线
开发中会使用text-decoration:none,清除a标签默认的下划线
1.下划线
text-decoration: underline
最常用
2.取消下划线text-decoration: none
最常用
3.上划线text-deccoration: overline
4.删除线text-decoration: line-through
举个栗子
.p1 {/* 下划线 */text-decoration: underline;}/* 一般网页链接都没下划线,所以直接标签选择器a 在css设置去线就行 */.p2 {/* 去掉下划线 */text-decoration: none;}.p3 {/* 上划线 */text-decoration: overline;}.p4 {/*删除线 */text-decoration: line-through;}
<p class="p1">我是p标签,我有下划线</p><a href="#" class="p2">我是a标签,我要去掉下划线</a><p class="p3">我是p标签,我有上划线</p><p class="p4">我是p标签,我有删除线</p>
CSS文本首行缩进text-indent(em)
注:
- text-indent 属性用于指定文本的第一行的缩进,一般指段落的首行缩进
- h1-h6,p标签都不缩进
- em是一个相对单位,就是当前元素(font-size),1个文字的大小,如果当前元素没有设置字体大小,则按照父元素的1个文字大小
举个栗子
/* 此时定义首行缩进20px(像素) */.p1 {text-indent: 20px ;}/* 此时可以设置数值em单位 */.p2 {text-indent: 2em;}/* 向左突出20像素 */.p3 {text-indent: -20px;}
<p>我是正常的p标签,我是正常的p标签,我是正常的p标签,我是正常的p标签,我是正常的p标签,我是正常的p标签,我是正常的p标签,我是正常的p标签,我是正常的p标签,我是正常的p标签,我是正常的p标签,我是正常的p标签,我是正常的p标签,我是正常的p标签,我是正常的p标签,我是正常的p标签,我是正常的p标签,我是正常的p标签,我是正常的p标签,我是正常的p标签,我是正常的p标签,我是正常的p标签,我是正常的p标签,我是正常的p标签,我是正常的p标签,我是正常的p标签</p><p class="p1">我是p标签,我要缩进20px,我是p标签,我要缩进20px,我是p标签,我要缩进20px,我是p标签,我要缩进20px,我是p标签,我要缩进20px,我是p标签,我要缩进20px,我是p标签,我要缩进20px,我是p标签,我要缩进20px,我是p标签,我要缩进20px,我是p标签,我要缩进20px,我是p标签,我要缩进20px,我是p标签,我要缩进20px,我是p标签,我要缩进20px,我是p标签,我要缩进20px,我是p标签,我要缩进20px,我是p标签,我要缩进20px,我是p标签,我要缩进20px,我是p标签,我要缩进20px</p><p class="p2">我是p标签,我要缩进2em,我是p标签,我要缩进2em,我是p标签,我要缩进2em,我是p标签,我要缩进2em,我是p标签,我要缩进2em,我是p标签,我要缩进2em,我是p标签,我要缩进2em,我是p标签,我要缩进2em,我是p标签,我要缩进2em,我是p标签,我要缩进2em,我是p标签,我要缩进2em,我是p标签,我要缩进2em,我是p标签,我要缩进2em,我是p标签,我要缩进2em,我是p标签,我要缩进2em,我是p标签,我要缩进2em</p><p class="p3">我是p标签,我要向左突出20像素,我是p标签,我要向左突出20像素,我是p标签,我要向左突出20像素,我是p标签,我要向左突出20像素,我是p标签,我要向左突出20像素,我是p标签,我要向左突出20像素,我是p标签,我要向左突出20像素,我是p标签,我要向左突出20像素,我要向左突出20像素,我是p标签,我要向左突出20像素,我是p标签,我要向左突出20像素,我是p标签,我要向左突出20像素,我是p标签,我要向左突出20像素,我是p标签,我要向左突出20像素,我是p标签,我要向左突出20像素</p>
CSS的行高 line-height
行高的作用: 控制一行的上下间距
应用:
- ?使单行文本垂直居中可以设置line-height:文字父元素高度
- 网页精准布局时,会设置line-height,可以取消上下间距
特点:
- 行高指的是文字占有的实际高度
- 可以通过
line-height
来设置行高 - 行高经常用来设置文字的行间距
取值:
- 数字+px/em
- 单个数字(倍数,当前标签font-size的倍数)
举个栗子
.p1 {line-height: 16px;}.p2 {font-size: 30px;line-height: 60px;}
div class="p1">我是div标签,我的行高是16px,字体是16px,我是div标签,我的行高是16px,字体是16px,我是div标签,我的行高是16px,字体是16px,我是div标签,我的行高是16px,字体是16px,我是div标签,我的行高是16px,字体是16px,</div><div class="p2">我是div标签,我的行高是60px,字体大小是30pxx</div><div>我是正常div标签,我是正常div标签,我是正常div标签,我是正常div标签,我是正常div标签,我是正常div标签,我是正常div标签,我是正常div标签,我是正常div标签,我是正常div标签,我是正常div标签,我是正常div标签,我是正常div标签,我是正常div标签</div>
总结
属性 | 表示 | 注意点 |
---|---|---|
color | 文本颜色 |
我们通常用十六进制,比如color: #fff123
|
text-align | 文本对齐方式 | 暂无 |
text-indent | 文本首行缩进 |
注意:只能设置首行缩进, 比如:text-indent:2px
|
text-decoration | 文本的修饰 | 一般只用于链接去下划线text-decoration:none |
line-height | 行高 | 行高=上边距+字体高度+下边距,上边距=下边距 |
1.2 CSS文本属性相关推荐
- css 文本属性详细总结
CSS 文本属性可定义文本的外观. 通过文本属性,您可以改变文本的颜色.字符间距,对齐文本,装饰文本,对文本进行缩进,等等. 1,text-align 横向排列,也就是水平对齐 它会影响一个元素中的文 ...
- 前端:CSS/09/行内框架,CSS简介,CSS选择器,组合选择器,CSS注释,CSS尺寸属性,CSS字体属性,CSS文本属性
内嵌框架(行内框架,浮动框架) 语法格式:<iframe 属性="值">不支持时的提示信息</iframe> 描述:内嵌框架,相当于在现有的网页中,挖了一个 ...
- html中文本属性的设置,css 文本属性direction的功能详解说明
摘要: 下文讲述css属性direction的功能说明,如下所示: css direction的功能说明 css direction的功能: 设置html元素中文本流的显示方向 css directi ...
- css字体属性和css文本属性
字体属性和文本属性 css字体属性 color属性:设置文字颜色 值类型: 关键词:red,green- 十六进制:#000,#fff rgb(255,255,255) font-size属性:定义文 ...
- 【CSS 文本属性(Text)】
CSS 文本属性 CSS 文本属性(Text) 1. color 属性: 颜色的前景色 (文本/文本装饰/边框/当前颜色的 颜色) 2. direction 属性: 文本/表列/水平溢出的 方向 (文 ...
- 06 【CSS字体属性 CSS文本属性】
8.CSS字体属性 CSS Fonts(字体)属性用于定义:字体系列.大小.粗细.和 文字样式(如:斜体). 8.1字体族 font-family 字体族(字体的格式) CSS 使用 font-fam ...
- css英文文本转化属性的是,css文本属性_CSS教程_郭隆邦技术博客
CSS文本属性 字体font属性针对的是单个字的字体格式font-family.大小font-size.粗细font-weight等样式, 文本text属性针对的是文本,不是单个字符,比如文本的字符间 ...
- css学习(第一天)(css基础选择器,css字体属性,css文本属性,css引入方式)
CSS第一天 1.css简介 1.1 html的局限性 1.2 css-网页的美容师 1.3 css语法规范 1.4 css代码风格 1.4.1 样式格式书写 1.4.2 样式大小写风格 1.4.3 ...
- Html5 css文本属性,html5常用文本标签、CSS文本外观属性,你了解多少?
一.HTML5中常用的文本标签 1.标题标签 (1)定义及用法: HTML中,定义了6级标题,分别为h1. h2.h3.h4. h5. h6,每级标题的字体大小依次递减,1级标题字号最大,6级标题字号 ...
最新文章
- elasticsearch:7.9.3 docker 开启日志
- 一文读懂tomcat组件--一个web服务器的架构演化史
- Netflix是如何构建代码的
- 处理SAP Netweaver gateway service使用过程中遇到的404 error
- aws中部署防火墙_如何在AWS中设置自动部署
- labuladong 的算法小抄_来自GitHub 68.8k star的硬核算法教程
- linux 编辑文件乱码,Linux 下 vim 编辑文件,解决中文乱码,设置Tab键空格数
- 5个很好用的.net 分析工具
- python中字符串是对象吗_Python中关于字符串对象的一些基础知识
- spring整合shiro
- java多线程的同步控制_Java多线程并发控制工具信号量Semaphore,实现原理及案例...
- WannaCry 勒索病毒用户处置指南
- Go语言实战 (William,Kennedy 等著)
- 快速实现python c扩展模块
- opencv使用trackbar调控美颜程度
- 拉普拉斯变换部分公式证明
- python 提取骨架
- QBXT 2018春季DP图论班 2018.5.4 --- 树形DP
- 软件测试 | 测试开发 | Sikuli 基于图形识别的自动化测试技术
- 九度 题目1335:闯迷宫 题目1365:贝多芬第九交响曲
热门文章
- C#开发:串口工具数据保存入数据库,用于UWB
- CTex3.0版本安装步骤
- 【软件工程(一)】软件工程概述+软件生命周期模型
- pycharm最新版本激活码activation code
- macOs Catalina 系统风扇转动声音很大(问题)
- SSM项目遇到的问题(1)
- “京东金融”改名“京东数科”,这才是真实的京东金融梦
- 一位人事经理眼中的国人劣根性
- 静音或取消静音?苹果AirPods17Beta版推出全新功能
- 算法的学习瓶颈和学习思路