引入CSS
1.行间样式
<div style="
width:100px;
height:100px;
background-color:red;
"> </div>
2.页面级css
<head>
<style type="text/css">
div{
width:100px;
height:100px;
background-color:green;
}
</style>
</head>
3.外部css文件
lesson3.css
div{
width:100px;
height:100px;
border-radius:50%;
background-color:green;
}
.html
<head>
<link rel="styleshet" type="text/css",href="lesson3.css">
</head>
选择器
- css文件利用id选择器定位html位置：
.html
<div id="only">123</div>
.css
#only {
background-color:red;
}
- 利用class选择器定位html位置：
.html
<div class="demo">123</div>
.css
.demo {
background-color:yellow;
}
- 利用标签选择器定位html位置：
.html
<div>123</div>
.css
div {
background-color:black;
}
- 通配符选择器
.html
<span>123</span>
<div>234</div>
<strong>111</strong>
.css
* {
background-color:green;
}
- 属性选择器
.html
<div id="only">123</div>
.css
[class] {
background-color:red;
}
- 父子选择器/派生选择器
.html
<div>
<span>123</span>
</div>
.css
div span{
background-color:red;
}
- 直接子元素选择器
.html
<div>
<em>1</em>
<strong>
<em>2</em>
</strong>
.css
div > em {
background-color:green;
}
- 并列选择器
.html
<div>1</div>
<div class ="demo">2 </div>
<p class="demo">3</p>
.css
div.demo{
background-color:red;
}
- 分组选择器
.html
<em>1</em>
<strong>2</strong>
<span>3</span>
.css
em,strong,span{
background-color:red;
}
- 伪类选择器
.html
<a href="www.baidu.com">www.baidu.com<a/>
.css
a:hover{
background-color:orange;
}
- CSS :after 选择器
在每个 <p> 元素的内容之后插入新内容：
p:after
{
content:"台词：";
}
定义和用法
:after 选择器在被选元素的内容后面插入内容。
请使用 content 属性来指定要插入的内容。
网友评论