02.CSS基本语法-CSDN博客

本文链接：https://blog.csdn.net/qq_41446812/article/details/123950172

CSS快速入门

CSS介绍

CSS(Cascading Style Sheets)：层叠样式表。
用于设置和布局网页的一种计算机语言，告知浏览器如何渲染解析页面元素

CSS组成

选择器：选择HTML元素的方式，可以使用标签名、class属性值、id值等多种方式
样式声明：用于给HTML元素设置具体的样式，格式是属性名：属性值
格式如下：

        选择器 {
            属性名:属性值;
            属性名:属性值;
            属性名:属性值;
        }

        h1 {
            color: red;
            font-size: 5px;
        }

CSS的引入方式

内联样式

在标签中通过style属性来控制样式，只能影响当前这一行。
格式

		<标签 sytle="属性名:属性值; 属性名:属性值;">内容</标签>

	    <!--内联样式-->
	    <h1 style="color: red; font-size:20px">Hello world</h1>

内部样式

在<head>标签中通过<style>标签来控制样式，值能影响当前文件。
格式

			<head>
					<style>
							选择器 {
									属性名:属性值;
									属性名:属性值;
							}
					</style>
			</head>

 			<head>
 			    <meta charset="UTF-8">
 			    <title>表单标签的演示</title>
 			    <!--内部样式-->
 			    <style>
 			        h1 {
 			            color: red;
 			            font-size: 5px;
 			        }
 			    </style>
 			</head>

外部样式

在<head>标签中通过<link>标签来引入独立CSS文件，可以影响不同的文件
格式

				<link rel="stylesheet" href="css文件">

				<head>
				    <meta charset="UTF-8">
				    <title>表单标签的演示</title>
				    <!--外部样式-->
				    <link rel="stylesheet" href="css/01.css"/>
				</head>

CSS的注释

什么是注释
- 注释是用于解释说明程序的
注释的格式
- /*注释的内容*/
注释的特点
- 被注释的样式不会被浏览器解析

CSS的选择器

什么是选择器
- 一个HTML文件中会存在很多个元素，如果相对不同的元素添加不同的样式，就需要使用到选择器了！说白了，就是选择器就是用来选择指定的元素的！

选择器的分类

基本选择器

名称	符号	作用	示例
元素选择器	标签名	根据标签名匹配元素	div{}
类选择器	.	根据class属性值匹配元素	.center{}
id选择器	#	根据id属性值匹配元素	#username{}

    <style>
        /*元素选择器*/
        div{
            color: red;
        }
        /*类选择器*/
        .cls{
            color: blue;
        }
        /*id选择器*/
        #d1{
            color: green;
        }
    </style>

属性选择器

名称	符号	作用	示例
属性选择器	[]	根据指定属性匹配元素	[type]{} [type=text]{}

	<style>
        /*属性选择器*/
        [type]{
            color: red;
        }
        [type=password]{
            color: blue;
        }
    </style>

伪类选择器

名称	符号	作用	示例
伪类选择器	标签名：link	为访问的状态	a:link{}
	标签名：visited	已访问的状态	a:visited{}
	标签名：hover	鼠标悬浮的状态	a:hover
	标签名：active	已选中的状态	a:active

    <style>
        a{
            /*去掉下滑线*/
            text-decoration: none;
        }
        /*为访问的状态*/
        a:link{
            color: black;
        }
        /*已访问的状态*/
        a:visited{
            color: blue;
        }
        /*鼠标悬浮的状态*/
        a:hover{
            color: red;
        }
        /*已选中的状态*/
        a:active{
            color: yellow;
        }
    </style>

组合选择器

名称	符号	作用	示例
后代选择器	空格	使用空格结合多个选择器，基于第一个选择器，匹配第二个选择器的所有元素	.center li{}
分组选择器	,	可以同时匹配多个元素	div,span,p{}

	<style>
        /*后代选择器*/
        .center input{
            color: red;
        }
        /*分组选择器*/
        sapn,p{
            color: blue;
        }
    </style>