一、规定文字的属性:

属性类型 取值 快捷键 注意点
文字样式
italic: 倾斜
normal:正常,默认就是正常
fs font-style: italic;
fsn font-style: normal;
文字粗细
bold
bolder
lighter,默认就是细线
fw font-weight: ;
fwb font-weight: bold;
fwbr font-weight: bolder;
文字大小
格式:font-size: 30px;
单位:px (像素 pixel)
fz:font-size.
通过font-size设置大小一定要带单位,也就是一定要写px
文字字体
中文:宋体/黑体/微软雅黑
英文:“Times New Roman”/Arial
..........
ff :font-family:
1.如果取值是中文,需要双引号或者单引号括起来。
2.设置的字体必须是电脑已经安装好的字体。

文字属性注意点:

1.如果设置的字体不存在,那么系统会使用默认的字体来显示宋体
2.如果设置的字体不存在,而我们又不想用默认字体怎么办?
可以给字体设置备选方案
格式:font-family:"字体","备选方案",.......;
3.如果想给中文和英文分别设置字体,怎么办?
但凡是中文字体,里面包含了英文
但凡是英文字体,里面都没有包含中文
也就是说中文字体可以处理英文,而英文字体不能处理中文
注意点:如果想给界面中的英文单独设置字体,那么英文的字体必须写在中文的前面
并不是名称是英文的就是英文字体,中文字体都有自己的英文名称,所以是不是中文字体主要看能不能处理中文

4.存在直接指明四个属性的方法:

font: style weight size family;
例如:
font: italic bold 10px "楷体";
注意点:
1.在这种缩写格式中,有的属性值是可以省略的
style 可以省略
weight 可以省略
2.在这种缩写格式中style和weight的位置可以交换
size 不能省略
family 不能省略
3.size和family的位置不能随便乱放的
size一定要写在family的前面,而且size和family必须写在所有属性的最后

二、文本属性:

文本属性 格式 取值 快捷键 注意点
文本装饰
text-decoration: xxxxx;
underline 下划线
line-through 删除线
overline 上划线
td text-decoration: none;
tdu text-decoration: underline;
tdo text-decoration: overline;
text-decoration: line-through;
文本水平对齐
text-align: ;
left:让字偏向左边
right: 让文字偏向右边
center: 让文字居中
left:让字偏向左边
right: 让文字偏向右边
center: 让文字居中
文本缩进
text-indent: xx em;
  em:字符  px:像素
ti:text-indent: ;
ti2e:text-indent: 2em;

三、颜色属性:

格式:color:x

x取值列表:

取值方式 说明 注意点
英文单词
用颜色的英文来取值
 
rgb(0,0,0) 第一个数用来表示三原色的光源原件红色的亮度 第二个数用来表示三原色的光源原件绿色的亮度 第三个数用来表示三原色的光源原件蓝色的亮度 每个数字的取值在0-255之间,0代表不发光  
rgba rgb同样是三原色,a是代表透明度,取值是0-1,取值越小就越透明。 在前端开发中通过十六进制来表示颜色,其实本质就是rgb #FFEE00 其中FF表示红色, EE表示绿色, 00表示蓝色  
#FFEE00 #FFEE00 FF表示红色,EE表示绿色,00表示蓝色  
#FE0
如果CSS中俩个十六进制的数字俩位的值是一样的,那么就可以简写为一位。
1.如果当前颜色对应的数字不一样,那么就不能简写
2.如果俩位相同数字不属于同一种颜色,也不能简写

四、选择器合集:

