CSS介绍
Posted 礁之
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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>
/* 类选择器 在定义标签的时候, 可以给标签添加 class 属性, 即类, 一个标签可 置多个类
一个类可以作用于多个标签
.类名
属性: 属性值
*/
.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>
/* 层级选择器, 一般用在标签嵌套当中
选择器1 选择器2
属性: 属性值;
*/
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>
- ID选择器
<style>
/* ID选择器, 在一个页面中, 标签的 ID 是唯一的, 所以ID选择器只能作用一个标签
#id值
属性: 属性值;
*/
#box1
background: red;
</style>
<body>
<div id="box1">
这是一个div
</div>
<div>
好好学习
</div>
</body>
- 组选择器
<style>
/* 组选择器, 使用不同的选择器进行组合, 设置相同的属性
选择器1, 选择器2
属性: 属性值;
*/
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;
/* hover 鼠标指针放到指定选择器后, 就会执行伪类选择器的修改操作 */
div:hover
font-size: 30px;
color: aqua;
</style>
<body>
<div >
好好学习
</div>
</body>
以上是关于CSS介绍的主要内容，如果未能解决你的问题，请参考以下文章