CSS样式基础

CSS（层叠样式表 美化页面 修改标签的样式）

1、写法分类：

①内联：写在标签里面 以属性的形式表现 属性名style

<div style=" 100px;height: 100px">内联</div>

②内嵌：写在head标签里面  以标签的形式标签 标签名style

<style>
	#a{
	 100px;
	height: 200px;
	background: #D30F13;
	}
	.aaa{
	 100px;
	height: 200px;
	background:#2ED73C;
	}
	.ddd{
	 100px;
	height: 200px;
        background:#C08586;
	}
	#div div{ 100px;
	height: 200px;
	background:#101BDF}
	#sdf>#zzx{ 100px;
	height: 200px;
	background: #16D194}
	#dd,#ddd{background: #D52AD4}
	#aaa:hover{background:#0A32A0}
</style>

选择器：找元素 通过各种方式 例如：标签名 id属性值

③外部引用：引入外部文件

写在HEAD标签里面，以标签的形式标签  标签名link

<link rel="stylesheet" href="css.css">

2、选择器

Ⅰ、选择器格式：

   选择器｛

   样式属性：样式值

   样式属性：样式值

   ｝

Ⅱ、选择器类型：

①通用选择器：*｛｝

②标签选择器：标签名｛｝

③id选择器：#id属性值｛｝注意：id名称不能用数字开头

实例：

#a{
   100px;
  height: 200px;
  background: #D30F13;
  }

<div id="a">1</div>

④class选择器：.class属性值｛｝

一个标签可以有多个class值，之间用空格隔开，后面的覆盖前面的

实例：

.aaa{
      100px;
     height: 200px;
     background:#2ED73C;
     }
.ddd{
      100px;
     height: 200px;
     background:#C08586;
     }

<div class="ddd aaa">2</div>

⑤后代选择器  选择器1 选择器2｛｝

实例：

#div div{ 100px;
	height: 200px;
	background:#101BDF
        }

<div id="div">
	     <div>
	     　　1234
             </div>
</div>

⑥子类选择器

选择器1 >选择器2｛｝

实例：

#sdf>#zzx{ 100px;
			height: 200px;
			background: #16D194}

<div id="sdf">
	<h id="zzx">12345</h>
</div>

⑦并列选择器

选择器1，选择器2.......｛｝

#dd,#ddd{background: #D52AD4}

<div id="dd">345</div>
<div id="ddd">678</div>

⑧伪类选择器

选择器：伪类（hover 鼠标移到上面变化）

#aaa:hover{background:#0A32A0}

<div id="aaa">12345678</div>

3、内嵌和外部引用的区别：

  内嵌写style 外部引用不需要

4、优先值概念（权值，权值越高优先值越高）

行内优先级最高  1000

Id                        100

Class                  10

标签                    1

*                          0

注意：优先级可以叠加