CSS基础

CSS: Cascading style sheets 翻译过来就是层叠样式表，也称级联样式表，简称样式表

CSS的作用

定义HTML页面中元素的样式
1.实现内容（HTML元素）与表现（CSS样式）的分离
2.实现代码的可重用性和可维护性

CSS与HTML之间的关系

HTML:专门用于搭建网页，构建内容
CSS:专门定义页面元素的样式
使用原则：CSS样式属性与HTML属性相冲突时，W3C（万维网联盟）建议尽量使用CSS属性来取代HTML属性

CSS样式表的使用方式

1.内联方式
  也称行内样式
	将样式定义在html元素中
	语法：
	  1.将样式定义在元素的style属性中
		  <p style="样式声明"></p>
		2.style后样式声明
		  由多个样式的“属性”和“值”组成
			属性：值；
			多个属性值之间用分号分隔
			style="属性:值；属性:值；属性:值"
			常用属性和值：
			   1.color 属性
					作用：文本颜色
					取值：颜色的英文单词
         2.background-color 属性
				   作用：背景颜色
					 取值：同上
				 3.font-size 属性
				   作用：文字大小
					 取值：以px或pt为单位的数字
2.内部方式
  将样式定义在html头元素中(<head></head>)
  特点：当前页面中可以随意使用定义好的样式
	步骤：
	   1.在head元素中增加一对<style></style>元素
		 2.在<style>元素中增加多个样式规则
		 语法：
		    <head>
				  <style>
					  样式规则
					</style>
				</head>
     样式规则：由选择器和样式声明组成
     选择器：规范页面中哪些元素能够使用定义好的样式
		 元素选择器：由标签名称作为选择器，来规范当前标记的样式
		 选择器{
		    样式声明；
				属性：值；
		 }
		 div{}
		 p{}
		 a{}
		 img{}
		 header{}
		 ...
3.外部方式
  将样式定义在外部的CSS文件中，然后在网页中对CSS文件进行引用
	1.特点
	  使用样式表文件(.css为后缀)保存所有的样式规则
	2.使用步骤：
	   1.创建样式表文件（.css）
		 2.在CSS文件中定义样式规则
		 3.在网页中引入样式样式表，在head中引入

练习：
1.使用内联样式为p元素设置字体颜色为蓝色，大小为50px;
2.使用内部样式为div元素设置字体颜色为红色，大小为70px;
3.使用外部样式为h1元素设置背景颜色为灰色，字体颜色为绿色

CSS语法

CSS样式特征

1.继承性
  大部分的样式属性可以被继承
	如：color,font-size,background-color...
	父元素定义好的样式可以直接用在子元素上

2.层叠性
  为一个元素定义多个选择器，当样式声明不冲突时，多个样式层叠为一个
	例如：
	div{
    font-size:40px;
  }
	#d1{
    font-family:"微软雅黑";
  }
	<div id="d1">这是父元素div</div>
3.优先级
  如果样式冲突时，按照不同样式的优先级来应用

	  浏览器缺省设置 最低
		外部样式和内部样式 中（就近原则）
		内联样式 最高

4.调整显示优先级
  调整样式显示的优先级
	冲突样式中，以!important为准
	选择器{
	  属性:值 !important；
	}

基础选择器

选择器的作用：规范页面中哪些元素能够使用声明好的样式（匹配页面元素)

通用选择器

作用：匹配页面中所有的元素
语法：*{样式声明}

注意：
  尽量少使用（效率较低）
	尽可能用继承性来取代

元素选择器

又叫标签选择器或标记选择器
作用：定义页面中某一类元素的样式
语法：有元素名称作为选择器
  div{}
	span{}
	p{}
	a{}
	header{}
  ....

类选择器

作用：通过标签所附带的class属性值对类选择器进行引用
	特点：一段公共的样式，谁想用谁就可以用
	语法：.类名{样式声明}
	引用：<p class="类名"></p>
	自定义类名注意：
	    1.不能数字开头
			2.不能包含特殊字符（$,@,#,%,^,&）- _(可以)
  多类选择器：
    允许让一个元素应用多个类选择，引用时，选择器名称用空格分隔开
		<p class="类名1 类名2 类名3"></p>
  分类选择器：
    将元素选择器和类选择器联合使用，从而实现对某种元素的不同样式的细分控制
		语法：元素选择器.类选择器{样式声明}
		例如：
		  div.mytitle{
			  color:red;
			}
		  <div class="mytitle">

