尚硅谷 JavaWeb笔记 --- CSS

深藏阁楼爱情的钟 2023-10-01 18:26 2阅读 0赞

#### 文章目录 ####

*  CSS技术
 *   *  css技术介绍
     *  css语法规则:
 *  CSS 和 HTML 的结合方式
 *   *  第一种
     *  第二种
     *  第三种
 *  CSS选择器
 *   *  标签名选择器
     *  id选择器
     *  class选择器(类选择器)
     *  组合选择器

## CSS技术 ##

### css技术介绍 ###

CSS 是「层叠样式表单」。是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言

它可以使得页面更加的美观

### css语法规则: ###

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBASmF2YeiPnOm4n-eahOWtpuS5oOS5i-i3rw_size_15_color_FFFFFF_t_70_g_se_x_16]

选择器 ：浏览器根据“选择器”决定受 CSS 样式影响的 HTML 元素（标签）。 
     属性 (property) 是你要改变的样式名，并且每个属性都有一个值。
     属性和值被冒号分开 ，并 由花括号包围，这样就组成了一个完整的样式声明
     （declaration），例如： p {color: blue}  多个声明：如果要定义不止一个声明，
     则需要用分号将每个声明分开。虽然最后一条声明的 最后可以不加分号
     (但尽量在每条声明的末尾都加上分号) 
    例如：

p{
         color:red;
    			font-size:30px; }

注：一般每行只描述一个属性 CSS 注释：/*注释内容*/

## CSS 和 HTML 的结合方式 ##

### 第一种 ###

在标签的 style 属性上设置”key:value value;”，修改标签样式。

需求 1：分别定义两个 div、span 标签，分别修改每个 div 标签的样式为：  
边框1个像素，实线，红色。

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    	</head>
    	<body>
    		
    		<div style="border: 1px solid red ;width:100px ;height:100px ;background-color: blue  ">div1</div>
    		<div style="border: 1px solid red;">div2</div>
    		<span  style="border: 1px solid red;">span1</span>
    		<span style="border: 1px solid red;">span2</span>
    		
    		
    		
    		
    		
    	</body>
    </html>

**缺点：**  
1.如果标签多了。样式多了。代码量非常庞大。  
2.可读性非常差。  
3.Css 代码没什么复用性可方言

### 第二种 ###

在 head 标签中，使用 style 标签来定义各种自己需要的 css 样式。

格式如下： xxx {
    	         Key : value value; 
    	         }

需求  ：分别定义两个 div、span 标签，分别修改每个 div 标签的样式为：
             边框 1 个像素，实线，红色。 
             <div>div 标签 1</div> 
             <div>div 标签 2</div>
              <span>span 标签 1</span>
               <span>span 标签 2</span>

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		
    		<style type="text/css">
    			
    			div{
          
    				
    				border: red 1px solid;
    				
    			}
    			
    			
    			
    		</style>
    		
    		
    	</head>
    	<body>
    		
    		<div>div1</div>
    		<div>div2</div>
    		
    		
    	</body>
    </html>

![在这里插入图片描述][2a86543de99448298281bab3cb080bd7.png]  
**缺点**

> 1.只能在同一页面内复用代码，不能在多个页面中复用 css 代码。  
> 2.维护起来不方便，实际的项目中会有成千上万的页面，要到每个页面中去修改。工作量太大了。

### 第三种 ###

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBASmF2YeiPnOm4n-eahOWtpuS5oOS5i-i3rw_size_15_color_FFFFFF_t_70_g_se_x_16 1]

## CSS选择器 ##

### 标签名选择器 ###

标签名选择器的格式是： 标签名{ 属性：值; }
    标签名选择器，可以决定哪些标签被动的使用这个样式

需求 1：在所有 div 标签上修改字体颜色为蓝色，字体大小 30 个像素。
            边框为 1 像素黄色实线。 并且修改所有 span 标签的字体颜色为黄
            色，字体大小 20 个像素。边框为 5 像素蓝色虚线。

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBASmF2YeiPnOm4n-eahOWtpuS5oOS5i-i3rw_size_20_color_FFFFFF_t_70_g_se_x_16]  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBASmF2YeiPnOm4n-eahOWtpuS5oOS5i-i3rw_size_20_color_FFFFFF_t_70_g_se_x_16 1]

### id选择器 ###

id 选择器的格式是： 
    			#id 属性值{ 
    					属性：值; 
    			}
    			id 选择器，可以让我们通过 id 属性选择性的去使用这个样式。

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBASmF2YeiPnOm4n-eahOWtpuS5oOS5i-i3rw_size_20_color_FFFFFF_t_70_g_se_x_16 2]

### class选择器(类选择器) ###

class 类型选择器的格式是：
     .class 属性值{ 
     			属性：值;
     	}

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBASmF2YeiPnOm4n-eahOWtpuS5oOS5i-i3rw_size_18_color_FFFFFF_t_70_g_se_x_16]

### 组合选择器 ###

组合选择器的格式
    	选择器1，选择器2，选择器n{
    			属性:值;
    			}

组合选择器可以让多个选择器共用一个css样式代码  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBASmF2YeiPnOm4n-eahOWtpuS5oOS5i-i3rw_size_16_color_FFFFFF_t_70_g_se_x_16]

[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBASmF2YeiPnOm4n-eahOWtpuS5oOS5i-i3rw_size_15_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/2806c14c9b7a45ccafdb315a024766aa.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBASmF2YeiPnOm4n-eahOWtpuS5oOS5i-i3rw==,size_15,color_FFFFFF,t_70,g_se,x_16
[2a86543de99448298281bab3cb080bd7.png]: https://img-blog.csdnimg.cn/2a86543de99448298281bab3cb080bd7.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBASmF2YeiPnOm4n-eahOWtpuS5oOS5i-i3rw_size_15_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/cb5c568d1eed49429104e6461411e9e5.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBASmF2YeiPnOm4n-eahOWtpuS5oOS5i-i3rw==,size_15,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBASmF2YeiPnOm4n-eahOWtpuS5oOS5i-i3rw_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/11e0262d8dee43b2a612afaf0700b3b8.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBASmF2YeiPnOm4n-eahOWtpuS5oOS5i-i3rw==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBASmF2YeiPnOm4n-eahOWtpuS5oOS5i-i3rw_size_20_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/892966a1f27e4128a9ac7f0042034586.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBASmF2YeiPnOm4n-eahOWtpuS5oOS5i-i3rw==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBASmF2YeiPnOm4n-eahOWtpuS5oOS5i-i3rw_size_20_color_FFFFFF_t_70_g_se_x_16 2]: https://img-blog.csdnimg.cn/ec90cedd593d41cd95108168269180ad.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBASmF2YeiPnOm4n-eahOWtpuS5oOS5i-i3rw==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBASmF2YeiPnOm4n-eahOWtpuS5oOS5i-i3rw_size_18_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/db86fcd6fa1c49aabe0e72ebb2b8a518.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBASmF2YeiPnOm4n-eahOWtpuS5oOS5i-i3rw==,size_18,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBASmF2YeiPnOm4n-eahOWtpuS5oOS5i-i3rw_size_16_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/b289164c6838460f816d8e04fab4c34e.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBASmF2YeiPnOm4n-eahOWtpuS5oOS5i-i3rw==,size_16,color_FFFFFF,t_70,g_se,x_16