选择器名称 作用 格式 注意点
标签选择器
根据指定的标签名称,在当前界面中找到所有该名称的标签,然后设置属性。
标签名称{属性:值;}
1.标签选择器选中的是当前界面中所有标签,而不能单独选中某一个标签
2.标签选择器无论标签藏得多深都能选中。
3.只要是HTML中的标签就可以作为标签选择器(h/a/img/ul/ol/dl/input....)
id选择器
根据指定的id名称找到对应的标签,然后设置属性。
#id名称{属性:值;}
1.每个HTML标签都有一个属性叫做id,也就是说每个标签都可以设置id。
2.在同一个界面中id的名称是不可以重复的。
3.在编写id选择器时一定要在id名称前面加上#
4.id的名称只能由字母/数字,下划线组成
4.1 id的名称只能由字母/数字,和下划线组成:
a-z, 0-z
4.2 id的名称不能以数字开头
4.3 id的名称不能是HTML标签的名称5.在企业开发中id是留给JS使用的,因此id不能用来修改样式。
类选择器
根据指定的类名找到相对应的标签,然后设置属性。
.class名称{属性:值;}
1.每个HTML标签都有一个属性叫做class,
也就是说每个标签都可以设置类名。
2.同一个界面中class的名称是可以重复的。
3.在编写class选择器时一定要在class名称前面加上.
4.类名的命名规范和id的命名规范是一样的。
5.类名是专门用来给某个特定的标签设置样式的。
6.在HTML中每个标签可以同时绑定多个类名格式:class="类名1 类名2 ···"
后代选择器
找到指定标签的后代标签,设置属性。
标签名称1 标签名称2{属性:值}
先找到名称叫做标签1的标签,然后再在这个标签下面取值查找所有名称叫做标签2的标签,然后设置属性。
1.后代选择器必须用空格隔开。
2.后代不仅仅是儿子,也包括孙子/重孙子
只要最终是放到指定标签中的都是后代
3.后代选择器不仅仅是使用标签名称,还可以使用其他选择器
例如: .class名 标签名{}
4.可以设置多重后代,必须从最外面的标签开始找
例如:标签名 标签名2 标签名3···{}
子元素选择器
找到指定标签中所有特定的直接子元素,然后设置属性
标签名称1>标签名称2{属性:值;
}
先找到名称叫做“标签名称1”的标签,然后在这个标签中查找所有直接子元素名称叫做“标签名称2”的元素。
1.子元素选择器只会查找儿子,不会查找其他被嵌套的标签。
2.子元素选择器之间用>连接,不能出现空格。
3.子元素选择器不仅仅可以使用标签名称,还可以使用其他选择器。
4.子元素选择器可以通过>符号一直延续下去。
交集选择器
给所有选择器选中的标签中,相交的那部分标签设置属性。
 
1.选择器和选择器之间没有任何连接符号。
2.选择器可以使用标签名称/id名称/class名称。
并集选择器
给所有选择器选中的标签设置属性。
选择器1,选择器2{属性:值}
1.并集选择器必须使用,(逗号)连接。
2.选择器可以使用标签名称/id名称/class名称。
相邻兄弟选择器/通用兄弟选择器
相邻兄弟选择器:给指定选择器后面紧跟着的那个选择器选择的标签设置属性。

通用兄弟选择器:

给指定选择器后面所有选择器选中的标签添加属性。
选择器1+选择器2{属性:值}
选择器1~选择器2{属性:值
}
1.相邻兄弟选择器必须通过+连接。
2.相邻兄弟选择器只能选中紧跟其后的那个标签,不能选择被隔开的标签。
1.通用兄弟选择器必须用~连接。
2.通用选择器选中的是指定选择器后面某个选择器选中的所有标签,无论有没有隔开都可以被选中。
序选择器 根据指定标签找到对应标签的同级第N个标签或者同级同类型的第N个标签
1.同级别的第几个
:first-child 选中同级别标签中的第一个标签
:last-child 选中同级别标签中的最后一个标签
:nth-child(n) 选中同级别标签中的第n个标签
:nth-last-child(n) 选中同级别标签中的倒数第n个标签
:only-child 选中同级别标签中的唯一一个标签
注意点:不区分类型2.同类型的第几个
:first-of-type 选中同级别同类型中的第一个标签。
:last-of-type 选中同级别同类型的最后一个标签。
:nth-of-type(n) 选中同级别同类型的第n个标签。
:nth-last-of-type(n) 选中同级别同类型的第n个标签。
:only-of-type 选中同级别同类型的唯一个标签。
                                无
属性选择器
根据指定的属性名称找到对应的标签,然后设置属性。
标签名[attribute]标签名[attribute=value]
                                   无
通配符选择器
给当前界面上所有的标签设置属性。
*{属性:值;}
由于通配符选择器是设置界面上所有的标签的属性,
所以在设置之前会遍历所有的标签,如果当前界面上的标签比较多,会导致性能比较差,所以在企业开发中一般不会选择通配符选择器。

~此文章参考李南江前端视频笔记内容。

