【5.0】CSS基础
【一】什么是CSS
- 层级样式表：就是给HTML标签添加样式的，让它变得好看
【二】注释语法
/* 这是注释 */
【三】CSS的语法结构
选择符 {
样式属性: 样式属性值;
样式属性: 样式属性值;
样式属性: 样式属性值, 样式属性值, 样式属性值;
}
- 一个正常的网页css样式是非常多的 就算专门开设css文件存储也很乱
- 这个时候就可以在css文件中通过注释来辅助辨别与查找
【四】CSS的三种引入方式
【1】style标签内部直接书写
- head内style标签内部直接编写css代码
- 建议在小白学习阶段可以使用 方便查看
<style>
<!--
方式一-- >
h1 {
color: blue;
}
</style>
【2】引入外部CSS文件(最正规的方式，解耦合)
- head内link标签引入外部css文件
- 作中一般使用的都是link形式 符合标准
/*css文件*/
h1 {
color: blue;
}
<!--HTML文件-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="01.css">
</head>
<body>
<h1>
这是一级标题
</h1>
</body>
</html>
【3】行内式(一般不用)
- 标签内部通过style属性直接编写
- 第三种也称之为"行内式"是最不推荐使用的一种方式
- 因为它会将HTML和CSS柔和到一起
- 增加了耦合度
【五】基本选择器
【1】概览
- 在CSS中，选择器用于选取HTML文档中的元素。
- 根据选择器的类型和语法的不同，可以选择不同的元素。
- 常用的有id选择器、类选择器、元素/标签选择器和通用选择器。
【2】介绍
（1）Id选择器
- 通过元素的id属性进行选取。
- 每个页面中id值是唯一的，所以在css中最好不重复使用id选择器。
<h1 id="myH1">Hello, World!</h1>
p {
color: #FF0000;
}
- 把id为"myH1"的元素设置为红色
（2）类选择器
- 通过元素的class属性进行选取。
- 多个元素可以共享一个class，所以class选择器是应用样式的最佳方式。
<h1 class="title">Hello, World!</h1>
<p class="content">这是一个段落。</p>
.title {
font-size: 24px;
}
.content {
line-height: 1.5;
}
- 上面的代 ** 给标题和段落添加样式，其中title和content是类名
（3）元素/标签选择器
- 通过元素的标签名称进行选取。
- 比如选择所有的段落、列表等。
p {
color: #FF0000;
}
ul {
list-style-type: none;
}
- 上面的代 ** 让所有的段落变为红色，所有的无序列表去除默认的项目符号
（4）通用选择器
*表示所有的元素。
* {
margin: 0;
padding: 0;
}
- 上面的代 ** 让所有元素的内外边距都设为0
【3】示例
<!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>Document</title>
<style>
/* id选择器 */
#myH1 {
color: red;
}
/* 类选择器 */
.title {
font-size: 24px;
}
.content {
line-height: 1.5;
}
/* 元素/标签选择器 */
p {
color: blue;
}
ul {
list-style-type: none;
}
/* 通用选择器 */
* {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<h1 id="myH1">Hello, World!</h1>
<p class="title">This is a title.</p>
<p class="content">This is a content.</p>
<ul>
<li>This is a list item.</li>
<li>This is another list item.</li>
</ul>
</body>
</html>
- 在上面的示例中，我们创建了一个包含一个id为"myH1"的标题、两个类分别为"title"和"content"的段落以及一个无序列表的HTML文档。
- 然后我们在CSS中使用相应的选择器来给这些元素设置样式。
【4】示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* （1）id 选择器 */
/* 找到id为d1的标签，将其内部的颜色变为greenyellow */
#d1 {
color: greenyellow;
}
/* （2）类选择器 */
/* 找到c1类的标签，将其颜色变为blue */
.c1 {
color: blue;
}
/*（3）元素/标签选择器 */
/* 找到所有的span标签，变成红色 */
span {
color: red;
}
/* 通用选择器 */
/* 将页面上的全部内容变为blue */
* {
color: blue;
}
</style>
</head>
<body>
<div id="d1" class="c1 c2">
<p>div里面的p标签</p>
<span>div里面的span标签</span>
</div>
<p id="d2" class="c1 c2">这是一个p标签</p>
<span id="d3" class="c3">这是span标签1------11111</span>
<span id="d4" class="c4">这是span标签2------22222</span>
</body>
</html>
【六】组合选择器
【1】概览
-
后代选择器
-
儿子选择器
-
毗邻选择器
-
弟弟选择器
【2】标签关系
<div>div1
<div>div2
<p>p1</p>
</div>
<p>p2
<span>span1</span>
</p>
<span>span2</span>
</div>
- 通过嵌套层级来表示亲属关系
- 1.对于div1来说：div2、p2、span2都是儿子
- 2.对于div2、p2、span2来说：div1就是父亲
- 3.对于p1来说：div2是父亲 div1是爷爷(可以将div1和div2统称为祖先)
- 4.对于span2来说：div2、p2是哥哥 span2是弟弟
- 5.div1内部所有的标签无论层级都可以称之为是div1的后代
ps:判断的时候一定要看层级关系
【3】介绍
/*# 1.弟弟选择器(关键符号是大于号)*/
d1 > span {
/*查找id是d1标签内部所有的儿子span*/
color: red;
}
/*# 2.弟弟选择器(关键符号是空格)*/
d1 span {
/*查找id是d1标签内部所有的后代span*/
color: red;
}
/*# 3.弟弟选择器(关键符号是加号)*/
d1 + a {
/*查找id是d1标签同级别下面紧挨着第一个a标签*/
color: red;
}
/*# 4.弟弟选择器(关键符号是小波浪号)*/
d1 ~ a {
/*查找id是d1标签同级别下面所有a标签*/
color: red;
}
【4】示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* 后代选择器 */
/* div下的span标签变成红色 */
div span {
color: red;
}
/* 儿子选择器 */
/* */
div > span {
color: greenyellow;
}
/* 毗邻选择器 */
/* 同级别紧挨着的下面的第一个 */
div + span {
color: green;
}
/* 弟弟选择器 */
/* 同级别下面的所有span标签 */
div~span{
color: burlywood;
}
</style>
</head>
<body>
<span>这是span标签 1 </span>
<span>这是span标签 2 </span>
<div>这是 div 标签
<p>
这是div里面的 第一个 p 标签
</p>
<p>这是div里面的第二个 p 标签
<span>
这是div标签里面的第二个 p 标签下的 span 标签
</span>
</p>
<span> 这是div里面的第一个 div 标签 </span>
<span> 这是div里面的第二个 div 标签 </span>
</div>
<span>这是div底部的 第一个 span 标签 </span>
<span>这是div底部的 第二个 span 标签 </span>
</body>
</html>
【七】属性选择器
【1】概览
-
含有某个属性
-
含有某个属性并且有某个值
-
含有某个属性并且有某个值的某个标签
【2】介绍
/*# 根据标签内部的属性名和属性值查找标签(关键符号是中括号)*/
/*1.方式1:直接通过属性名查找*/
[type] {
background-color: red;
}
/*2.方式2:属性名是type并且值是text的标签*/
[type='text'] {
background-color: red;
}
/*3.方式3:属性名是type并且值是text的div标签*/
div[type='text'] {
background-color: red;
}
【3】示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* 将所有含有属性名是username的标签背景色改为红色 */
[username] {
background-color: green;
}
/* 找到所有属性名是username并且属性值是dream的标签 */
[username="dream"] {
background-color: blue;
}
/* 找到所有属性名是username并且属性值是dream的input标签 */
input[username="dream"] {
background-color: green;
}
</style>
</head>
<body>
<input type="text" username>
<input type="text" username="dream">
<input type="text" username="mengmeng">
<p username="dream">this is dream</p>
<div username="mengmeng"> this is mengmeng</div>
</body>
</html>
本文来自博客园，作者：Chimengmeng，转载请注明原文链接：https://www.cnblogs.com/dream-ze/p/18036067
