样式使用方法

/*css行内样式*/
<p style="color: red;">css行内样式</p>

/*css内部样式*/
<style type="text/css">
	h1{
		color: blue;
	}
</style>
<body>
<h1>css内部样式</h1>
</body>

<!-- css外部样式：引用css文件 -->
<link href="1.css" rel="stylesheet" type="text/css"/>

/*css导入样式 或者用@import "2.css两种方法"*/
@import url(2.css);

基本选择器

标签选择器标签选择器作用于所有标签之上

	h1{color: red;}

类选择器类选择器可以作用在多个标签上而ID选择器只能作用在一个标签上

	.lei{color: blue;}

类选择器如果不设置标签的前提就是所有的对应类都是该样式

	h2.lei{color: green;}

类选择器可以引用多个类的样式，在类名称之间用空格隔开，类名区分大小写

	.lei2{text-decoration: underline;}

ID选择器一个ID只能使用一次

	#p1{color: gray;}

群组选择器可以设置多种标签的同一个属性，方便快捷

	.lei,#p1,h1,h2{font-size: 40px;}

全局选择器可以对整个html文件内的内容样式进行设计全局选择器优先级极高

	*{text-decoration: underline;}

后代选择器可以对一个标签的后代标签进行设置，标签与后代标签之间用空格隔开

	p em{color: orange;}

后代选择器可以对应类选择器和ID选择器使用
使用方法可以为：#p1 em{} 指的是p1类下的em标签、p a em{}指的是p标签下的a标签下em标签、#ul .li{}是指ul类标签下的li ID标签

	p.lei em{color: red;}

伪类选择器定义状态的时候必须遵循顺数伪类标签对大小写不敏感
如果要跟随在class和id选择器之后的话应这样书写：p.lei:link{}以此类推，都要这么写也可以遵循后代选择器的规则
div p:link{}

	a:link{color: black;}/*未访问状态*/
	a:visited{color:black;}/*已访问状态*/
	a:hover{color:black;}/*鼠标悬浮经过状态*/
	a:active{color:red;}/*激活状态*/
	p:hover{color:red;}
	p:active{color: blue;}
	/*hover和active标签在一些其他的标签也可以使用就比如p标签，用来设计样式*/

权值优先级

权值不同选权值高的，权值相同遵循就近原则，!important有最高优先级，行内标签>内部标签>外部标签。link标签和内部标签style取决于就近原则。
如果在里面添加!important的话就会有最高优先级 !important前不能加;符号

*{color: black;}/*权值为0*/
b{color:purple;}/*权值为1*/
p b{color: yellow!important;}/*权值为2*/
.classblue{color:blue;}/*权值为3*/
#test1 p b{color:orange;}/*权值为102*/
div p .classblue{color: red;}/*权值为12*/
div #test2 b{color: gray;}/*权值为102*/

CSS——样式使用、基本选择器、权值优先级

样式使用方法

基本选择器

权值优先级

猜你喜欢