一、认识CSS
1. 什么是CSS
CSS (Cascading Style Sheets，层叠样式表），是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言，CSS 文件扩展名为 .css。
通过使用 CSS 我们可以大大提升网页开发的工作效率！
在我们的 CSS 教程中，您会学到如何使用 CSS 同时控制多重网页的样式和布局。
CSS3 现在已被大部分现代浏览器支持，而下一版的 CSS4 仍在开发中
<!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>
</head>
<body>
<!--
网页分成三个部分
html 结构 20个左右的标签, 先用一段时间
css 表现 外在显示的样子
JavaScript 行为
css
层叠样式表
网页实际上是一个多层的结构, 通过css可以分别为网页的每一层结构做样式
最终看到的是最上面的一层
-->
</body>
</html>二、CSS基本使用
1. CSS书写位置
<!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>
<!-- 书写位置, 各自优缺点 -->
<!--
第二种样式: 内部样式表
书写位置: head标签内部, 写一个style标签, 通过选择器选中对应的html结构
在花括号里书写css样式, 可以写多组样式, 样式之间用;隔开
优缺点:
缺点: 复用率不高
注意: 写css比较多的时候, 不推荐使用
-->
<style>
p {
color: skyblue;
font-size: 50px;
background-color: rgb(21, 3, 36);
}
div {
color: brown;
}
</style>
<!--
第三种样式: 外部样式表
书写位置: 在css文件外, 新建一个.css文件, 在css文件里通过选择器选中
对应的html结构, 在乎啊啊括号里面书写css样式,
然后在head标签内写一个link标签将对应的css文件引入到html文件内
注意: 推荐使用
-->
<link rel="stylesheet" href="./02_css书写位置.css" />
</head>
<body>
<!--
第一种方式: 内联样式/行内样式
书写位置: 开始标签 style属, 将css样式写在style属性值里面
可以写多个样式, 只要用分隔号;隔开
优缺点:
优点: 有针对性
缺点:
1. 结构和表现耦合了
2. 修改起来不方便
注意: 不推荐使用
-->
<!--
css语法: 样式名, 样式值
color: 设置字体的颜色
font-size: 设置字体大小 px 默认字体大小是16px
background-color: 设置背景颜色
-->
<div style="color: red; font-size: 32px; background-color: greenyellow">
你之法并所没终极，亓有活，人在个，天失。
</div>
<div>开不当下太德，能到。</div>
<div>书德恩是言，作尹报。</div>
<p>是哥喜看自并的他磊升王投败灰得为畴，慧。</p>
<h1>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cum, numquam!</h1>
</body>
</html>
h1{
color: crimson;
}2. CSS基本语法
<!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>
/* css注释符号 */
/*
注释必须写在style标签中
css语法:
选择器 声明块
选择器: 有多种选择器
声明块: 具体css样式, 是写在花括号里面
样式的结构: 名值对结构(样式名: 样式值), 可以写多组样式, 用分隔号隔开
*/
</style>
</head>
<body></body>
</html>三、CSS选择器
1. CSS常用选择器
<!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>
/* 四种常用选择器 */
/* 需求一: 标题变红色 */
/*
1. 元素选择器(标签选择器)
作用: 选中对应标签的内容
语法: 标签名{css样式}
*/
h1 {
color: red;
}
h3 {
/* display: inline-block; */
color: greenyellow;
background-color: aqua;
}
p {
font-size: 32px;
}
/* 需求二: 将第一句诗变绿色 */
/*
2. id选择器
作用: 选中对应id属性值内容
注意: id属性不能重复使用
#id属性值{}
*/
#p1 {
color: green;
}
/* 需求三: 将第二句诗也变绿色 */
/*
3. class选择器
class选择器的用法和id选择器一样, 只不过class属性值可以重复使用
作用: 选中对应class属性值内容
.class属性值{}
注意: class属性值可以写多个, 中间用空格隔开
*/
.s1 {
color: orange;
}
/* 需求四: 给所有标签字体变为24px */
/*
4. 通配选择器
*{}
*/
</style>
</head>
<body>
<div>
<h1>登高</h1>
<h3>杜甫</h3>
<p id="p1">风急天高猿啸哀，渚清沙白鸟飞回。</p>
<p class="s1">无边落木萧萧下，不尽长江滚滚来。</p>
<p class="s1">万里悲秋常作客，百年多病独登台。</p>
<p>艰难苦恨繁霜鬓，潦倒新停浊酒杯。</p>
</div>
</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>Document</title>
<style>
/* 复合选择器两种: 交集选择器 并集选择器 */
/* 需求一: 将class为red的诗句变为红色, 同时将class为red的div字体变为24px */
/*
1. 交集选择器:
作用: 选中同时符合多个条件的内容
语法: 选择器1 选择器2 选择器3...{}
注意: 如果选择器当中有元素选择器, 元素选择器必须要放在最前面
2. 并集选择器:
作用: 同时选中对应内容
语法: 选择器1, 选择器2, 选择器3.....{}
*/
.red {
color: red;
}
div.red {
font-size: 24px;
}
/*
需求二: 将h1, h3字体颜色变为棕色
*/
h1,
h3 {
color: brown;
}
</style>
</head>
<body>
<h1>满江红·写怀</h1>
<h3>岳飞·宋</h3>
<p class="red">怒发冲冠，凭栏处、潇潇雨歇。</p>
<div class="red">抬望眼、仰天长啸，壮怀激烈。</div>
<div>三十功名尘与土，八千里路云和月。</div>
<p>莫等闲、白了少年头，空悲切。</p>
<p>靖康耻，犹未雪。 臣子恨，何时灭。</p>
<p>长车，踏破贺兰山缺。</p>
<p>壮志饥餐胡虏肉，笑谈渴饮匈奴血。</p>
<p>待从头、收拾旧山河，朝天阙。</p>
</body>
</html>
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>
/* 用关系选择器来选中 */
/* 需求一: 为div的子元素h1设置一个字体颜色红色 */
/*
1. 子元素选择器
作用: 通过指定的父元素找到指定的子元素
语法: 父元素>子元素{}
*/
div > h2 {
color: red;
}
/* 需求二: div里的span元素字体都变为30px */
/*
2. 后代选择器
作用: 通过指定的祖先元素找到指定的后代元素
语法: 祖先元素 后代元素{}
*/
div span {
font-size: 30px;
}
/* 需求三: 通过衣服区p标签找到生鲜区 */
/*
3. 下一个兄弟选择器
作用: 通过指定的兄长找到紧挨着我的下一个兄弟
语法: 兄+弟{}
*/
.p1 + span {
background-color: black;
}
/* 需求四: 通过衣服区找到下面所有的兄弟, 设置字体颜色为棕色*/
/*
4. 选择下面所有的兄弟
作用: 通过指定的兄长找到下面所有的兄弟
语法: 兄~弟{}
*/
.p1 ~ span {
color: orange;
}
</style>
</head>
<body>
<!--
元素之间的关系
父子关系:
父元素: 直接包含子元素的元素
子元素: 直接被父元素包含的元素
祖先和后代关系:
祖先元素: 直接或间接包含元素的元素, 包括父元素
后代元素: 直接或间接被包含的元素, 包括子元素
兄弟关系:
拥有共同父元素的元素
-->
<div>
大超市
<h2>日常用品区</h2>
<h2>美妆区</h2>
<p class="p1">
衣服区
<span>
女装
<em>上衣</em>
<em>裤子</em>
<em>裙子</em>
</span>
<span>童装</span>
<span>男装</span>
</p>
<span>生鲜区</span>
<span>零食区</span>
</div>
<p>小超市</p>
</body>
</html>
4. 属性选择器
<!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>
/* 用关系选择器来选中 */
/* 需求一: 为div的子元素h1设置一个字体颜色红色 */
/*
1. 子元素选择器
作用: 通过指定的父元素找到指定的子元素
语法: 父元素>子元素{}
*/
div > h2 {
color: red;
}
/* 需求二: div里的span元素字体都变为30px */
/*
2. 后代选择器
作用: 通过指定的祖先元素找到指定的后代元素
语法: 祖先元素 后代元素{}
*/
div span {
font-size: 30px;
}
/* 需求三: 通过衣服区p标签找到生鲜区 */
/*
3. 下一个兄弟选择器
作用: 通过指定的兄长找到紧挨着我的下一个兄弟
语法: 兄+弟{}
*/
.p1 + span {
background-color: black;
}
/* 需求四: 通过衣服区找到下面所有的兄弟, 设置字体颜色为棕色*/
/*
4. 选择下面所有的兄弟
作用: 通过指定的兄长找到下面所有的兄弟
语法: 兄~弟{}
*/
.p1 ~ span {
color: orange;
}
</style>
</head>
<body>
<!--
元素之间的关系
父子关系:
父元素: 直接包含子元素的元素
子元素: 直接被父元素包含的元素
祖先和后代关系:
祖先元素: 直接或间接包含元素的元素, 包括父元素
后代元素: 直接或间接被包含的元素, 包括子元素
兄弟关系:
拥有共同父元素的元素
-->
<div>
大超市
<h2>日常用品区</h2>
<h2>美妆区</h2>
<p class="p1">
衣服区
<span>
女装
<em>上衣</em>
<em>裤子</em>
<em>裙子</em>
</span>
<span>童装</span>
<span>男装</span>
</p>
<span>生鲜区</span>
<span>零食区</span>
</div>
<p>小超市</p>
</body>
</html>
566
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
