什么是CSS,CSS的作用是什么
1.Css选择器
1.1 通用选择器
1.2 标签选择器
1.3 ID选择器
1.4 类选择器
1.5 后代选择器
1.6 子选择器
1.7 相邻兄弟选择器
1.8通用兄弟选择器
1.9分组选择器
1.10 属性选择器
2.HTML引用CSS(4种方法)
2.1 内嵌样式表
<!DOCTYPE html>
<html>
<head>
<title>编程帮</title>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>文字</h1>
<p>http://www.biancheng.net/</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>编程帮</title>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>文字</h1>
<p>http://www.biancheng.net/</p>
</body>
</html>
2.2 内联样式 内联样式就是将样式信息直接定义在 HTML 标签的 style 属性中,由于内联样式定义在标签内部,所以它只对所在的标签有效。示例代码如下:
<!DOCTYPE html>
<html>
<head>
<title>编程帮</title>
</head>
<body>
<h1 style="color: maroon; margin-left: 40px">文字</h1>
<p style="color: blue;">http://www.biancheng.net/</p>
</body>
</html>
2.3 外部样式表
外部样式表是最常见也是最推荐的引用 CSS 的方式,您只需要将 CSS 样式定义在一个 .css 格式的文件中,然后使用 HTML 的标签将这个 .css 格式的样式文件应用到 HTML 文档中。
下面通过具体的示例来演示外部样式表的使用。首先,需要定义一个 .css 格式的样式文件(例如 style.css),如下所示:
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
然后我们在 HTML 文档中引入这个 style.css 文件,如下所示:
<!DOCTYPE html>
<html>
<head>
<title>文字</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<h1>文字</h1>
<p>http://www.biancheng.net/</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>文字</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<h1>文字</h1>
<p>http://www.biancheng.net/</p>
</body>
</html>
2.4 导入样式表
您同样可以使用@import来引用外部样式表,这一点与使用标签比较相似。使用@import引用外部样式表的语法格式如下:
@import "URL";
或者
@import url("URL");
其中 URL 为外部样式表的存放路径。
总结:CSS用于美化网页,它是网页的灵魂,灵活使用·CSS会让网页达到意想不到的效果,天津天迅达科技有限公司使用不同的CSS解决方案为您创建精美的网页。
天津天迅达科技有限公司经过多年来对APP、小程序、以及网站建设的探索,已经帮助每一个客户快速开发出属于自己的APP、小程序、网站,是万千企业之选。
- 数字孪生:现实世界的身外化身 2024-12-06
- 微信公众号全面“今日头条化”,自媒体将迎来“第二春”? 2024-12-04
- 优质长视频的破圈效应 2024-12-05
- 奶茶行业的裂变营销 2024-12-03
- 浅浅分享下支付产品经理如何写全局性的需求文档以及工作流程 2024-12-02
- “麦学”爆红:一场精心策划的营销盛宴 2024-11-29
- 如果遇到麦琳式的领导,怎么办? 2024-11-28