CSS(一) 文字/文体属性、颜色属性和选择器合集
一、规定文字的属性:
属性类型 | 取值 | 快捷键 | 注意点 |
文字样式 |
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(一) 文字/文体属性、颜色属性和选择器合集相关推荐
- CSS中的颜色值与颜色属性
文章目录 颜色模型 CSS颜色值的类型 颜色名称 rgb[a] rgba的新写法 CSS元素的透明度 hex十六进制值 hsl[a] 颜色值关键字 transparent currentColor C ...
- 文字排版不可不看的优秀案例合集
文字在设计的过程中有很多容易被人忽视的细节性问题,其实是很重要的.因为感觉基本上是设计师都应该知道的事儿,这些细节可能是因为太浅显所以不被重视,可是有很多设计师在设计作品的时候还是很容易将其忽略,所以 ...
- html css如何渐变阴影,CSS 实现文字阴影 + 文字渐变色
1. CSS 实现文字阴影 通过text-shadow属性可以为文字设置阴影 .text-shadow { font-size: 30px; color: maroon; text-shadow: 5 ...
- CSS颜色属性、文本文字属性、属性继承
html零基础必看--html入门,编程就是如此简单 第六章:颜色属性.文本文字属性 一.颜色样式(颜色取值法) 1.颜色属性值取值方法 二.字体样式 1. color 文字颜色 2.font-siz ...
- WEB安全之DIV CSS基础(二):文字和文本的属性、列表样式和伪类超链接
WEB安全之DIV CSS基础(二):文字和文本的属性.列表样式和伪类超链接) 文字和文本的属性 文字属性 文本属性 列表样式和伪类超链接 项目符号列举 设置列表项标记 超链接 文字和文本的属性 文字 ...
- 【攻破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 ...
- 前端基础(五)_CSS文本文字属性、背景颜色属性
CSS文本文字属性 1.文字属性 1.1.字号 font-size:38px; 浏览器默认16px; 1.2.字体 font-family: 如果字体名称包含空格,字体名称上加引号: 中文字体名称加引 ...
- CSS边框、边距、轮廓(边框宽度/颜色/各边/简写属性/圆角边框/内外边距/高度宽度/框模型/轮廓宽度/颜色/属性/偏移)——万字长文|一文搞懂
目录 CSS边框 CSS 边框属性 CSS 边框样式 实例 CSS 边框宽度 实例 特定边的宽度 实例 CSS 边框颜色 实例 特定边框的颜色 实例 HEX 值 实例 RGB 值 实例 HSL 值 实 ...
- html/css使文字图片div在整个网页上居中(水平居中+垂直居中)transform属性配置
在使用html/css编写网页时,有时需要让一段文字或图片等在整个网页居中,即既是水平居中又是垂直居中,而单单使用 text-align:center 只是让文字在水平上居中,而无法在垂直方向上也居中 ...
最新文章
- 新一代算法模型:从搜索、推荐到广告!
- 面试高频题:Spring和SpringMvc父子容器你能说清楚吗
- 命令行下运行 java someClass.class出现 “错误:找不到或无法加载主类someClass ” 的解决方案
- html中Marquee属性详解
- 【转】Mybatis传多个参数(三种解决方案)
- linux mount 挂载U盘
- 关联规则 java_Java实现的关联规则算法
- 局域网共享问题全方位解决
- 剑指offer---用两个栈实现队列
- 华为畅享max有没有人脸识别_看到Meeting视频会议一体机融合华为分布式能力,共建智能会议新体验...
- java.lang.IllegalArgumentException: Could not resolve placeholder ‘stu.age‘ in value “${stu.age}
- UITableView基本用法
- 寻找最大的k个数问题
- 周志华教授:长文详细教你如何做研究与写论文?
- python中字符串中文乱码_Python中文乱码的处理
- [KALI] 开启ssh远程连接
- 罗马音平假名中文可复制_200个中文常见姓氏的日语发音,再也不愁起日文名字啦!...
- Ubuntu16.04 开机开启小键盘数字键,时默认开NumLock灯
- SIM7600CE模块MQTT协议的AT指令流程
- 直观理解线性插值(linear interpolation)和双线性插值(Bilinear interpolation)