css基础学习（1）

目录

 

一.css整体感知

二.css选择器

三.继承性和层叠性

---

一.css整体感知

1.1 整体认识

CSS的全称是cascading style sheet ， 层叠式样式表，“样式表”比较好理解，“层叠式”比较难理解，所以我们后面慢慢讲清楚什么是层叠式。

CSS的维护者也是w3c，最新版本是CSS3，但是浏览器没有那么的兼容，所以我们学习的是CSS2.1

css分为两个部分，选择谁、设置什么样式。

	<style type="text/css">
		h1{
			color:red;
			background-color: blue;
			font-size: 20px;
			font-style: italic;
		}
		p{
			color:green;
			font-size: 40px;
			text-shadow:2px 2px 2px black;
			font-family: "微软雅黑";
	 		transform:rotate(30deg);
			width: 300px;
		}
	</style>

h1、p就是选择器；大括号里面是k:v;的结构，用来罗列样式。

1.2 style标签

所有的css样式，都要写在style标签中

	<style type="text/css">
	
	</style>

1.3 特性

css对换行缩进不敏感，写成一行代码尺寸小这是后期压缩的事，写的时候还是写成多行便于阅读。

每个选择器最后一个属性分号可以不写，其他必须写，我们一般都是在每一个样式后边全写上

二.css选择器

2.1 基本选择器

①标签选择器（h1，p）

②id选择器（#id属性值）

同一个页面中，id绝对不能相同。哪怕是不同的元素，id也不能相同，我们必须保证，id在页面上是唯一的。

我们可以综合利用标签选择器、id选择器一起做效果。比如，我们让所有的p的字号都是20px，让其中某一个的颜色是红色。这就是层叠式样式表的第一层含义，同一个标签可以有多个选择器选择它。

③类选择器（.class属性值）

就是给某一类元素，设置相同的类名，然后通过这个类名来选择。

同一个标签，可以携带多个类名，用空格隔开。

 	<p class="warning xian">我是一个段落</p>

我们可以利用这个性质使用原子类，原子类就是一些简单的属性做成一个类，供元素自行选择。

2.2 高级选择器

①后代选择器（.wrapper a）

选择的是后代的元素，不一定是儿子，如果是孙子、曾孙子、重孙子……都行

②交集选择器（a.haha）

语法是标签名.类名

③并集选择器（p，div）

④通配符选择器（*）

三.继承性和层叠性

3.1 继承性

css规定，有一些属性，给某一个元素设置了，它的后代元素都同样拥有它的这个属性了。

能够继承的属性有：

color

text-系列 ： 比如text-decoration:underline;

font-系列：  比如font-size:30px;

line-系列

“层叠式”样式表，cascading的第二层含义，就是继承性。

3.2层叠性

层叠性是什么？就是处理冲突的能力。就是当多个选择器都选择上了同一个标签，听谁的？

现在我们已经完全揭示了“层叠性”的意思：

1） 同一个标签可以有多个选择器作用，给他增加样式；

2） 有继承性，祖先的标签的一些属性，可以继承给后代的标签；

3） 有层叠性，当遇见冲突的时候有着严密一套法律，规定谁生效谁被杠掉。