1,什么是CSS
如何学习
1.CSS是什么
2.CSS怎么用（快速入门）
3.CSS选择器（重点+难点）
4.美化网页（文字，阴影，超链接，列表，渐变....）
5.盒子模型
6.浮动
7.定位
8.网页动画（特效）
1.1什么是CSS
Cascading Style Sheet 层叠级联样式表
CSS：表现（美化网页）
字体，颜色，边距，高度，宽度，背景图片，网页浮动.....
1.2 发展史
css1.0
css2.0 DIV(块)+CSS，HTML与CSS结构分离的思想，网页变得简单，SEO（搜索引擎优化）
css2.1 浮动，定位
css3.0 圆角，阴影，动画..... 浏览器兼容性~
1.3快速入门
建议使用这种规范
css优势：
1.内容和表现分离
2.网页结构表现统一，可以实现复用
3.样式十分丰富
4.建议使用独立于HTML的CSS文件
5.利于SEO，容易被搜索引擎收录！
1.4 CSS的3种导入方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 内部样式-->
<style>
h1{
color:red;
}
</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">- 导入式：
@import是css2.1特有的
<!--导入式-->
<style>
@import url("css/style.css");
</style>首页link和import语法结构不同，前者<link>是html标签，只能放入html源代码中使用，后者可看作为css样式，作用是引入css样式功能。import在html使用时候需要<style type="text/css">标签，同时可以直接“@import url(CSS文件路径地址);”放如css文件或css代码里引入其它css文件。
本质上两者使用选择区别不大，但为了软件中编辑布局网页html代码，一般使用link较多，也推荐使用link。
2,选择器
作用：选择页面上的某一个或者某一类元素
2.1 基本选择器
1，标签选择器：选择一个标签
标签{}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*标签选择器，会选择到页面上所有的这个标签的元素*/
h1{
color: red;
background: aqua;
border-radius: 24px;
}
p{
font-size: 80px;
}
</style>
</head>
<body>
<h1>学Java</h1>
<p>听狂神说</p>
</body>
</html>2，类选择器 class：选择所有class属性一致的标签，跨标签
.类名{}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*类选择器格式 .class的名称{}
好处：可以多个标签归类，是同一个class,可以复用
*/
.qinjiang{
color: aqua;
}
.kuangshen{
color: antiquewhite;
}
</style>
</head>
<body>
<h1 class="qinjiang">标题1</h1>
<h1 class="kuangshen">标题2</h1>
<h1 class="kuangshen">标题3</h1>
</body>
</html>3，ID选择器：全局唯一！
#id名{}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*
id选择器：#id名称{}
id必须保证全局唯一！不遵循就近原则
id选择器>类选择器>标签选择器
*/
#qinjiang{
color: aqua;
}
.style1{
color: red;
}
h1{
color: blue;
}
</style>
</head>
<body>
<h1 id="qinjiang">标题1</h1>
<h1 class="style1">标题2</h1>
<h1 class="style1">标题3</h1>
<h1>标题4</h1>
<h1>标题5</h1>
</body>
</html>优先级：id>class>标签
2.2 层次选择器
1，后代选择器：在某个元素的后面 祖爷爷 爷爷 爸爸 你
/*后代选择器*/
body p{
background: red;
}2，子选择器，一代，儿子
/*子选择器*/
body>p{
background: blue;
}3，相邻选择器 同辈
/*相邻选择器,只有一个，相邻（向下）*/
.active + p{
background: bisque;
}
</style>4，通用选择器
/*通用选择器，当前选中元素的向下的所有兄弟元素*/
.active~p{
background: azure;
}2.3 结构伪类
/*ul的第一个子元素*/
ul li:first-child{
background: bisque;
}
/*ul的最后一个元素*/
ul li:last-child{
background: aqua;
}
/*选中p1:定位到父元素，选择当前的第一个元素
选择当前P元素的父级元素，选中父级元素的第一个，并且是当前元素才生效！
按顺序
*/
p:nth-child(2){
background: aquamarine;
}
/*选中父元素下的p元素的第二个
按类型*/
p:nth-of-type(1){
background: red;
}
2.4 属性选择器（常用）
id+class结合~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.demo a{
float: left;
display: block;
height: 50px;
width: 50px;
border-radius: 10px;
background: aquamarine;
text-align: center;
color: blue;
text-decoration: none;
margin-right: 5px;
font:bold 20px/50px Arial;
}
/*属性名，属性名 = 属性值（正则）
= 绝对等于
*=包含这个元素
^=以这个开头
$=以这个结尾
*/
/*存在id属性的元素 a[]{}*/
/*a[id]{
background: yellow;
}*/
/*a[class*="links"]{
background: yellow;
}*/
/*选中href中以http开头的元素*/
/*a[href^=http]{
background: yellow;
}*/
a[href$=pdf]{
background: red;
}
</style>
</head>
<body>
<p class="demo">
<a href="http://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.jpg" class="links item">4</a>
<a href="images/123.png" class="links item">5</a>
<a href="abc" class="links item">6</a>
<a href="abc.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>= 绝对等于
*=包含这个元素
^=以这个开头
$=以这个结尾
CSS,JS,JQuery,vue都会用到
3,美化网页
3.1 为什么要美化网页
1，有效的传递页面信息
2，美化网页，页面漂亮，才能吸引用户
3，凸显页面的主题
4，提高用户的体验
span标签：重点要突出的字，使用span套起来
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#title1{
font-size: 50px;
}
</style>
</head>
<body>
欢迎学习<span id="title1">Java</span>
</body>
</html>3.2 字体样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
font-family: 字体
font-size: 字体大小
font-weight: 字体粗细
color:字体颜色
-->
<style>
body{
font-family: 新宋体;
color: darkred;
}
h1{
font-size: 50px;
}
.p1{
font-weight: bold;
}
</style>3.3 文本样式
1，颜色 color
2，文本对齐方式 text-align=center
3，首行缩进 text-indent:2em;
4，行高 line-heigh: 单行文字上下居中！
5，装饰 text-decoration
6，文本图片水平对齐 vertical-align: middle;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
颜色：
单词
RGB 0~F
RGBA A:0~1
text-align:排版
text-indent: 2em; 段落首行缩进
行高，和块的高度一致，就可以上下居中
-->
<style>
h1{
color:rgba(0,255,255,0.9) ;
text-align: center;
}
.p1{
text-indent: 2em;
}
.p2{
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">12345</p>
<p class="L2">12345</p>
<p class="L3">12345</p>
<h1>介绍</h1>
<p class="p1">
牛奶中钙离子能够与铁剂在十二指肠吸收部位发生竞争，使铁吸收减少，降低疗效。而且牛奶中的磷也可能使铁剂沉淀，影响铁的吸收。
</p>
<p class="p2">
膏方是中药，牛奶中的钙磷铁易与中药里的有机化合物发生化学反应，生成难溶物，破坏牛奶和药物的有效成分。
</p>
</body>
</html>
--------------------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
水平对齐~参照物， a,b
-->
<style>
img,span{
vertical-align: middle;
}
</style>
</head>
<body>
<p>
<img src="images/a.png" alt="">
<span>ahdjdchokddkddffff</span>
</p>
</body>
</html>3.4 阴影
/*text-shadow:阴影颜色，水平偏移，垂直偏移，阴影半径*/
#price{
text-shadow: #3cc7f5 10px -10px 2px;
}
3.5 超链接伪类
正常情况下，a，a:hover
/*默认的颜色*/
a{
text-decoration: none;
color:#000000;
}
/*鼠标悬浮的状态*/
a:hover{
color: orange;
font-size:50px;
}3.6 列表
3.7 背景
背景颜色
背景图片
<style>
div{
width: 1000px;
height:700px;
border: 1px solid red;
background-image: url("images/zjl.png");
/*默认是全部铺平*/
}
.div1{
background-repeat: repeat-x;
}
.div2{
background-repeat: repeat-y;
}
.div3{
background-repeat: no-repeat;
}
</style>4,盒子模型
4.1 什么是盒子
margin:外边距
padding:内边距
border:边框
4.2 边框
1，边框的粗细
2，边框的样式
3，边框的颜色
4.3 内外边距
盒子的计算方式：你这个元素到底有多大？
margin+border+padding+内容宽度
4.4 圆角边框
4个角
<style>
div{
width:100px;
height:100px;
border:10px solid red;
border-radius: 100px;
}
</style>4.5 盒子阴影
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--margin: 0 auto; 居中
要求：块元素，块元素有固定的宽度
-->
<style>
div{
text-align: center;
}
img{
border-radius: 50px;
box-shadow: 10px 10px 100px yellow;
}
</style>
</head>
<body>5,浮动
5.1 标准文档流
块级元素：独占一行
h1~h6 p div 列表...
行内元素：不独占一行
span a img
行内元素可以被包含在块级元素中，反之则不可以
5.2 display
这个也是一种实现行内元素排列的方式，但是我们很多情况都是用float
<!--block 块元素
inline 行内元素
inline-block是块元素，但是可以内联，在一行！
-->
<style>
div{
width: 100px;
height: 100px;
border: 1px solid red;
}
span{
width: 100px;
height: 100px;
border: 1px solid red;
display: inline-block;
}
</style>5.3 float
1 左右浮动
5.4父级边框塌陷的问题
clear
/* clear:right; 右侧不允许有浮动元素 clear:left; 左侧不允许有浮动元素 clear:both; 两侧不允许有浮动元素 clear:none; */
解决方案：
1，增加父级元素的高度~
#father{
border:1px #000 solid;
height:800px;
}
2，增加一个空的div标签，清除浮动
<div class="clear"></div>
.clear{
clear:both;
margin:0;
padding:0;
}
3，overflow
在父级元素中增加一个 overflow:hidden;
4，父类添加一个伪类：after
#father:after{
content:'';
display:block;
clear:both;
}
小结：
1.浮动元素后面增加空div
简单，代码中尽量避免空div
2.设置父类高度
简单，元素假设有了固定的高度，就会被限制
3.overflow
简单，下拉的一些场景避免使用
4.父类添加一个伪类：after（推荐）
写法稍微复杂一点，但是没有副作用，推荐使用！
5.5 对比
-
display
方向不可以控制
-
float
浮动起来的话会脱离标准文档流，所以要解决父级边框塌陷的问题
6,定位
6.1 相对定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 相对定位：相对于自己原来的位置进行偏移
-->
<style>
div{
margin: 10px;
padding: 5px;
font-size: 12px;
line-height: 25px;
}
#father{
border: 1px solid orangered;
padding: 0;
}
#first{
background-color: orangered;
border: 1px dashed #f6b6f6;
position: relative; /*相对定位：上下左右*/
top:-20px;
left: 20px;
}
#second{
background-color: greenyellow;
border: 1px dashed #97D9E1;
}
#third{
background-color: darkgreen;
border: 1px dashed #378fc1;
position: relative;
bottom: -10px;
right: 20px;
}
</style>
</head>
<body>
<div id="father">
<div id="first">第一个盒子</div>
<div id="second">第二个盒子</div>
<div id="third">第三个盒子</div>
</div>
</body>
</html>相对定位：position:relative;
相对与原来的位置，进行指定的偏移，相对定位的话，它任然在标准文档流中，原来的位置会被保留
top:-20px; left: 20px;
bottom: -10px; right: 20px;
6.2 绝对定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 相对定位：相对于自己原来的位置进行偏移
-->
<style>
div{
margin: 10px;
padding: 5px;
font-size: 12px;
line-height: 25px;
}
#father{
border: 1px solid orangered;
padding: 0;
position: relative;
}
#first{
background-color: orangered;
border: 1px dashed #f6b6f6;
}
#second{
background-color: greenyellow;
border: 1px dashed #97D9E1;
position: absolute;
right: 30px;
}
#third{
background-color: darkgreen;
border: 1px dashed #378fc1;
}
</style>
</head>
<body>
<div id="father">
<div id="first">第一个盒子</div>
<div id="second">第二个盒子</div>
<div id="third">第三个盒子</div>
</div>
</body>
</html>定位：基于xxx定位，上下左右~
1，没有父级元素定位的前提下，相对于浏览器定位
2，假设父级元素存在定位，我们通常会相对于父级元素进行偏移
3，在父级元素范围内移动
相对于父级或浏览器的位置，进行指定的偏移，绝对定位的话，它不在标准文档流中，原来的位置会被保留
6.3 固定定位 fixed
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
height: 1000px;
}
div:nth-of-type(1){/*绝对定位：相对于浏览器*/
width: 100px;
height: 100px;
background-color: red;
position: absolute;
right: 0;
bottom: 0;
}
div:nth-of-type(2){
width: 50px;
height: 50px;
background-color: yellow;
position: fixed;
right: 0;
bottom: 0;
}
</style>
</head>
<body>
<div>div1</div>
<div>div2</div>
</body>
</html>6.4 z-index
图层~
z-index：默认是0，最高无限
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="content">
<ul>
<li><img src="images/img.png" alt=""></li>
<li class="tipText">学习微服务，找狂神</li>
<li class="tipBg"></li>
<li>时间：2022-01-16</li>
<li>地点：首经贸</li>
</ul>
</div>
</body>
</html>opacity:0.5;/背景透明度/
#content{
width: 556px;
padding: 0px;
margin: 0px;
overflow: hidden;
font-size: 15px;
line-height: 25px;
border: 1px #000 solid;
}
ul,li{
padding: 0px;
margin: 0px;
list-style: none;
}
/*父级元素相对定位*/
#content ul{
position: relative;
}
.tipText,.tipBg{
position: absolute;
width: 556px;
height: 25px;
top:40px;
}
.tipBg{
background-color:orange;
opacity: 0.5; /*背景透明度*/
}
.tipText{
color: white;
z-index: 999;
}
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
