CSS文本属性
作者:互联网
颜色属性
color: 值
英文单词
rgb 格式:rgb(0,0,0)数字分别代表红 绿 蓝,每一个数字取值是0-255之间, 0代表不发光, 255代表发光, 值越大就越亮
红色: rgb(255,0,0); 绿色: rgb(0,255,0); 蓝色: rgb(0,0,255); 黑色: rgb(0,0,0); 白色: rgb(255,255,255);
前端开发中不常用黑色, 让红色/绿色/蓝色的值都一样就是灰色,这三个值越小就越偏黑色, 越大就越偏白色
font-style 打开和关闭斜体文本
格式:font-style: italic; 取值:normal默认就是正常的 italic : 倾斜的
font-weight 设置粗细程度
格式: font-weight: bold; 取值: bold 加粗 bolder 比加粗还要粗 lighter 细线, 默认是细线
数字取值: 100-900之间整百的数字 400 等同于 normal 700 等同于 bold
font-size 文字大小
格式:font-size: 30px;
font-family 指定特殊的字体,浏览器只会使用浏览器可以访问到的字体
格式:font-family:"楷体";
通用字体 (直接使用,不需要加引号)
serif:有衬线的字体,笔画结尾有特殊的装饰线或衬线
sans-serif:无衬线的字体,笔画结尾是平滑的字体
monospace:等宽字体
cursive:草书
fantasy:装饰字体 ,具有特殊艺术效果的字体
注意点:
取值是中文,用双引号或者单引号括起来
设置的字体必须是用户电脑里面已经安装的字体
默认宋体
如果想给界面中的英文单独设置字体, 那么英文的字体必须写在中文的前面
在企业开发中最常见的字体
中文: 宋体/黑体/微软雅黑 英文: "Times New Roman"/Arial
- 缩写格式
缩写格式: font:style weight size family; 例如: font:italic bold 10px "楷体";
注意点:
sytle weight可以省略 并且位置可以交换
size family不能省略,位置不能乱放,size写在family的前面, 而且size和family必须写在所有属性的最后
webFont 网络字体
https://www.ziti163.com/webfont 当用户电脑中没有安装对应字体的时候,webFont可以加载网络字体进行显示。
字体图标:
目前流行的开源字体图标库:
iconfont http://www.iconfont.cn/
font-awesome http:/fontawesome.dashgame.com/
文本装饰的属性
格式:text-decoration:underline;
取值:
underline 下划线
line-through 删除线
overline 上划线
none 什么都没有,去掉超链接的下划线
快捷键:
td text-decoration:none;
tdu text-decoration:underline;
tdl :line-through;
tdo :overline;
文本水平对齐的属性
格式:text-align:right
left center
文本缩进的属性
格式: text-inden:2em;
设置或者取消字体的改变
用于使文本显示为全大写或全小写
text-transform 允许字体改变,文本变形
none
uppercase 文本转换为大写
lowercase 小写
capitalize 将所有单词第一个字母转换为大写
full-width 转换为类似于一个等宽字体
字体阴影
格式:text-shadow:h-shadow v-shadow blur color;
none
h-shadow:必需,水平阴影的位置,允许负值
v-shadow:必需,垂直阴影的位置,允许负值
blur:可选,模糊的距离
color:可选,阴影的颜色
列表样式
默认样式
ul,ol 元素的margin-top,margin-bottom均为16px(1em) , padding-left为40px(2.5em)
li 元素没有设置默认的空白(行间距)
dl 元素的margin-top,margin-bottom均为16px(1em),没有内边距
dd 元素的margin-left为40px(2.5em)
p 元素的margin-top,margin-bottom为16px(1em)
list-style-type 设置列表项标志类型
none disc circle square decimal
lower-roman : . i, ii, iii, iv, v…
upper-roman : I, II, III, IV, V…
decimal-leading-zero:01, 02, 03, … 98, 99
list-style-position 设置列表项标志出现的位置
outside : 列表项标志出现在主块框的外部
inside : 列表项标志出现在主块框的内部
list-style-image 自定义设置列表项标志
取值: url() : 指定图标位置
list-style速记写法
[<type>][<image>][<position>]
其他样式
line-height 设置文本的行高 取值为绝对单位或者相对单位
display 显示方式
inline 行内显示,宽高无效
block 块级显示,宽高有效
inline-block 为了让元素既能够不独占一行, 又可以设置宽度和高度, 就出现了行内块级元素, 行内显示同时宽高有效
none 不显示,不占据屏幕空间
flex 伸缩盒布局
visibility显示与隐藏 hidden visible
opacity 透明度 0-1之间的取值,取值为0的时候隐藏,占据屏幕空间
overflow 溢出处理 hidden 超出内容隐藏 auto 超出产生滚动条 scroll 滚动条
cursor 指定光标的样式 default 默认光标(通常是一个箭头)
标签:取值,字体,text,格式,font,文本属性,CSS,255 来源: https://blog.csdn.net/tyemqx005/article/details/122506690