文章目录
- 一. CSS介绍
- 二. CSS的引入方式
- 三. CSS选择器
一. CSS介绍
- 美化界面: 设置标签文字大小,颜色,字体加粗等样式
- 控制页面布局: 设置浮动,定位等样式
选择器{
样式规则
}
样式规则:
属性名1: 属性值1
属性名2: 属性值2
属性名3: 属性值3
...
选择器: 在页面中筛选符合规则和要求的标签
二. CSS的引入方式
| 样式表 | 优点 | 缺点 | 使用情况 | 控制范围 |
|---|
| 行内样式表 | 书写方便,权重高 | 没有实现样式和结构相分离 | 较少 | 控制一个标签(少) |
| 内嵌样式表 | 部分结构和样式相分离 | 没有彻底分离 | 较多 | 控制一个页面(中) |
| 外部样式表 | 完全实现结构和样式相分离 | 需要引入 | 最多,强烈推荐 | 控制整个站点(多) |
三. CSS选择器
<style>
div{
color: red;
font-size: 30px;
}
</style>
<body>
<div class="box1 blue" >
好好学习
</div>
<div class="box2">
good good study
</div>
</body>
<style>
.box1{
width: 200px;
height: 200px;
background: green;
}
.box2{
width: 300px;
height: 300px;
background: pink;
}
</style>
<body>
<div class="box1 blue" >
好好学习
</div>
<div class="box2">
good good study
</div>
</body>
<style>
div p{
background: palegreen;
}
div .c_p{
width: 200px;
}
.box1 .c_p{
height: 100px;
}
.box1 p{
color: #0000ff;
}
</style>
<body>
<div class="box1">
这是 div 标签
<p class="c_p">
这是 p 标签
好好学习
</p>
</div>
</body>
<style>
#box1{
background: red;
}
</style>
<body>
<div id="box1">
这是一个div
</div>
<div>
好好学习
</div>
</body>
<style>
div, p{
color: bisque;
font-size: 30px;
}
</style>
<body>
<div id="box1" class="box1">
这是一个div
</div>
<div class="box2">
好好学习
</div>
<div class="box3">
good good study
</div>
<p>
这是一个p标签
</p>
</body>
<style>
div{
width: 100px;
height: 50px;
background: peru;
}
div:hover{
font-size: 30px;
color: aqua;
}
</style>
<body>
<div >
好好学习
</div>
</body>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
