文章目录
1、什么是CSS？
- CSS怎么用？
- CSS是什么
- CSS选择器
1.1、什么是CSS
Cascading Style Sheet 层叠级联样式表
CSS ：表现（美化网页）
字体、颜色、边距、高度、宽度、背景图片、网页定位、网页浮动…
1.2、快速入门
练习格式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--规范：在<style>里面写css样式,每一个声明最好使用分号结尾
语法:
选择器{
声明一;
声明二;
声明三;
}
-->
<style>
h1{
color: red;
}
</style>
</head>
<body>
<h1>我是标题</h1>
</body>
</html>
等同于：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--在html页面中注入css样式-->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>我是标题</h1>
</body>
</html>
h1{
color: red;
}
css优势：
- 内容和标签分离
- 网页结构标签统一，可以实现复用
- 样式十分的丰富
- 建议使用独立于html的css样式
- 利用SEO，容易被搜索引擎收录
1.3、css的三种导入方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>导入方式</title>
<!--内部样式-->
<style>
h1{
color:green;
}
</style>
<!--外部样式-->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!--行内样式：在标签元素中编写一个style标签-->
<!--优先级：就近原则-->
<h1 style="color: red">我是标题</h1>
</body>
</html>
扩展：外部样式两种写法
-
链接式
html
<!--外部样式--> <link rel="stylesheet" href="css/style.css"> -
导入式
<style> @import url("css/style.css"); </style>
2、选择器
作用：选择页面上的某一个或某一类标签
2.1、基本选择器
-
标签选择器:选择一类标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>标签选择器</title> <style> /*标签选择器选中所有的标签*/ h1{ color: red; background-color: #b1ff8c; /*圆角边框*/ border-radius: 10px; } p{ font-size: 80px; } </style> </head> <body> <h1>h1标签</h1> <h1>h1标签</h1> <p>p标签</p> </body> </html> -
类选择器：class：选择所有的class属性一致的标签，可以跨标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>类选择器</title> <style> /*类选择器的名称 .class名称{} 好处：可以多个标签归类，是同一个class 可以复用 */ .he{ color: red; background: pink; } .she{ color: purple; } </style> </head> <body> <h1 class="he">h1标签</h1> <h1 class="she">h1标签</h1> <p>p标签</p> </body> </html> -
id 选择器：全局唯一。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*格式： #id名{} id必须保证唯一 */ #he{ color: pink; } </style> </head> <body> <h1 id="he">标题一</h1> <h1>标题二</h1> <h1>标题三</h1> <h1>标题四</h1> </body> </html>三个选择器之间的优先： 不遵循就近原则，id选择器>class选择器>标签选择器
2.2、层次选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p> p0</p>
<p class="p1"> p1</p>
<p> p2</p>
<ul>
<li>
最低0.47元/天 解锁文章
159
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
