CSS基础知识（1）

最新推荐文章于 2023-12-19 14:29:48 发布

晚风yY

最新推荐文章于 2023-12-19 14:29:48 发布

阅读量95

点赞数

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/m0_55689351/article/details/114436242

版权

CSS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

CSS_1

1.什么是CSS？

CSS-Cascading Style Sheet [层叠样式表]

是用于(增强)控制网页[html]样式并允许将样式信息与网页内容分离的一种标记性语言

2.CSS的作用？

给网页[html]的元素/标记/标签设置样式的。可以让HTML网页变得好看。

3.在HTML网页中如何使用CSS?

1.内联定义：内联定义即是在[html]的元素/标记/标签的内部使用对象的style属性定义适用其的样式表属性。已达到控制当前html元素的样式。

在[html]的元素/标记/标签的开始标记中设置样式。缺点：当我们给一个html标记设置很多样式的时候，这个HTML标记就会变得很长，以后修改起来不方便。

例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试内联定义CSS</title>
	</head>
	<body>
		<h1>1.内联定义</h1>
		<h2>在[html]的元素/标记/标签的开始标记中设置样式。</h2>
		<div style="width:200px;height:200px;background-color:red;"></div>
	</body>
</html>

2.定义内部样式块对象 (Embedding a Style Block)

就是在<head></head>中添加<style></style>标记来设置html元素的样式。

缺点:当我们需要为html文件中的很多标记设置样式时，会使得内部样式块变得很大适合于样式相对较多的时候使用

例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试定义内部样式块</title>
		<style>
			div{width:200px;
				height: 200px;
				background-color: blue;}
		</style>
	</head>
	<body>
		<h1>2.定义内部样式块</h1>
		<h2>在html的head标记中通过定义style标记来设置css样式</h2>
		<div></div>
		<h3>缺点:当我们需要为html文件中的很多标记设置样式时，会使得内部样式块变得很大</h3>
	</body>
</html>

3.链入外部样式表文件（导入外部样式表文件）（经常使用）

先建立外部样式表文件（.css），然后使用HTML的link标记，将外部样式表文件（.css）导入进当前的html文件中。

第一步：建立外部样式表文件（.css）

第二步：在html的head标记中使用link标记导入样式文件。

例：

mytest.css
div{
	width: 200px;
	height: 200px;
	background-color: yellow;
}


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试链入外部样式</title>
		<link rel="stylesheet" href="mytest.css" type="text/css"/>
	</head>
	<body>
		<h1>链入外部样式</h1>
		<h2>第一步：建立外部样式表文件（.css）</h2>
		<h2>第二步：在html的head标记中使用link标记导入样式文件。</h2>
		<div></div>
	</body>
</html>

当我们需要大量的css样式设置是使用这种方式，这种方式可以做到html与css的分离控制。

我们往往使用最多的就是第2种和第3种方式。这两种方式定义css样式的语法是相同的。

格式：


css选择器{
        css样式名称:样式值;
        css样式名称:样式值;
        css样式名称:样式值;
}

4.CSS选择器

1.元素选择器---根据html元素的名称选中被控制的html标记。

2.id选择器--根据给html标记设置的id属性来选中被控制的html标记。

如果要使用id选择器那么首先需要给html标记去设置id属性。

3.类【class】选择器---根据给html标记设置的class属性来选中被控制的html标记。

如果要使用类【class】选择器那么首先需要给html标记去设置class属性。

4.包含选择器--选择所有被父元素包含的子元素。

5.属性选择器--根据html标记的属性来选中被控制的元素

元素 [属性名称] { sRules }：选择具有某个属性的元素
元素 [属性名称 = value【属性值】 ] { sRules }：选择具有某个属性且属性值等于 value 的元素

6.子元素选择器---选择所有作为E1子对象的 E2

5.选择器分组

将同样的样式应用于多个选择器选中的元素上。不同的选择器之间使用“，”分割。

注意:css的选择器在使用的时候，不是单一去应用，而是通过不同的组合形式来使用。

例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试选择器分组</title>
		<style>
			.td1,p span{
				color: red;
				font-size: 30px;
			}
		</style>
	</head>
	<body>
		<h1>选择器分组</h1>
		<h2>将同样的样式应用于多个选择器选中的元素上。不同的选择器之间使用“，”分割。</h2>
	    <table border="1px" width="300px">
			<tr>
				<td class="td1">zhansgan</td>
				<td>23</td>
				<td>xian</td>
			</tr>
			<tr>
				<td class="td1">lisi</td>
				<td>23</td>
				<td>xian</td>
			</tr>
			<tr>
				<td class="td1">wangwu</td>
				<td>23</td>
				<td>xian</td>
			</tr>
		</table>
		<p>测试选择器的<span>分组</span>用法</p>
		<p>测试选择器的分组用法</p>
		<p>测试选择器的<span>分组</span>用法</p>
	</body>
</html>