css选择符权重及css文本属性

选择符的权重:

​ id > class > 标签

四个数字表示权重:

​ 内联样式表 -> 1000

​ id -> 100

​ class -> 10

​ 标签 -> 1

​ 伪类选择符 -> 10

​ 通配符 -> 0

​ 包含选择符的权重为权重之和

​ eg :

​ #box div{} 100 + 1 == 101

​ .wrap .con p{} 10 + 10 + 1 == 21

​ 群组选择符的权重是不会发生变化的,保持原来的权重值。

​ !important 权重是最高的

css的层叠性:

​ 产生权重关系,必然体现css的层叠性。

css属性:width\height\background\color\border…

​ css的属性值:常规属性值、法定属性值。

​ 常规属性值:100px\200px\300px

​ 法定属性值:官方指定一个单词,具有某种意义。

文本属性:

1: font-size:; 控制文本大小

​ a:为了消除系统之间显示差异,规定:16px 为标准字体大小。

​ b:文本大小设置,设置为偶数。

​ c:PC端项目,设置最小尽量别低于12px ;

​ d:从ps中获取文本大小,汉字量取文本高度。

​ e:文本单位: px \ em \ pt(磅)【常用在印刷领域】
​ 12px == 9pt

​ em

​ ( 相对大小单位,相对于父元素的font-size值而定 )

​ (默认情况下, 1em == 16px)

​ f:(了解)

​ xx-small =9px

​ x-small =11px

​ small =13px

​ medium =16px

​ large =19px

​ x-large =23px

​ xx-large =27px

2:color:; 控制网页中的文本颜色

​ 颜色值:

​ a:十六进制表示颜色值:

​ 16进制数字:0 - 9 a - f

​ 颜色值: #ff0000

​ 6个数字:

​ 前两位 红色

​ 中间两位 绿色

​ 最后两位 蓝色

​ b: RGB(255,0,0) 模式

​ 拓展: rgba(255,0,0,0.5);

3:font-family:;控制的是网页中字体类型。

​ 默认的字体类型:“微软雅黑”

​ 系统能支持的字体:web安全字体:微软雅黑、宋体、楷体…

​ 英文默认的字体:Arial

​ 语法:

​ font-family:字体1,字体2,字体3,…

​ 注:

​ a:中文字体必须放在引号里面

​ b:如果一个字体多个单词组成 也要放在引号里面

​ c:如果字体是一个单词 不需要引号。

​ d:先写英文字体,后写中文字体。

4:font-weight:;控制文本是否加粗

​ 属性值:

​ bold 加粗

​ bolder 加粗

​ normal 清除加粗,恢复常规文本

​ 100 - 900

​ 100 - 500:不加粗

​ 600 - 900:加粗的状态

5: font-style:;控制文本的倾斜

​ 属性值:

​ italic 倾斜

​ oblique 倾斜(倾斜幅度更大,但是一般不会有明显变化)

​ normal 恢复常规文本

6: line-height:; 控制文本的行高。

​ a: 从ps设计图上:怎么获取行高:从第一行开始量到第二行开始。

​ b:

​ 单行文本:

​ 如果让单行文本在容器里面上下居中,line-height设置容器高度即可

​ 显示状态:

​ 小于容器高度的时候:文本往上移动

​ 大于容器高度的时候:文本往下移动

7:text-align:; 控制文本的水平对齐方式

​ 属性值:

​ center 居中对齐

​ left 左对齐

​ right 右对齐

​ justify 两端对齐

8:text-decoration:; 文本修饰(下划线、上划线、删除线)

​ 属性值:

​ none 清除下划线

​ underline 添加下划线

​ overline 添加上划线

​ line-through 添加删除线

9: text-indent:;

​ text-indent:2em;首行缩进:

​ text-indent能设置负值:文字往左走。(悬挂式缩进)

10:字间距、词间距

​ letter-spacing:; 字间距

​ word-spacing:; 词间距

11: text-transform:; 控制文本大小写。

​ 属性值:

​ uppercase 大写

​ lowercase 小写

​ capitalize 每个单词的首字母大写

浮动!

​ 属性:float

属性值: left

​ right

​ none

特点:

​ a:添加浮动之后,元素是不占据空间。

​ b:如果让多个元素横向进行排列,所有的排列的元素,都必须添加浮动。

​ c:如果子元素添加浮动,宽度大于父元素的时候,后面的元素被挤到下一行。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值