本周总结2023-4-16

最新推荐文章于 2025-12-18 17:13:23 发布

原创最新推荐文章于 2025-12-18 17:13:23 发布 · 96 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #html #css3

前端专栏收录该内容

4 篇文章

订阅专栏

文章介绍了CSS的基础知识，包括格式和结构分离的优势，以及如何定义和应用CSS。讨论了内嵌样式，即在HTML标记中直接使用CSS规则，和使用@import引入外部样式文件的方法。此外，还讲解了CSS的选择器，如父子选择器和后代选择器，用于更精确地控制元素样式。

一·CSS基础

1.基础知识
Css (层叠样式表)是种格式化网页的标准方式，用于控制设置网页的样式，并且允许CSS样式信息与网页内容(由HTML语言定义)分离的一种技术。

优势
格式和结构分离：有利于格式的重用以及网页的修改与维护。
精确控制页面布局：对网页实现更加精确的控制，如网页的布局，字体，颜色，背景等。
实现多个网页同时更新。

3.应用css的步骤
（1）定义css样式表

（2）将定义好的css样式在HTML文档中应用

注意：

包含空格不会影响CSS在浏览器中的工作效果
CSS对大小写是不敏感的
如果涉及与HTML文档一起工作， class类选择器和id选择器对名称的大小写是敏感的。
需要使用几个属性值进行定义，每个属性值之间用逗号隔开，例如：

h2{
    font-family: Times, ' New Century Schoolbook' ，Georgia;
}

二·CSS内嵌样式

内嵌样式指将CSS规则混合在HTML标记中使用的方式。CSS规则作为HTML标记style属性的属性值。例如:

<a style="color:red; font-size: 28px;">淘宝</a>

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>内嵌样式</title>
</head>
<body>
	<a href="http://www.baidu.com" style="color:red; font-size: 22px;">百度</a> <br>
	<a href="http://www.baidu.com" >百度</a>
</body>
</html>

三·使用@import引入外部样式文件

使用@import引入外部样式文件
注意：@import只能放在 style 标记内使用，而且必须放在其他CSS样式之前。其中，urI为关键字，不能随便更改

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>样式使用</title>
	<style type="text/css">
		@import url("css3-3.css")
	</style>
</head>
<body>
<a href="http://www.baidu.com" id="p">淘宝</a> <br>
	<a href="http://www.baidu.com" >淘宝</a>
</body>
</html>

四·CSS选择器

1.父子选择器
举例如下：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>选择器</title>
	<style type="text/css">
		h2 span{
			color: blue;
		}
		h2>span{
			color: red;
			font-size: 48px;
		}
	</style>
</head>
<body>
		<h2>hello<span>world!</span></h2>
		<h2>hello <p><span>world</span></p></h2>
</body>
</html>

2.后代选择器
举例如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>yanse</title>
    <style>
        ol li {
            color: pink;
        }

        ol li a {
            color: red;
        }
    </style>

</head>

<body>
    <div></div>
    <ol>
        <li>我是ol的孩子</li>
        <li>我是ol的孩子</li>
        <li>我是ol的孩子</li>
        <li><a href="#">我是孙子</a></li>
    </ol>
    <ul>
        <li>我是ul的孩子</li>
        <li>我是ul的孩子</li>
        <li>我是ul的孩子</li>
    </ul>
</body>

</html>