id选择器

作用：使用元素所附带的id属性值进行样式的声明定义（私人订制）
语法：#idvalue{样式声明}
例如：
<p id="p1"></p>
#p1{
  color:red;
}

群组选择器

定义一组选择器的公共样式，用逗号隔开选择器列表
div,p,.myf,span.myC,#d1{样式声明}

后代选择器

依托于后代关系来匹配页面的元素
	后代：一级或多于一级的父子关系
	语法：选择器1 选择器2 选择器3{样式声明}
	ex:
	  1.要匹配一个id为d1元素中所有span元素
		  #d1 span{}
	  2.要匹配class为redB元素中的所有class为bigF的元素
		  .redB .gigF{}

子代选择器

依托于子代关系，匹配页面的元素
子代：只有一级父子关系
语法：
 选择器1>选择器2{样式声明}
特点：不想匹配任意后代，而是想缩小范围

练习：

按照以下布局写样式
<div class="myF">
 <p>
   <a>设置文本颜色为蓝色，字体大小为40px;</a>
 </p>
 <a>我是路人甲不需要设置样式</a>
</div>
<div>不需要设置样式</div>

伪类选择器

为了匹配元素不同的状态
语法：
  所有的伪类选择器都是以:作为开始
	多数会配合其他选择器一起使用
	:伪类名称{}
	选择器:伪类名称{}
分类：
  1.链接伪类
	   :link 匹配尚未访问的超级链接状态
		 :visited 匹配访问过的超级链接状态
	2.动态伪类
	   :hover 鼠标匹配在元素上的状态
		 :active 匹配元素被激活时的状态
		 :focus 匹配元素获取焦点时的状态

选择器的优先级

权值：标识当前选择器的重要程度，权值越大优先级越高
  元素选择器 1
	类型选择器 10
	伪类选择器 10
	ID选择器 100
	内联样式 1000
  选择器权值加到一起，大的优先
	权值相同，以后定义的为主
例如：
  <div id="d1">
	  <p class="p1">
		  <span class="s1">this is a span</span>
		</p>
	</div>
  span{color:red} /*权值：1*/
	p span{color:blue} /*权值：1+1*/
	.p1 span{color:yellow} /*权值：10+1*/
	#d1 .p1 .s1{color:green} /*权值：100+10+10*/
	#d1 span{color:gray} /*权值：100+1*/

CSS单位

尺寸单位

%：相对单位
in：英寸-->2.54cm
cm:厘米
mm:毫米
pt:磅-->1/72in
px:像素，表示文字大小
注意：CSS中的数值，如果有单位的就不能省略

颜色单位（颜色取值）

1.英文单词
  red,blue,green,yellow......
2.rgb(r,g,b)
  r:0-255
	g:0-255
	b:0-255
3.rgb(r%,g%,b%)
4.#rrggbb
  0-9或a-f组成
	#000000：黑色
	#ffffff:白色
	#111111:灰色
5.#rgb
  上面的缩写形式
	#000000-->#000
	#ffffff-->#fff
	#11ffaa-->#1fa

新的表单元素（html5新标记）缩写：txt

属性：required 非空限制
1.电子邮件类型
2.搜索类型
3.url类型
4.电话号码类型
5.数字类型
 属性：
    min控件接受的最小值
    max控件接受的最大值
    step控制控件递增的步长，默认为1
6.范围类型
 作用：允许指定范围内的一个值
 属性：
     min指定范围的最小值（下限值）
     max指定范围的最大值（上限制）
     step值变化的步长
     value设置初始值
7.颜色类型
 作用：颜色拾取控件
8.日期类型
 作用：允许用户选择日期
9.周类型
 作用：与date类似，但只能选择周
10.月份类型
 作用：与date类似，但选择一个月份

练习：

按照布局用外部样式表完成以下样式设置
当鼠标悬停时让文本颜色为红色，并且字体大小为30px（要求用后代选择器）
要求链接访问之前的文本颜色为绿色，访问之后的颜色为蓝色（用子代选择器