1.CSS概念
多查查CSS手册：https://www.w3school.com.cn/css/index.asp
1.1什么是CSS
层叠样式表---Cascading Style Sheets
用于美化页面
美化的东西
任意界面按F12或者右键点击检查就可以看到HTML和CSS的源代码了
1.2CSS发展史
1.3快速入门
创建项目的步骤和HTML一样，就不演示了，要注意创建格式要规范
先试试style标签
语法：
选择器 {
属性名: 属性值;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>快速入门</title>
<!-- 图方便可以把CSS代码写这里,但是不推荐-->
<style>
h1{
color: blueviolet;
}
</style>
</head>
<body>
<h1>王力口乐</h1>
</body>
</html>
效果图
推荐把CSS代码分开写
这里rel默认帮你填好，href是
HTML里讲过
这样就实现了分开写代码
CSS优势
1.4CSS的3种导入方式
1.行内样式：在标签元素中，编写一个style属性，再编写样式即可，仍然写在HTML里
<h1 style="color: aqua">标题</h1>
2.内部样式：就和上面写在head标签里一样
<style>
h1{
color: aqua;
}
</style>
3.外部样式：单独写在CSS文件里，通过link标签连接
优先级：行内>外部>内部
问题来了，这三种方式如果都写了应该执行谁呢？
答案是就近原则，谁离元素近，谁的优先级就更高
注意：外部方式link和内部样式的优先级取决于它们在head标签中的先后顺序，这也是就近原则的体现
2.选择器
2.1基本选择器
这里为了方便就直接写行内样式，不多开个文件了
1.标签选择器，会选择到这个页面上所有这个标签的元素
格式：标签名 + {
}
这里只要是h1标签的元素都被选中了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
h1{
color: #12fa00;
}
</style>
</head>
<body>
<h1>标题</h1>
<h1>标题</h1>
<h1>标题</h1>
<h1>标题</h1>
</body>
</html>
补充：选颜色不一定要输英文，# + 数字也可以
2.类选择器 class，可以多个标签归类，只要是同一个class的就可以复用，不管是什么类型的标签
格式：.+ 类名 + {
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.china{
color: blueviolet;
}
.nomad{
color: darkgreen;
}
</style>
</head>
<body>
<h1 class="nomad">标题</h1>
<h1 class="china">标题</h1>
<h1>标题</h1>
<h1>标题</h1>
<p class="china">
王力口乐
</p>
</body>
</html>
3.id选择器，id必须保证全局唯一，这样就保证了修改的时候的唯一性
格式：# + id + {
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#nomad{
color: #12fa00;
}
#aSoul{
color: aliceblue;
}
#china{
color: brown;
}
</style>
</head>
<body>
<h1 id="nomad">标题</h1>
<h1 id="china">标题</h1>
<h1>标题</h1>
<h1>标题</h1>
<p id="aSoul">
王力口乐
</p>
</body>
</html>
补充：
1.这三个选择器不遵循就近原则，是有自己的一套优先权
id选择器 > 类选择器 > 标签选择器
2.可以在浏览器做调试，因为马上调试马上有效果，调试完之后再复制到代码里即可
2.2层次选择器
首先要理解什么是树结构
看到这个结构要会写出下面的代码
<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li>
<p>p4</p>
</li>
<li>
<p>p5</p>
</li>
<li>
<p>p6</p>
</li>
</ul>
</body>
1.后代选择器
格式: 后代 标签{
}
改变的是后代的后面所有标签
<style>
body p{
background: black;
color: aliceblue;
}
</style>
这里改变的是body后面所有的p标签
2.子选择器
格式: 后代 > 标签{
}
只选择后代后面一代的标签
/*子选择器*/
body > p{
background: aqua;
}
这里可以把p改成ul就会这样
但是你改成li就不会有任何效果，因为li和body隔了一代
3.相邻兄弟选择器
格式：.类名+ 标签{
}
.nomad + p{
background: aqua;
}
<!--body标签里面是这样的-->
<p>p1</p>
<p class="nomad">p2</p>
<p>p3</p>
<ul>
<li>
<p>p4</p>
</li>
<li>
<p>p5</p>
</li>
<li>
<p>p6</p>
</li>
</ul>
它只会选择它下面那个也只能选择下面那个同级的标签，你改成加ul发现不会有任何效果，因为不是相邻的
4.通用元素选择器
格式：.类名~标签{
}
.nomad~p{
background: aqua;
}
<!--body标签里面是这样的-->
<p>p1</p>
<p class="nomad">p2</p>
<p>p3</p>
<p>p12</p>
<ul>
<li>
<p>p4</p>
</li>
<li>
<p>p5</p>
</li>
<li>
<p>p6</p>
</li>
</ul>
<p>p7</p>
<p>p8</p>
会选中向下所有同级的标签，p7和p8是跟上面p2同级的，所以也会改变
这里没有相邻限制，你可以把p改成ul
2.3结构伪类选择器
结构： 可以是前面的选择器任意一种，然后加一个冒号
这里拿后代选择器做例子
body p:first-child{
background: aqua;
}
注意和上面后代选择器的区别，这里多了:first-child，顾名思义，就是选中第一个元素的意思
再多举一个例子
<style>
body li:last-child{
background: aqua;
}
</style>
last-child就是选中最后一个元素的意思
总结：可以把结构伪类选择器当成一种约束条件
2.4属性选择器（常用）
结构：标签 [属性( = 属性名)]{
}
这里有很多用法，随便举几个例子
先把body标签里的代码放出来
<p class="demo">
<a href="https://www.baidu.com" class="links item first" id="first">1</a>
<a href="https://blog.kuangstudy.com" class="links item active" target="_blank" title="test">2</a>
<a href="images/123.html" class="links item ">3</a>
<a href="images/123.png" class="links item ">4</a>
<a href="images/123.jpg" class="links item ">5</a>
<a href="abc" class="links item " id="mid">6</a>
<a href="/a.pdf" class="links item ">7</a>
<a href="/abc.pdf" class="links item ">8</a>
<a href="abc.doc" class="links item ">9</a>
<a href="abcd.doc" class="links item last">10</a>
</p>
下面这些都放在style标签里（内部样式）
1.选择有id属性的
a[id]{
background: aqua;
}
2.选择id属性名为first的
a[id = first]{
background: aqua;
}
3.选择有class属性的
a[class]{
background: aqua;
}
小结：
结构：标签 [属性( = 属性名)]{
}
[]里可以填任意一个属性：href，target什么都可以，只要是属性都行，如果那个属性只有一个元素，可以通过 = 精确定位到某一个标签，但是一个属性里有多个元素，单靠 = 就不行了
= 绝对等于
*= 包括这个元素
^= 以这个开头
$= 以这个结尾
5.选择class里有links的（class属性里有多个元素）
a[class *= links]{
background: aqua;
}
6.以https开头的
a[href ^= https]{
background: aqua;
}
7.以pdf结尾的
a[href $= pdf]{
background: aqua;
}
就讲这么多了，主要是多练习
3.美化网页元素
3.1为什么要美化网页
span标签：重点要突出的字，使用span套起来，然后在style标签里自己设置一点样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#title1{
font-size: 80px;
}
</style>
</head>
<body>
<span id="title1">NoMad</span>的空间
</body>
</html>
这里使用的是id选择器，也可以用class选择器，效果一样
3.2字体样式
font-style: 粗体斜体之类的
font-variant: 设置小型大写字母的字体显示文本
font-weight: 字体粗细
font-size: 字体大小
font-family: 字体
line-height: 字体行高
color: 颜色
补充：px是像素的意思
随便设置一下
<style>
body{
font-family: 楷体;
color: blueviolet;
}
h1{
font-size: 50px;
}
.p1{
font-weight: bolder;
}
</style>
<h1>东北限电</h1>
<p class="p1">
没有收到提前通知，几乎毫无预兆的，东北三省的部分地区停电了。 有人被困在电梯里，难以脱围；有人在线上复习考公，被迫搁置；有人的生鲜直播，暂时中断；交通信号灯灭了，有人被长久地堵在路上。
</p>
<p>
9月23日晚上，住在辽宁大连高层公寓楼的张淼计划中的海鲜大餐变成了烛光面包，厨房的灶台上，摆放着洗净的河蟹，生鱼和未下锅的红烧肉。当天下午16：40，张淼家里突然停电，掐灭了张淼的好心情。他不得不徒步上下31楼，采购必要的物品。
</p>
还有可以简写一下，就没必要写这么多行
font : font-style || font-variant || font-weight || font-size || line-height || font-family
可以按顺序设置如下属性：
1.font-style
2.font-variant
3.font-weight
4.font-size/line-height
5.font-family
实例，不一定每个都要写，但是要按照顺序来
body{
font: oblique bolder 16px "楷体";
}
3.3文本样式
1.颜色的四种不同设置方式
1 color: blue;
2 color: #12fa00;
3 color: rgb(0,255,255);
4 color: rgba(0,255,255,0.4);
补充：
1.rgb参数（0~255）
2.rgba最后一个参数是透明度（0~1）
2.文本对齐方式
text-align: 排版方式;
有很多种排版方式，最常用的就那几个：center，left，right...
3.首行缩进
text-indent: 2em;
em代表一个字母，2em代表缩进两个字母
4.行高
line-height: 50px;
当行高和块的高一样大的时候就可以实现单行文字上下居中
.p2{
text-indent: 2em;
background: aqua;
line-height: 50px;
height: 50px;
}
第一行字在块的中间
5.装饰
/*下划线*/
.lll1{
text-decoration: underline;
}
/*中划线*/
.lll2{
text-decoration:line-through;
}
/*上划线*/
.lll3{
text-decoration: overline;
}
/*a标签去下划线*/
a{
text-decoration: none;
}
3.4阴影
了解即可
3.5超链接伪类
常用的有
a{
}
/*鼠标悬停时候效果*/
a.hover{
}
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
a{
font-size: medium;
text-decoration: none;
}
a:hover{
font-size: 100px;
color: aqua;
}
</style>
</head>
<body>
<a href="#">鼠标放这里</a>
</body>
</html>
鼠标放上去之后效果
3.6列表
用在列表里的属性（要记）
list-style:
none 去掉圆点
circle 空心圆
decimal 数字
随便练习一下
#nav{
background: darkgrey;
width: 275px;
}
.title{
font-size: 35px;
font-weight: bolder;
text-indent: 1em;
line-height: 70px;
height: 70px;
background: pink;
}
ul li {
list-style: none;
line-height: 50px;
height: 50px;
}
a{
text-decoration: none;
color: black;
font-size: 20px;
font-weight: lighter;
}
a:hover{
color: coral;
text-decoration: underline;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>媒体元素学习</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="nav">
<h2 class="title">全部商品分类</h2>
<ul>
<li>
<a href="#">图书 </a>
<a href="#">音像 </a>
<a href="#">数字商品 </a>
</li>
<li>
<a href="#">家用电器 </a>
<a href="#">手机 </a>
<a href="#">数码 </a>
</li>
<li>
<a href="#">电脑 </a>
<a href="#">办公 </a>
</li>
<li>
<a href="#">家具 </a>
<a href="#">家装 </a>
<a href="#">厨具 </a>
</li>
<li>
<a href="#">服饰鞋帽 </a>
<a href="#">个性化妆 </a>
</li>
<li>
<a href="#">礼品箱包 </a>
<a href="#">钟表 </a>
<a href="#">珠宝 </a>
</li>
<li>
<a href="#">食品饮料 </a>
<a href="#">保健食品 </a>
</li>
<li>
<a href="#">彩票 </a>
<a href="#">旅行 </a>
<a href="#">充值 </a>
<a href="#">票务 </a>
</li>
</ul>
</div>
</body>
</html>
效果图
可以直接在网页进行调试，调到自己满意就可以copy代码到文件里
补充：
div标签
<div> 可定义文档中的分区或节（division/section）。
<div> 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。
如果用 id 或 class 来标记 <div>，那么该标签的作用会变得更加有效。
大概就是分成一个区的意思
3.7背景
1.背景颜色
就是background，之前讲过了
2.背景图片
border 简写属性在一个声明设置所有的边框属性。
可以按顺序设置如下属性：
border-width
border-style
border-color
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 1000px;
height: 700px;
border: 1px solid blueviolet;
/*默认是平铺的*/
background-image: url("image/1.png");
}
.div1{
/*x轴平铺*/
background-repeat: repeat-x;
}
.div2{
/*y轴平铺*/
background-repeat: repeat-y;
}
.div3{
/*不平铺*/
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</body>
</html>
补充：
要记的知识点：
/*插入图片*/
background-image: url("");
/*平铺方向*/
background-repeat: ;
插入图片不用加image也可以，直接这样
background: red url("image/1.png") no-repeat;
因为background是总的，上面那些什么background-image都是分支
没有顺序要求，还能顺便改个颜色，让图片不平铺之类的
查了一下手册
练习：把3.6项目那里加几个箭头
#nav{
background: darkgrey;
width: 325px;
}
.title{
font-size: 35px;
font-weight: bolder;
text-indent: 1em;
line-height: 70px;
height: 70px;
/*颜色 图片 平铺方式 图片位置*/
/*这是集合写的方式*/
background: pink url("../image/2.png") no-repeat 264px 20px;
}
ul li {
list-style: none;
line-height: 50px;
height: 50px;
/*图片*/
background-image: url("../image/2.png");
/*平铺*/
background-repeat: no-repeat;
/*位置*/
background-position: 226px 5px;
}
a{
text-decoration: none;
color: black;
font-size: 20px;
font-weight: lighter;
}
a:hover{
color: coral;
text-decoration: underline;
}
效果图
3.8渐变
推荐网站:https://www.grabient.com/
里面有很多渐变效果，直接copy代码下来就好了
直接看下效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
background-color: #4158D0;
background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
}
</style>
</head>
<body>
</body>
</html>
效果还是不错滴
太多了，分p写
