CSS

CSS

CSS简介

即层叠样式表，CSS将网页内容和显示样式进行分离，提高了显示功能和样式代码的可维护性

CSS和html的四种结合方式

1. 在标签上使用style属性

2. 在头标签中使用<style>标签

<style type="text/css">
	div{
		background-color:blue;
		color:red;
	}
</style>

3. 在<style>标签里面使用语句（在某些浏览器中不起作用，一般不用）

<style type="text/css">
	@import url(div.css);		//括号里面是css文件的路径
</style>

4. 使用头标签<link>引入外部文件（一般就使用这种）
   <link rel="stylesheet" type="text/css" href="css文件的路径"/>

css的优先级

从上到下，由内到外，优先级由低到高。后加载的优先级高。

css的基本选择器

1. 标签选择器
   如：

div{
	background-color:gray;
}

2. class选择器
   每个标签都有一个class属性
   如区分多个div：

div.haha{				//给class值为haha的div标签进行样式设置
	background-color:gray;
}

.haha{				//给所有class值为haha的标签进行样式设置
	background-color:gray;
}

3. id选择器
   每个标签都有id属性
   如：

div#hehe{				//给id值为hehe的div标签进行样式设置
	background-color:gray;
}

.hehe{				//给所有id值为hehe的标签进行样式设置
	background-color:gray;
}

基本选择器的优先级

优先级：
style>id选择器>class选择器>标签选择器

CSS的扩展选择器

1. 关联选择器
   标签是可以嵌套的，两个或多个选择器之间产生关系，就可以用此选择器

div p{				//仅设置div里面的p
	background-color:red;
}

2. 组合选择器
   对多个不同选择器进行相同样式设置的时候用此选择器

div,p{				//设置div和p的样式
	background-color:red;
}

3. 伪元素选择器
   css里面提供了一些定义好的样式，可以直接拿过来使用，比如超链接
   超链接的状态：原始状态、鼠标悬停状态、点击状态、点击之后状态
   可以分别给这些状态做样式：:link、:hover、:active、:visited
   如给<a>标签设置这些样式：

a:link{
	background-color:red;
}
a:hover{
	background-color:red;
}
a:active{
	background-color:red;
}
a:visited{
	background-color:red;
}

CSS的盒子模型

在进行布局前，需要把数据封装到一块一块的区域内，这个区域的专业术语叫盒子。

• 边框（border，属性有粗细、样式、颜色）：分为上（border-top）、下(border-bottom)、左(border-left)、右(border-right)，可分别设置，也可统一设置
• 内边距（padding）：分为上、下、左、右，同上
• 外边距（margin）：分为上、下、左、右，同上

CSS的布局的漂浮

float有两个属性值，right、left
right：文本流向对象的左边。
left：文本流向对象的右边

CSS布局的定位

position属性有两个：absolute、relative
absolute：将对象从文档流中拖出，使用left、right、top、bottom等属性对其进行绝对定位
relative：不会把对象从文档流中拖出去，对象不可层叠，但将依据left、right、top、bottom等属性在正常文档流中偏移位置

图文混排案例

就是图片和文字一起显示

图像签名案例

在图片上显示文字（先把文字对象拖出去，再显示在图片上）