本文详细介绍了CSS的概念、优势及其用法，包括语法格式、引入方式、选择器、CSS3新特性、盒子模型、浮动与定位等核心内容。重点讲述了外部样式表的好处、CSS3的选择器权重、渐变色、浮动布局以及定位中的相对、绝对和固定定位，旨在帮助读者深入理解并掌握CSS的使用。
概念
全称 : Cascading Style Sheet 级联样式表 (层叠)
作用 : 定义如何显示 HTML 元素
出现的原因 : 解决内容与表现分离的问题
<table bgcolor="#FFB36D" align="center"
border="1px" bordercolor="#3F3F3F"
cellspacing="0"
width="350px" height="400px">
<tr>
<td colspan="5" bgcolor="blue">11</td>
<td colspan="2" rowspan="2">16</td>
</tr>
</table>
<!-- 想要达到的效果 -->
<table >
<tr>
<td >11</td>
<td >16</td>
</tr>
</table>
好处 : 外部样式表可以极大提高工作效率
优势
- 内容与表现分离 (类似于 盖房子和装修 )
- 网页的表现统一，容易修改
- 丰富的样式，使得页面布局更加灵活
- 减少网页的代码量，增加网页的浏览速度，节省网络带宽
- 运用独立于页面的CSS，有利于网页被搜索引擎收录
用法
语法格式
选择器{
声明1:值;
声明2:值;
}
最后一个; 可以省略,但是按照规范最好写上
引入方式
行内引入
<h3 style="color : green ; font-size: 30px">标题3</h3>
内部样式表
<hred>
<style type="text/css">
h1{
color : red;
}
h2{
color: blue;
font-size: 50px;
}
</style>
</head>
<body>
<h1>标题1</h1>
<h2>标题2</h2>
</body>
外部样式表
<link rel="stylesheet" href="style.css" type="text/css">
三种方式优先级
就近原则
行内优先级 > 内部样式优先级 > 外部样式优先级
外部样式的好处
- 可以真正做到内容和表现分离
- 做到代码的重复使用
- 外部样式的优先级 比较低 , 可以设计通用的样式
案例
<h3>望庐山瀑布</h3>
<p>日照香炉生紫烟，</p>
<p>遥看瀑布挂前川。</p>
<p>飞流直下三千尺，</p>
<p>疑是银河落九天。</p>
选择器
基本选择器
标签
p{color:red}
类
<p class="green">日照香炉生紫烟，</p>
.green{color:green}
id
<p id="pid">日照香炉生紫烟，</p>
#pid{color:green}
通用选择器 *
- 对比三个选择器
标签选择器直接应用于HTML标签
类选择器可在页面中多次使用 ,一个标签可以同时添加多个类
ID选择器在同一个页面中只能使用一次
- 优先级
Id选择器 > 类选择器 > 标签选择器
三种选择器的顺序 不遵循就近原则
CSS3 高级选择器
案例的初始化
<body>
<div> 11111
<p class="son">4444</p>
</div>
<br>
<div>2222
<p class="son">5555</p>
</div>
<br>
<div> 3333
<p class="son">6666</p>
</div>
<p >6666</p>
<p >6666</p>
</body>
<style>
div{
width: 100px;
height: 100px;
}
p{
width: 50px;
height: 50px;
}
</style>
层次选择器
/* body p 后代元素选择器 包括儿子 儿子的儿子 ... */
/* body>p 子代选择器 只有直接子标签 */
/* div+p 相邻兄弟 紧挨着div的p 标签 两个标签是同级关系*/
/* div~p 通用兄弟 紧挨着div 之后的所有p 标签 两个标签是同级关系*/
结构伪类选择器
案例初始化
<body>
<p>111</p>
<p>222</p>
<p>333</p>
<ul>
<li>
<p>444</p>
</li>
<li>
<p>555</p>
</li>
<li>
<p>666</p>
</li>
</ul>
</body>
/* ul li:first-child ul标签中第一个子元素li 要求li必须出现在ul的第一个子元素位置*/
/* ul li:last-child ul标签中最后一个子元素li*/
/* l
最低0.47元/天 解锁文章
306
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
