CSS
1. CSS样式表的几种使用方式
1.元素内嵌
<p style="font-size"></p>
2.内部文档内嵌
<style type="text/css">
p{
font-family:Consolas;
font-size:24px;
}
</style>
<p> 这是个段落 </p>
这样<p>标签就会表现出内部文档内嵌样式表的样式
3.外部文档内嵌
<link rel="stylesheet" type="text/css" herf="css/test.css">
4.导入式
<style type="text/css">
// 导入式
@import “css/test.css”
</style>
注：
调用优先级别： 元素内嵌样式 > 内部文档内嵌 > 外部文档内嵌
2. CSS 选择器
- 选择所有元素
<!--style元素-->
<style type="text/css">
*{
}
</style>
- 根据类型选择元素
<!--style元素-->
<style type="text/css">
a{
}
p{
}
</style>
<!--body 元素-->
<body>
<a> test </a>
<p> Test </p>
</body>
- 根据类选择元素
<!--style 元素：-->
<style type="text/css">
.class1{
}
</style>
<!--body 元素：-->
<body>
<p class="class1"＞Test </p>
</body>
- 根据ID 选择元素
<!--style 元素：-->
<style type="text/css">
#id1{
}
</style>
<!--body 元素：-->
<body>
<p id="id1"> Test </p>
</body>
- 根据属性选择元素
<!--style 元素：-->
<style type="text/css">
[href]{
}
</style>
<!--body 元素：-->
<body>
<a herf="test.html"> Test </a>
</body>
- ：选择器动作
<!--style 元素：-->
<style type="text/css">
a:hover{
}
</style>
<!--body 元素：-->
<body>
<a> Test </a>
</body>