什么是CSS
· Cascading Style Sheet层叠级联样式表
· CSS:表现(美化网页)
· 字体、颜色、边距、高度、宽度、背景图片、网页定位、网页浮动
· CSS3新特性:
1.颜色:新增 RGBA,HSLA 模式
2. 文字阴影(text-shadow、)
3.边框: 圆角(border-radius)边框阴影: box-shadow
4. 盒子模型:box-sizing
5.背景:background-size 设置背景图片的尺寸 background-origin 设置背景图片的原点
background-clip 设置背景图片的裁切区域,以”,”分隔可以设置多背景,用于自适应布局
6.渐变:linear-gradient、radial-gradient
7. 过渡:transition,可实现动画
8. 自定义动画 animate @keyfrom
9. 在 CSS3 中唯一引入的伪元素是 ::selection. 10. 媒体查询,多栏布局 @media screen and (width:800px){ … }
11. border-image
12.2D 转换:transform:translate(x,y) rotate(x,y) skew(x,y) scale(x,y)
13. 3D 转换
14 字体图标 font-face
15 弹性布局 flex
· 代码规范:CSS代码尽量和html代码分开,在HTML文件中使用link标签引用CSS代码。
· 注释规范:/* 注释 */
CSS的三种导入方式:
<!--内部样式:-->
<style>
h1{
color: blue;
}
</style>
<!--外部样式-->
<link rel="stylesheet" href="CSS01.css">
<!--行内样式-->
<h1 style="color: antiquewhite">Hello,World!</h1>
外部样式的两种写法:
· 链接式:<link rel="stylesheet" href="CSS01.css">
· 导入式:<style> @import "CSS01.css"; </style>
· 导入式弊端:渲染有先后,不符合现代网页要求
选择器
· 作用:选择页面上的某一个或者某一类元素
· 基本选择器:
1、标签选择器:会选择到这个页面上所有的这个标签的元素
2、类选择器: 好处:可以多个标签归类,是同一个class,可以复用
3、id选择器:id必须保证全局唯一;
注意:无论是id,还是类,名字都只能是字母,不能是数字
· 三个选择器没有就近原则,只有优先级大小:id选择器>类选择器>标签选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS</title>
<!-- 规范,Style可以编写css的代码,每一个声明最好使用分号结尾
语法:
选择器{
声明1;
声明2;
。。。
}
-->
<!--内部样式:-->
<style>
.qing{
color: #25ea2b;
}
.shou{
color: azure;
}
#1{
color: brown;
}
</style>
</head>
<body>
<!--行内样式-->
<h1 class="qing">Hello,World!</h1>
<h1 class="shou">Hello,World!</h1>
<h1 id="1">Hello,World!</h1>
</body>
</html>
· 层次选择器:
1、后代选择器:在某个元素的后面
2、子选择器:只有一代
3、相邻兄弟选择器: 下一个元素,且只有一个
4、通用兄弟选择器: 向下同等级元素的所有
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS</title>
<!-- 规范,Style可以编写css的代码,每一个声明最好使用分号结尾
语法:
选择器{
声明1;
声明2;
。。。
}
-->
<!--内部样式:-->
<style>
/*p{*/
/* background: blue;*/
/*}*/
/* 后代选择器*/
body p{
background: azure;
}
</style>
</head>
<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li><p>p4</p></li>
<li><p>p5</p></li>
<li><p>p6</p></li>
<li><p>p7</p></li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS</title>
<!-- 规范,Style可以编写css的代码,每一个声明最好使用分号结尾
语法:
选择器{
声明1;
声明2;
。。。
}
-->
<!--内部样式:-->
<style>
/*p{*/
/* background: blue;*/
/*}*/
/* 子选择器*/
body > p{
background: azure;
}
</style>
</head>
<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li><p>p4</p></li>
<li><p>p5</p></li>
<li><p>p6</p></li>
<li><p>p7</p></li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS</title>
<!-- 规范,Style可以编写css的代码,每一个声明最好使用分号结尾
语法:
选择器{
声明1;
声明2;
。。。
}
-->
<!--内部样式:-->
<style>
/*p{*/
/* background: blue;*/
/*}*/
/* 相邻兄弟选择器*/
.keke+p{
background: brown;
}
</style>
</head>
<body>
<p>p1</p>
<p class="keke">p2</p>
<p>p3</p>
<ul>
<li><p>p4</p></li>
<li><p>p5</p></li>
<li><p>p6</p></li>
<li><p>p7</p></li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS</title>
<!-- 规范,Style可以编写css的代码,每一个声明最好使用分号结尾
语法:
选择器{
声明1;
声明2;
。。。
}
-->
<!--内部样式:-->
<style>
/*p{*/
/* background: blue;*/
/*}*/
/* 通用兄弟选择器:当前选中元素的向下的所有兄弟元素*/
.keke~p{
background: brown;
}
</style>
</head>
<body>
<p>p1</p>
<p class="keke">p2</p>
<p>p3</p>
<ul>
<li><p>p4</p></li>
<li><p>p5</p></li>
<li><p>p6</p></li>
<li><p>p7</p></li>
</ul>
<p>p7</p>
<p>p8</p>
</body>
</html>
·结构伪类选择器:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS</title>
<!-- 规范,Style可以编写css的代码,每一个声明最好使用分号结尾
语法:
选择器{
声明1;
声明2;
。。。
}
-->
<!--内部样式:-->
<!--伪类选择器-->
<style>
/*p{*/
/* background: blue;*/
/*}*/
/*选中ul的第一个子元素*/
ul li:first-child
{
background: aqua;*/
}
/*!*选中ul的最后一个子元素*!*/
ul li:last-child
{
background: beige;
}
/* 选中p1:定位到父元素,选择当前的第一个元素,如果当前元素不是p元素,则不生效*!*/
p:nth-child(1)
{
background: blueviolet;
}
/*选中父元素p下的第一个元素*/
p:nth-of-type(2)
{
background: blueviolet;
}
a:hover{
background: blueviolet;
}
</style>
</head>
<body>
<a href="">123</a>
<h1>h1</h1>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<h1>hello</h1>
<ul>
<li><p>p4</p></li>
<li><p>p5</p></li>
<li><p>p6</p></li>
<li><p>p7</p></li>
</ul>
<h1>hello</h1>
</body>
</html>
· 属性选择器:
id+class 结合
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS</title>
<!-- 规范,Style可以编写css的代码,每一个声明最好使用分号结尾
语法:
选择器{
声明1;
声明2;
。。。
}
-->
<!--内部样式:-->
<style>
.demo a
{
float: left;
display: block;
height: 50px;
width: 50px;
border-radius: 10px;
background: aqua;
text-align: center;
color: brown;
text-decoration: none;
margin-right: 5px;
font: bold 20px/50px Arial;
}
/* 属性选择器
存在id属性的元素 a[] {}*/
a[id]
{
background: yellow;
}
/*选中id=first的元素*/
a[id=first]
{
background: rgba(30, 193, 178, 0.99);
}
/* 选中class中含有(使用*=)links的元素*/
a[class*="item"]
{
background: yellow;
}
/* 选中href中以http开头(使用^=)的元素*/
a[href^=http]
{
background: brown;
}
/* 选中以com结尾(使用$=)的元素*/
a[href$=com]
{
background: #f8ff07;
}
</style>
</head>
<body>
<p class="demo">
<a href="https://www.baidu.com" class="first item" id="first">1</a>
<a href="" class="active item" target="_blank" title="test">2</a>
</p>
</body>
</html>
网页美化
span标签:重点要突出的字,使用span标签套起来
字体样式:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS</title>
<!-- 规范,Style可以编写css的代码,每一个声明最好使用分号结尾
语法:
选择器{
声明1;
声明2;
。。。
}
-->
<!--内部样式:-->
<!--字体样式
font-family:字体选择
font-size:字体大小
font-weight:字体粗细
-->
<style>
#title1{
font-size: 50px;
}
body{
font-family: Baghdad;
}
h1
{
font-size: 50px;
font-weight: bold;
}
/*oblique: 斜体
bolder:粗体
12px:字体大小
*/
p{
font:oblique bolder 12px "楷体";
}
</style>
</head>
<body>
欢迎欢迎 <span id="title1">Java </span>
<h1>故事介绍</h1>
<p>hello,World!</p>
<p>hello,World!</p>
</p>
</body>
</html>
文本样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS</title>
<!-- 规范,Style可以编写css的代码,每一个声明最好使用分号结尾
语法:
选择器{
声明1;
声明2;
。。。
}
-->
<!--内部样式:-->
<!--字体样式
font-family:字体选择
font-size:字体大小
font-weight:字体粗细
-->
<style>
#title1{
font-size: 50px;
}
body{
font-family: Baghdad;
}
/*text-align: 文本布局、排版
height:相当于文本框高度
line-height:每一行的高度*/
h1
{
font-size: 50px;
font-weight: bold;
text-align: center;
height: 300px;
line-height: 300px;
}
/*oblique: 斜体
bolder:粗体
12px:字体大小
text-indent:首行缩进
line-through:中划线
overline:上划线
underline:下划线
*/
p{
font:oblique bolder 12px "楷体";
text-indent: 2em;//缩进2字符
text-decoration: line-through;
text-decoration: overline;
text-decoration: underline;
}
/*文本图片中间对齐*/
img,span{
vertical-align: middle;
}
</style>
</head>
<body>
欢迎欢迎 <span id="title1">Java </span>
<h1>故事介绍</h1>
<p>hello,World!</p>
<p>hello,World!</p>
<img src="12" alt="123">
<span>123</span>
</p>
</body>
</html>
文本阴影和超链接伪类
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS</title>
<!-- 规范,Style可以编写css的代码,每一个声明最好使用分号结尾
语法:
选择器{
声明1;
声明2;
。。。
}
-->
<!--内部样式:-->
<!--字体样式
font-family:字体选择
font-size:字体大小
font-weight:字体粗细
-->
<style>
#title1{
font-size: 50px;
}
body{
font-family: Baghdad;
}
/*text-align: 文本布局、排版
height:相当于文本框高度
line-height:每一行的高度*/
h1
{
font-size: 50px;
font-weight: bold;
text-align: center;
height: 300px;
line-height: 300px;
}
/*oblique: 斜体
bolder:粗体
12px:字体大小
text-indent:首行缩进
line-through:中划线
overline:上划线
underline:下划线
text-shadow:阴影颜色,水平偏移,垂直偏移,阴影半径
*/
p{
font:oblique bolder 12px "楷体";
text-indent: 2em;
text-decoration: line-through;
text-decoration: overline;
text-decoration: underline;
text-shadow: #1ea9cb 10px 10px 10px;
}
a{
text-decoration: none;
color: black;
}
/*鼠标悬浮时的颜色*/
a:hover{
color: orange;
}
/*鼠标按住未释放的颜色*/
a:active{
color: brown;
}
</style>
</head>
<body>
欢迎欢迎 <span id="title1">Java </span>
<h1>故事介绍</h1>
<p>hello,World!</p>
<p>hello,World!</p>
<a href="#">hello</a>
</p>
</body>
</html>
列表美化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="CSS01.css"/>
</head>
<body>
<div id="nav">
<h2 class="title1">全部商品分类</h2>
<ul>
<li><a href="#">图书</a></li>
<li><a href="#">图书</a></li>
<li><a href="#">图书</a></li>
<li><a href="#">图书</a></li>
<li><a href="#">图书</a></li>
<li><a href="#">图书</a></li>
<li><a href="#">图书</a></li>
</ul>
</div>
</body>
</html>
#nav
{
width: 100px;
}
.title1
{
font-size: 18px;
font-weight: bold;
text-indent: 1em;
line-height: 35px;
background: #1ea9cb;
}
/*
list-style:
none:去掉圆点
circle:空心圆
decimal:数字
square:正方形
*/
ul li
{
height: 30px;
list-style: none;
text-indent: 1em;
}
a{
text-decoration: none;
font-size: 14px;
}
a:hover{
background: aquamarine;
}
#nav
{
width: 100px;
}
.title1
{
font-size: 18px;
font-weight: bold;
text-indent: 1em;
line-height: 35px;
background: #1ea9cb;
/*颜色,图片,图片位置,平铺方式*/
background: red url("123") 270px 10px no-repeat;
}
/*
list-style:
none:去掉圆点
circle:空心圆
decimal:数字
square:正方形
*/
ul li
{
height: 30px;
list-style: none;
text-indent: 1em;
background-image: url("");
background-repeat: no-repeat;
background-position: 236px 2px;
}
a{
text-decoration: none;
font-size: 14px;
}
a:hover{
background: aquamarine;
}
盒子模型
· margin:外边距
· padding:内边距
· border: 边框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
<!-- 总有一个默认的边距,需要手动初始化为0-->
body
{
margin: 0;
padding:0;
text-decoration: none;
}
#box
{
width: 300px;
border: 1px solid red;
margin: 0 auto;
}
form
{
background: #1ea9cb;
}
div:nth-of-type(1) input{
border: 3px solid black;
}
div:nth-of-type(2) input{
border: 3px dashed #1ea9cb;
}
div:nth-of-type(3) input{
border: 3px dashed #1ea9cb;
}
h2
{
font-size:16px ;
background-color: yellow;
line-height: 30px;
margin: 0;
}
</style>
</head>
<body>
<div id="box">
<h2>会员登陆</h2>
<form action="#">
<div>
<span>用户名:</span>
<input type="text">
</div>
<div>
<span>密码:</span>
<input type="text">
</div>
<div>
<span>邮箱:</span>
<input type="text">
</div>
</form>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*<!--斜着对应 圆圈:就是圆角边框等于半径-->*/
/*
margin: 0 auto 居中
块元素、且具有固定的宽度
*/
div{
width: 100px;
height: 100px;
border: 10px solid black;
border-radius: 100px ;
box-shadow: 10px 10px 1px yellow;
}
</style>
</head>
<body>
<!--居中操作-->
<div style="width:500px;display:block;text-align: center" >a</div>
</body>
</html>
· 块级元素:独占一行
h1~h6 + p+ div…
·行内元素:不独占一行
span+a+img+strong。。。。。
行内元素可以被包含在块级元素中,但是块级元素不能被包含在行内元素中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- block块元素
inline 行内元素
inline-block:是块元素,但是可以内联在一行
none:让这个部分消失
float:让块元素浮起来
-->
<style>
div{
width: 100px;
height: 100px;
border: 1px solid red;
float: left;
}
span{
width: 100px;
height: 100px;
border: 1px solid red;
float: left;
}
</style>
</head>
<body>
<div>div块内元素</div>
<span>span行内元素</span>
</body>
</html>
父级边框边框塌陷
· 解决方案:
1、增加父级元素的高度(不建议使用)
2、在后面增加一个空的div标签,清除浮动
<div class"clear"></div>
.clear{
clear:both;
margin:0;
padding:0;
}
3、overflow
在父级元素中增加一个 overflow:hidden
4、父类添加一个伪类(最受认可的解决方案)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- block块元素
inline 行内元素
inline-block:是块元素,但是可以内联在一行
none:让这个部分消失
float:让块元素浮起来
-->
<style>
div{
width: 100px;
height: 100px;
border: 1px solid red;
float: left;
}
span{
width: 100px;
height: 100px;
border: 1px solid red;
float: left;
}
#father:after{
content: ' ';
display: block;
clear: both;
}
</style>
</head>
<body>
<div id="father">
<div class="l1">div块内元素</div>
<span class="l2">span行内元素</span>
</div>
</body>
</html>
display和float的对比
· display:方向不可控制
· float: 浮动起来的话会脱离标准文档流,所以要解决父级边框塌陷的问题
定位
相对定位
position:relative;
相对于原来的位置,进行指定的偏移,相对定位它仍然在标准文档流中,原来的位置会被保留
「
top:10px;
left:20px;
bottom:10px;
right:10px;
」
绝对定位
position:absolute;
1、没有父级元素定位的前提下,相对于浏览器定位
2、假设父级元素存在定位,我们通常会相对于父级元素进行偏移
3、在父级元素范围内移动
相对于父级或浏览器的位置,进行指定的偏移,绝对定位的话,它不在标准文档流中,原来的位置不会被保留
固定定位 fixed
position:fixed;
定位之后,不随浏览器的滚动条转换,相对于浏览器页面定位
z—index
三维层级概念,类似于ps的图层,z-index就是设置图片文字的层级,最低层级,也就是最底层为0
opacity:背景透明度
filter:alpha(opacity=**)(比较老,最好是两个都写上,兼容不同版本的浏览器)