文章目录
- 一. 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>