Web前端学习（2）_css

Web前端学习（2）_css

1.CSS入门

1.1 引入

html：负责网页的结构

css： 负责网页的样式

1.2 定义

CSS（Cascading Style Sheet 层叠样式表） 简称，样式。主要负责网页的美观

1.3 css的三种使用方式

1.3.1行内样式

注意：

1）使用标签的style属性进行css控制，css写在style属性值中

弊端：只能控制一个标签的样式，如果对于多个标签的样式进行设计，过于麻烦

<a href="" style="color:#0F3">超链接</a><br />
<a href="" style="color:#0F3">超链接</a><br />
<a href="" style="color:#0F3">超链接</a><br />

1.3.2内部样式

注意：

1）使用style的标签进行css控制，css内容写在style标签体内

2）一次控制多个标签的样式

3）和html标签混杂在一起，不好维护。css内容无法在多个html页面中重用

<style type="text/css">
	a{
		color:#F30;
		font-size:36px;
		}
</style>

分析：把style标签写在haed标签里面，使用如上语法选中对应标签，进行样式设置

1.3.3外部样式（推荐使用）

注意：

1）建立独立后缀为css的文件，css内容写在该文件中

2）在使用css的html页面中，导入外部css文件

使用方法：

<!-- 导入外部css文件  href  : 表示外部css文件的位置 rel: 表示关联的是样式表 -->

<link href="01.css" rel="stylesheet"/>

<link href="css示例.css" rel="stylesheet" />

分析：在一个css文件里面写好样式代码，使用上面的句子进行导入

2 CSS语法

2.1 选择器（selector）：使用选择器来选择需要添加样式的标签。

2.1.1 标签选择器

作用：选择同名的标签

注意：这种方法会选择到该文件里面的所有同名的标签

分析：如下，会选中所有的div标签

<style type="text/css">
	div{
		color:#963;
	}

</style>

2.1.2 类选择器

作用： 选择同类的标签

注意：

1）选择的标签必须有class的属性。同类的标签使用同名

2）当一个标签同时被标签选择器和类选择器选择，那么类选择器优先

分析：.加类名，会选中标签中类的属性为该名字的所有标签

.class1{
		color:#36F;
	}

2.1.3 id选择器

作用： 选择一个标签

分析：同上述类选择器，但是使用 # 开头的

#id1{
		color:#00C;
	}

注意：

1）选择的标签必须有id属性。

2）在同一个html页面中，建议不要出现两个同名的id属性的标签，后面使用javascript代码选择标签的时候，getElementById("id属性值")

3）id选择器的优先级最高！

2.1.4 并集选择器

作用： 当多个选择器的css内容相同，那么可以使用并集选择器来合并css内容

/*当两个类css代码相同的时可以使用并集选择器将两个选择其中的代码进行抽取,形     成一个并集选择器*/	
	.c1,.c2{
		color:#00F;
	}

2.1.5 交集选择器

作用： 选择某个选择器中的子标签

分析：选中div标签中的span标签

div span{
	color:#006;
	}

2.1.6 通用选择器

作用； 选择所有的标签

2.1.7伪类选择器

作用：控制标签在不同状态下的样式。

标签有四种状态：

（1）link: 没有访问过的状态

（2）hover: 鼠标经过的状态

（3）active:鼠标激活（按下但没有松开）的状态

（4）visited: 已经被访问过的状态（鼠标点下且松开）

注意：

1）在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。

2）在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。

正确顺序： link visited hover active

<style type="text/css">
	a:link{
		color:#3F0;
	}
	a:visited{
		color:#3FF;
	}
	a:hover{
		color:#9C0;
	}
	a:active{
		color:#00F;
	}

</style>

2.2 常用的CSS属性和值

2.2.1 文本属性

/*设置字符间距*/
	letter-spacing:4px;
	
	/*设置文本的位置*/
	text-align:center;
	
	/*给文本设置上划/下划/中划线*/
	text-decoration:underline;
	
	/*设置词语和词语之间的间距,设置之前需要分词,每个词语之间使用空格隔开*/
	word-spacing:10px;

