表单——关联控件(label)
用于进行form中文本与控件的关联
<label for=”要关联的控件的id的值”></label>
CSS概述
CSS: 层叠样式表/级联样式表
1995年诞生,2010年推出了CSS3
样式:颜色、背景、位置、大小、边框、阴影、动画…
总结:CSS用于控制HTML标签样式
CSS的书写位置
1.行内/内联样式
<开始标签 style=”color: red; background: pink;”></结束标签> |
style=”给当前的标签设置样式”
color 属性名 red属性值
属性名和属性值之间用冒号隔开,一个属性写完以英文的分号结束。
2.内部样式
在html中的head标签之间加入style标签,在标签内部写CSS样式 <style> 选择器{ color: red; } </style> |
3.外部样式
把CSS样式写在外部的一个CSS文件中
在html中head标签之间加入link标签,引入一个外部CSS文件 <link rel=”stylesheet” href=”引入的CSS文件”> |
4.样式优先级
!important > 行内样式 >(内部样式=外部样式)>浏览器默认样式 color: blue!important; 注意:尽量不要使用important,级别过高,将来无法进行覆盖。 |
5.使用场景
行内样式:会和HTML混杂写在一起,不好修改;一般用于JS中动态变化样式
内部样式:可以减少服务器请求次数,加快网站的打开速度;大型网站(百度首页,京东首页…)选择这种方法
外部样式:结构上显得简洁规范,便于后期维护。会请求多次,影响网站的打开速度。后期还可以实现代码的复用
选择器
用于查找标签,告诉浏览器要把样式渲染给指定的标签
选择器 {
CSS样式
}
1.通用选择器
会选择所有的html标签
* { color: red } |
用于给所有的标签设置公共的样式,选择器优先级非常低
2.标签选择器
标签名称{ CSS属性 } |
选中指定的html标签
优点:使用非常方便
缺点:选择面太广,不利于项目使用
3.类选择器
.类名称{ CSS样式 } <标签 class=”类名称1 类名称2”></标签> |
类名称是可以自定义的,是应用最多的一种选择器;调用的多个类之间用空格分隔
4.ID选择器
#ID选择器名称{ CSS样式 } <标签 id=”ID选择器”></标签> |
ID通常用于JS中,尽量少用
5.对比选择器的优先级
ID选择器 > 类选择器 > 标签选择器 > 通用选择器 100 10 1 权重值 |
6.群组选择器
h1, .a1, #a2{ CSS样式 } 多个选择器之间用逗号隔开 |
7.伪类选择器
假的类 —— 伪类选择器的名字不能自定义,是固定的
(1)悬停在标签的上方
a:hover{ CSS样式 } |
(2)标签被激活状态(鼠标按下不松开)
a:active{ CSS样式 } |
(3)针对于链接标签
a:link{} 链接未访问状态
a:visited{} 链接已访问状态
如果链接中同时出现了4种状态
:link > :visited > :hover > :active
(4)获取文本框的输入焦点
input:focus{ CSS样式 } |
8.属性选择器
通过标签的属性来查找标签
input[type]{ } 查找input标签中含有type属性 |
[type]{ } 查找所有标签中含有type属性的 |
[type=”text”]{ } 查找所有标签中含有type属性,并且值是text的 |
CSS样式
边框样式 border: 宽度 线的类型 颜色;
border: 1px solid red;
实线
宽度 width
高度 height
CSS样式优先级
1.不同选择器样式不同
当多个选择器选中同一个元素,不同的样式都会生效,它们之间不会产生冲突,样式会叠加。
2.不同选择器样式相同
权重相同的情况下,后边的把前边的给覆盖
CSS中有一些样式可以继承的,父元素的样式会传递给子元素 |
3.选择器权重计算
选择器 |
权重 |
继承样式 |
无 上课时间15:18 |
通用选择器 |
0 |
标签选择器 |
1 |
类(伪类)选择器 |
10 |
ID选择器 |
100 |
行内样式 style=”” |
1000 |
!important 优先级最高 |
10000 |
总结:选择器权重会叠加,但注意权重叠加不会越级
例如:11个类选择器不会超过一个id选择器