CSS基本知识及帮助文档

偏执的太偏执、 2022-12-05 15:26 194阅读 0赞

### 文章目录 ###

*  什么是CSS
 *  在HTML页面中嵌套使用CSS的三种方式
 *   *  三种方式代码展示
 *  以下是常用的样式
 *   *  边框
     *  隐藏
     *  字体
     *  文本装饰
     *  列表
     *  设置鼠标悬停效果
     *  定位
     *  鼠标小手
 *  帮助文档

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

# 什么是CSS #

CSS(Cascading Style Sheet):层叠样式表语言。  
CSS的作用是：  
修饰HTML页面，设置HTML页面中的某些元素的样式，让HTML页面更好看。

# 在HTML页面中嵌套使用CSS的三种方式 #

第一种方式：在标签内部使用style属性来设置元素的CSS样式，这种方式称为内联定义方式。  
语法格式：  
<标签 style=“样式名:样式值;样式名:样式值;样式名:样式值;…”></标签>

第二种方式：在head标签中使用style块，这种方式被称为样式块方式。  
语法格式：

第三种方式：链入外部样式表文件，这种方式最常用。（将样式写到一个独立的xxx.css文件当中，在需要的网页上  
直接引入css文件，样式就引入了）  
语法格式：

这种方式易维护，维护成本较低。
    		xxx.css文件
    			1.html中引入了
    			2.html中引入了
    			3.html中引入了
    			4.html中引入了

## 三种方式代码展示 ##

内联定义方式

<!doctype html>
    <html>
    	<head>
    		<title>HTML中引入CSS样式的第一种方式：内联定义方式</title>
    	<head>
    	<body>
    		
    		<div style="width: 300px;height: 300px;background-color: #CCFFFF; display: block; border-color: red;border-width: 3px;border-style: solid"></div>
    		
    		
    		<div style="width: 300px;height: 300px;background-color: #CCFFFF; display: block; border: thick double yellow; "></div>
    	</body>
    </html>

样式块方式

<!doctype html>
    <html>
    	<head>
    		<title>HTML中引入样式的第二种方式：样式块方式</title>
    
    		<style type="text/css"> /* 这是CSS的注释 */ /* id选择器 #id{ 样式名: 样式值； 样式名: 样式值； 样式名: 样式值； ........ } */ #usernameErrorMsg{ font-size: 12px; color: red; } /* 标签选择器 标签名{ 样式名: 样式值; 样式名: 样式值; 样式名: 样式值; } */ div{ background-color: black; border: 1px solid red; width: 100px; height: 100px; } /* 类选择器 .类名{ 样式名: 样式值; 样式名: 样式值; 样式名: 样式值; } */ .myclass{ border: 2px double blue; width: 400px; height: 30px } </style>
    	</head>
    	<body>
    		
    		
    		<span id="usernameErrorMsg"">对不起，用户名不能为空！</span>
    		
    		<div></div>
    		<div></div>
    		<div></div>
    
    		
    		<br><br><br><br>
    		<input type="text" class="myclass"/>
    
    		<br><br><br><br><br>
    		<select class="myclass">
    			<option>专科</option>
    			<option>本科</option>
    			<option>硕士</option>
    		</select>
    
    
    	</body>
    </html>

链入外部样式表文件

css文件

a{ 
    	text-decoration: none;
    }
    
    #baiduSpan{ 
    	text-decoration: underline;
    	cursor: wait;
    }

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>HTML中引入CSS样式的第三种方式：链入外部样式表文件</title>
    		
    		
    		<link type="text/css" rel="stylesheet" href="css/1.css"/>
    	</head>
    	<body>
    		<a href="http://www.baidu.com">百度</a>
    		
    		<span id="baiduSpan">点击我链接百度</span>
    	</body>
    </html>

# 以下是常用的样式 #

## 边框 ##

div\{  
border : 1px solid red;  
\}  
（2）  
div\{  
border-width : 1px;  
border-style : solid;  
border-color : red;  
\}

## 隐藏 ##

div\{  
display : none;  
\}

## 字体 ##

div\{  
font-size : 12px;  
color : red;  
\}

## 文本装饰 ##

a\{  
text-decoration : none;  
\}

a\{  
text-decoration : underline;  
\}

## 列表 ##

ul\{  
list-style-type : none;  
\}