CSS基本操作和使用

CSS基本操作和使用

介绍：CSS叫做层叠样式表，用来设置页面中元素的样式。背景颜色、字体颜色、字体大小。。。

一，CSS负责结构、表现、行为中的表现

二，编写的位置：

1.内联样式

将样式编写到标签的style属性中
<p style="color:red;"></p>
这种样式只会对当前标签起作用，不能对样式进行复用，不方便后期维护，不推荐使用

2.内部样式表

将样式表编写到head中的style标签中
<style type="text/css"></style>
使用内部样式表，进一步将表现 和结构分离，可以同时为多个元素设置样式，方便后期的维护

3.外部样式表

将样式表编写到外部的CSS文件中，然后通过link标签将外部文件引入
<link rel="stylesheet" type="text/css" href="文件的路径"/>
将样式编写到外部样式表中，可以在不同的页面中使用同一个样式表，完全将表现和结构分离，方便后期的维护，推荐使用的方式

三，基本语法

选择器

通过选择器可以选中页面中的一组元素，然后为其设置样式

元素选择器

	根据标签名，选中页面中的指定元素
	语法：标签名{ }

例子：

			div{}
			p{}
			h1{}

id选择器

	根据元素的id属性值选中一个唯一的元素
	语法：#id {}

例子：

			#box1{}
			#hello{}

类选择器

	根据元素的class属性值，选中一组元素
	语法：.class{}

例子：

			.hello{}
			.box{}

通配选择器

	选中页面中的所有元素
	语法：*{}
	通配选择器的性能比较差，尽量避免使用

并集选择器

	可以同时选中符合多个选择器的元素
	语法：选择器1,选择器2,选择器N{}

例子：

			div,p,#box,.hello{}

交集选择器

	可以选中满足多个条件的元素
	语法：选择器1选择器2选择器N{}
	例子：p.hello{}

后代元素选择器

	选中指定元素的指定后代元素
	语法：祖先元素 后代元素{}

例子：

			div span {}
			div p{}

子元素选择器

	选中指定元素的指定子元素
	语法：父元素 > 子元素 {}

例子：

			div > span {}
			div > p{}

声明块

声明块中实际上就是一个一个CSS声明

		每一个CSS声明都是一个样式，实际上就是一个名值对的结构
		名和值之间使用:链接
		:左边是样式的名字
		:右边是样式的值
		每一个声明以;结尾

例子：

			color:red;
			font-size:20px;

元素之间的关系

父元素

直接包含子元素的的元素叫做父元素

子元素

直接被父元素包含的元素叫做子元素

祖先元素

直接或间接包含后代元素的元素叫做祖先元素，父元素也是祖先元素

后代元素

直接或间接被祖先元素包含的元素叫后代元素，子元素也是后代元素

兄弟元素

拥有相同父元素的元素叫做兄弟元素

块元素和内联元素

块元素

块元素会独占页面中的一行，无论他的内容的多少
一般使用块元素对页面进行布局

常见的块元素

		div
		p
		h1~h6

内联元素

内联元素只占用自身的大小，不会独占一行
内联元素也叫行内元素（inline）
一般内联元素都是用来为文本来设置效果

常见的内联

		span
		a
		img

包裹规则

一般都是使用块元素去包裹内联元素，而不会使用内联去包裹块元素
a元素可以包含任意元素，除了a本身
p元素不能包含任何块元素