CSS基础学习笔记一（详细）

初识CSS

  css是cascading style sheet(层叠样式表)的简写；css是从审美的角度负责页面的样式。

<style type="text/css">
	p{
   
		color: red;
		font-size: 35px;
		text-decoration: underline;
		font-weight: bold;
		text-align: center;
		font-style: italic;
	}
	h1{
   
		color: blue;
		font-size: 50px;
		font-weight: bold;
		background-color: pink;
	}
</style>

语法中，style标签一般位于head标签中title标签之后，也可以把他放在HTML文档的任何地方。

type=“text/CSS” 在html5中可以省略， 写上也比较符合规范， 所以这个地方可以写也可以省略。

此种方式是输入“内部样式表”，css也可以写在单独的文件里面(外部样式表)，也可以直接写在html标签里(行内样式表)。

css也输入"text" 即 纯文本 。

css对换行和空格都不敏感，但是一定要有标准的语法。冒号，分号都不能省略。
语法：

选择器{
   
	k:v;
	k:v;
	k:v;
}
选择器{
   
	k:v;
	k:v;
	k:v;
}

一些常见的属性

 1. color:red;
 	color属性的值可以是英语单词，也可以是rgb、十六进制。
 
 2. font-size:40px; 字号大小
 	单位px(像素)必须加
 
 3. background-color:blue;	背景颜色
 
 4. font-weight:bold;	加粗
 
 5. font-weight:normal;	不加粗
 
 6. font-style:italic;	斜体

 7. font-style:normal;	不斜体
 
 8. text-decoration:underline;	下划线
 
 9. text-decoration:none;	没有下划线   

基础选择器

css怎么学？只需要两个知识部分：

1. 选择器，怎么选；
2. 属性，样式是什么。

标签选择器

就是使用标签的名字。

<style type="text/css">
	p{
   
		color:red;
	}		
</style>

注意的是：

1. 所有的标签，都可以是选择器。比如：ul、li、lable、dt、input…

<style type="text/css">
	ul{
   
		background-color: pink;
	}
</style>

2. 无论这个标签藏得多深，一定能够被选择上。

<style type="text/css">
	p{
   
		color:red;
	}
</style>

<ul>
	<li>
		<ul>
			<li>
				<ul>
					<li>
						<p>我是一个段落标签</p>
					</li>
				</ul>
			</li>
		</ul>
	</li>
</ul>

3. 选择的所有，而不是下一个。

标签选择器，选择的是页面上的所有这种类型的标签，所有经常描述“共性”，无法描述某一元素的“个性”的。

id选择器

<p>我是段落1</p>
<p id="para2">我是段落2</p>
<p>我是段落3</p>

css:

<style type="text/css">
	#para2{
   
		color: blue;
	}
</style>

id选择器的选择符是“#”。

任何HTML标签都有id属性。表示这个标签的唯一标识。

这个标签的名字可以任意取，但是

 1. 只能有字母、数字、下划线。
 2. 必须以字母开头。
 3. 不能和标签同名，比如id不能叫做：body、ul、img、a......

一个HTML页面，不能出现相同的id，哪怕他们不是一个类型的标签。比如一个di叫para的p标签，一个id叫para的div标签。

一个标签可以被多个css选择器选择，共同作用，这就是“层叠式”的第一层含义。

类选择器

.就是类的符号。
所谓的类就是class属性，class属性和id十分相似，任何的标签都可以携带class属性。

class属性可以重复，比如，页面上可能有很多标签都有special这个class；

<h3>我是一个h3啊1</h3>
<h3 class="special">我是一个h3啊2</h3>
<h3>我是一个h3啊3</h3>
<p>我是一个段落啊1</p>
<p class="special">我是一个段落啊2</p>
<p class="special">我是一个段落啊3</p>

css

<style type="text/css">
	.special{
    
		color: red;
	}
</style>

同一个标签，可能同时属于多个类，用空格隔开：

<h3 class="special importance">我是一个h3啊2</h3>

这样h3就同时属于special和importance类了。

总结：

1. class可以重复，同一个页面上可能有多个标签同时属于某一个类。
2. 同一个标签可以同时携带多个类。

类的使用能够决定一个人的css水平。
比如，我们现在做一个页面：

正确的思路就是使用“公共类”：

<style type="text/css">
	.lv{
    
		color: green;
	}
	.xian{
    
		text-decoration: underline;

	}
	.da{
    
		font-size: 50px;
	}
</style>

每一个标签去选择自己需要的样式。