目录
1.什么是CSS
如何学习
-
css是什么
-
css怎么用(快速入门)
-
css选择器(重点+难点)
-
美化网页(文字,阴影,超链接,列表,渐变)
-
盒子模型
-
浮动
-
定位
-
网页动画(特效效果)
1.1什么是CSS
Cascading Style Sheet层叠样式表
CSS:表现层(美化网页)
字体,颜色,边距,高度,宽度,背景图片,网页定位,网页浮动
1.2发展史
CSS1.0
CSS2.0 DIV+CSS,HTML与CSS结构分离的思想,网页变得简单,SEO
CSS2.1 浮动,定位
CSS3.0 圆角,阴影,动画... 浏览器兼容性~
1.3快速入门
style
基本入门
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--规范 <style>可以编写css的代码,没一个声明,最好使用分号结尾
语法:
选择器{
声明1;
声明2;
}
-->
<style>
h1{
color:red;
}
</style>
</head>
<body>
<h1>我是</h1>
</body>
</html>建议使用这种规范
css的优势:
-
内容和表现分离
-
网页结构表现统一可以实现复用
-
样式十分丰富
-
建立于使用独立于html的css文件
-
利用SEO,容易被搜索引擎收录
1.4CSS3种导入方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h2{
color: aliceblue;
}<!-- 以下两种都是第三种方式-->
@import url("../CSS/demo1.css");
</style>
<link rel="stylesheet" href="../CSS/demo1.css">
</head>
<body>
<!-- 重复了采用就近原原则
优先级就近原则
-->
行内样式
第一种导入方式
<h1 style="color: black;">你好</h1>
第二种导入方式 内部样式
<h2>你好</h2>
第三种导入方式 外部样式
<h3>你好</h3>
</body>
</html>@import规则必须放在 CSS 文件的开头，否则可能会导致样式不生效。- 与
<link>标签相比，@import规则的性能可能会稍差一些，因为它会在页面加载完成后再加载外部样式表。因此，建议优先使用<link>标签来导入外部样式表。
2.选择器
2.1基本选择器
作用:选择页面上的某一元素或某一类元素
-
标签选择器 选择一类标签
-
类 选择器 class 选择所有class属性一致的标签,跨标签
-
id 选择器 全局唯一
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* id>class>标签*/
/*标签选择器,会选择到页面上所有的这个标签的元素*/
h1{
color: blue;
background: yellow;
border-radius: 24px;
}
p{
font-size: 80px;
}
/*类选择器格式 .class的名称{} 好处,可以多个标签归类,是同一个class,可以复用*/
.a1{
color: aqua;
background: black;
}
/*id选择器*/
#b1{
color: greenyellow;
background: red;
}
</style>
</head>
<body>
<h1>学Java</h1>
<p>听姜霁轩</p>
<h2 class="a1">CLASS选择器</h2>
<h3 id="b1">id选择器</h3>
</body>
</html>生效方式:
id>class>标签
2.2层次选择器
1.后代选择器 在某个元素的后面 祖爷爷 爷爷 爸爸 你
/* body p{
后代选择器
background: blue;
} */2.子选择器 一代 儿子
/* body>p{
子选择器
background: green;
} */3.相邻兄弟选择器 相邻向下只有一个 需要.class选择器
.active+p{
background: yellow;
}4.通用选择器 当前选择元素的向下所有兄弟元素
.active~p{
background:black;
}2.3结构伪类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
ul li:first-child{
color: rebeccapurple;
}
ul li:last-child{
color: rebeccapurple;
}
/* 选择其父元素下的第一个子元素且该子元素为 p 元素，设置文字颜色为 rebeccapurple */
p:nth-child(1){
color: rebeccapurple;
}
/* 选择其父元素下的第一个 p 类型元素，设置文字颜色为 rebeccapurple */
p:nth-of-type(2){
color: rebeccapurple;
}
</style>
</head>
<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li>p1</li>
<li>p2</li>
<li>p3</li>
</ul>
</body>
</html>2.4属性选择器(常用)
id+class结合~
3.美化页面元素
3.1字体样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* family字体
size大小
weight粗细
color字体颜色 */
body{
font-family: 楷体;
color: black;
}
h1{
font-size: 50px;
}
.p1{
font-weight: bolder;
}
</style>
</head>
<body>
<h1>黑神话悟空</h1>
<p>今日（2月1日），曾在《人民的名义》中饰演“丁义珍”的知名演员许文广在抖音发布短视频，表示自己最近在玩《黑神话：悟空》。“昨天晚上打到4点，终于走出黄风岭了！”原抖音地址>>>
</p>
<p>他还对游戏中的“陕北名歌”赞不绝口：“好听！特别喜欢！”并在视频中亲自献唱了一段“黄风岭，八百里，曾是关外富饶地”。
此外他还提到，一开始打黄风大圣特别难，后来看了攻略才知道要拿定风珠，半小时就过关了。</p>
</body>
</html>3.2文本样式
-
颜色 color rgb rgba
-
文本对齐模式 text-align=center
-
首行缩进 text-indent:2em
-
行高 line-height:
-
装饰 text-decoration:
-
文本图片水平对齐:vertical-align:middle
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 颜色:单词 RGB 0~F
rgba a:0~1
text-align 排版居中
text-indent 2em,段落首行缩进
行高,和 块的高度一致,就可以上下居中
*/
h1{
color: rgba(0, 255, 255,0.1);
text-align: center;
}
.p1{
text-indent: 2em;
}
.p3{
background: #2700ff;
height: 300px;
line-height: 300px;
}
/* 下划线 */
.a1{
text-decoration: underline;
}
/* 中划线 */
.a2{
text-decoration: line-through;
}
/* 上划线 */
.a3{
text-decoration: overline;
}
a{
text-decoration: none;
}
img,span{
vertical-align: middle;
}
</style>
</head>
<body>
<a href="">123</a>
<p class="a1">123</p>
<p class="a2">456</p>
<p class="a3">789</p>
<h1>黑神话悟空</h1>
<p1>今日（2月1日），曾在《人民的名义》中饰演“丁义珍”的知名演员许文广在抖音发布短视频，表示自己最近在玩《黑神话：悟空》。“昨天晚上打到4点，终于走出黄风岭了！”原抖音地址>>>
</p1>
<p>他还对游戏中的“陕北名歌”赞不绝口：“好听！特别喜欢！”并在视频中亲自献唱了一段“黄风岭，八百里，曾是关外富饶地”。
此外他还提到，一开始打黄风大圣特别难，后来看了攻略才知道要拿定风珠，半小时就过关了。</p>
<p class="p3">jaisdjaisofhjwioehgjfiwenguwihjghjwijgewefgwe4gwe</p>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
img,span{
vertical-align: middle;/*不调会在底下对齐*/
}
</style>
</head>
<body>
<img src="../img/1.jpg" alt="">
<span>文章内容</span>
</body>
</html>3.3超链接伪类
主要用hover
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*默认颜色*/
a{
text-decoration: none;
color: black;
}
/*鼠标悬浮的颜色(重点)*/
a:hover
{
color: orange;
font-size: 50px;
}
/*鼠标按住未释放的状态*/
a:active{
color: greenyellow;
}
/* 阴影颜色 水平偏移 垂直 阴影半径 */
#price{
text-shadow: red 10px 10px 1px;
}
</style>
</head>
<body>
<a href="#">
<img src="../img/1.jpg" alt="">
</a>
<p>
<a href="">作者:孤独求败</a>
</p>
<p>
<a href="">码出搞效,Java开发手册</a>
</p>
<p>
<a href="" id="price">$111</a>
</p>
</body>
</html>3.4列表
3.5背景
<style>
div{
width: 1000px;
height: 700px;
border: 1px solid black;
background-image:url(../img/1.jpg) ;
/* 默认是全部平铺的*/
}
.div1{
background-repeat:repeat-x ;/*垂直方向只有一次,水平铺满位置*/
}
</style>
4.盒子模型
4.1什么是盒子模型
padding内边距 border边距 margin外边距
4.2 边框
-
边框粗细
-
边框样式
-
边框颜色
4.3内外边距
4.4圆角边框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=\, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 100px;
height: 100px;
border-radius: 10px;/*10px为半径*/
border: 1px solid black;
}
</style>
</head>
<body>
<div></div>
</body>
</html>4.5阴影
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=\, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 100px;
height: 100px;
margin: 100px;
border: 5px solid red;
box-shadow: 10px 10px 100px yellow;
}
</style>
</head>
<body>
<div></div>
</body>
</html>5.浮动
5.1标准文档流
块级元素:独占一行
h1~h6 p div 列表...
行内元素:不独占一行
span a img strong
行内元素可以被包含在块级元素中,反之,则不可以
5.2display
也是一种实现行内元素排列方式,但是我们很多情况用float
行内排列：元素会像行内元素一样，在一行内依次排列，不会强制换行。多个 display 属性值为 inline-block 的元素可以在同一行显示，除非这一行没有足够的空间
<style>
/* block 块元素
inline 行内元素
inline-block 是块元素,但是可以内联,在一行
none */
div{
width: 100px;
height: 100px;
border: 1px solid red;
display: inline-block;
}
span{
width: 100px;
height: 100px;
border: 1px solid red;
display: inline-block;
}
</style>5.3 float
.a1{
float: right;
}5.4父级边框塌陷的问题
clear
clear:right右侧不允许有浮动元素
left左侧不允许有浮动元素
both两次不允许有浮动元素
none允许浮动元素
解决方法:
-
增加父级高度(不建议)
-
增加一个空的div标签,清除浮动 在浮动父级的下面
.clear{
clear:both;
margin:0;
padding:0;
}3.overflow 在父级元素中增加一个 overflow:hidden
4.父类添加一个伪类:after 避免创建一个div
#father:after{
content:''; 加一个空的内容很小
display:block;变成块div
clear:both;
}小结:
-
浮动元素后面增加空的div 简单,代码中尽量避免空div
-
设置父元素高度 简单,元素假设有了固定高度,就会被限制
-
overflow 简单,下拉的一些场景,避免使用
-
父类添加伪类 写法稍微复杂一点,但是没有副作用推荐使用
5.5对比
-
display
方向不可以控制
-
float
浮动起来的话会脱离标准文档,所以要解决父级边框塌陷的问题
6.定位
6.1相对定位
原来的位置相对于现在的位置向上偏移5px
.b1{
height: 100px;
position: relative;/*相对定位*/
top: 5px;
}相对定位:position:relative
6.2绝对定位
定位:基于xxx定位,上下左右
-
没有父级元素定位的前提下,相对于浏览器定位
-
假设父级元素存在定位,我们通常会相对于父级元素进行偏移
-
在父级元素范围内移动
相对于父级或浏览器的位置,进行指定的偏移,绝对定位的话,他不在标准文档流中,原来的位置不会被保留
position:absolute
6.3固定定位
元素会相对于浏览器窗口进行定位 无论页面如何滚动,元素都会固定在浏览器窗口某个位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
height: 10000px;
}
div:nth-of-type(1){
width: 100px;
height: 100px;
background: rebeccapurple;
position: absolute;
right: 0;
bottom: 0;
}
div:nth-of-type(2){
width: 50px;
height: 50px;
background: red;
position: fixed;
right: 0;
bottom: 0;
}
</style>
</head>
<body>
<div >a</div>
<div>b</div>
</body>
</html>6.4z-index
z-index默认是0,最高无限
opacity=0.5背景透明度
