CSS知识

表单——关联控件(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选择器