1 什么是CSS
如何学习
- CSS是什么
- CSS怎么用（快速入门）
- CSS选择器（重点）
- 美化网页（文字，阴影，超链接，列表，渐变…）
- 盒子模型
- 浮动
- 定位
- 网页动画（特效）
1.1 什么是CSS
Cascading Style Sheet 层叠级联样式表
CSS：表现（美化网页）
字体，颜色，边距，高度，宽度，背景图片，网页定位，网页浮动…
1.2 发展史
CSS1.0
CSS2.0 DIV(块)+CSS HTML与CSS结构分离的思想
CSS2.1 浮动、定位
CSS3.0 圆角、阴影、动画
1.3 快速入门
style
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--规范<style>
语法：
选择器{
声明1;
声明2;
声明3;
}
-->
<style>
h1{
color:red;
}
</style>
<!--<link rel="stylesheet" href="css/style.css">-->
</head>
<body>
<h1>我是标题</h1>
</body>
</html>
css的优势：
- 内容和表现分离
- 网页结构表现统一，可以实现复用
- 样式十分的丰富
- 建议使用独立html的css文件
- 利用SEO，容易被搜索引擎收录
1.4 CSS的3种导入方式
-
内部样式
如上
-
外部样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>我是标题</h1>
</body>
</html>
h1{
color:red;
}
- 行内样式
<h1 style="color:red">我是标题</h1>
**优先级：**就近原则
外部样式的两种方式：
-
链接式：
<link rel="stylesheet" href="css/style.css"> -
导入式
<style> @import url("css/style.css"); </style>
2 CSS选择器
作用：选择页面上的某一个或某一类元素
2.1 基本选择器
- 标签选择器
- 类 选择器 class
- id 选择器
**优先级：**id>class>标签
2.2 层次选择器
-
后代选择器：在某个元素的后面 祖爷爷 爷爷 爸爸 儿子
body p{ background:red; } -
子选择器：一代 儿子
body>p{ background: grey; } -
相邻兄弟选择器 同辈 只有一个（向下）
.active + p{ background: pink; } -
通用选择器 当前选中元素向下的所有兄弟元素
.active~p{
background: red;
}
2.3 结构伪类选择器
/* ul的第一个子元素 */
ul li:first-child{
background: green;
}
/* ul的最后一个子元素 */
ul li:last-child{
background: red;
}
不要记
/* 选中p1:定位父元素，然后选择第一个元素
选择当前p元素的父级元素，选中父级元素的第i个，并且是当前元素才生效
*/
p:nth-child(2){
background: pink;
}
/* 选中父元素下的p元素的第二个 */
p:nth-of-type(2){
background: yellow;
}
总结
<!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>层次选择器</title>
<style>
/* ul的第一个子元素 */
ul li:first-child{
background: green;
}
/* ul的最后一个子元素 */
ul li:last-child{
background: red;
}
/* 选中p1:定位父元素，然后选择第一个元素
选择当前p元素的父级元素，选中父级元素的第i个，并且是当前元素才生效
*/
p:nth-child(2){
background: pink;
}
/* 选中父元素下的p元素的第二个 */
p:nth-of-type(3){
background: yellow;
}
a:hover{
background: black;
}
</style>
</head>
<body>
<a href="">3213213></a>
<h1>h1</h1>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
</ul>
</body>
</html>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-b12KoAvt-1645450082016)(C:\Users\Tao\AppData\Roaming\Typora\typora-user-images\image-20210829120446566.png)]
2.4 属性选择器（常用）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.demo a{
float: left;
display: block;
height: 50px;
width: 50px;
border-radius: 10px;
background: blue;
text-align: center;
color:grey;
text-decoration: none;
margin-right: 5px;
font:bold 20px/50px Arial;
}
/* 属性名：属性名=属性值（正则）
= 绝对等于
*= 包含
^= 以这个开头
$= 以这个结尾
*/
/*存在id属性的元素 a[]{}*/
/* a[id]{
background:yellow;
} */
/* a[id=first]{
background: hotpink;
} */
/* class中有links的元素 */
/* a[class*=links]{
background: indianred;
} */
/* 选择href中以http开头的元素*/
/* a[href^=http]{
background: lawngreen;
} */
/* 选择href中以pdf结尾的 */
a[href$=pdf]{
background: lightblue;
}
</style>
</head>
<body>
<p class="demo">
<a href="https://www.baidu.com" class="links item first" id="first">1</a>
<a href="" 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">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>
</body>
</html>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1xsO9bZc-1645450082018)(C:\Users\Tao\AppData\Roaming\Typora\typora-user-images\image-20210829122345463.png)]
正则表达式
= 绝对等于
*= 包含**
^= 以**开头
$= 以**结尾
3 美化页面元素
3.1 为什么要美化网页
提高用户体验
span标签：重点要突出的字，使用span套起来（约定）
<!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>
#title1{
font-size: 50px;
}
</style>
</head>
<body>
欢迎学习<span id="title1">Java</span>
</body>
</html>
3.2 字体样式
<!--
font-family:字体
font-style:字体效果（斜体）
font-size:字体大小
font-weight:字体粗细
color:字体颜色
-->
<style>
body{
font-style: oblique;
font-family: 楷体;
color: brown;
}
h1{
font-size: 50px;
}
.p1{
font-weight: bold;
}
</style>
3.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>
<!--
color：
单词
RGB 0-F
RGBA A:0-1(A是透明度)
text-align: 居中左右对齐
text-indent: 首行缩进
line-height: 行高（与块高一致时就可以做到上下居中）
text-decoration:
vertical-align: middle 对照居中
-->
<style>
h1{
color:rgba(0, 255, 255,0.9);
text-align: center;
}
.p1{
text-indent: 2em;
}
.p3{
background: #2700ff;
height: 300px;
line-height: 300px;
}
.l1{
text-decoration: underline;
}
.l2{
text-decoration: line-through;
}
.l3{
text-decoration: overline;
}
</style>
</head>
<body>
<p class="l1">1231231</p>
<p class="l2">1231231</p>
<p class="l3">1231231</p>
<h1>克苏鲁</h1>
<p class="p1">
克苏鲁（Cthulhu）是美国小说家霍华德·菲利普·洛夫克拉夫特所创造的克苏鲁神话中的存在，是旧日支配者之一。虽然不是地位最高的，却是最知名的，也是克苏鲁神话的形象代表。
</p>
<p>
全称为“伟大的克苏鲁（Great Cthulhu）”，沉睡之神，拉莱耶之主，奥古斯特·威廉·德雷斯为克苏鲁神话构建的元素论中其为象征“水”的存在之一。在《伊波恩之书》中克苏鲁被称作克图尔特（Kthulhut）。
</p>
<p class="p3">
全称为“伟大的克苏鲁（Great Cthulhu）”，沉睡之神，拉莱耶之主，奥古斯特·威廉·德雷斯为克苏鲁神话构建的元素论中其为象征“水”的存在之一。在《伊波恩之书》中克苏鲁被称作克图尔特（Kthulhut）。
</p>
</body>
</html>
3.4 阴影
/* text-shadow:阴影颜色 水平偏移 垂直偏移 阴影半径*/
#moviepoint{
text-shadow: blue 10px 10px 10px;
}
3.5 超链接伪类
常用a，a:hover
/* 默认颜色 */
a{
text-decoration: none;
color:black;
}
/* 光标悬停时的状态 */
a:hover{
color:orange;
font-size: 30px;
}
3.6 列表
.title{
font-size: 18px;
font-weight: bold;
text-indent: 1em;
line-height: 35px;
background: red;
}
/* ul li */
/* list-style:
none 去掉圆点
circle 空心圆
decimal 数字
square 正方形
*/
#nav{
width: 300px;
background: gray;
}
ul{
background: gray;
}
ul li{
height: 30px;
list-style: none;
text-indent: 1em;
}
a{
text-decoration: none;
font-size: 14px;
color: black;
}
a:hover{
color:orange;
text-decoration: underline;
}
<!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>
<link href="css/style.css" rel="stylesheet" type="text/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>
3.7 背景
背景颜色
背景图片
<style>
div{
width: 1000px;
height: 700px;
border:1px solid red;
background-image: url("images/timg.jpg");
/* 默认全平铺 */
}
.div1{
background-repeat: repeat-x;
}
.div2{
background-repeat: repeat-y;
}
.div3{
background-repeat: no-repeat;
}
</style>
添加箭头后的列表效果
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TkACX94F-1645450082020)(C:\Users\Tao\AppData\Roaming\Typora\typora-user-images\image-20210831205903571.png)]
3.8 渐变
https://www.grabient.com/
background-color: #4158D0;
background-image: linear-gradient(43deg, #4158D0 26%, #C850C0 40%, #FFCC70 100%);
4 盒子模型
4.1 盒子
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hDCkXodc-1645450082020)(C:\Users\Tao\AppData\Roaming\Typora\typora-user-images\image-20210908111755988.png)]
margin：外边距
padding：内边框
border：边框
4.2 边框
border：???px(粗细) style(样式) color(颜色)
4.3 内外边距
margin：内边距
margin:0;全部
margin:0 0;上下 左右
margin:0 0 0;上 左右 下
margin:0 0 0 0; 上 右 下 左
默认上右下左顺时针
居中可以使用auto
padding：内边距
元素总大小=margin+border +padding+内容宽度
4.4 圆角边框
<style>
div{
width: 100px;
height: 100px;
border:10px solid red;
border-radius: 50px 20px 10px 5px;
}
</style>
4.5 盒子阴影
box-shadow
5 浮动
ground-color: #4158D0;
background-image: linear-gradient(43deg, #4158D0 26%, #C850C0 40%, #FFCC70 100%);
# 4 盒子模型
## 4.1 盒子
[外链图片转存中...(img-hDCkXodc-1645450082020)]
margin：外边距
padding：内边框
border：边框
## 4.2 边框
border：???px(粗细) style(样式) color(颜色)
## 4.3 内外边距
margin：内边距
```css
margin:0;全部
margin:0 0;上下 左右
margin:0 0 0;上 左右 下
margin:0 0 0 0; 上 右 下 左
默认上右下左顺时针
居中可以使用auto
padding：内边距
元素总大小=margin+border +padding+内容宽度
4.4 圆角边框
<style>
div{
width: 100px;
height: 100px;
border:10px solid red;
border-radius: 50px 20px 10px 5px;
}
</style>
4.5 盒子阴影
box-shadow
扫一扫
4927
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
