CSS
- Cascading Style Sheet 层叠级联样式表
发展史
- CSS1.0
- CSS2.0 DIV(块)+CSS，HTML与CSS机构分离思想，SEO
- CSS2.1 浮动、定位的出现
- CSS3.0 圆角、阴影、动画效果
补充：SEO
- SEO（Search Engine Optimization）：汉译为搜索引擎优化。是一种方式：利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名。目的是让其在行业内占据领先地位，获得品牌收益。很大程度上是网站经营者的一种商业行为，将自己或自己公司的排名前移。
CSS的四种导入方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 3.内部样式-->
<style>
h1{
color: chartreuse;
}
</style>
<!-- 2.外部样式-->
<!-- 链接式-->
<link rel="stylesheet" href="../css/h1_style.css">
<!-- 导入式-->
<style>
@import url("../css/h1_style.css");
</style>
</head>
<body>
<!--1.行内样式-->
<h1 style="color: aliceblue">测试css</h1>
</body>
</html>
h1_style.css
/*
语法：
选择器{
申明1;
申明2;
申明3;
}
*/
h1{
color: blue;
}
- 样式使用优先级：就近原则
link导入方式与import方式
import方式是css2.0的产物，import导入的时候，他会等待html页面加载完才开始渲染，这一点与link方式甩
CSS优势
- 内容和表现分离
- 网页结构表现统一，可以复用
- 样式丰富
- 李荣SEO，容易被搜素引擎收录
选择器
- 作用：选择页面上某一个或者一类元素
基本选择器
- 标签选择器：选择一类标签
标签名{}- 类 选择器 ：选择所有class属性一致的标签，可以跨标签
.类名{}- id选择器 ：全局只有一个id
#id名称{}
- 优先级：id选择器>类选择器>标签选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
<!-- 标签选择器-->
h1{
color: chartreuse;
}
</style>
<style>
<!-- 类选择器-->
.hh{
color: aqua;
}
</style>
<style>
<!-- id 选择器-->
#hhh{
color: blue;
}
</style>
</head>
<body>
<h1>标签选择器</h1>
<h2 class="hh">类选择器</h2>
<h3 id="hhh">id选择器</h3>
</body>
</html>
层次选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*后代选择器 某个元素 下一级，下下级... 所有选择元素*/
body p{
color: darkred;
}
/*子选择器 某个元素 某个元素 下一级所有的元素*/
body>p{
background: blue;
}
/*相邻兄弟选择器 当前选中元素的同级 向下 一个兄弟元素*/
.active + p{
background: chartreuse;
}
/*通用兄弟选择器，当前选中元素的同级 向下 所有兄弟元素*/
.active~p{
background: red;
}
</style>
</head>
<body>
<p>1</p>
<p class="active">2</p>
<p>3</p>
<ul>
<li>
<p>4</p>
</li>
<li>
<p>5</p>
</li>
<li>
<p>6</p>
</li>
</ul>
<p>7</p>
</body>
</html>
结构伪类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*ul 的第一个*/
ul li:first-child{
background: chartreuse;
}
/*ul 的最后一个*/
ul li:last-child{
background: blue;
}
/* 选择当前元素的父级元素 ，选中父级元素下的第一个元素，并且当前元素是该元素才生效 是按照顺序 */
p:nth-child(1){
background: darkred;
}
/* 选中 当前元素的父级元素 选中父级元素下的第三个元素，并且当前元素是该元素才生效 是按照类型*/
p:nth-of-type(3){
background: black;
}
</style>
</head>
<body>
<!-- <a>不是p元素不生效</a>-->
<p>p1</p>
<p>p2</p>
<a>a</a>
<p>p3</p>
<ul>
<li>p4</li>
<li>p5</li>
<li>p6</li>
</ul>
</body>
</html>
属性选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.test a{
height: 50px;
width: 50px;
background: blueviolet;/*背景元素*/
display: block;/*块级元素*/
float: left;/*浮动 加了块级元素之后，竖着排列，但是加了浮动又在一列了*/
margin-right: 5px;/*外边距 块之间的距离*/
font: bold 20px/50px Arial;/*(bold 加粗字体) (20px 设置字体大小) (50px 设置行高,如果字体行高与框高一致，呈现居中效果) (Arial 字体样式)*/
text-align: center;/*文字居中*/
color: azure;/*文字颜色*/
text-decoration: none;/*去除文字下划线*/
/*border-radius : 上下左右 四个值*/
border-radius: 25px;/*25px设置为圆形 10px 就是圆角*/
}
/* 存在id属性的a标签元素 */
a[id]{
background: azure;
}
/* id=u2 的a标签素 */
a[id=u2]{
background:yellow;
}
/* class 中有t1 s1的a标签元素*/
a[class*="t1 s1"]{
background:darkred ;
}
/* class 中 只有 t1 s1 的a标签元素*/
a[class="t1 s1"]{
background: aqua;
}
/* href中以http开头的 a标签元素*/
a[href^=http]{
background: aliceblue;
}
/* href中以png结尾的 a标签元素*/
a[href$=png]{
background: aliceblue;
}
</style>
</head>
<body>
<p class="test">
<a href="http://www.baidu.com" class="t1 s1 c1" id="u1">1</a>
<a href="http://www.baidu.com" class="t1 s1" id="u2">1</a>
<a href="" class="t1 v1">2</a>
<a href="images/123.jpg" class="t2 v2">3</a>
<a href="images/123.jpg" class="t2 v2">4</a>
<a href="images/123.png" class="t2 v2">5</a>
<a href="images/123.jpg" class="t2 v2">6</a>
</p>
</body>
</html>
美化网页作用
- 有效传递页面信息
- 吸引用户
- 凸显主题
- 提高用户体验
< span>< span/>行内元素,重点突出的 用span套起来
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<a>标签</a>
<a>标签</a>
<span>突出</span>
<span>突出</span>
<a>标签</a>
<a>标签</a>
</body>
</html>
样式
字体样式
<style>
a{
/*复合写法*/
font: bold 20px/50px Arial;/*(bold 加粗字体) (20px 设置字体大小) (50px 设置行高,如果字体行高与框高一致，呈现居中效果) (Arial 字体样式)*/
/*分开写法*/
font-family: 新宋体;/*字体*/
font-size: 50px;/*字体大小*/
font-weight: bold;/*字体粗细*/
color: aqua;/*字体颜色*/
}
</style>
文本样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*
color:
1.单词形式 red
2.RGB #0~F
3.RGBA rgba(0,0,1,0.5) A是透明度的意思
*/
h1{
color: rgba(1,0,0,0.2);
}
/*
text-indent： 表示首行缩进
em ： 缩进的文字长度
*/
.p1{
text-indent: 2em;
}
.p2{
text-decoration: underline;/*下划线*/
text-decoration: line-through;/*中划线*/
text-decoration: overline;/*上划线*/
text-decoration: none;/*去划线*/
}
/*
水平对齐 img是参照物,span是像img对齐
*/
img,span{
vertical-align: middle;
}
</style>
</head>
<body>
<h1>颜色</h1>
<p class="p1">20px是字体大小；50px是行高，相当于line-height 。 SimSun,'microsoft yahei',Verdana,Arial;是四种字体的名字20px是字体大小；50px是行高，相当于line-height 。 SimSun,'microsoft yahei',Verdana,Arial;是四种字体的名字20px是字体大小；50px是行高，相当于line-height 。 SimSun,'microsoft yahei',Verdana,Arial;是四种字体的名字 </p>
<p class="p2">123</p>
<p class="p3">
<img src="" alt="无" height="100px">
<span>123</span>
</p>
<p class="p4>"123</p>
</body>
</html>
文本阴影、超链接伪类
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
/*鼠标悬停的状态*/
a:hover{
color: aqua;
}
/*鼠标按住的状态*/
a:active{
color: darkred;
font-size: 100px;
}
/*text-shadow (阴影颜色 水平位移 垂直位移 阴影半径)*/
#state{
text-shadow: yellow 10px -10px 2px;
}
</style>
<body>
<a id="state"> 状态</a>
</body>
</html>
列表样式、背景图片以及渐变
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*渐变效果*/
body{
background: linear-gradient(19deg,#21D4FD 0%,#B7D3A7 100%);
}
/*list-style
none：去掉原点
circle 空心圆
decimal 数字
square 正方形
*/
ul li{
list-style: circle;
background-image: ;
}
div{
width: 100px;
height: 50px;
border: 1px solid red;/* 厚度 实线 红色*/
background-image: url("");/*设置背景图片*/
/*默认是平铺的*/
background-repeat: no-repeat;/*不平铺，原始大小*/
background-repeat: repeat-x;/*平铺，原始大小沿x轴平铺*/
background-repeat: repeat-y;/*平铺，原始大小沿y轴平铺*/
/*颜色 图片 图片位置 平铺方式*/
background: darkred url("") 10px 10px no-repeat;
/*图片定位*/
background-position: 20px 30px ;
}
</style>
</head>
<body>
<!--导航栏一般就用这种方式来实现，而不选择使用nav标签-->
<div id="nav">
<h2>测试</h2>
</div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>
</html>
盒子模型
- 盒子大小：margin+padding+border+内容宽度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
/*元素一般总有一个默认的外边距 margin,所以设计的时候可以初始化*/
body,div,a,span,h1{
margin: 0;/*外边距*/
padding: 0;/*内边距*/
}
#app{
width: 300px;
height: 300px;
/*border 粗细 样式 颜色*/
/*solid：实线 dashed 虚线*/
border: 2px solid red;
/*外边距设置为 0 auto 可以使页面居中*/
/*前提 是块元素 块元素有固定高度*/
margin: 0 auto;
}
</style>
<body>
<div id="app">
<h1>盒子模型</h1>
<div>
<div>
用户名:<input type="text" name="name" value=""/>
</div>
<div>
密码:<input type="password" name="password"/>
</div>
</div>
</div>
</body>
</html>
盒子模型
box-shadow: 10px 10px 5px aqua;
display和浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
border: 2px solid red;
}
span{
margin: 2px;
background: #21D4FD;
/*block : 块元素
inline：行内元素
inline-block 是块元素，但是可以内联
*/
display: inline-block;
/*浮动效果*/
float: right;
/*保持块级元素，但还是浮动效果
both:两侧不允许浮动
right:右侧不允许浮动
left：左侧不允许浮动
*/
clear: both;
}
</style>
</head>
<body>
<div>
<span>span2</span>
<span>span3</span>
<span>span4</span>
<span>span5</span>
</div>
</body>
</html>
overflow及父级边框塌陷问题
- 浮动元素后面增加div：简单，但是不推荐
- 设置父元素高度:简单，治标不治本
- overflow 简单，下拉的一些场景避免使用
- 父类添加一个伪类：写法稍微复杂一点，但是没有副作用，推荐使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
border: 2px solid red;
/**
1. 增加父级元素高度 ，治标不治本
height: 1000px;
*/
/**
3. 在父级元素中增加一个
overflow: hidden;
*/
}
span{
margin: 2px;
background: #21D4FD;
display: inline-block;
float: right;
}
/**
2. 增加一个空的div标签，清楚浮动
*/
.clear{
clear: both;
margin: 0;
padding: 0;
}
/**
4. 父级添加一个伪类
*/
#father:after{
content: '';
display: block;
clear: both;
}
</style>
</head>
<body>
<div id="father">
<span>span2</span>
<span>span3</span>
<span>span4</span>
<span>span5</span>
<!-- 2. <div class="clear"></div>-->
</div>
</body>
</html>
定位
相对定位
position: relative:相对原来的位置进行指定的偏移，它任然处于标准文档流中，原来的位置会被保留
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.t{
background: darkgrey;
height:200px;
border: 2px solid darkred ;
margin: 10px;
}
.t1{
background: red;
height:20px;
border: 2px dashed darkred ;
margin: 10px;
}
.t2{
background: red;
height:20px;
border: 2px dashed darkred ;
margin: 10px;
}
.t3{
background: red;
height:20px;
border: 2px dashed darkred ;
margin: 10px;
/*relative 相对定位*/
position: relative;
top: 120px;
}
</style>
</head>
<body>
<div class="t">
<div class="t1">定位</div>
<div class="t2">定位</div>
<div class="t3">定位</div>
</div>
</body>
</html>
绝对定位
position: absolute:相对父级或浏览器的位置进行指定的偏移，它不再处于标准文档流中，原来的位置不会被保留
- 没有 父级元素没有被position 修饰(父级元素没有被定位)，此时子级使用绝对定位是相对于浏览器的，反之亦然，但都处于父级元素范围内活动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.t{
background: darkgrey;
height:200px;
border: 2px solid darkred ;
margin: 10px;
}
.t1{
background: red;
height:20px;
border: 2px dashed darkred ;
margin: 10px;
}
.t2{
background: red;
height:20px;
border: 2px dashed darkred ;
margin: 10px;
}
.t3{
background: red;
height:20px;
border: 2px dashed darkred ;
margin: 10px;
/*absolute 绝对定位*/
position: absolute;
top: 120px;
}
</style>
</head>
<body>
<div class="t">
<div class="t1">定位</div>
<div class="t2">定位</div>
<div class="t3">定位</div>
</div>
</body>
</html>
固定定位
*
position: fixed页面有滚动条的情况下，元素的位置不会随着滚动而改变
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.t{
background: darkgrey;
height:2000px;
border: 2px solid darkred ;
margin: 10px;
position: relative;
}
.t1{
background: red;
height:20px;
border: 2px dashed darkred ;
margin: 10px;
}
.t2{
background: red;
height:20px;
border: 2px dashed darkred ;
margin: 10px;
}
.t3{
background: red;
height:20px;
border: 2px dashed darkred ;
margin: 10px;
/*fixed 固定定位*/
position: fixed;
top: 0px;
}
</style>
</head>
<body>
<div class="t">
<div class="t1">定位</div>
<div class="t2">定位</div>
<div class="t3">定位</div>
</div>
</body>
</html>
z-index 及 透明度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.t{
background: darkgrey;
height:2000px;
border: 2px solid darkred ;
margin: 10px;
position: relative;
}
.t2{
background: red;
height:20px;
border: 2px dashed darkred ;
margin: 10px;
position: relative;
/*设置图层的高度 ,并且要设置相对定位*/
z-index: 999;
}
.t3{
background: blue;
height:20px;
border: 2px dashed darkred ;
margin: 10px;
position: relative;
top: -30px;
/*设置透明度*/
opacity: 0.5;
filter: alpha(opacity=50);
}
</style>
</head>
<body>
<div class="t">
<div class="t2">定位</div>
<!-- 正常的下面根据相对定位会盖住上面的-->
<div class="t3"></div>
</div>
</body>
</html>
CSS动画
渐变背景
=============================================================================
CSS 推荐狂神说
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
