提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  其他

当前栏目

WEB开发基础(CSS篇)

基础WebCSS开发
2023-09-11 14:15:23 时间

CSS的介绍

Cascading Style Sheet 层叠样式表

用途：它用来控制网页样式，并允许样式代码与网页内容分离的一种标记语言

简单地说：css的引入就是为了使得HTML语言能够更好地适应页面的美工设计

 

为什么要用CSS

哈坤·利

伯特·波斯

css2.1  

css3 支持好（IE8及以下不支持）

# 未使用CSS样式的情况下：（感觉非常多的冗余代码）

 

# 使用CSS样式：

 

 

CSS的优点

 

  • 节省时间
  • 页面加载速度更快
  • 易于维护
  • 多设备兼容性

 初识别CSS便携方法

# CSS方式设置样式

 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>
View Code

# 传统方式设置样式

 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>
View Code

 # 设置指定文本部分有颜色

CSS的优势

 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>
View Code

 CSS语法和注释规则

 使用Sublime Text3快速注释代码的方法

ctrl + “/” 敲击两次，效果如下：

PS：注意这里css下面和html下面的注释符号是不一致的，且不能嵌套。

html注释：   <!--  -->

css注释：/*  */

 

 

CSS的三种引入方式

1. 内联式（行内式）

 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>
View Code

2. 嵌入式

 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>
View Code

3. 外部式

 

单独建立目录和对应的css文件，并在主文件中进行引用

 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>
View Code

 

三种引入方式的优缺点 

内联式（行内式）

缺点：

1. 容易产生重复性代码

2. 代码较多

3. 不利于扩展

4. 不符合结构和样式分离的规范

优点：

1. 不会额外产生请求

 

嵌入式

缺点：

1. style标签仅适合单页面

2.仅初步实现结构和样式分离，代码复用依然不方便

优点:

1. 不会额外产生请求

 

外部式（推荐）

缺点：

1. 会产生额外请求

优点：

1. 利于后期维护

2. 可以重复使用

3. 实现了结构和样式分离规范

 

三种引入方式的优先级

内联式（行内式）> 嵌入式 > 外部式

PS：前提条件，注意覆盖现象（重叠现象）外部标签需要写在嵌入式标签的上面

 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 }
View Code

 

CSS的常用选择器介绍

在index.css的选择器也叫做选择符

# 选择器demo演示：

 1 /*P标签选择器*/
 2 p{
 3 color:green;
 4 }
 5 
 6 选择器{     
 7     样式；
 8 }
 9 /*选择器Demo*/
10 div{
11  color:red;
12  font-size:30px;
13   }
View Code

 

 

CSS选择器：
一.基础选择器
- 标签(元素)选择器  选择网页中共有的属性

效果预览：

 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 }
View Code

 

- 类(class)选择器  一个标签可以指定多个类

CSS格式 .类名{

样式；

}

 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 }
View Code

 


- id(身份证号)选择器  选择网页中特有的属性

CSS格式 #id{

  样式；

}

 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 }
View Code

 

# 如何正确的玩好类选择器

减少冗余代码，让代码更清晰整洁并且可复用

 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 }
View Code

 

 

二.高级选择器


- 后代选择器

/* 针对div下面的a标签进行设置*/

div a {

    color:orange;

}

# 效果样图

 

 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 }
View Code

 

- 子代选择器

.类名>子标签名{

    行为动作

}

 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 }
View Code

 

- 组合选择器
- 交集选择器
- 伪类选择器

 

相关文章