CSS的使用

Posted 2021-07-11 江西昊仔

1.样式种类

css是由选择器和一条或多条以分号隔开的样式声明组成。

格式

选择器名{
    属性:属性值;
    .....
}

插入样式表的三种方法

内联样式（行内式）	将样式定义在html标签上的style属性中; 以行内式写的css耦合度较高.
内部样式表	定义在head标签中的style标签中, 告诉HTML我是样式代码.
外部样式表	不在当前文件中.需要在head标签中的link标签中引入外部样式； 引入外部的css文件

样式的优先级：就近原则;行内样式的优先级最高,其次看看他们的代码顺序

2.选择器

1.通用选择器(*)	选择所有元素
2.元素选择器/标签选择器	选择指定元素
3.id选择器(#)	选择指定id属性值的元素,id最好保持唯一 id定义规则:以字母,数字,下划线,中划线,不要以数字开头
4.class类选择器(.)	选择指定class属性值的元素
5.分组选择器	选择指定选择器选中的元素

 选择器的优先级：

行内样式style属性中的权重最高(1000) > id (100) > class (10) > 元素(1) > 通用(0)

1.通用选择器(*)
选择所有元素
例如:
	* {
		属性名:属性值;
		....
	}
	
	* {
		color:#FF0000;
	}

2.元素选择器/标签选择器
选择指定元素
例如:
	标签名 {
		属性名:属性值;
		....
	}
	
	div {
		color: blue;
	}

3.id选择器(#)
选择指定id属性值的元素,id最好保持唯一
id定义规则:以字母,数字,下划线,中划线,不要以数字开头

例如:
	#id属性值 {
		属性名:属性值;
		....
	}
	
	#div1 {
		color: black;
	}
	<div id="div1">  </div>

4.class类选择器(.)
选择指定class属性值的元素
例如:
	.class属性值 {
		属性名:属性值;
		....
	}
	
	.div1 {
		color:chartreuse;
	}
	<div class="div1">  </div>

5.分组选择器
选择指定选择器选中的元素
例如:
	选择器1,选择器2,选择器2,.... {
		属性名:属性值;
		....
	}
	
	#div1,.div1,p{
		color:blueviolet;
	}