css文本属性用法总结
稍稍总结了下css文本的一些属性用法,自己忘记的时候也可以用来查查,不用去查网站那么麻烦。
下面是部分总结,也希望对其他人有用
文本修饰
(1)text-decoration: 文本修饰(横线)
4个属性值
overline line-through underline blink
(1)overline
定义文本上的一条横线
(2)line-through
这个属性值时最有用的,一般商家降价促销后面的价格会用横线划去表示那是之前的价格
(3)一般<a>标签会带由unline
要想去除就要设置text-decoration:none
(4)blink
文本闪烁,一般很少使用,只有在canvas中会使用,并且浏览器的支持度不高,只有火狐支持
另外:
还可以用text-decoration-color来修饰横线的颜色
(2)text-transform 字母大小写
5个属性值
capitalize uppercase lowercase inhert none
(1)capitalize
首字母大写
(2)uppercase和lowercase
大小写
(3)inhert
继承父元素的字母属性
(4)none
默认,没有任何效果
(3)text-overflow 定义文本超出范围的修饰
3个属性
clip ellipsis string
(1)clip
修剪文本
(2)ellipsis
用省略号来表示超出的文本
(3)string
用固定的字符来表示超出的文本
(4) text-shadow: h-shadow v-shadow blur color 文本阴影效果
3个属性值
(1)v-shadow 必需,水平阴影的位置,允许负值
(2)v-shadow 必需,垂直阴影的位置,允许负值
(3)blur 可选,模糊的距离
(4)color 可选,阴影的颜色
文本布局
(1)text-indent 文本缩进
3种属性值
length % inhert
(1)length
定义固定缩进,以像素为单位,默认值为0
(2)%
以父元素宽度的百分比为长度缩进
(3)inhert
继承父元素的缩进
(2)text-align 文本对齐
5种属性值
left center right justify inhert
(1)left和right
很少使用
(2)center
居中对齐
经常和line-height:父元素高度 一起使用使文本居中对齐
如果不添加line-height 属性,文本会偏在父元素的上方
(3)justify
文本两端对齐
css文本属性用法总结的更多相关文章
- [CSS]文本属性(Text)
CSS 文本属性(Text) 属性 描述 CSS color 设置文本的颜色. 1 direction 规定文本的方向 / 书写方向. 2 letter-spacing 设置字符间距. 1 lin ...
- 4 CSS文本属性
CSStext(文本)属性可定义文本外观,比如文本颜色,对齐文本,装饰文本,文本缩进,行间距等 4.1文本颜色 color属性用于定义文本颜色. div { color: red; } 颜色表示方法: ...
- css文本属性
CSS1&2中的文本属性 属性 版本 简介 text-indent CSS1 检索或设置对象中的文本的缩进 letter-spacing CSS1 检索或设置对象中的文字之间的间隔 word- ...
- css 文本属性和字体属性
1.将浮动居中 这需要三个盒子 <!DOCTYPE html> <html lang="en"> <head> <meta charset ...
- CSS文本属性 文本阴影text-shadow 换行 text-overflow
div{ font-size: 20px; text-shadow: 5px 5px 5px #333; text-shadow: 10px 10px ...
- CSS 文本属性
一.文本位置 text-align: 参数 /** * left center right:左中右**/text-align: left; 二.文本行间距 line-height: 参数 特别要注意: ...
- [HTML/CSS]margin属性用法
概述 在一些小的项目中,前台样式还是需要自己来写的,这时候,margin在布局中还是有一定的地位的.上篇文章中介绍的盒子模型中,就有margin的存在. margin margin可以用来设置css块 ...
- 【CSS简介、基础选择器、字体属性、文本属性、引入方式】前端小抄(2) - Pink老师自学笔记
[CSS简介.基础选择器.字体属性.文本属性.引入方式]前端小抄(2) 本学习笔记是个人对 Pink 老师课程的总结归纳,转载请注明出处! 一.CSS简介 CSS 的主要使用场景就是布局网页,美化页面 ...
- CSS简介,基础选择器,字体属性,文本属性
欢迎大家去博客冰山一树Sankey,浏览效果更好.直接右上角搜索该标题即可 博客园主页:博客园主页-冰山一树Sankey CSDN主页:CSDN主页-冰山一树Sankey 前端学习:学习地址:黑马程序 ...
随机推荐
- SQLServer 查看耗时较多的SQL语句(转)
total_worker_time AS [总消耗CPU 时间(ms)],execution_count [运行次数], qs.total_worker_time AS [平均消耗CPU 时间(ms) ...
- lable标签的用途
lable标签的用途:为iput输入框元素定义标注: label 元素不会向用户呈现任何特殊效果.不过,它为鼠标用户改进了可用性.如果您在 label 元素内点击文本,就会触发此控件.就是说,当用户选 ...
- Spring Boot国际化开发实战
本章将讲解如何在Spring Boot和Thymeleaf中做页面模板国际化的支持,根据系统语言环境或者session中的语言来自动读取不同环境中的文字. 国际化自动配置 Spring Boot中已经 ...
- 课程五(Sequence Models),第一 周(Recurrent Neural Networks) —— 2.Programming assignments:Dinosaur Island - Character-Level Language Modeling
Character level language model - Dinosaurus land Welcome to Dinosaurus Island! 65 million years ago, ...
- 解决Chrome浏览器主页被hao123、360和2345篡改简单有效方法
转自:https://blog.csdn.net/qq_32635971/article/details/72793115?locationNum=10&fps=1 当你打开浏览器看到各种首页 ...
- RocketMQ 集群监控以及Hello World
RocketMQ 目前有两个版本 alibaba版本和apache版本 一.alibaba版本 tomcat部署: apache-tomcat-7.0.90.tar.gz jdk7 虚拟机redha ...
- underscore.js源码解析【对象】
// Object Functions // ---------------- // Keys in IE < 9 that won't be iterated by `for key in . ...
- go 通过http发送图片file内容
package main import ( "encoding/json" "fmt" "io/ioutil" "net/http ...
- walle多渠道打包+Tinker(bugly)热更新集成+360加固(乐固)
这三个东东是干啥的相信大家都有所耳闻了,如果你没有听说过,请出门左拐,百度一下你就知道.这里不对这三个东东具体的集成方式做详细的介绍,因为官方文档已经写的很详细了,主要是对同时使用这三个东东时所需要注 ...
- Docker 本地导入镜像/保存镜像/载入镜像/删除镜像
1.Docker导入本地镜像 有时候我们自己在本地或者其它小伙伴电脑上拷贝了一份镜像,有了这个镜像之后,我们可以把本地的镜像导入,使用docker import 命令. 例如这里下载了一个 aliba ...