1. What
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。此外,CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。
CSS为HTML标记语言提供了一种样式描述,定义了其中元素的显示方式;在Web设计领域是一个突破。利用它可以实现修改一个小的样式更新与之相关的所有页面元素。
总体来说,CSS具有以下特点:
- 丰富的样式定义
- 易于使用和修改
- 多页面应用
- 层叠
- 页面压缩
1.1 发展史
CSS1.0
CSS2.0:DIV(块)+CSS,HTML与CSS结构分离的思想,网页变得简单,利于SEO
CSS2.1:浮动,定位
CSS3.0:圆角,阴影,动画… 浏览器兼容性
1.2 快速入门
基本入门
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 规范,<style>中可以编写css的代码,每一个声明用分号结尾
语法:
选择器{
声明1;
声明2;
声明3;
}
-->
<style>
h1{
color: red;
}
</style>
</head>
<body>
<h1>我是标题</h1>
</body>
</html>
建议使用的规范
CSS优势:
- 内容和表现分离
- 网页结构表现统一,可以实现复用
- 样式十分丰富
- 建议使用独立于html的css文件
- 利于SEO,容易被搜索引擎收录!
1.3 CSS的3种导入方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 内部样式 -->
<style>
h1{
color: blue;
}
</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>
2. 选择器
作用: 选择页面上的某一个或者某一类元素
2.1 基本选择器
- 标签选择器:选择一类标签 标签{}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*标签选择器,会选择页面上所有的这个标签的元素 */ h1{ color: red; } p{ font-size: 80px; } </style> </head> <body> <h1>HTML</h1> <h1>CSS</h1> <p>Java</p> </body> </html>
- 类选择器 class:选择所有class属性一致的标签,跨标签 .类名{}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*类选择器的格式 .class的名称{} 好处:可以将多个标签归类为同一个class,可以复用 */ .wang{ color: blue; } .K{ color: #3748ff; } </style> </head> <body> <h1 class="wang">标题</h1> <h1 class="wang">标题</h1> <h1 class="K">标题</h1> <p class="K">p标签</p> </body> </html>
- Id选择器:全局唯一! #id名{}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*id选择器 : id必须保证全局唯一! #id名称{} 优先级:不遵循就近原则,固定的 id选择器 > class选择器 > 标签选择器 */ #wang{ color: red; } .K{ color: green; } h1{ color: blue; } </style> </head> <body> <h1 id="wang" class="style1">标题1</h1> <h1 class="K">标题1</h1> <h1 class="K">标题1</h1> <h1>标题1</h1> <h1>标题1</h1> </body> </html>
优先级:ID > Class > 标签
2.2 层次选择器
- 后代选择器:某个元素的后面所有的标签
/*后代选择器*/ body p{ background: blue; }
- 子选择器:只选择至下一代
/*子选择器*/ body>p{ background: blue; }
- 相邻兄弟选择器:只选择下一个同级标签
/*相邻兄弟选择器: 只选择相邻(向下)的一个标签;active是class参数值*/ .active + p{ background: blue; }
- 通用选择器:选择之后所有的平级标签
/*通用兄弟选择器,当前选中元素的向下的所有兄弟元素;active是class参数值*/ .active~p{ background: blue; }
2.3 结构伪类选择器
/*ul的第一个子元素*/
ul li:first-child{
background: green;
}
/*ul的最后一个子元素*/
ul li:last-child{
background: red;
}
/*按下标:定位到p元素父元素下的第n个元素,且元素类型对应才生效*/
p:nth-child(1){
background: red;
}
/*按类型:选中p元素父元素下的第n个p元素*/
p:nth-of-type(2){
background: blue;
}
/*鼠标悬停特效*/
a:hover{
background: yellow;
}
伪元素选择器
::selection 选择指定元素中被用户选中的内容
::brfore 可以在内容之前插入新内容
::after 可以在内容之后插入新内容
::first-line 选择指定选择器的首行
::first-letter 选择文本的第一个字符
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: blue;
text-align: center;
color: #999999;
text-decoration: none;
margin-right: 65px;
line-height: 50px;
font: bold 20px/50px Arial;
}
/*属性名, 属性名=属性值(正则)
= 绝对等于
*= 包含元素
^= 以这个开头
$= 以这个结尾
*/
/*存在id属性的元素 a[]{}*/
a[id]{
background: yellow;
}
/*id值对应的元素 a[id=...]{}*/
a[id=first]{
background: red;
}
/*class中含有Links的元素*/
a[class*=links]{
background: yellow;
}
/*选中href中以http开头的元素 */
a[href^=http]{
background: yellow;
}
/*选中href中以pdf结尾的元素 */
a[href$=pdf]{
background: yellow;
}
</style>
</head>
<body>
<p class="demo">
<a href="https://www.google.com" class="links item first" id="first">1</a>
<a href="http:" 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>
3. 美化网页元素
3.1 Why
- 有效的传递页面信息
- 美化网页,页面漂亮,才能吸引用户
- 凸显页面的主题
- 提高用户的体验
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 字体样式
<!--
font-family: 字体
font-size: 字体大小
font-weight: 字体粗细
color: 字体颜色
-->
<style>
body{
font-family: Algerian,楷体;
color: red;
}
h1{
font-size: 15px;
}
.p1{
font-weight: bold;
}
</style>
3.3 文本样式
- 颜色 color : rgb rgba
- 文本对齐方式 text-align: center
- 首行缩进 text-indent: 2em
- 行高 line-height: 50px(单行文字上下居中 line-height = height)
- 装饰 text-decoration: underline
- 图文对齐方式 vertical-align: middle
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*
color: 颜色
单词
RGB 0 ~ f #ffffff
RGBA A: 0 ~ 1
text-align: center; 排版,居中
text-indent: 2em; 段落首行缩进
height: 300px; 块高
line-height: 300px; 行高,和块的高度一致就可以上下居中
*/
h1{
color: rgba(0,255,255,0.8);
text-align: center;
}
.p1{
text-indent: 2em;
}
.p3{
background: blue;
height: 300px;
line-height: 300px;
}
/*下划线*/
.l1{
text-decoration: underline;
}
/*中划线*/
.l2{
text-decoration: line-through;
}
/*上划线*/
.l3{
text-decoration: overline;
}
/*超链接去下划线*/
a{
text-decoration: none;
}
/* 水平对齐需要参照物 a,b */
img,span{
vertical-align: middle;
}
</style>
</head>
<body>
<p class="l1">13579</p>
<p class="l2">246810</p>
<p class="l3">++--**//</p>
<h1 >故事介绍</h1>
<p class="p1">
Java到底是啥?它能干什么?
</p>
<p class="p3">
自己也看过不少的课程和书,大部分都是从Java的发展史开始讲,总之就是那些什么Java历史悠久,Java很优秀,Java越来越牛,用的人越来越多,什么编程语言排行榜常年第一,大致都是这些,
然后再扯些其他的,接着就上起了Hello World!就这样,你Java生涯的第一个代码开始了,意思是“你好,世界!”
</p>
<p>
<img src="images/a.jpg" alt="">
<span>ssr</span>
</p>
</body>
</html>
3.4 阴影
/*text-shadow:阴影颜色,水平偏移,垂直偏移,阴影半径*/
#people{
text-shadow: rgba(12, 247, 255, 0.8) 10px -10px 10px;
}
3.5 超链接伪类
正常情况下,只会用到a:hover
a:link 未访问的连接
a:visited 已访问的连接
a:hover 鼠标悬浮效果
a:active 向被激活的元素添加样式(指按下还未松开)
a:focus 选择拥有键盘输入焦点的元素
3.6 列表
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>列表样式</title>
<link href="css/style.css" rel="stylesheet" href="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>
style.css
#nav{
width:300px ;
background: #a0a0a0;
}
.title{
font-size: 18px;
font-weight: bold;
text-indent: 2em;
line-height: 35px;
background: red;
}
/*ul li
list-style:
none 去掉圆点
circle 空心圆
decimal 数字
square 正方形
*/
ul{
background: #a0a0a0;
}
ul li{
height: 30px;
list-style: none;
text-indent: 1em;
}
a{
text-decoration: none;
font-size: 14px;
color: #000;
}
a:hover{
color: orange;
text-decoration: underline;
}
3.7 背景
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 1000px;
height: 700px;
border: 1px solid red;
background-image: url("image/1.jpg");
/*默认是全部平铺的 repeat*/
}
.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>
背景图片
/* 颜色,图片,图片位置(xy值),平铺方式*/
background: red url("../image/1.jpg") 200px 10px no-repeat;
background-image: url("../image/1.jpg");
background-repeat: no-repeat;
background-position: 236px 2px;
3.8 渐变
background-color: #ffffff;
background-image: linear-gradient(19deg, #21D4FD 0%, #B721FF 100%, #ff0000 100%);
4. 盒子模型
4.1 What
- margin:外边距
- padding:内边距
- border:边框
4.2 边框
- 边框的粗细
- 边框的样式
- 边框的颜色
<style>
/*body总有一个默认的外边距margin*/
*{
padding: 0px;
margin: 0px;
text-decoration: none;
}
/*border: 粗细,样式,颜色*/
#box{
width: 300px;
border: 1px solid red;
}
h2{
font-size: 16px;
background-color: #3cbda6;
line-height: 30px;
color: white;
}
form{
background: #3cbda6;
}
div:nth-of-type(1) input{
border: 3px solid red;
}
div:nth-of-type(2) input{
border: 3px solid black;
}
</style>
4.3 内外边距
盒子的计算方式:margin+border+padding+内容宽度
4.4 圆角边框
4个角
<!-- border-radius:
圆圈:圆角 = 半径!
四个值时四个角为顺时针数据(左上、右上、右下、左下)
-->
<style>
div{
width: 100px;
height: 50px;
background: red;
border-radius: 50px 50px 0px 0px;
}
</style>
4.5 盒子阴影
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
margin:0 auto; 居中
要求:处于块元素中,且块元素有固定的宽度
-->
<style>
img{
border-radius: 50px;
box-shadow: 10px 10px 100px yellow;
}
</style>
</head>
<body>
<div style="margin: 0 auto;width:500px">
<img src="image/1.jpg" alt="">
</div>
</body>
</html>
5. 浮动
5.1 标准文档流
左边为常见网页布局,右边为标准文档流
块级元素:独占一行
h1~h6、p、div、列表...
行内元素:不独占一行
span、a、img、strong...
行内元素可以被包含在块级元素中;反之则不可以~
5.2 display
<!--
block 块元素
inline 行内元素
inline-block 是块元素,但是可以内联,在一行
none
-->
<style>
div{
width: 100px;
height: 100px;
border: 1px solid red;
display: inline;
}
span{
width: 100px;
height: 100px;
border: 1px solid red;
display: inline-block;
}
</style>
这个是一种实现行内元素排列的方式,但是我们很多情况都是用float~
5.3 左右浮动float
float:left
float:right
5.4 父级边框塌陷
clear:
/*
clear: right; 右侧不允许有浮动元素
clear: left; 左侧不允许有浮动元素
clear: both; 两侧不允许有浮动元素
clear: none;
*/
解决方案:
- 增加父级元素的高度
#father{ border:1px solid red; height:800px; }
- 增加一个空的div标签,清除浮动
<div class="clear"></div> .clear{ clear:both; margin:0; padding:0; }
- overflow(在局部页面形成滚动条)
在父级元素中增加一个 overflow:hidden;
- 父类添加一个伪类:after
#father:after{ content:''; display:block; clear:both; }
小结:
- 浮动元素后面增加空div
简单,但代码中应尽量避免空div - 设置父元素的高度
简单,元素假设有了固定的高度,就会被限制 - overflow
简单,但是下拉框在某些场景不适合使用 - 父类添加一个伪类: after(推荐)
写法稍微复杂一点,但是没有副作用,推荐使用!
5.5 对比
属性 | 特点 |
---|---|
display | 方向不可控制 |
float | 浮动起来的话会脱离标准文档流,所以要解决父级边框塌陷的问题 |
6. 定位
6.1 相对定位
<!--相对定位:相对于自己原来的位置进行偏移~-->
<style>
div{
border: 1px dashed #b27430;
}
#first{
background-color: #a13d30;
border: 1px dashed #b27430;
position: relative; /*相对定位:上下左右*/
top: -50px;
bottom: 10px;
left: -20px;
right: 30px;
}
</style>
<div id="father">
<div id="first">第一个盒子</div>
<div id="second">第二个盒子</div>
<div id="third">第三个盒子</div>
</div>
相对定位: position:relative;
相对于原来的位置,进行指定的偏移,它仍然在标准文档流中,原来的位置会被保留。
6.2 绝对定位
定位: 基于xxx定位,上下左右
- 没有父级元素定位的前提下,会相对于浏览器定位;
- 父级元素存在定位的前提下,通常会相对于父级元素进行偏移;
- 全程在父级范围内移动,不可超出父级框架;
- 相对于父级(父级有position:absolute)或浏览器(父级无position:absolute)的位置,进行指定的偏移,其不在标准文档流中,原来的位置不会被保留。
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: red;
position: absolute;
right: 0;
bottom: 0;
}
div:nth-of-type(2){ /* fixed 固定定位*/
width: 50px;
height: 50px;
background: yellow;
position: fixed;
right: 0;
bottom: 0;
}
</style>
</head>
<body>
<div>div1</div>
<div>div2</div>
</body>
</html>
6.4 z-index
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="z-index.css">
</head>
<body>
<div id="content">
<ul>
<li><img src="image/1.jpg" alt="" width="150px" height="150px"></li>
<li class="tipText">这是图片的标题</li>
<li class="tipBg"></li>
<li>时间: xxxx-xx-xx</li>
<li>地点:xxxxxxxxxx</li>
</ul>
</div>
</body>
</html>
#content{
width: 150px;
padding: 0px;
margin: 0px;
overflow: hidden;
font-size: 12px;
line-height: 25px;
border: 1px solid black;
}
ul,li{
padding: 0px;
margin: 0px;
list-style: none;
}
/*父级元素相对定位*/
#content ul{
position: relative;
}
.tipText,.tipBg{
position: absolute;
width:380px;
height: 25px;
top: 120px;
}
.tipText{
color: white;
z-index:999;
}
.tipBg{
background: #000;
opacity: 0.5 /*背景透明度*/;
}