css初学笔记：css三种书写方式及基本选择器

css学习笔记： 一：css书写使用； 1.行内式： 直接书写在标签中的一个style属性中，属性值是包含所有的css样式属性。 例如：<div style="width：300px；height：300px;background-color: red;font-size: 30px;">我是div标签</div> 2.嵌入式（内嵌式）： 书写在head标签里一个style标签里。 例如：

<style type="text/css">
div{
		width: 100px;
		height: 200px;
		background-color: blue；
		font-size：50px；
	}	
</style>

3.外链式：通过link标签引入外部的css文件。 Css文件，拓展名.css。Css文件的样式可直接书写，不用style样式包裹。 例如：书写header样式； 1.在css文件中写header样式：

`<style type="text/css">
	div{
		width: 100px;
		height: 200px;
		background-color: blue；
		font-size：50px；
	}	
</style>`

2>.在head标签里书写link标签

<link rel="stylesheet" type="text/css" href="" />

①Rel:css文件和html的关系，属性值“stylesheet”样式表。 ②Type：类型。属性值“text/css”表示css文件为纯文本。（type类型可省略不写） ③Href：路径。外部引入css文件的路径。 4.css一些杂项。 1.Css中键值对的书写语法： K：v k： key：属性名 v：属性值 例如：width：200px；height：200px； 2.css中每一条样式属性以分号结尾。 3.css中每条属性独占一行，逐条书写。（便于我们初学者读自己代码） 4.css中对空格，缩进，换行不敏感。 例如：

1，div{
		width: 100px;
		height: 200px;
		background-color: blue；
		font-size：50px；
	}	
2，div{
		width: 100px;height: 200px;background-color: blue；font-size：50px；
	}

二，css选择器 1>标签选择器 1.书写：

<div>我是一个div标签</div>
<style>
		div{
			width: 200px；
			height：200px；
		}
	</style>

2.标签选择器可以选中页面所有的同种标签，不管标签嵌套的多深，都可以选中。 3.用途： ①用于清楚或者重置默认样式。

div{                          
			margin: 0;
			padding: 0;
	}

②清除ul列表小圆点。

ul{
			list-style: none;
		}

③3.清除超级链接蓝色，下划线。

a{
			color: black;
			text-decoration: none;
		}

2id选择器 ①Id选择器：通过标签的id属性进行选择。 ②Id属性值命名规则：严格区分大小写。(check!=CHECK)必须以字母开头，可以有数字和下划线，短横。 ③#id属性值 id属性名和#之间无空格。 ④一个网页中只能出现一个id名（id属性名唯一） ⑤同一个标签既可以被标签选择器选中，也可以被id选择器选中，设置不同的样式属性，渲染在页面上。（css的层叠性）。 例如：

<p id="tom">我是一个p标签</p>
#tom{
			width: 200px;
			height: 200px;
			font-size: 50px;
			font-family: "微软雅黑";
		}

3类选择器 ①类选择器是通过标签的class属性进行选择。 写法：类名（点和类名之间没有空格）类名命名规范和id属性的命名规范相同。 例如：

<p class="jack">我是一个p标签</p>
.jack{
			width: 100px;
			height: 100px;
			background-color: red;
			
		}

②使用注意点： 类选择器的特殊应用：原子类，（公共类）。我们可以将一个类名只保存一个属性，某个元素想添加该类名，便于书写。 例如：

.fs20{
			font-size: 20px;
		}

给上述jack添加字号为20px：<p class="jack fs20" >我是一个p标签</p> 【可以将原子类fs20添加给任何一个p标签，原子类可自己定义。实际运用要书写相同样式，可以直接书写相同类名。】 （一个标签可以有多个类名，类名之间用空格隔开。） 4.通配符 通配符会选中页面上所有的标签，甚至包括body. 用于：快速清除默认样式； 例如：

*{
	padding:0;
	margin:0;	
}