CSS全面介绍

爱被打了一巴掌 2022-02-20 07:12 314阅读 0赞

### 1. 简介 ###

CSS：Cascading Style Sheet层叠样式表  
前端开发者写的标签的样式代码一定是样式库定义的样式

关于CSS有三种方式：

1.  行内标签

> html标签中指定style属性  
> style=“css样式属性1：属性值1；css样式属性2：属性2；”  
> **弊端：**  
> 1）css样式代码和html标签混合使用，不利于后期管理  
> 2）行内样式一次只能控制一个标签

1.  内部样式

> 在head标签体中定义一个style标签，在style标签体中书写。  
> **css代码的格式：**
> 
>     选择器{
>        	书写css属性：css属性值；
>        }
> 
> **弊端：** html代码和css代码混合到一起，不利于维护

1.  外部样式

> 1）定义一个以后缀.css结尾文件  
> 2）当前html页面中要引入外部css文件  
> 3）在head标签体中定义标签
> 
>     <link href = "外部css文件路径"  rel = “stylesheet”>

<html>
    	<head>
    		<meta charset="UTF-8">
    		<title>css</title>
    		
    		
    		<link href="css/01.css" rel = "stylesheet">
    	</head>
    	<body>
    	<a href="#">超链接1</a>
    	<br />
    	<a href="#">超链接2</a> 
    	<br />
    	<a href="#">超链接3</a>
    	</body>
    </html>

### 2.css选择器 ###

> 1）Element(元素/标签)选择器
> 
>     标签名称{
>       		css属性：css属性值；
>       }
> 
> 2）class类选择器  
> 在html标签中给定class属性  
> 特点：在同一个html页面中，多个标签可以指定同名的class属性值  
> 类选择器的优先级大于标签选择器
> 
>     .class属性值{
>       		css属性：css属性值；
>       }
> 
> 3）Id选择器  
> 在标签中给定一个id属性值  
> 特点：在同一个html页面中，标签的id属性值必须唯一，不能重复
> 
>     #id属性值{
>       		css样式属性：css属性值；
>       }
> 
> id选择器优先级 > class选择器 > 标签选择器  
> 4）并集选择器
> 
>     selector1,selector2...selectorn{
>       		css样式属性：css属性值；
>       }
> 
> 5）交集选择器（子元素选择器）
> 
>     selector1  selector2  ...{
>       		css样式属性：css属性值；
>       }
> 
> 6）通配符选择器
> 
>     *{
>       	css样式属性：css属性值；
>       }
> 
> **浏览器兼容问题：**  
> 前端：标签中大部分都指定id属性值，且唯一  
> 后端：http协议

<html>
    	<head>
    		<meta charset="UTF-8">
    		<title>css选择器</title>
    		<style>
    			/*标签选择器*/
    			div{ 
    				font-size:20px ;
    				color:#006400 ;
    			}
    			/*class选择器*/
    			.d1{ 
    				font-size: 40px;
    				color: black;
    			}
    			/*id选择器*/
    			#d2{ 
    				font-size: 60px;
    				color: chartreuse;
    			}
    			/*并集选择器*/
    			.d1,#d2{ 
    				background-color: aqua;
    			}
    			/*交集选择器*/
    			div span{ 
    				color:blueviolet
    			}
    		</style>
    	</head>
    	<body>
    		<div class="d1">div1的内容<span>span的内容</span></div>
    		<div class="d1" id="d2">div2的内容</div>
    		<div>div3的内容</div>
    	</body>
    </html>

### 3.伪类选择器 ###

伪类选择器描述的是当前标签所经历的状态  
1）link：鼠标没有访问过的状态  
2）hover：鼠标悬停在标签的状态  
3）active：鼠标激活状态，鼠标点击了，但是没有松开状态  
4）visited：鼠标已经访问过的状态（鼠标点击了，并且已经）  
`选择器：状态{ css样式属性：css属性值； }`  
*必须按照特定的顺序，才能有循环状态的效果*  
a:hover必须置于a:link和a:visited之后，才是有效的  
a:active必须置于a:hover之后 ，才是有效的  
提示：伪类名称对大小写不敏感

<html>
    	<head>
    		<meta charset="UTF-8">
    		<title>伪类选择器</title>
    		<style>
    		
    		
    			a:link{ 
    				font-size: 26px;
    				color: blue;
    				
    			}
    			a:visited{ 
    				font-size: 26px;
    				color:darkgray;
    			}
    			a:hover{ 
    				font-size: 30px;
    				color: #006400;
    				
    				text-decoration: underline;
    			}
    			a:active{ 
    				font-size: 36px;
    				color: #FF0000;
    				text-decoration: none;
    			}
    		</style>
    	</head>
    	<body>
    		<a href="css选择器.html">超链接</a>
    	</body>
    </html>

### 4.css文本属性 ###

> 文本颜色：color  
> 字符间距：letter-spacing  
> 单词间距：word-spacing（两个字符组成一个单词）  
> 文本修饰：text-decoration  
> \-nono：不设置  
> \-underline：下划线  
> \-overline：上划线  
> \-line-through：中划线 应用场景：原价和现价  
> 文本排列方式：text-align

### 5.css字体 ###

*  字体类型：font-family
 *  字体大小：font-size
 *  字体样式：font-style
    
     *  默认为normal
     *  italic：斜体
 *  字体的粗细程度：font-weight
    
     *  bold：适当加粗

**字体的简写属性：将所有针对字体的样式设置到一个声明中，必须按照指定顺序**  
font：font-style font-weight font-size font-family

### 6.列表及表格属性 ###

1.  去掉默认的列表项的标记，自定义图片：list-style-type
2.  自定义列表标记：list-style-image
3.  css表格的样式属性：border-collapse类似于表格标签的ceilspacing属性

### 7.css边框属性 ###

1.指定边框颜色：

border-top-color: blueviolet;
    border-bottom-color: aquamarine;
    border-left-color: brown;
    border-right-color: darkgoldenrod;

2.指定边框宽度

border-top-width: 10px;
    border-bottom-width: 20px;
    border-left-width: 30px;
    border-right-width: 40px;

3.指定边框样式（一个div设置他的边框显示，必须指定边框的样式）

*  solid：单实线
 *  double：双实线
 *  dashed：虚线
 *  dotted：点

border-top-style: solid;
    border-bottom-style: solid;
    border-left-style: dotted;
    border-right-style: double;

默认方向：上左下右  
某一边如果没有设置颜色/宽度/样式，会补齐对边的颜色/宽度/样式  
e.g`border-width:10px;`

简写属性：  
`width：300px;`  
`height:300px;`  
`border:2px solid #000`

### 8.css背景属性 ###

body{ 
    	/*背景颜色*/
    	background-color: greenyellow;
    	/*背景图片*/
    	background-image: url(img/mm.jpg) ;
    	/*设置背景图片：x轴/y轴默认在重复 *需要用background-repeat：设置图片是否重复 */
    	background-repeat：no-repeat;
    	/*背景图片如果设置了不重复，有一个默认的起始位置 background-position：top left */
    }

简写属性：background：背景颜色 背景图片 重复与否 图片位置

### 9.css浮动 ###

注意: 当初float 被设计的时候就是用来完成文本环绕的效果, 所以文本不会被挡住, 这是 float 的特性, 即 float 是一种不彻底的脱离文档流的方式.  
设置某一个元素为float 之后, 当前元素是否往前一个位置飘动,取决于上一个元素是否设置了float,如果设置了则飘动,如果没有设置,则还是在原来的位置