CSS基础01 - HTML页面嵌套使用CSS的三种方式

L-FHy

已于 2023-03-29 21:21:20 修改

阅读量1.1k

点赞数 1

分类专栏： HTML-CSS-JavaScript 文章标签： css html css3

于 2023-03-29 21:05:59 首次发布

本文链接：https://blog.csdn.net/weixin_43636084/article/details/129841048

版权

HTML-CSS-JavaScript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

CSS基础01

什么是CSS，有什么作用？
CSS我们要求掌握到什么程序？
在HTML页面中嵌套使用CSS的三种方式
HTML中引入CSS样式的第一种方式
HTML中引入CSS样式的第二种方式
HTML中引入CSS样式的第三种方式
列表样式
CSS样式的绝对定位

什么是CSS，有什么作用？

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

CSS我们要求掌握到什么程序？

常见的CSS样式要求会写。
别人写的CSS样式要能看懂。

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

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

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

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

<head>
	<style type="text/css">
		选择器{
			样式名 : 样式值;
			样式名 : 样式值;
			......
		}
		选择器{
			样式名 : 样式值;
			样式名 : 样式值;
			......
		}
	</style>
</head>

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

<link type="text/css" rel="stylesheet" href="css文件的路径"/>

HTML中引入CSS样式的第一种方式

<!doctype html>
<html>
	<head>
		<title>HTML中引入CSS样式的第一种方式：内联定义方式</title>
	</head>
	<body>
		
		<!--
			width 宽度样式
			height 高度样式
			background-color 背景色样式
			display 布局样式 (none表示隐藏，block表示显示)

		-->
		<div style="width : 300px; height : 300px; background-color : #CCFFFF; display : block; border-color : red; border-width : 1px; border-style : solid"></div>

		<br><br>
		
		<!--
			边框样式还能这样写：
				border : 1px solid black;
		-->
		<div style="width : 300px; height : 300px; background-color : #CCFFFF; display : block; border : 1px solid black"></div>


	</body>
</html>

HTML中引入CSS样式的第二种方式

<!doctype html>
<html>
	<head>
		<title>HTML中引入CSS样式的第二种方式：样式块</title>

		<style type="text/css">
			/*
				这是CSS的注释
			*/
			/*
				id选择器
				语法格式：
					#id{
						样式名 : 样式值;
						样式名 : 样式值;
						样式名 : 样式值;
						...
					}
			*/
			#usernameErrorMsg {
				color : red;
				font-size : 12px;
			}

			/*
				标签选择器
				语法格式：
					标签名{
						样式名 : 样式值;
						样式名 : 样式值;
						样式名 : 样式值;
						...
					}
				标签选择器作用的范围比id选择器广。
			*/
			div {
				background-color : black;
				border : 1px solid red;
				width : 100px;
				height : 100px;
			}

			/*
				类选择器
				语法格式：
					.类名{
						样式名 : 样式值;
						样式名 : 样式值;
						样式名 : 样式值;
						...
					}
			*/
			.myclass{
				border : 1px solid red;
				width : 400px;
				height : 30px;
			}
			

		
		</style>
	</head>
	<body>
		
		<!--
			设置样式字体大小12px，颜色为红色！
		-->
		<span id="usernameErrorMsg">对不起，用户名不能为空！</span>

		<div></div>
		<div></div>
		<div></div>

		<br>
		<!--class相同的标签，可以认为是同一类标签-->
		<input type="text" class="myclass"/>

		<br><br>

		<select class="myclass">
			<option>专科</option>
			<option>本科</option>
		</select>	
	

	</body>
</html>

HTML中引入CSS样式的第三种方式

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>HTML中引入CSS样式的第三种方式： 引入外部独立的CSS文件</title>

        <!--引入-->
        <link rel="stylesheet" type="text/css" href="1.css"/>

    </head>

    <body>
        <a href="http://www.baidu.com">百度</a>
        <br>
        <span id="baiduSpan">点击我链接到百度哦!</span>
    </body>

</html>

1.css文件
/*
    标签选择器：
        标签名{
            样式名 : 样式值;
            样式名 : 样式值;
            样式名 : 样式值;
            ...
        }
*/
a{
    text-decoration: none;
}

/*
    id选择器：
        #id{
            样式名 : 样式值;
            样式名 : 样式值;
            样式名 : 样式值;
            ...
        }

*/
/*
    cursor:是鼠标样式，pointer是小手，hand也是，
    但是hand有浏览器兼容问题，尽可能使用pointer
*/
#baiduSpan{
    text-decoration: underline;
    cursor: pointer;
}

列表样式

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>HTML中引入CSS样式的第三种方式： 引入外部独立的CSS文件</title>

        <!--引入-->
        <link rel="stylesheet" type="text/css" href="1.css"/>

    </head>

    <body>
        <a href="http://www.baidu.com">百度</a>
        <br>
        <span id="baiduSpan">点击我链接到百度哦!</span>
    </body>

</html>

CSS样式的绝对定位

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>CSS样式的绝对定位</title>

        <style type="text/css">
            #div1{
                background-color: red;
                border: 1px black solid;
                width: 300px;
                height: 300px;
                position: absolute;/*绝对定位*/
                left: 100px;
                top: 100px;
            }
        </style>
    </head>
    <body>
        <div id="div1"></div>
    </body>
</html>