CSS
- 作用:修改样式
- 固定格式:
<style type="text/css">
标签名称{
属性名称：值
...
}
<style>
- 注意点:
- 1.style标签必须写在head标签的开始和结束标签之间，也就是和title兄弟关系
- 2.style标签的type其实可以不用写，默认就是type=“text／css”
- 3.设置样式时必须按照固定的格式来设置。key：value，其中:不能省略，分号大多数情况下也不能省略
CSS常见属性
1.规定文字样式的属性
- 规定文字样式的属性
- 格式：font-style：italic；
- italic:倾斜的，fs
- normal:正常的，默认，fsm
2.规定文字粗细的属性
- 格式：font-weight： bold;
- 单词取值：
- bold 加粗
- bolder 比加粗还粗
- lighter 细线，默认就是细线
- 快捷键
- fw font-weight:;
- fwb font-weight:bold;
- 数字取值：100～900整数
3.规定文字大小的属性
- font-size:30px;
- 单位:px(像素 pixel)
- 注意点：通过font-size设置大小一定要带单位
- 快捷键：
- fz font-size:;
- fz30 font-size:30px;
4.规定文字字体的属性
- 格式：font-family：“楷体”;
- 注意点:
- 1.如果取值是中文，需要用单引号或双引号括起来
- 2.设置的字体必须是用户电脑里已经安装的字体
- 快捷键:
- ff font-family:;
- 如果设置的字体不存在，可以给字体设置备选方案
- 格式:font-family:"字体1","备选字体1",...;
- 如果想给中英文分别单独设置字体，怎么办？
- 但凡是中文字体，里面都包含了英文
- 但凡是英文字体，里面都没有包含中文
- 也就是中文字体可以处理英文，而英文字体不能处理中文
- 注意点：如果想给界面中的英文单独设置字体，那么英文的字体必须写在中文的前面
- 补充：企业开发中国年最常见的字体
- 中文：宋体／黑体／微软雅黑
- 英文：Times New Roman／Arial
- 英文名不代表英文字体，只要能处理中文就是中文字体
- 宋体 SimSun
- 黑体 SimHei
- 微软雅黑 Microsofy YaHei
文字属性的缩写
格式
font:style weight size family; font:italic bold 10px "楷体";- 注意点:
- 其中style weight 可以省略，可以交换位置
- size family 不能省略，不能交换位置，size一定要在family前面
- size和family一定要写在后面
文本属性
1.文本装饰属性
- 格式:text-decoration:underline;
- 取值:
- underline 下划线 tdu
- line-through 删除线 tdl
- overline 上划线 tdo
- none 空，最常用于去除超链接的下划线 td
2.文本水平对齐属性
- 格式：text-align：right；
- 取值：left right center
3.文本缩进属性
- 格式：text-indent：2em； ti2e
- 作用：开头缩进，em代表一个文字的宽度
4.颜色属性
- 格式:color:值;
- 取值:
- 1.1 英文单词 一般用于调试
- 1.2 rgb 三原色 格式:rgb(0,0,0);,取值0～255，每一格像素都有三个灯，红绿蓝，255发光最大,三个值相同就是灰色，越小偏黑，越大偏白
- 1.3 rgba CSS3推出来的，a代表透明度
- 1.4 十六进制 本质就是rgb，每两位表示一个颜色，比如#FF0000，转为十进制公式，用十六进制的第一位*16+十六进制的第二位=十进制
- 1.5 十六进制缩写，在CSS中十六进制每两位的值相同，并且是相同的颜色，2，2，2的格式，就可以缩写，比如#F00
标签选择器
- 作用:根据指定的标签名称，在当前界面中找到所有该名称的标签，然后设置属性
- 注意点:
- 1.选中的是所有标签，不能单独选中某一个
- 2.标签选择器无论标签藏得多深都能选中
- 3.只要是HTML中的标签就可以作为标签选择器
id选择器
- 根据id设置标签属性
- 格式:#id名称{属性:值}
- 注意点:每个标签都可以设置id，在同一个界面中id名称不能重复，编写id名称时要加#，id名称只能包含字母数字和下划线，不能以数字开头，id名称不能是标签名称，在企业开发中，仅仅是为了设置样式则不使用id，因为在前端开发中id是供js使用的。
类选择器
- 根据类名设置标签属性
- 格式:.类名{属性:值}
- 注意点:每个标签都可以设置类名(class)，在同一个界面中类名不能重复，编写类名时要加.，id名称只能包含字母数字和下划线，不能以数字开头，id名称不能是标签名称，类名是专门给某个特定的标签设置样式的，在html中每个标签可以同时绑定多个类名:class="类名1，类名2,..."。
id和类选择器的区别
- 1.id不可以重复，class可以重复
- 2.一个html标签只能绑定一个id，但可以绑定多个class名称
- 3.id以#开头，class以.开头
- 4.id一般用于js
- 5.类名的使用可以看出开发经验，交叉使用类名设置相同的属性值
后代选择器
- 找到指定标签的所有特定的后代，设置属性
- 格式:标签名称1 标签名称2{属性:值;}
- 注意点:后代选择器必须用空格隔开，后代不仅是儿子，包括孙子/重孙子, 后代选择器不仅可以使用标签名称，还可以使用id，class嵌套使用
子元素选择器
- 作用:找到指定标签中所有特定的直接子元素，设置属性
- 格式:标签名称1>标签名称2{属性:值;}
- 先找到标签名称1的标签，然后查找直接子元素中叫做标签名称2的元素
- 注意点:子元素选择器只会查找儿子，子元素选择器之间只能使用>号隔开，子元素选择器不仅仅可以使用标签，也可以使用id和class嵌套使用，子元素选择器可以通过>号一直延续下去,例如:div>ul>li>p{}
后代选择器和子元素选择器的区别
- 区别
- 1.后代选择器使用空格连接，子元素选择器使用>号连接
- 2.后代选择器会选中指定标签汇总所有特定的后代标签，包括儿子孙子重孙子;子元素选择器只会选中指定标签中，所有特定的直接标签，只包括儿子
- 共同点
- 1.都可以通过各自的连接符号一直延续下去
- 在企业开发中如何选择
- 1.如果只要选中指定标签中所有特定的儿子标签则使用子元素选择器，如果还需要包括孙子重孙子，就使用后代选择器
交集选择器
- 作用:给所有选择器选中的标签中，相交的那部分标签设置属性
- 格式:选择器1选择器2{属性:值;}
- 注意点:选择器之间没有连接符号,选择器可以使用标签名称／id／class，交集选择器仅仅作为了解
并集选择器
- 作用:给所有选择器选中的标签设置属性
- 格式:选择器1,选择器2{属性:值;}
- 注意点:并集选择器必须使用,号连接，可以使用标签名/id/class
兄弟选择器
- 1.相邻兄弟选择器 CSS2
- 作用:给指定选择器的相邻指定的选择器的标签设置属性
- 格式:选择器1+选择器2{属性:值;}
- 注意点:必须用+号相连，相邻兄弟选择器只能选中紧跟其后的那个标签，不能选中被隔开的标签，
- 2.通用兄弟选择器 CSS3
- 作用:给指定选择器后的所有选择器选中的所有标签设置属性
- 格式:选择器1～选择器2{属性:值;}
- 注意点:~相连，不论有么有被隔开都能设置属性
序选择器
- CSS3中的选择器最具有代表性的就是序选择器
- 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 选中父元素中唯一类型的某个标签
- 3.高级用法
- 上面的n可以用odd、even分别选中奇数和偶数
- 或者用xn+y,x和y是用户自定义的，而n是一个计数器，从0开始递增
- x=2,y=0,不就是偶数嘛
- x=2,y=1,不就是奇数嘛
属性选择器
- 作用:根据指定的属性名称找到对应的标签设置属性
attribute
- 格式:[attribute=value]
- 作用:找到有指定属性，并且属性的取值等于value的标签设置属性
- 应用场景:常用于区分input属性
- 1.属性的取值以什么开头
- [attribute|=value] CSS2
- [attribute^=value] CSS3
- CSS2的只能找到value开头，并且value是被"-"和其他内容隔开的，CSS3的只要是以value开头的都可以找到，无论是否被"-"隔开
- 2.属性的取值以什么结尾
- [attribute$=value] CSS3
3.属性的取值是否包含某个特定的值
- [attribute~=value] CSS2
- [attribute*=value] CSS3
- CSS2中只能找到独立的单词，也就是包含value，并且value被空格隔开的;CSS3中只要包含value都可以找到
通配符选择器
- 作用:给当前界面上所有标签设置属性
- 格式:*{属性:值;}
- 注意点:由于通配符选择器是设置界面上所有标签的属性，性能差，企业级开发一般不会用
CSS三大特性
继承性
- 作用:给元素设置一些属性，子元素也可以使用
注意点
- 1.并不是所有的属性都可以继承,只有以color/font-/text-/line开头的属性才可以继承
- 2.在CSS的继承中不仅仅是儿子可以继承，只要是后代都可以继承
- 3.继承中的特殊性:
- 3.1 a标签的文字颜色和下划线是不能继承的
- 3.2 h标签的文字大小是不能继承的
应用场景:一般用于设置网页上的一些共性信息，例如网页的文字颜色、文字和字体大小等
层叠性
- 作用:CSS处理冲突的能力，比如给同一个标签通过两种选择器设置了不同的颜色，那么有一种颜色会被覆盖
- 注意点:层叠性只有在多个选择器选中"同一个标签",然后又设置了相同的属性才会发生层叠性
优先级
- 作用: 当多个选择器选中同一个标签，并给同一个标签设置相同属性时，如何层叠就由优先级确定
- 优先级判断的三种方式
- 是否是直接选中(间接选中就是指继承),如果是间接选中，那么就是谁离目标标签近就听谁的
- 相同选择器,如果都是直接选中，并且同类型，那么后面写的覆盖前面
- 不同选择器,按照优先级层叠,id>类>标签>通配符>继承>浏览器默认
!important
- 不同选择器,按照优先级层叠,id>类>标签>通配符>继承>浏览器默认
- 作用:提升某个直接选中标签的选择器中某个属性的优先级，提升至最高
- 注意点:
- !important职能用于直接选中，不能用于间接选中
- 通配符选择器中的标签也是直接选中的
- !important只能提升被指定的属性的优先级,其它的属性优先级不会被提升
- !important必须写在属性值结尾分号的前面
- !important前面的感叹号不能省略
优先级的权重
- 作用:当多个选择器混合在一起使用时，我们可以通过计算权重来判断谁的优先级最高
- 权重当计算规则
- 1.id个数多，优先级高
- 2.id个数相同，类名多，优先级高
- 3.id个数相同,类名个数相同，标签名称数多，优先级高
- 4.id个数相同，类名个数相同，标签名称数相同，后面写的优先级高,也就是优先级相同，那么听后面的
CSS元素的显示模式
- 在HTML中HTML将所有的标签分为两类, 分别是容器级和文本级
- 在CSS中CSS也将所有的标签分为两类, 分别是块级元素和行内元素
- 什么是块级元素, 什么是行内元素?
块级元素会独占一行,行内元素不会独占一行
容器级的标签
- div h ul ol dl li dt dd ...
- 文本级的标签
span p buis stong em ins del ...
块级元素
- p div h ul ol dl li dt dd
- 行内元素
- span buis strong em ins del
2.块级元素和行内元素的区别?
2.1块级元素,独占一行
- 如果没有设置宽度, 那么默认和父元素一样宽
- 如果设置了宽高, 那么就按照设置的来显示
2.2行内元素,不会独占一行
- 如果没有设置宽度, 那么默认和内容一样宽
- 行内元素是不可以设置宽度和高度的
2.3行内块级元素
- 为了能够让元素既能够不独占一行, 又可以设置宽度和高度, 那么就出现了行内块级元素
3.显示模式的转换
- 修改display属性
- inline 行内
- block 块级
- inline-block 行内块级
- 修改display属性