文章使用YD的排版，点击原文地址，更方便查阅。
分析
有一个标题(H1),还有一些段落(P)：
标题是居中的，段落也是居中的.所以我们可以设置H标签和P标签的align属性等于center来实现
标题和段落都有颜色, 都有字体都有大写，##所以需要给文字包裹一个font标签, 然后通过font标签来设置颜色以及大小。
通过标签来修改样式的缺点:
需要记忆哪些标签有哪些属性，如果该标签没有这个属性，那么设置了也没效果。
当需求变更时我们需要修改大量的代码才能满足现有的需求。
HTML只有一个作用就是用来添加语义。
所以在企业开发中修改样式都是交个CSS来做
那么通过CSS来修改样式有什么好处?
不用记忆哪些属性属于哪个标签。
当需求变更时我们不需要修改大量的代码就可以满足需求。
在前端开发中CSS只有一个作用, 就是用来修改样式。
那么我们要如何使用CSS添加样式呢?
CSS格式
<style type="text/css">
标签名称{
属性名称: 属性对应的值;
...
}
</style>
注意点
style标签必须写在head标签开始和结束标签之间(也就是必须和title标签是兄弟关系)
style标签中的type属性其实可以不用写, 默认就是type=”text/css”
设置样式时必须按照固定的格式来设置.key: value;
其中:不能省略, 分号大多数情况下也不能省略.
CSS学习一共分为两大部分, 一个是CSS属性, 另一个是CSS选择器
文字属性
1.规定【文字样式】的属性
格式: font-style: italic
取值:
normal: 正常的, 默认就是正常的。
italic: 倾斜的。
2.规定【文字粗细】的属性
格式: font-weight: bold
取值:
bold 加粗
bolder 比加粗还要粗
lighter 细线, 默认就是细线
100~900之间整百的数字
快捷键
通常情况下每单词的首字母即可
fw font-weight:;
fwb font-weight: bold;
fwbr font-weight: bolder;
3.规定【文字大小】的属性
格式: font-size: 30px;
单位: px(像素 pixel);
注意: 通过font-size设置大小一定要带单位, 也就是一定要写px;
4.规定【文字字体】的属性
格式: font-family: “楷体”
注意:
如果取值是中文, 需要用双引号或者单引号括起来。
设置的字体必须是用户电脑里面已经安装的字体。
5.文字属性的补充
如果设置的字体不存在, 那么系统会使用默认的字体来显示。
如果设置的字体不存在, 而我们又不想用默认的字体来显示怎么办?
格式: font-family:”字体1”, “备用方案”, …;
如果想给中文和英文分别设置单独的字体, 怎么办？
但凡是中文字体, 里面都包含了英文。
但凡是英文字体, 里面都没有包含中文。
也是就是说中文字体可以处理英文, 而英文字体不能处理中文。
补充在企业开发中最常见的字体有以下几个。
中文: 宋体/黑体/微软雅黑
英文: “Times New Roman”/Arial
还需要知道一点, 就是并不是名称是英文就一定是英文字体
因为中文字体其实都有自己的英文名称, 所以是不是中文字体主要看能不能处理中文
宋体 SimSun
黑体 SimHei
微软雅黑 Microsoft YaHei
6.文字属性的缩写
<!--<style>
p{
/*
font-style: italic;
font-weight: bold;
font-size: 10px;
font-family:"楷体";
*/
font:bold italic 10px "楷体";
}
</style>-->
注意:
在这种缩写格式中有的属性值可以省略
sytle可以省略
weight可以省略
在这种缩写格式中style和weight的位置可以交换
在这种缩写格式中有的属性值是不可以省略的
size不能省略
family不能省略
size和family的位置是不能顺便乱放的
size一定要写在family的前面, 而且size和family必须写在所有属性的最后
文本属性
1. 文本装饰的属性 decoration=装饰
格式: text-decoration: underline;
取值:
underline 下划线
line-through 删除线
overline 上划线
none 什么都没有，最常见的用途就是用于去掉超链接的下划线。
2.文本水平对齐的属性
格式: text-align: right;
取值:
left 左
right 右
center 中
3.文本缩进的属性
格式: text-indent: 2em;
取值:
2em, 其中em是单位, 一个em代表缩进一个文字的宽度
选择器
标签选择器
根据指定的标签名称, 在当前界面中找到所有该名称的标签, 然后设置属性。
标签名称{
属性:值；
}
注意
- 标签选择器选中的是当前所有界面的标签, 而不能单独选中某一个标签。
- 标签选择器无论标签藏的多深都能选中。
- 只要是HTML中的标签就可以作为标签选择器
id选择器
根据指定的id名称找到对应的标签, 然后设置属性;
#id名称{
属性:值；
}
注意
- 每个HTML标签都有一个属性叫做id, 也就是说每个标签都可以设置id;
- 在同一个界面中的id的名称是不可以重复的;
- 在编写id选择器时一定要在id名称前面加#;
- id的名称是有一定的规范的;
- 在企业开发中一般情况下如果仅仅是为了设置样式, 我们不会使用id, 因为在前端开发中id是留给js使用的。
类选择器
根据指定的类名称找到对应的标签, 然后设置属性;
.类名{
属性:值;
}
注意
- 每个HTML标签都有一个属性叫做class, 也就是说每个标签都可以设置类名。
- 在同一个界面中class的名称是可以重复的。
- 在编写class选择器时一定要在class名称前面加上”.”;
- 类名就是专门给CSS来设置样式的;
- 在HTML中每个标签可以同时绑定多个类名;
那么我们可以总结一下，class选择器与id选择器它们有什么样的区别呢？
……
后代选择器
找到指定标签的所有特定的后代标签, 设置属性
标签名称1 标签名称2 {
属性:值;
}
从左至右，依次往下查找, 然后设置属性。
只要后代的标签都等于标签名称2, 都会被设置属性, 就相当于这个层级的标签选择器
子元素选择器
找到指定标签中所有的特定的直接子元素, 然后设置属性。
标签名称1>标签名称2 {
属性:值;
}
子元素选择器，只会查找儿子，不会查找嵌套的元素
后代选择器和子元素选择器不仅仅可以使用标签名称，还可以使用其它选择器。
在开发中
如果想选中指定标签中的所有特定的标签, 那么就使用后代选择器
如果只想选中指定标签中的所有特定儿子标签, 那么就使用子元素选择器
交集选择器
是所有选择器选中的标签中, 相交的那部分标签设置属性；
选择器1选择器2 {
属性:值;
}
注意
- 选择器和选择器之间没有任何的连接符号
- 选择器可以使用标签名称/id名称/class名称
- 交集选择器仅仅作为了解, 开发中用的并不多
并集选择器
给所有选择器选中的标签设置属性
选择器1,选择器2{
属性:值;
}
注意
- 并集选择器必须使用,来连接
- 选择器可以使用标签名称/id名称/class名称
兄弟选择器
兄弟选择器 : 给指定选择器后面紧跟的那个选择器中的标签设置属性;
兄弟选择器分为两个种
相邻兄弟选择器 CSS2
给指定选择器后面紧跟的那个选择器选中的标签设置属性;
选择器1+选择器2{
属性:值;
}
注意
- 相邻兄弟选择器必须通过+连接;
- 相邻兄弟选择器只能选中紧跟其后的那一个标签, 不能选中被隔开的标签;
比如 h1+p 设置属性后, 只给h1标签相邻的那一个p标签被设置样式，后面还有的p标签不会被设置样式;
通用兄弟选择器 CSS3
通用兄弟选择器 : 给指定选择器后面的所有选择器选中的所有标签设置属性;
选择器1~选择器2{
属性:值;
}
注意
- 通用兄弟选择器必须用~连接
- 通用兄弟选择器选中的是指定选择器后面某个选择器选中的所有标签, 无论有没有被隔开都可以选中
序选择器
CSS3中新增的选择器最具代表性的就是序选择器
1.同级别的第几个
: frist-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 选中父元素中唯一类型的某个标签
3.其它
:nth-child(odd) 选中同级别中的所有奇数
:nth-child(even) 选中同级别中的所有偶数
:nth-child(xn+y)
x和y是用户自定义的, 而n是一个计数器, 从0开始递增
属性选择器
属性选择器: 根据指定的属性名称找到对应的标签, 然后设置属性
[attribute]
作用:根据指定的属性名称找到对应的标签, 然后设置属性
[attribute=value]
作用: 找到有指定属性, 并且属性的取值等于value的标签, 然后设置属性
最常见的应用场景, 就是用于区分input属性
1.属性的取值是以什么开头的。
[attribute |= value] CSS2
[attribute^=value] CSS3
案例一、<img src="" alt="abcwwwmmm">
案例二、<img src="" alt="abc-wwwmmm">
两者之间的区别:
CSS2中的只能找到value开头,并且value是被-和其它内容隔开的
CSS3中的只要是以value开头的都可以找到, 无论有没有被-隔开
上述代码中，案例一和二 使用 [attribute^=value] 修改样式都会成功，使用 [attribute|=value] 只有案例二 才会起作用。
2.属性的取值是以什么结尾的
[attribute$=value] CSS3
3.属性的取值是否包含某个特定的值得
[attribute~=value] CSS2
[attribute*=value] CSS3
两者之间的区别:
CSS2中的只能找到独立的单词, 也就是包含value,并且value是被空格隔开的
CSS3中的只要包含value就可以找到
CSS三大特性
[ ] 继承性
[ ] 层叠性
[ ] 优先级
什么是继承性???
- [x] 给父元素设置一些属性, 子元素也可以使用, 这个我们就称之为继承性
注意
并不是所有的属性都可以继承, 只有以color/font-/text-/line-开头的属性才可以继承
在CSS的继承中不仅仅是儿子可以继承, 只要是后代都可以继承
继承性中的特殊性
a标签的文字颜色和下划线是不能继承的
h标签的文字大小是不能继承的
应用场景:
一般用于设置网页上的一些共性信息, 例如网页的文字颜色, 字体,文字大小等内容
什么是层叠????
- [x] 层叠性就是CSS处理冲突的一种能力
注意点:
层叠性只有在多个选择器选中”同一个标签”, 然后又设置了”相同的属性”, 才会发生层叠性
- 什么是优先级?
- [x] 当多个选择器选中同一个标签, 并且给同一个标签设置相同的属性时, 如何层叠就由优先级来确定
- 优先级判断的三种方式
间接选中就是指继承
如果是间接选中, 那么就是谁离目标标签比较近就听谁的
相同选择器(直接选中)
如果都是直接选中, 并且都是同类型的选择器, 那么就是谁写在后面就听谁的
不同选择器(直接选中)
如果都是直接选中, 并且不是相同类型的选择器, 那么就会按照选择器的优先级来层叠
- 什么是 !important ???
- [x] 用于提升某个直接选中标签的选择器中的某个属性的优先级的,可以将被指定的属性的优先级提升为最高
注意
1. !important只能用于直接选中, 不能用于间接选中
通配符选择器选中的标签也是直接选中的
!important只能提升被指定的属性的优先级, 其它的属性的优先级不会被提升
!important必须写在属性值得分号前面
!important前面的感叹号不能省略
- 什么是优先级的权重?
[x] 当多个选择器混合在一起使用时, 我们可以通过计算权重来判断谁的优先级最高
权重的计算规则
- 首先先计算选择器中有多少个id, id多的选择器优先级最高
- 如果id的个数一样, 那么再看类名的个数, 类名个数多的优先级最高
- 如果类名的个数一样, 那么再看标签名称的个数, 标签名称个数多的优先级最高
- 如果id个数一样, 类名个数也一样, 标签名称个数也一样, 那么就不会继续往下计算了,那么此时谁写在后面听谁的,也就是说优先级如果一样, 那么谁写在后面听谁的
注意
只有选择器是直接选中标签的才需要计算权重, 否则一定会听直接选中的选择器的