初学Web笔记 css day01

一.表单——关联控件(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
}

用于给所有的标签设置公共的样式，选择器优先级非常低
练习：查找h1，设置样式，和通用选择器对比优先级。

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;
solid 实线
宽度 width
高度 height