WEB前端学习日志Day5

WEB前端学习日志Day5

今日学习内容总结：通过一天的学习，主要学习了CSS选择符的权重问题，并对css层叠性做解释，也学习了CSS的文本属性，并且初步了解了浮动。

1.CSS选择符的权重

选择符的权重： id > class > 标签

首先通过四个数字表示权重：

内联样式表 -> 1000
id -> 100
class -> 10
标签 -> 1
伪类选择符 -> 10
通配符 -> 0

当代码中出现包含选择符的多个class或是其自身的ID时，权重之和越高权重越大。
例:
// #box div{} 100 + 1 == 101
// .wrap .con p{} 10 + 10 + 1 == 21

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

！important 权重是最高的

2.CSS的层叠性

当问到css的层叠性问题时？ ->首先回答的应该就是权重问题!!!
产生权重关系，必然体现css的层叠性。
a:
首先最高的!important 是最重要的样式
b:
内联样式表 > 内部样式表和外部样式表
内部样式表和外部样式表和书写顺序有关，后写把前写的覆盖。
c：
选择符的权重：
id > class/伪类 > 标签
d：
各个不同级别的操作者的权重也不同
开发者样式权重 > 读者（用户）样式 > 浏览器样式
e：
当权重相同的时候，后写的样式会前写的样式 给 覆盖掉。

CSS的文本属性

首先回顾css的语法：
选择符{属性：属性值;}

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

css的属性值：常规属性值、法定属性值。
常规属性值：100px\200px\300px
法定属性值：官方指定一个单词，具有某种意义。

css文本属性

文本属性：

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个数字：
前两位 红色
中间两位 绿色
最后两位 蓝色
此方法一般可以通过PS软件中提取数值

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 每个单词的首字母大写