ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

CSS文本属性

2022-01-16 10:30:21  阅读:135  来源: 互联网

标签:取值 字体 text 格式 font 文本属性 CSS 255


颜色属性

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

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有