CSS(一) 文字/文体属性、颜色属性和选择器合集相关推荐

  1. CSS中的颜色值与颜色属性

    文章目录 颜色模型 CSS颜色值的类型 颜色名称 rgb[a] rgba的新写法 CSS元素的透明度 hex十六进制值 hsl[a] 颜色值关键字 transparent currentColor C ...

  2. 文字排版不可不看的优秀案例合集

    文字在设计的过程中有很多容易被人忽视的细节性问题,其实是很重要的.因为感觉基本上是设计师都应该知道的事儿,这些细节可能是因为太浅显所以不被重视,可是有很多设计师在设计作品的时候还是很容易将其忽略,所以 ...

  3. html css如何渐变阴影,CSS 实现文字阴影 + 文字渐变色

    1. CSS 实现文字阴影 通过text-shadow属性可以为文字设置阴影 .text-shadow { font-size: 30px; color: maroon; text-shadow: 5 ...

  4. CSS颜色属性、文本文字属性、属性继承

    html零基础必看--html入门,编程就是如此简单 第六章:颜色属性.文本文字属性 一.颜色样式(颜色取值法) 1.颜色属性值取值方法 二.字体样式 1. color 文字颜色 2.font-siz ...

  5. WEB安全之DIV CSS基础(二):文字和文本的属性、列表样式和伪类超链接

    WEB安全之DIV CSS基础(二):文字和文本的属性.列表样式和伪类超链接) 文字和文本的属性 文字属性 文本属性 列表样式和伪类超链接 项目符号列举 设置列表项标记 超链接 文字和文本的属性 文字 ...

  6. 【攻破css系列——第二天】字体属性和文字属性

    文章目录 1. 字体属性 1.1 定义 1.2 字体类型 1.2.1 定义 1.2.2 语法 1.2.3 使用实例 1.3 字体大小 1.3.1 定义 1.3.2 语法 1.3.3 使用实例 1.4 ...

  7. 前端基础(五)_CSS文本文字属性、背景颜色属性

    CSS文本文字属性 1.文字属性 1.1.字号 font-size:38px; 浏览器默认16px; 1.2.字体 font-family: 如果字体名称包含空格,字体名称上加引号: 中文字体名称加引 ...

  8. CSS边框、边距、轮廓(边框宽度/颜色/各边/简写属性/圆角边框/内外边距/高度宽度/框模型/轮廓宽度/颜色/属性/偏移)——万字长文|一文搞懂

    目录 CSS边框 CSS 边框属性 CSS 边框样式 实例 CSS 边框宽度 实例 特定边的宽度 实例 CSS 边框颜色 实例 特定边框的颜色 实例 HEX 值 实例 RGB 值 实例 HSL 值 实 ...

  9. html/css使文字图片div在整个网页上居中(水平居中+垂直居中)transform属性配置

    在使用html/css编写网页时,有时需要让一段文字或图片等在整个网页居中,即既是水平居中又是垂直居中,而单单使用 text-align:center 只是让文字在水平上居中,而无法在垂直方向上也居中 ...

最新文章

  1. 新一代算法模型:从搜索、推荐到广告!
  2. 面试高频题:Spring和SpringMvc父子容器你能说清楚吗
  3. 命令行下运行 java someClass.class出现 “错误:找不到或无法加载主类someClass ” 的解决方案
  4. html中Marquee属性详解
  5. 【转】Mybatis传多个参数(三种解决方案)
  6. linux mount 挂载U盘
  7. 关联规则 java_Java实现的关联规则算法
  8. 局域网共享问题全方位解决
  9. 剑指offer---用两个栈实现队列
  10. 华为畅享max有没有人脸识别_看到Meeting视频会议一体机融合华为分布式能力,共建智能会议新体验...
  11. java.lang.IllegalArgumentException: Could not resolve placeholder ‘stu.age‘ in value “${stu.age}
  12. UITableView基本用法
  13. 寻找最大的k个数问题
  14. 周志华教授:长文详细教你如何做研究与写论文?
  15. python中字符串中文乱码_Python中文乱码的处理
  16. [KALI] 开启ssh远程连接
  17. 罗马音平假名中文可复制_200个中文常见姓氏的日语发音,再也不愁起日文名字啦!...
  18. Ubuntu16.04 开机开启小键盘数字键,时默认开NumLock灯
  19. SIM7600CE模块MQTT协议的AT指令流程
  20. 直观理解线性插值(linear interpolation)和双线性插值(Bilinear interpolation)

热门文章

  1. OnDraw和OnPaint函数的区别
  2. cmmi 生产率和质量模型_多台显示器和生产率
  3. 第五章      高级搜索
  4. html6语言,html语言6——10
  5. 环球资源移动电子展揭幕
  6. CSS 实现内容区域高度自适应,超出有滚动条
  7. Mal-PEG2000-Cy5.5;Cy5.5-PEG-Maleimide 花箐染料Cy5.5-聚乙二醇-马来酰亚胺
  8. mysql数据库入门(没学会,算我输)-姥姥家的程序员
  9. 爱普生曝残墨事件 龚滨良:双重标准损害消费者
  10. 热血三国攻略之养兵赚钱