CSS讲解和选择器

喜欢ヅ旅行 2022-03-06 04:28 177阅读 0赞

**一.回顾内容**  
前端的三大组成(三大模块)  
HTMl(超文本标记语言) 结构层  
css(层叠样式表) 表现层:用来美化HTML结构  
JS(Java script)(脚本语言) 行为层:提供用户和界面的交互  
**二.CSS(层叠样式表)**

1.  CSS的概念及其介绍  
    CSS 指层叠样式表 (Cascading Style Sheets)  
    作用:美化HTML结构,重点:css可以很好的将结构内容和表现进行分离.
2.  css的三种表现形式(引入方法)  
    css的语法结构:选择器\{属性:值;属性:值;…\}  
    选择器:选择器是将样式和页面元素关联起来的名称，属性是希望设置的样式属性每个属性有一 个 或多个值.顾名思义就是用来筛选元素的一种方式.

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title></title>
    		
    		<style >
    			.div{
    					background-color:green; color:cyan; width: 300px;
    				}		
    		</style>
    				
    		<link rel="stylesheet" type="text/css" href="css/CSS_01.css"/>
    	</head>
    	<body>
    			
    		<div style="background-color: red; color: yellow; width:400px; height:5em;"><h1>这个是第一个div标签</h1></div>
    		<div class="div">这是第二个div选择器</div>
    		<span>这个是第三个div标签</span>
    	</body>
    </html>

外联样式css

span{
    	background-color:blue;
    	color: purple;
    	width: 700px;
    }

**3. CSS 文本设置**  
常用的应用文本的 css 样式：  
color 设置文字的颜色，如： color:red;  
font-size 设置文字的大小，如：font-size:12px;  
font-family 设置文字的字体，如：font-family:‘微软雅黑’;  
font-style 设置字体是否倾斜，如：font-style:‘normal’; 设置不倾斜， font-style:‘italic’;设置文字倾斜  
font-weight 设置文字是否加粗， 如： font-weight:bold; 设 置 加 粗 font-weight:normal 设置不加粗  
font 同时设置文字的几个属性，写的顺序有兼容问题，建议按照如下顺序写：  
font：是否加粗字号/行高 字体；如： font:normal 12px/36px ‘微软雅黑’;  
line-height 设置文字的行高，如：line-height:24px; (文本的垂直居中)  
text-decoration 设置文字的下划线，如：text-decoration:none; 将文字下划线去掉 (overline上划线,underline下划线)  
text-indent 设置文字首行缩进，如：text-indent:24px; 设置文字首行缩进 24px  
text-align 设置文字水平对齐方式，如 text-align:center 设置文字水平居中  
border-collapse: collapse;设置表格边框合并  
**4.css颜色的三种表现形式**  
(1).直接写颜色的名称  
background:red;  
(2).使用RGB三原色设置  
background:rgb(76,50,0);  
background:rgba(76,50,0,0.8);//a不透明度//  
(3).使用16进制的方式表示颜色(最常用的一种)  
background:\#ff0000  
**5.css选择器**

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<style>
    		/*通配符选择器*/
    		*{
    			margin: 0px;
    			padding: 0px;
    		}
    		
    		/*标签选择器*/
    		div{
    			color:red;
    			font-size: large;
    			background-color: yellow;
    			width: 500px;
    		}
    		/*类选择器*/
    		.lei{
    			color: green;
    			background-color: cyan;
    			width: 700px;
    		}	
    		/*id选择器*/
    		#only{
    			font-family: "arial black";
    		}
    		/*层叠选择器*/	
    		.some{
    			height:10em;
    		}
    		</style>
    	</head>
    	<body>
    		<div>div1</div>
    		<div>div1</div>
    		<div>div1</div>
    		<div class="lei">div1</div>
    		<div class="lei" id="only">div1</div>
    		<h1 class="lei some">div1</h1>
    		
    	</body>
    </html>