CSS3
Cascading Style Sheet 层叠级联样式表
发展史
CSS1.0
CSS2.0 DIV（块）+CSS，HTML与CSS结构分离思想，网页变得简单，SEO
CSS2.1 浮动，定位
CSS3.0 圆角，阴影，动画....... 浏览器兼容性问题呢
基本语法入门
在HTML里编写CSS的规范
语法:
选择器{
声明1;
声明2;
声明3;
}
代码举例
<!DOCTYPE html>
<html>
<head>
<title>MyHtml.html</title>
<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<meta name="content-type" content="text/html; charset=UTF-8">
<style>
a {
color: blue;
}
</style>
</head>
<body>
<a>top</a>
</body>
</html> 在HTML和CSS分离的规范
CSS中
选择器{
声明1;
声明2;
声明3;
}
HTML中
<link rel="stylesheet" href="路径styles.css">
代码举例
在HTML中
<!DOCTYPE html>
<html>
<head>
<title>MyHtml.html</title>
<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<meta name="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="CSS/test.css">
</head>
<body>
<a>top</a>
</body>
</html>
在CSS中
@CHARSET "UTF-8";
a {
color: red;
} CSS优势
1、内容和表现分离
2、网页结构表现统一，可以实现复用
3、样式十分丰富
4、建议使用独立于html的css文件
5、利用SEO，容易被搜索引擎收录
CSS的三种导入方式
1、外部样式
2、内部样式
3、行内样式
参考基本语法入门（上面）
写在HTML里不分彼此的是内部样式
独立一个css文件的是外部样式
行内样式举例
<!DOCTYPE html>
<html>
<head>
<title>MyHtml.html</title>
<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<meta name="content-type" content="text/html; charset=UTF-8">
</head>
<body>
<a style="color:red">top</a>
</body>
</html> 优先级关系
就近原则，离元素最近的优先级最高
行内样式最近，优先级最高
内部样式和外部样式，谁后出现谁优先级高
拓展外部样式两种写法
链接式：
属于html
<link rel="stylesheet" href="CSS/test.css">
导入式：
属于CSS2.1特有的
<style>
@import url("CSS/test.css");
</style> 首页link和import语法结构不同。前者<1ink>是html标签，只能放入html源代码中使用，后者可看作为css样式，作用是引入css样式功能,。import在html使用时候需要标签，同时可以直接@import ur(CSS文件路径地址);""放如css文件或css代码里引入其它css文件。
本质上两者使用选择区别不大，但为了软件中编辑布局网页html代码，一般使用link较多，也推荐使用link。
选择器
作用：选择页面上的某一个或者某一类元素
基本选择器
1、标签选择器
一个完整的HTML页面是有很多不同的标签组成，标签选择器，则是决定哪些标签
采用相应的CSS样式，(在大环境中你可能处于不同的位置，但是不管怎么样，你总
是穿着同一套衣服，这件衣服就是由标签选择器事先给你限定好的，不管走到哪里
都是这身衣服)比如，在style.css文件中对p标签样式的声明如下：
p{
color:red;
} 复制代码则页面中所有p标签的颜色都是红色
2、类选择器（class）
类选择器根据类名来选择
前面以”.”来标志，如：
.demoDiv{
color:red;
}
在HTML中，定义一个class的属性。
如：
<div class="demoDiv">
这个区域字体颜色为红色
</div> 同时，我们可以再定义一个元素：
<p class="demoDiv">
这个段落字体颜色为红色
</p> 最后，用浏览器浏览，我们可以发现所有class为demoDiv的元素都应用了这个样式。包括了页面中的div元素和p元素。
上例我们给两个元素都定义了class，但如果有很多个元素都会应用这个元素，那得一个个的定义元素，就会造成页面重复的代码太多，这种现象称为“多类症”。
我们可以改成这样来定义。
<div class="demoDiv"> <div> 这个区域字体颜色为红色 </div> 同时，我们可以再定义一个元素： <p> 这个段落字体颜色为红色 </p> </div>
这样，我们就只是定义了一个类，同时把样式应用到了所有的元素当中。
3、id选择器
ID 选择器可以为标有特定 ID 的 HTML 元素指定特定的样式。 根据元素ID来选择元素，具有唯一性，这意味着同一id在同一文档页面中只能出现一次。
前面以”#”号来标志，在样式里面可以这样定义：
#demoDiv{
color:red;
} 这里代表id为demoDiv的元素的设置它的字体颜色为红色。
我们在页面上定义一个元素把它的ID定义为demoDiv，如：
<div id="demoDiv"> 这个区域字体颜色为红色 </div>
优先级关系
id选择器 > 类选择器 > 标签选择器
层次选择器
区分层次关系
爷爷>爸爸>儿子>孙子
后代选择器
在某个元素后面（假设下方p为爸爸，则爸爸、儿子、孙子都包括）
body p{
background: red;
} 这个元素后面所有都会选中
子选择器
某一代（假设下方p为爸爸，则爸爸这一代都包括）
body>p{
background: red;
} 与这个元素同层次的都会选中
相邻兄弟选择器
同辈中的下一个（假设下方p为爸爸，则只包括爸爸的第一个弟弟）
/*active是自己添加的类
<p class="active">p1</p>*/
.active + p{
background: red;
} 与这个元素同层次的下方第一个元素
通用兄弟选择器
同辈中的下方全部（假设下方p为爸爸，则包括爸爸的所有弟弟）
/*active是自己添加的类
<p class="active">p1</p>*/
.active~p{
background: red;
} 与这个元素同层次的下方所有元素
结构伪类选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>结构伪类选择器</title>
<style>
/*ul的第一个子元素*/
ul li:first-child{
background: red;
}
/*ul的最后一个子元素*/
ul li:last-child{
background: blue;
}
/*选中p1*/
/*选择当前p元素的父级元素
选中父级元素的第一个元素
并且是当前选择元素才生效
按顺序第一个*/
p:nth-child(1){
background: green;
}
/*选中p2*/
/*选择当前p元素的父级元素
选中父级元素的第一个p元素
按类型第二个*/
p:nth-of-type(2){
background: yellow;
}
/*鼠标放上去变色*/
a:hover{
background: black;
}
/*鼠标单击未释放*/
a:active{
background: blue;
}
</style>
</head>
<body>
<a href="">hello</a>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
</ul>
</body>
</html> 属性选择器
id和class选择器的结合
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>结构伪类选择器</title>
<style>
/*属性名，属性名=属性值（正则）
= 绝对等于
*= 包含这个元素
^= 以这个元素开头
$= 以这个元素结尾
*/
/*存在id属性的元素*/
a[id]{
background:blue;
}
/*id为first的元素*/
a[id=first]{
background:blue;
}
/*class中有link的元素*/
a[class*=link]{
background:blue;
}
/*选中href中以http开头的元素*/
a[href^=http]{
background:blue;
}
/*选中href中以com结尾的元素*/
a[href$=com]{
background:blue;
}
</style>
</head>
<body>
<a id="first">a1</a>
<a id="second">a2</a>
<a class="link one">a3</a>
<a class="link two" href="abcdefg.com">a4</a>
<a class="three" href="http//abcdefg">a5</a>
<a href="http//baidu.com">a6</a>
</body>
</html> 美化网页元素
span标签：突出要突出的字用span标签套起来
我是<span id="">梦寐</span>
字体样式
font-family:字体 font-size:大小 font-weight:字体粗细 color:颜色 也可以直接写成 font: 风格 粗细 大小 字体
文本样式
color:颜色
text-align:center 排版居中
text-indent:2em 段落首行缩进
background:背景色
height:当前元素块高度
line-height:每行高度
text-decoration:underline(下划线)
text-decoration:line-through(中划线)
text-decoration:overline(上划线)
text-decoration:none(去下划线)
水平对齐，要参照物a，b
<style>
img,span{
vertical-align:middle;
}
</style>
<body>
<img src="dream.png">
<span>梦寐</span>
</body> 阴影 text-shadow: (阴影颜色 水平偏移 垂直偏移 阴影半径)
四个参数，后三个参数记得带单位
超链接伪类
正常情况下，只用前两个
a{} //正常显示的状态
a:hover{} //鼠标悬停状态
a:active{} //单击未释放
a:link{} //未访问链接
a:visited{} //已访问链接
列表
/*ul li*/
/*height: 行高*/
/*list-style:
none 去掉圆点
circle 空心圆
decimal 数字
square 正方形
*/
/**/
ul li{
height: 30px;
list-style: none;
text-indent: 1em;
} 背景
背景颜色
background没啥好说的
默认参数为 颜色 图片 横坐标 纵坐标 平铺方式
背景图片
background-image: url("路径");/*默认平铺*/
background-repeat: repeat-x;/*水平平铺一行*/
background-repeat: repeat-y;/*垂直平铺一行*/
background-repeat: no-repeat;/*不平铺仅一张*/
background-position: 10px 10px/*背景图片位置*/ 渐变
<!DOCTYPE html>
<html>
<head>
<title>MyHtml.html</title>
<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<meta name="content-type" content="text/html; charset=UTF-8">
<style>
body{
background-color: #21D4FD;
background-image: linear-gradient(19deg, #21D4FD 0%, #B721FF 100%);
}
</style>
</head>
<body>
</body>
</html> linear-gradient参数（渐变轴，颜色1，颜色2（带透明度））
盒子模型
盒子模型包括
margin：外边距
border：边框
padding：内边距
外边距
边框外面的距离
margin：外边距距离
总有一个默认外边距
外边距的作用：居中元素margin：auto
margin:0;/*上下左右都为0*/ margin:0 0;/*上下，左右都为0*/ margin:0 0 0 0;/*上，下，左，右都为0*/ margin:auto;/*上下左右居中*/ margin:0 auto;/*上下为0，左右居中*/
内边距相似
边框
border：粗细，样式，颜色
样式包括：solid 实线、dashed 虚线
圆角边框
border-radius:50px;/*上左，上右，下右，下左画四分之一圆，半径50px*/ border-radius:50px 0;/*上左，下右画四分之一圆，半径50px*/ border-radius:50px 0 0 0/*上左画四分之一圆，半径50px*/
注意设置边框的宽高，避免宽高不够使圆角被挤压变形
div{
width:50px;
height:50px;
background:red;
border-radius:50px 0 0 0;
}/*画一个四分之一圆*/ 盒子的计算（元素大小）
元素大小为：外边距margin + 边框border + 内边距padding + 内容宽度
浮动
display
块级元素
h1~h6 p div 列表...
行内元素
span a img strong...
行内元素可以被包含在块级元素中，反之不行。
<!DOCTYPE html>
<html>
<head>
<title>MyHtml.html</title>
<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<meta name="content-type" content="text/html; charset=UTF-8">
<!--
display：是块元素还是行内元素。
block 块元素
inline 行内元素
inline-block 是块元素，但可以内联在一行
none 不显示
-->
<style>
div{
width:100px;
height:100px;
border:1px solid black;
display:inline;
}
spam{width:100px;
height:100px;
border:1px solid black;
display:inline-block;
}
</style>
</head>
<body>
<div>块元素</div>
<span>行内元素</span>
</body>
</html> 一般用float，不用它
float
<body>
<div id="father">
<div class="layer01"><img src="images/1.jpg" alt=""/></div>
<div class="layer02"><img src="images/2.jpg" alt=""/></div>
<div class="layer03"><img src="images/3.jpg" alt=""/></div>
</div>
</body> .layere01{
width:100px;
height:100px;
border:1px solid black;
display:inline-block;
float:left;/*靠左浮动*/
}
.layere02{
width:100px;
height:100px;
border:1px solid black;
display:inline-block;
float:left;//*靠左浮动*/
}
.layer03{
width:100px;
height:100px;
border:1px solid black;
display:inline-block;
float:right;
} 会随着页面变化而变化，浮在对应位置。
clear
clear：right；右侧不允许有浮动元素。
clear：left；左侧不允许有浮动元素。
clear：both；两侧都不允许有浮动元素。
排列到下一行。
父级边框塌陷问题
1、增加父级元素高度
<body>
<div id="father">
<div class="layer01"><img src="images/1.jpg" alt=""/></div>
<div class="layer02"><img src="images/2.jpg" alt=""/></div>
<div class="layer03"><img src="images/3.jpg" alt=""/></div>
</div>
</body> #father{
border:1px #000 solid;
height:800px;
} 2、增加一个空的div标签，清除浮动
<body>
<div id="father">
<div class="layer01"><img src="images/1.jpg" alt=""/></div>
<div class="layer02"><img src="images/2.jpg" alt=""/></div>
<div class="layer03"><img src="images/3.jpg" alt=""/></div>
<div class="clear"></div>
</div>
</body> .clear{
clear:both;
margin:0;
padding:0;
} 3、overflow
<body>
<div id="father">
<div class="layer01"><img src="images/1.jpg" alt=""/></div>
<div class="layer02"><img src="images/2.jpg" alt=""/></div>
<div class="layer03"><img src="images/3.jpg" alt=""/></div>
</div>
</body> #father{
border:1px #000 solid;
overflow:hidden;/*未规定高度，由元素撑起高度，所以不存在超出问题*/
} overflow：hidden；超出宽度，则超出部分隐藏
overflow：scroll；超出宽度，则侧边出现滚动条
4、父类添加一个伪类，after
<body>
<div id="father">
<div class="layer01"><img src="images/1.jpg" alt=""/></div>
<div class="layer02"><img src="images/2.jpg" alt=""/></div>
<div class="layer03"><img src="images/3.jpg" alt=""/></div>
</div>
</body> #father:after{
content:'';/*添加一个空内容，就像一个空的div*/
display:block;
clear:both;
} 小结
1.设置父元素的高度
简单，元素假设有了固定的高度，就会被限制
2.浮动元素后面增加空div
简单，代码中尽量避免空div
3.overflow
简单，下拉的一些场景避免使用
4.父类添加一个伪类：after(推荐使用)
写法稍微复杂，但是没有副作用。
对比
display
方向不可控制
float
浮动起来的话会脱离标准文档流，所以要解决父级边框塌陷问题
定位
相对定位
<style>
div{
margin:10px;
padding:5px;
font-size:12px;
line-height:25px;
}
#father{
border:1px solid black;
padding:0;
}
#first{
background-color:red;
position:relative;/*相对定位：上下左右*/
top:-20px;/*相对于原来位置，向上移动20*/
left:20px;/*相对原来位置，左边增加20，即为向右移动*/
}
</style>
<body>
<div id="father">
<div id="first">
第一个盒子
</div>
</div>
</body> 相对定位：position：relative；
相对原来的位置，进行指定的偏移，仍在标准文档流中，原来的位置会被保留。
绝对定位
定位：基于XXX定位，上下左右
1、没有父级元素定位的前提下，基于浏览器定位
2、假设父级元素存在定位，我们通常相对父级元素进行偏移
3、在父级元素范围内移动
相对于父级或浏览器的位置进行指定的偏移，它不在标准文档流中，原来的位置不会被保留。
<style>
div{
margin:10px;
padding:5px;
font-size:12px;
line-height:25px;
}
#father{
border:1px solid black;
padding:0;
position:relative;/*不加这句下面的绝对定位就是相对于浏览器定位。*/
}
#first{
background-color:red;
position:absolute;/*绝对定位*/
top:20px;/*相对父级元素，上方举例增加20*/
left:20px;/*相对父级元素，左边增加20*/
}
</style>
<body>
<div id="father">
<div id="first">
第一个盒子
</div>
</div>
</body> 固定定位
<style>
body{
height:1000px;/*使浏览器产生滚动条*/
}
div:nth-of-type(1){/*绝对定位*/
width:100px;
height:100px;
background:red;
position:absolute;
right:0;
botton:0;
}
div:nth-of-type(1){/*固定定位*/
width:50px;
height:50px;
background:yellow;
position:fix;
right:0;
bottom:0;
}
</style>
<body>
<div>绝对定位</div>
<div>固定定位</div>
</body> 滑动滚动条，绝对定位会随着变换，固定定位不会
z-index
层级问题，0最底，数字越大越高。
<style>
div:nth-of-type(1){/*绝对定位*/
width:100px;
height:100px;
background:red;
line-height:100px;
text-align:center;
position:absolute;
left:0;
top:0;
z-index:0;
}
div:nth-of-type(2){/*固定定位*/
width:50px;
height:50px;
background:yellow;
position:absolute;
left:0;
top:0;
z-index:99;
opacity:0.5;/*背景透明度*/
}
</style>
<body>
<div>第一层</div>
<div>大气层</div>
</body> 动画
参考菜鸟教程，内容太多自行学习
京公网安备 11010502036488号