网页前端培训3CSS基本使用/选择器/常用属性

蔚落 2024-05-01 16:11 64阅读 0赞

## CSS ##

**概述**

层叠样式表，做到网页表现与内容分离的一种样式的设计语言，能对网页中的对象位置进行像素级的精确控制。

### 基本语法 ###

选择器\{

属性：属性值；

......

注意：声明需要 \{ \} 括起来，每个声明以分号结尾，若属性值为多个单词，需要加 " "

注释： /\* 注释内容 \*/

#### 使用方式： ####

1.行内样式

直接写在标签上的样式，在标签上通过style属性定义

<h2 style="color: blue;font-family: 楷体;">Hello World</h2>

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5amJ5aip5rWB6YC4_size_10_color_FFFFFF_t_70_g_se_x_16][]

2.内部样式

定义在style标签中的样式，style标签一般设置在head标签中

设置所有的h2标签的文本大小20px，为红色

3.外部样式

定义在外部的CSS文档中，通过link标签

link标签写在head标签中

当有多重样式时，按就近原则

## 选择器 ##

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title></title>
    		<style type="text/css">
    			/*通用选择器*/
    			*{
    				color: #00FFFF;
    			}
    			/*元素选择器*/
    			div{
    				font-size:1.875rem ;
    			}
    			/*ID选择器*/
    			#p1{
    				background-color: brown;
    			}
    			/*类选择器*/
    			.class1{
    				font-family: 楷体;
    			}
    			/*分组选择器*/
    			#p1,.class2,font,span{
    				text-decoration: line-through;
    			}
    		</style>
    	</head>
    	<body>
    		<div class="class1">这是一个div</div>
    		<div>这是另一个div</div>
    		<p id="p1">这是一个p</p>
    		<span class="class2">这是一个span</span><br />
    		<font>这是一个font</font>
    		
    	</body>
    </html>

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5amJ5aip5rWB6YC4_size_14_color_FFFFFF_t_70_g_se_x_16][]

CSS样式的优先级，是根据选择器的精准度/权重来决定，权重越大，优先级越高

元素选择器：1

类选择器：10

id选择器：100

内联选择器：1000

--------------------

## 组合选择器 ##

后代选择器（空格隔开）

子元素选择器（大于号隔开）

相邻兄弟选择器（加号隔开）

普通兄弟选择器（波浪线隔开）

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<style type="text/css">
    			/*后代选择器*/
    			.food li{
    				border: chartreuse solid 1px;
    			}
    			/*子代选择器*/
    			.food2>li{
    				border: palevioletred dotted 1px;
    			}
    			/*相邻兄弟选择器*/
    			#mydiv+div{
    				background-color: coral ;
    			}
    			/*普通兄弟选择器*/
    			#mydiv2~div{
    				background-color: fuchsia;
    			}
    				</style>
    		<title>组合选择器</title>
    	</head>
    	<body>
    		
    		<ul class="food">
    			<li>水果
    				<ul>
    					<li>苹果</li>
    					<li>菠萝</li>
    					<li>火龙果</li>
    				</ul>
    			</li>
    			<li>蔬菜
    				<ul>
    					<li>菠菜</li>
    					<li>胡萝卜</li>
    					<li>白菜</li>
    				</ul>
    			</li>
    		</ul>
    			<hr />
    		<ul class="food2">
    			<li>水果
    				<ul>
    					<li>苹果</li>
    					<li>菠萝</li>
    					<li>火龙果</li>
    				</ul>
    			</li>
    			<li>蔬菜
    				<ul>
    					<li>菠菜</li>
    					<li>胡萝卜</li>
    					<li>白菜</li>
    				</ul>
    			</li>
    		</ul>
    		<div>相邻兄弟选择器测试</div>	
    		<div id="mydiv">相邻兄弟选择器测试</div>	
    		<div>相邻兄弟选择器测试</div>	
    		<div>相邻兄弟选择器测试</div>	
    		<div>相邻兄弟选择器测试</div>	
    		<hr />
    		<div>普通兄弟选择器测试</div>
    		<div id="mydiv2">普通兄弟选择器测试</div>	
    		<div>普通兄弟选择器测试</div>	
    		<div>普通兄弟选择器测试</div>	
    		<div>普通兄弟选择器测试</div>	
    	</body>
    </html>

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5amJ5aip5rWB6YC4_size_20_color_FFFFFF_t_70_g_se_x_16][]

[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5amJ5aip5rWB6YC4_size_10_color_FFFFFF_t_70_g_se_x_16]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/01/41924a0b438542bdaba98ea6e939aba9.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5amJ5aip5rWB6YC4_size_14_color_FFFFFF_t_70_g_se_x_16]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/01/d287f5fcc78c4352a198a5178104cda3.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5amJ5aip5rWB6YC4_size_20_color_FFFFFF_t_70_g_se_x_16]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/01/f5678b4310e14d018e006e75845aa76e.png