# CSS的基本知识
目录: 1.CSS的作用 2.CSS的引入方式: 3.CSS的引入方式的优先级问题 4.CSS的选择器 5.CSS选择器的优先级 6.overflow 7.float 8.clear 9.zoom 10.! important
# 1.CSS的作用:
作用:将标签的样式进行修改
# 2. CSS的引入方式
# 2.1内联样式
<div style="width:100px;height:100px;"> </div>
@前端进阶之旅: 代码已经复制到剪贴板
优点:优先级最高;
缺点: 代码冗余、代码混乱、维护困难;
使用场景:已经确定了的不会再有更改特定情况下才会使用。
# 2.2.内部样式
<head>
<style>
div{
width:100px;
height:100px;
}
</style>
</head>
@前端进阶之旅: 代码已经复制到剪贴板
优点:初步实现了结构与样式之间的分离、逻辑关系相对清楚、不会造成额外的服务器请求压力。
缺点:造成单个文件体积过大、造成前后端交互困难。
使用场景:大型网站的首页。
# 3.外部样式
link: 用于引入其他文件;
<link rel="stylesheet" type="text/css" href="css/html.css" >
@前端进阶之旅: 代码已经复制到剪贴板
属性:
- rel 引入文件和当前文件的关系stylesheet
- href 引入文件的路径(地址)
- type 引入文件的类型
优点:结构与样式之间的分离、易于维护、一个样式库可以应用于多个页面 缺点:会造成额外的服务器请求压力、可能会造成代码冲突、造成垃圾代码 使用场景:大型网站的二三级页面。
# 3. CSS的引入方式的优先级问题
优先级问题 :
内联样式 > 外部样式
内联样式 > 内部样式
如果选择器优先级相同,则后加载的生效
如果选择器优先级不同,则按选择器优先级
# 4. CSS的选择器
# 4.1 常用选择器
1.继承 权重:0.00001 (最低)
//如
</style>
.father {
font-size: 14px;
}
</style>
<body>
<div class="fahter">
<