1.什么是CSS
Cascading Style Sheet 层叠级联样式表
1.1CSS美化
字体、颜色、边距、高度、宽度、背景图片、网页定位、网页浮动…
1.2CSS优势
- 内容和表现分离
- 网页结构表现统一,可以实现复用
- 样式十分的丰富
- 建议使用独立于html的css文件
- 利用SEO,容易被搜索引擎收录
1.3CSS发展史
CSS1.0
CSS2.0: DIV(块) + CSS,HTML与CSS结构分离的思想,网页变得简单,SEO
CSS2.1:浮动、定位
CSS3.0:圆角、阴影、动画…浏览器兼容性
1.4学习路线
- CSS是什么
- CSS怎么用(快速入门)
- CSS选择器(重点+难点)
- 美化网页(文字、阴影、超链接、列表、渐变…)
- 盒子模型
- 浮动
- 定位
- 网页动画(特效)
2.第一个样式页面
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>首页</title>
<!-- 规范,<style>可以编写css的代码,每一个声明,最好使用分号结尾
语法:
选择器{
声明1;
声明2;
}
样式优先级:行内样式>内部样式>外部样式,就近原则
-->
<!-- 内部样式-->
<style>
h1{
color: blueviolet;
}
</style>
<!-- 外部样式-->
<link rel="stylesheet" href="css/style01.css">
</head>
<body>
<h1>Hello css!</h1>
<h2>Hello css!</h2>
<!--行内样式,在标签元素中,编写一个style属性,编写样式即可-->
<h3 style="color: orangered">Hello css!</h3>
</body>
</html>
**css文件**
h2 {
color: blue;
}
3.外部样式的两种写法
- 链接式:HTML标签
- 导入式:CSS2.0
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>样式</title>
<!-- 链接式(常用)-->
<!-- <link rel="stylesheet" href="../css/style01.css">-->
<!-- 导入式-->
<style>
@import url("../css/style01.css");
</style>
</head>
<body>
<h2>我的网页</h2>
</body>
</html>
4.选择器
4.1常用选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择器</title>
<!-- 选择器:选择页面上的某一个或某一类元素
id选择器:id选择器必须全局唯一,不可以同名id
#id名{样式}
class类选择器:可以多个标签归类,使用同一个class,跨标签
.class类名{样式}
标签选择器:标签名
标签名{样式}
三者选择器的优先级(不遵循就近原则):id 选择器>class 选择器> 标签选择器
-->
<style>
/*标签选择器*/
h1 {
color: #3e8833;
}
/*id选择器*/
#title2 {
color: royalblue;
font-style: oblique;
}
/*class选择器*/
.title3 {
color: rosybrown;
font-family: Arial;
}
</style>
</head>
<body>
<h1>标题一</h1>
<h2 id="title2">标题二</h2>
<h3 class="title3">标题三</h3>
</body>
</html>
4.2层次选择器
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>层次选择器</title>
<style>
/*后代选择器:在某个元素后面的所有元素*/
/* body p{*/
/* background: blueviolet;*/
/* }*/
/*子选择器:在某个元素的直系子元素*/
/*body>p{*/
/* background: #3e8833;*/
/*}*/
/*相邻兄弟选择器:在某个元素向下的一个兄弟元素(只有一个),没有本身*/
/*.active + p{*/
/* background: aqua;*/
/*}*/
/*通用选择器:在某个元素向下的所有兄弟元素(可有多个),没有本身*/
.active~p{
background: orange;
}
</style>
</head>
<body>
<p>p0</p>
<p class="active">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>
</html>
4.3结构伪类选择器
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>伪类选择器</title>
<!-- 避免使用:class、id选择器
伪类:条件-->
<style>
/*ul的第一个子元素*/
ul li:first-child{
background: blue;
}
ul li:last-child{
background: aqua;
}
/*选择p1:定位到父元素,选择当前p的第一个元素
选择当前p元素的父级元素,选中父级元素的第一个,并且是当前元素才生效,顺序
*/
p:nth-child(1){
background: blueviolet;
}
/*选中父元素下的p元素的第二个 类型*/
p:nth-last-of-type(2){
background: orangered;
}
</style>
</head>
<body>
<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>
4.4属性选择器(常用)
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>属性选择器</title>
</head>
<!--属性名,属性名=属性值(正则)
=:绝对等于
*=:包含这个元素
^=:以这个为首
$=:以某元素为尾
存在id属性的元素 a[]{}
a[id]{
background:yellow;
}
a[id=first]{
background:red;
}
-->
<style>
.demo a{
float: left;
display: block;
width: 50px;
height: 50px;
border-radius: 10px;
background: aqua;
text-align: center;
color: gainsboro;
text-decoration: none;
margin-right: 5px;
font: bold 20px/50px Arial;
}
/* 1. =:绝对等于*/
a[id=first]{
background: blue;
}
/* 2. *=:包含这个元素*/
a[class*="active"]{
background: crimson;
}
/* 3.href^=:选中href中以某元素开头的元素*/
a[href^=https]{
background: orangered;
}
/* 4.href$=:以某元素结尾*/
a[href$=png]{
background: #3e8833;
}
</style>
<body>
<p class="demo">
<a href="http://www.baidu.com" class="links item first" id="first">1</a>
<a href="images/1.html" class="links item active" target="_blank">2</a>
<a href="https://douyin.com" class="links item">3</a>
<a href="images/1.png" class="links item">4</a>
<a href="/a.pdf" class="links item last obj">5</a>
</p>
</body>
</html>
5.美化网页元素
5.1为什么要美化网页
- 有效的传递网页信息
- 美化网页、页面漂亮,才能吸引用户
- 凸显页面的主题
- 提高用户的体验
span标签:重点要突出的字,要用span套起来
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>span标签</title>
<style>
.title01{
color: blue;
font-size: 60px;
}
</style>
</head>
<body>
科目<span class="title01">Java</span>
</body>
</html>
5.2字体样式
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>字体样式</title>
<!-- font-family:字体类型
font-size:字体大小
font-weight:字体粗细
coler:字体颜色-->
<style>
.title01{
font-family: "Arial Black",楷体;
color:chartreuse;
font-size: 50px;
font-weight: bolder;
}
/*字体风格*/
.title02{
font: oblique bolder 20px "宋体";
}
</style>
</head>
<body>
<h1 class="title01">老人与海</h1>
<h2 class="title02">记叙文</h2>
<p>在第85天,老人独自驾船出海了。大海一如既往的平静、美丽,空中还不时有军舰鸟盘旋。</p>
<p>老人将挂有沙丁鱼的钓钩抛到海里,他在等侍着。就在这时,他发现原来笔直地垂在水里的一根钓丝突然倾斜了,是大鱼上钩了吗?经过漫长的等待的老人心中欣喜异常。</p>
<p>第85天了,老人终于钓到了一条鱼。他欣喜若狂,想要把这条鱼拉到水面上来,凭经验判断,这一定是一条大鱼!</p>
</p>一天一夜过去了,大鱼它好像是累了,终于露出了头。让老人吃惊的是,这鱼非常大,比老人的还长两英尺。</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字体样式</title>
<!-- font-family:字体类型
font-size:字体大小
font-weight:字体粗细
coler:字体颜色-->
<!-- 文本样式
颜色:color rgb rgba
文本对齐的方式 text-align=center
首行缩进:text-indent:2em
行高:line-height
装饰:text-decoration
文本图片水平对齐:vertical-align:middle
排版,居中:text-align
段落首行缩进:text-indent:2em
行高和块的高度一致,就可以上下居中-->
<style>
.title01 {
font-family: "Arial Black", 楷体;
color: chartreuse;
font-size: 50px;
font-weight: bolder;
text-align: center;
}
/*字体风格*/
.title02 {
font: oblique bolder 20px "宋体";
color: rgba(0, 255, 255, 0.9);
text-align:right;
}
.p1 {
text-indent: 2em;
}
.p2 {
background: chartreuse;
height: 300px;
line-height: 300px;
}
/* 上划线*/
.pl01 {
text-decoration: underline;
}
/*中划线*/
.pl02{
text-decoration: line-through;
}
/*下划线*/
.pl03{
text-decoration: overline;
}
</style>
</head>
<body>
<h1 class="title01">老人与海</h1>
<h2 class="title02">记叙文</h2>
<p class="p1">在第85天,老人独自驾船出海了。大海一如既往的平静、美丽,空中还不时有军舰鸟盘旋。</p>
<p class="p2">老人将挂有沙丁鱼的钓钩抛到海里,他在等侍着。就在这时,他发现原来笔直地垂在水里的一根钓丝突然倾斜了,是大鱼上钩了吗?经过漫长的等待的老人心中欣喜异常。</p>
<p class="p3">第85天了,老人终于钓到了一条鱼。他欣喜若狂,想要把这条鱼拉到水面上来,凭经验判断,这一定是一条大鱼!</p>
<p class="p4">一天一夜过去了,大鱼它好像是累了,终于露出了头。让老人吃惊的是,这鱼非常大,比老人的还长两英尺。</p>
<hr/>
<p class="p5">
<li class="pl01">123</li>
<li class="pl02">234</li>
<li class="pl03">345</li>
</p>
</body>
</html>
5.3阴影和伪链接
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>阴影和伪链接</title>
<style>
/*默认的颜色*/
a{
text-decoration: none;
color:#000000;
}
/*鼠标悬浮的颜色*/
a:hover{
color: orange;
font-size: 50px;
}
/*鼠标按住未释放的状态*/
a:link{
color:#3e8833;
}
a:visited{
color: chartreuse;
}
a:active{
color:green;
}
/*text-shadow:阴影颜色,水平偏移,垂直偏移,阴影半径*/
#price{
text-shadow: gainsboro 10px 10px 3px;
}
</style>
</head>
<body>
<a href="#">
<img src="images/img.png" alt="java书籍">
</a>
<p>
<a href="#">程序员入门参考书籍</a>
</p>
<p>
<a href="京东书店"></a>
</p>
<p id="price">¥99</p>
</body>
</html>
6.图像
6.1背景颜色
6.2背景图像平铺方式
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>背景图片</title>
<style>
div{
width:1000px;
height:700px;
border: 1px solid red;
/*默认全部的div标签平铺*/
background-image: url("../images/A梦.jpeg");
}
.div1{
/*控制图片平铺的方向:横铺*/
background-repeat: repeat-x;
}
.div2{
/*控制图片平铺的方向:竖铺*/
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>
6.3背景图片
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>背景图片</title>
<link rel="stylesheet" href="../css/2.backgroundImage02.css">
</head>
<body>
<div id="nav">
<h2 class="title">全部商品分类</h2>
<ul>
<li><a href="#">图书</a> <a href="#">音像</a></li>
<li><a href="#">家用电器</a> <a href="#">手机</a></li>
<li><a href="#">电脑</a> <a href="#">办公</a></li>
<li><a href="#">家居</a> <a href="#">家装</a></li>
<li><a href="#">服饰鞋帽</a> <a href="#">个人护理</a></li>
<li><a href="#">礼品箱包</a> <a href="#">钟表</a></li>
<li><a href="#">食品饮料</a> <a href="#">保健</a></li>
<li><a href="#">彩票</a> <a href="#">旅行</a></li>
</ul>
</div>
</body>
</html>
#nav {
width: 300px;
background: #a0a0a0;
}
.title {
font-size: 18px;
font-weight: bold;
text-indent: 1em;
line-height: 35px;
/*背景图片*/
/*颜色 图片 图片位置 平铺设置*/
background: red url("../images/down.jpg") 270px 10px no-repeat;
background-size: 10px 10px;
}
ul li {
height: 30px;
list-style: none;
text-indent: 1em;
background-image: url("../images/right.jpeg");
background-repeat: no-repeat;
background-size: 10px 10px;
background-position: 236px 2px;
}
a {
text-decoration: none;
font-size: 14px;
color: #000;
}
a:hover {
color: orange;
text-decoration: underline;
}
6.4渐变
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>渐变</title>
<!-- 径向渐变,圆形渐变-->
<style>
body{
background-image: linear-gradient(19deg,#21D4FD 0%,#B721FF 100%);
}
</style>
</head>
<body>
</body>
</html>
7.盒子模型
7.1什么是盒子模型?
7.2边框
- 边框的粗细
- 边框的样式
- 边框的颜色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子模型</title>
<style>
/*h1、div、form、body总有一个默认的外边距margin:0*/
/*初始化*/
h1,ul,li,a,div,body {
margin: 0;
border: 0;
padding: 0;
}
/*border:粗细,样式,颜色*/
#box {
width: 300px;
border: 1px solid red;
}
h2{
font-size: 16px;
background-color: #3e8833;
line-height: 30px;
}
form{
background:blue;
}
div:nth-of-type(1) input{
border:3px solid black;
}
div:nth-of-type(2) input{
border:3px dashed blue;
}
div:nth-of-type(3) input{
border:3px solid green;
}
</style>
</head>
<body>
<div id="box">
<h2>会员登录</h2>
<form action="#">
<div>
<span>用户名:</span>
<input type="text">
</div>
<div>
<span>密码:</span>
<input type="password">
</div>
<div>
<span>邮箱:</span>
<input type="email">
</div>
</form>
</div>
</body>
</html>
7.3内外边距
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>外边距/内边距</title>
<!-- 外边距可设置居中-->
<style>
/*border:粗细,样式,颜色*/
/* margin:0 auto; 居中设置*/
#box {
width: 300px;
border: 1px solid red;
margin: 0 auto;
}
h2 {
font-size: 16px;
background-color: #3e8833;
line-height: 30px;
/*上外边距:0*/
/*margin-top:0;*/
/*下外边距:0*/
/*margin-bottom: 0;*/
/*上下外边距:0 左右外边距:1px*/
margin: 0 1px;
/*上下左右外边距:0 */
/*margin:0;*/
/*上右下左外边距(逆时针) :0 1px 2px 3px*/
margin:0 1px 2px 3px;
}
form {
background: #3cbda6;
}
input {
border: 1px solid black;
}
</style>
</head>
<body>
<div id="box">
<h2>会员登录</h2>
<form action="#">
<div>
<span>用户名:</span>
<input type="text">
</div>
<div>
<span>密码:</span>
<input type="password">
</div>
<div>
<span>邮箱:</span>
<input type="email">
</div>
</form>
</div>
</body>
</html>
7.4圆角边框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圆角边框</title>
<!-- 顺时针方向 左上 右上 右下 左下-->
<!-- 圆圈:圆角=半径-->
<style>
.div1 {
width: 100px;
height: 100px;
border: 10px solid red;
border-radius: 50px;
}
.div2 {
width: 80px;
height: 80px;
padding: 10px;
margin: 10px;
border: 6px solid #B721FF;
border-radius: 0 0 50px 50px;
}
img {
width: 80px;
height: 80px;
border:10px solid cornflowerblue;
border-radius: 50px;
}
</style>
</head>
<body>
<div class="div1"></div>
<hr/>
<div class="div2"></div>
<hr/>
<img src="images/A梦.jpg" alt="哆啦A梦">
</body>
</html>
7.5盒子阴影
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>阴影</title>
<style>
.div1 {
margin: 0 auto; /*居中,前提:块元素,块元素有固定的宽度*/
border-radius: 50px;
box-shadow: 10px 10px 100px gold;
}
</style>
</head>
<body>
<div class="div1" style="width:300px;height:300px">
<img src="images/A梦.jpg" width="300px" height="300px" alt="">
</div>
</body>
</html>
8.浮动
8.1简单介绍
标准文档流:自上而下
行内元素:不独占一行
块级元素:独占一行
行内元素可以被包含在块级元素中,反之不可以
8.2display
实现行内元素排列的方式,但是很多情况都是使用float
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>display</title>
<!-- display:
block:块元素
inline-block:既是行内元素,也是块元素,保持块元素但可以写在一行
inline:行内元素
none:消失
-->
<style>
.div1{
width:100px;
height:100px;
border:1px solid red;
}
span{
width:100px;
height:100px;
border:1px solid gray;
display: inline-block; /*将行内元素变成...元素*/
}
</style>
</head>
<body>
<div class="div1">div块元素</div>
<span>span行内元素</span>
</body>
</html>
8.3浮动
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>浮动</title>
<style>
div{
margin:10px;
padding:5px;
}
#pictures{
border:1px #000 solid;
}
.layer01{
border:1px #F00 dashed;
display: inline-block;
float:left;
}
.layer02{
border:1px #00F dashed;
display: inline-block;
float:left;
}
.layer03{
border:1px #060 dashed;
display:inline-block;
float:left;
}
.layer04{
border:1px #666 dashed;
font-size: 12px;
line-height:23px;
display: inline-block;
clear: left; /*清除浮动*/
}
</style>
</head>
<body>
<div id="pictures">
<div class="layer01"><img src="images/A1.jpeg" width="100px" height="100px" alt=""/> </div>
<div class="layer02"><img src="images/A2.jpeg" width="100px" height="100px" alt=""/> </div>
<div class="layer03"><img src="images/A3.jpeg" width="100px" height="100px" alt=""/> </div>
<div class="layer04">
浮动的盒子可以向左浮动,也可以向右浮动,直到它的外边缘碰到包
</div>
</div>
</body>
</html>
8.4父级边框塌陷问题
/*clear:right;右侧不允许有浮动元素
clear:left:左侧不允许有浮动元素
clear:both:两侧不允许有浮动元素
clear:none;*/
- 增加父级元素的高度
#pictures {
border: 1px #000 solid;
height: 800px;
}
- 增加一个空的div标签,清除浮动
<div class="clear"></div>
.clear{
clear: both;
margin:0;
padding:0;
}
- overflow
在父级元素中增加一个,overflow:hidden或scroll元素
#pictures{
width:500px;
height: 150px;
overflow: scroll; /*解决溢出问题*/
}
- 父类添加一个伪类:after
#pictures:after{
width:500px;
height: 150px;
/*overflow: scroll; !*解决溢出问题*!*/
clear:both;
}
小结:
- 浮动元素后加空的div
简单、代码中尽量空div - 设置父元素的高度
简单、元素假设有了固定的高度,就会被限制 - overflow
简单,下拉的一些场景避免使用 - (推荐使用)父类添加一个伪类 :after()
写法复杂一点,但是没有副作用,推荐使用。
8.5对比 - display
方向不可以控制 - float
浮动起来的话会脱离标准文档流
9.定位
9.1相对定位
相对定位:相对于自己原来的位置进行偏移
.div1{
background-color: #3e8833;
border:1px dashed #21D4FD;
position:relative; /*相对定位:上下左右*/
top:-20px;
left:10px;
button:20px;
top:10px;
}
9.2绝对定位
绝对定位:基于XXXX定位,上下左右
- 如果有父级标签,会相对于父级元素定位;
- 如果没有父级元素定位,会相对于浏览器定位;
- 在父级元素内移动
相对于父级或浏览器的位置,进行指定的偏移,绝对定位的话,它不在标准文档流中,原来的位置不
会被保留
9.3固定定位
无论怎么变化,标签的位置仍保持不变
position:fixed;
9.4z-index
z-index:默认是0,无限大
背景透明度:
opacity:0.5;