样式使用方法
/*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*/