WEB开发基础(CSS篇)
CSS的介绍
Cascading Style Sheet 层叠样式表
用途:它用来控制网页样式,并允许样式代码与网页内容分离的一种标记语言
简单地说:css的引入就是为了使得HTML语言能够更好地适应页面的美工设计
为什么要用CSS
哈坤·利
伯特·波斯
css2.1
css3 支持好(IE8及以下不支持)
# 未使用CSS样式的情况下:(感觉非常多的冗余代码)
# 使用CSS样式:
CSS的优点
- 节省时间
- 页面加载速度更快
- 易于维护
- 多设备兼容性
初识别CSS便携方法
# CSS方式设置样式
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>CSS方式设置样式</title> 5 <style type="text/css"> 6 p{ 7 font-size: 30px; 8 color:red; 9 font-weight: bold; 10 } 11 </style> 12 </head> 13 <body> 14 <p> 15 测试CSS内容部分 16 </p> 17 </body> 18 </html>
# 传统方式设置样式
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>传统方式设置样式</title> 5 </head> 6 <body> 7 <p style="font-size: 30px;color: blue;font-weight: bold;"> 8 测试CSS内容部分 9 </p> 10 </body> 11 </html>
# 设置指定文本部分有颜色
CSS的优势
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>CSS 文字样式处理</title> 5 <style type="text/css"> 6 span{ 7 color:green; 8 } 9 </style> 10 </head> 11 <body> 12 <p> 13 <span>有颜色</span>文字样式测试内容<span>有颜色</span> 14 15 </p> 16 </body> 17 </html>
CSS语法和注释规则
使用Sublime Text3快速注释代码的方法
ctrl + “/” 敲击两次,效果如下:
PS:注意这里css下面和html下面的注释符号是不一致的,且不能嵌套。
html注释: <!-- -->
css注释:/* */
CSS的三种引入方式
1. 内联式(行内式)
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>行内式效果演示</title> 5 </head> 6 <body> 7 <!-- 这个地方就是行内式的样式增加方法 --> 8 <p style="color:red;"> 9 文本声明颜色? 10 </p> 11 </body> 12 </html>
2. 嵌入式
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>嵌入式效果演示</title> 5 <!-- 这里添加简单的嵌入式的样式代码 --> 6 <style type="text/css"> 7 h3{ 8 color:blue; 9 } 10 </style> 11 </head> 12 <body> 13 <p style="color:red;"> 14 文本声明颜色? 15 </p> 16 <span><h3>嵌入式样式效果</h3></span> 17 </body> 18 </html>
3. 外部式
单独建立目录和对应的css文件,并在主文件中进行引用
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>外部式效果演示</title> 5 <link rel="stylesheet" type="text/css" href="css/index.css"> 6 </head> 7 <body> 8 <p> 9 文本声明颜色? 10 </p> 11 </body> 12 </html>
三种引入方式的优缺点
内联式(行内式)
缺点:
1. 容易产生重复性代码
2. 代码较多
3. 不利于扩展
4. 不符合结构和样式分离的规范
优点:
1. 不会额外产生请求
嵌入式
缺点:
1. style标签仅适合单页面
2.仅初步实现结构和样式分离,代码复用依然不方便
优点:
1. 不会额外产生请求
外部式(推荐)
缺点:
1. 会产生额外请求
优点:
1. 利于后期维护
2. 可以重复使用
3. 实现了结构和样式分离规范
三种引入方式的优先级
内联式(行内式)> 嵌入式 > 外部式
PS:前提条件,注意覆盖现象(重叠现象)外部标签需要写在嵌入式标签的上面
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>外部式效果演示</title> 5 <!-- 最后执行外部式引入(但是需要在嵌入式上面,不然会覆盖结果) --> 6 <link rel="stylesheet" type="text/css" href="css/index.css"> 7 <!-- 其次执行CSS嵌入式引入 --> 8 <style type="text/css"> 9 p{ 10 color: blue; 11 } 12 </style> 13 </head> 14 <body> 15 <!-- 优先执行CSS样式内联式引入 --> 16 <p style="color: red;"> 17 文本声明颜色? 18 </p> 19 </body> 20 </html> 21 22 23 # 外部式引入index.css文件内容 24 p{ 25 color:green; 26 }
CSS的常用选择器介绍
在index.css的选择器也叫做选择符
# 选择器demo演示:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 /*P标签选择器*/ 2 p{ 3 color:green; 4 } 5 6 选择器{ 7 样式; 8 } 9 /*选择器Demo*/ 10 div{ 11 color:red; 12 font-size:30px; 13 }
CSS选择器:
一.基础选择器
- 标签(元素)选择器 选择网页中共有的属性
效果预览:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>css基础选择器-标签选择器</title> 5 <link rel="stylesheet" type="text/css" href="css\index.css"> 6 </head> 7 <body> 8 <div> 9 <h2>柴犬</h2> 10 <img src="images\1.jpg" alt="这是柴犬头像" title="这只柴犬可爱吗"> 11 <p>柴犬是体型中等并且又最古老的犬。柴犬能够应付陡峭的丘陵和山脉的斜坡,拥有灵敏的感官,使得柴犬屡次成为上乘的狩猎犬。柴犬性格活泼、好动。对自己喜欢的玩具、会一天到晚的把玩。其对外有极强警惕性,能为户主看家护院。其特别是对大型同类,并且不服输。草丛中的耗子、鸟都会是它的猎物及玩具。柴犬是日本国宝,常见的赤色柴犬价格都在6000元到30000元之间。</p> 12 <h2>短毛猫</h2> 13 <img src="images\2.jpg" alt="这是短毛猫头像" title="这只短毛猫可爱吗"> 14 <p>短毛猫是家养猫,皮毛不长,很短。短毛猫可能有单层皮毛,也可能是双层皮毛。单层皮毛通常由一层纤细的丝绒般毛发形成,紧贴身体,比如暹罗猫和波曼猫;双层皮毛由外层粗长毛发和浓密柔软的绒毛内层组成,比如马恩岛猫和俄罗斯蓝猫。</p> 15 16 </div> 17 18 </body> 19 </html> 20 21 22 # index.css下面内容 23 /*P标签选择器*/ 24 /*标签选择器会对所有定义的标签进行同样的样式设定*/ 25 p{ 26 color:green; 27 font-weight: bold; 28 font-size: 14px; 29 } 30 img{ 31 width: 15%; 32 height: auto; 33 }
- 类(class)选择器 一个标签可以指定多个类
CSS格式 .类名{
样式;
}
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>css基础选择器-标签选择器</title> 5 <link rel="stylesheet" type="text/css" href="css\index.css"> 6 </head> 7 <body> 8 <div> 9 <h2 class="title ">柴犬</h2> 10 <img src="images\1.jpg" alt="这是柴犬头像" title="这只柴犬可爱吗"> 11 <p>柴犬是体型中等并且又最古老的犬。柴犬能够应付陡峭的丘陵和山脉的斜坡,拥有灵敏的感官,使得柴犬屡次成为上乘的狩猎犬。柴犬性格活泼、好动。对自己喜欢的玩具、会一天到晚的把玩。其对外有极强警惕性,能为户主看家护院。其特别是对大型同类,并且不服输。草丛中的耗子、鸟都会是它的猎物及玩具。柴犬是日本国宝,常见的赤色柴犬价格都在<span class="price">6000元到30000元</span>之间。</p> 12 <h2 class="title">短毛猫</h2> 13 <img src="images\2.jpg" alt="这是短毛猫头像" title="这只短毛猫可爱吗"> 14 <p>短毛猫是家养猫,皮毛不长,很短。短毛猫可能有单层皮毛,也可能是双层皮毛。单层皮毛通常由一层纤细的丝绒般毛发形成,紧贴身体,比如暹罗猫和波曼猫;双层皮毛由外层粗长毛发和浓密柔软的绒毛内层组成,比如马恩岛猫和俄罗斯蓝猫。</p> 15 16 </div> 17 18 </body> 19 </html> 20 21 22 #index.css内容 23 24 /*类选择器*/ 25 .title{ 26 color: gray; 27 } 28 .price{ 29 color:purple; 30 }
- id(身份证号)选择器 选择网页中特有的属性
CSS格式 #id{
样式;
}
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>css基础选择器-标签选择器</title> 5 <link rel="stylesheet" type="text/css" href="css\index.css"> 6 </head> 7 <body> 8 <div> 9 <h2>柴犬</h2> 10 <img src="images\1.jpg" alt="这是柴犬头像" title="这只柴犬可爱吗"> 11 <p><span id="Shiba">柴犬</span>是体型中等并且又最古老的犬。柴犬能够应付陡峭的丘陵和山脉的斜坡,拥有灵敏的感官,使得柴犬屡次成为上乘的狩猎犬。柴犬性格活泼、好动。对自己喜欢的玩具、会一天到晚的把玩。其对外有极强警惕性,能为户主看家护院。其特别是对大型同类,并且不服输。草丛中的耗子、鸟都会是它的猎物及玩具。柴犬是日本国宝,常见的赤色柴犬价格都在6000元到30000元之间。</p> 12 <h2>短毛猫</h2> 13 <img src="images\2.jpg" alt="这是短毛猫头像" title="这只短毛猫可爱吗"> 14 <p><span id="Short-haired">短毛猫</span>是家养猫,皮毛不长,很短。短毛猫可能有单层皮毛,也可能是双层皮毛。单层皮毛通常由一层纤细的丝绒般毛发形成,紧贴身体,比如暹罗猫和波曼猫;双层皮毛由外层粗长毛发和浓密柔软的绒毛内层组成,比如马恩岛猫和俄罗斯蓝猫。</p> 15 16 </div> 17 18 </body> 19 </html> 20 21 22 23 # index.css 内容 24 /*id选择器*/ 25 #Shiba{ 26 color: red; 27 } 28 29 #Short-haired{ 30 color:blue; 31 }
# 如何正确的玩好类选择器
减少冗余代码,让代码更清晰整洁并且可复用
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>Demo</title> 5 <link rel="stylesheet" type="text/css" href="css\index.css"> 6 </head> 7 <body> 8 <!-- 字体颜色绿色,字体大小20px --> 9 <P class="color ft_size">MJJ1</P> 10 <!-- 字体颜色绿色,加粗 --> 11 <P class="color ft_sytle">MJJ2</P> 12 <!-- 字体加粗,字体大小20px --> 13 <P class="ft_sytle ft_size">MJJ3</P> 14 </body> 15 </html> 16 17 18 # index.css内容 19 .color{ 20 color: green; 21 } 22 .ft_style{ 23 font-weight: bold; 24 } 25 .ft_size{ 26 font-size: 20px; 27 }
二.高级选择器
- 后代选择器
/* 针对div下面的a标签进行设置*/
div a {
color:orange;
}
# 效果样图
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>后代选择器Demo</title> 5 <link rel="stylesheet" type="text/css" href="css\index.css"> 6 </head> 7 <body> 8 <div> 9 <p> 10 <a href="#">测试后代选择器a标签1位置</a> 11 </p> 12 <a href="#">测试后代选择器a标签2位置</a> 13 </div> 14 <a href="#">测试后代选择器a标签3位置</a> 15 </body> 16 </html> 17 18 19 # css样式内容 20 /* 让div 下的所有a标签执行相同操作 */ 21 div a{ 22 color:orange; 23 }
- 子代选择器
.类名>子标签名{
行为动作
}
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>子代选择器Demo</title> 5 <link rel="stylesheet" type="text/css" href="css\index.css"> 6 </head> 7 <body> 8 <div class="loki"> 9 <p> 10 <a href="#">测试后代选择器a标签1位置</a> 11 </p> 12 <a href="#">测试后代选择器a标签2位置</a> 13 </div> 14 <a href="#">测试后代选择器a标签3位置</a> 15 </body> 16 </html> 17 18 # CSS样式内容 19 20 /* 针对类名为loki的标签下面所有a标签进行动作执行 */ 21 .loki a{ 22 color:red; 23 } 24 /* 仅针对类名为loki的标签下面的a标签进行动作执行 */ 25 .loki>a{ 26 color:black; 27 }
- 组合选择器
- 交集选择器
- 伪类选择器