2.2.2 设置字体

/*设置字体*/
		/*font-family:"黑体";*/
		
		/*设置字体大小*/
		/*font-size:36px;*/
		
		/*设置字体样式*/
		/*font-style:italic;*/
		
		/*设置字体的粗细*/
		/*font-weight:bold;*/
		
		/*字体设置的简写属性,一定要注意属性的顺序*/
		font:italic bold 36px "黑体";

2.2.3 设置背景

/*给标签设置背景颜色*/
		/*background-color:#006;*/
		
		/*将背景设置为图片*/
		/*background-image:url(05.%E7%B4%A0%E6%9D%90/mm.jpg);*/
		
		/*设置背景图片的重复规则
		repeat:默认显示的重复方式,x,y方向都重复
		repeat-x:设置图片仅在x方向上重复
		repeat-y:设置图片仅在y轴方向上进行重复
		no-repeat:图片不重复
		*/
		/*background-repeat:no-repeat;*/
		
		/*设置图片的位置*/
		/*background-position:top right ;*/
		
		/*设置图片背景的简写样式*/
		background:#006 url(05.%E7%B4%A0%E6%9D%90/mm.jpg) no-repeat top right;

2.2.4 设置列表

ul{
		/*设置列表选项前面的样式*/
		/*list-style-type:circle;*/
		
		/*将图片设置为列表选项的一个标记*/
		/*list-style-image:url(05.%E7%B4%A0%E6%9D%90/start.jpg);*/
		
		/*列表样式的简写属性*/
		list-style:url(05.%E7%B4%A0%E6%9D%90/start.jpg);
		}

2.2.5 设置表格

 table{
	 /*合并表格的边框*/
	 border-collapse:collapse;}

2.2.6设置边框

div{
	width:300px;
	height:200px;
	
	/*必须首先设置边框的样式之后,边框的颜色才可以显示*/
	/*border-color:#F00;*/
	
	/*给四个边框非别设置不同的颜色*/
	/*
	border-top-color:#0F0;
	border-bottom-color:#063;
	border-left-color:#9C0;
	border-right-color:#F00;*/
	
	
	/*设置边框的样式*/
	/*border-style:solid;*/
	/*实线:solid*/
	/*border-left-style:solid;*/
	
	/*点划线:dotted*/
	/*border-top-style:dotted;*/
	
	/*双实线:double*/
	/*border-right-style:double;*/
	
	/*虚线:dashed*/
	/*border-bottom-style:dashed;*/
	
	/*设置边框的宽度*/
	/*border-width:5px;*/
	/*border-left-width:1px;
	border-top-width:3px;
	border-right-width:6px;
	border-bottom-width:9px;*/
	
	/*使用简写属性,设置边框样式:booder:border-width border-style border-color*/
	/*这个简写属性必须牢记*/
	border:2px solid #F00;
	}

3 盒子模型

3.1 定义

可以把html页面上每个标签看做是一个盒子。

3.2 盒子相关的属性：

宽度和高度（width和height）： 决定这个盒子的容量

内边距（padding）： 盒子边框与内容的距离

边框（border）： 盒子的厚度

外边距（margin）： 盒子与盒子之间的距离

div{
	width:100px;
	height:100px;
	border:6px solid #900;}
	

#d1{
	width:200px;
	height:200px;
	padding-top:10px;
	padding-left:10px;
	margin-bottom:10px;}

4 CSS定位

（1）相对定位：relative（相对自己之前的位置）

（2）绝对定位：abosolute（相对父标签的位置）

（3）固定定位：fixed(相对浏览器位置固定，不随着滚动条的拖动而位置改变)

/*相对定位,相对于自己之前的位置*/
	/*
	position:relative;
	top:20px;
	left:20px;*/
	
	
	/*绝对定位:相对于自己的父标签而言的*/
	/*
	position:absolute;
	top:20px;
	left:20px;*/
	
	/*固定定位:相对于浏览器而言*/
	position:fixed;
	left:500px;
	top:300px;