Web前端 | HTML引入CSS样式的三种方式

✅作者简介：一位材料转码农的选手，希望一起努力，一起进步！

个人主页：@每天都要敲代码的个人主页

系列专栏：Web前端

目录

一：CSS

1. CSS概述

2.  HTML引入CSS样式的三种方式

第一种方式：内联方式

第二种方式：样式块方式

第三种方式：引入外部独立CSS文件

二：常用样式总结

---

一：CSS

1. CSS概述

（1）什么是CSS，有什么作用？

①CSS(Cascading Style Sheet)：层叠样式表语言！
②CSS的作用是：修饰HTML页面，设置HTML页面中的某些元素的样式，让HTML页面更好看。 CSS好比是HTML的化妆品一样！
③HTML还是主体，CSS依赖HTML；CSS的存在就是修饰HTML，所以新建的文件还是xx.html文件。

（2）在HTML页面中嵌套使用CSS的三种方式：

①第一种方式：内联方式

在标签内部使用style属性来设置元素的CSS样式，这种方式称为内联定义方式。
语法格式：

<标签 style="样式名:样式值;样式名:样式值;样式名:样式值;...">     

②第二种方式：样式块方式

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

③第三种方式：引入外部的.CSS文件

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

        

2.  HTML引入CSS样式的三种方式

第一种方式：内联方式

（1）style的参数可以是：
                width 宽度样式
                height 高度样式
                background-color 背景色样式
                display 布局样式（none表示隐藏，block表示显示，默认是显示）

（2）还可以添加边框，需要三个参数：

        border-width(边框宽度)、border-style(边框线)、border-color(边框线颜色)

 

第二种方式：样式块方式

①id选择器：

使用id选择器，不能够重复使用，因为id是唯一性标识，每次使用都要重新编写代码，使用时前面加上#：#id

语法格式：

                #id{
                        样式名 : 样式值;
                        样式名 : 样式值;
                        样式名 : 样式值;
                        ....

                     }                    

	
		
		
		
        
		
		
	
	
		你好，123
	

 

②标签选择器：

使用标签选择器，不够灵活，只要我们使用了这个标签，所有的样式就都是相同的；标签选择器作用的范围比id选择器广，使用时前面什么都不用加：标签名

语法格式：

                标签名{
                        样式名 : 样式值;
                        样式名 : 样式值;
                        样式名 : 样式值;
                        ....

                     }                 

③类选择器：

使用类选择器，相对比较灵活，只要是类名相同就是同一类，就可以使用同一种样式；使用时前面加上.：.类名

语法格式：

                .类名{
                        样式名 : 样式值;
                        样式名 : 样式值;
                        样式名 : 样式值;
                        ....

                     }               

	
		
		
		
		
		
		
	
	
		
		姓名 

		爱好
			高中
			本科
			硕士
		
	

第三种方式：引入外部独立CSS文件

固定格式：

	
		
		
		
		
		
		
	
	
		
		百度
	

.css文件，这里使用的是标签选择器 

/* 	这是一个标签选择器
	同一个目录下创建，独立的.css文件，用来去除下划线*/
a{
	text-decoration: none;
}

二：常用样式总结

1. 边框

div{
	border : 1px solid red;
}

div{
	border-width : 1px;
	border-style : solid;
	border-color : red;
}

2. 隐藏

div{
	display : none;
}

3. 字体

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

4. 文本装饰

a{
	text-decoration : none;
}

a{
	text-decoration : underline;
}

5. 列表

ul{
	list-style-type : none;
}

6. 设置鼠标悬停效果

:hover

7. 定位

div{
	position : absolute;
	left : 100px;
	top : 100px;
}

8. 鼠标小手

div{
	cursor : pointer;
}

9. 列表样式

	
		
		
		
		
	
	
		

			
安徽
			
阜阳
			
太和
		
	

10. 绝对定位（定的是左上角的点）