CSS3
HTML+CSS+javaScript
结构+表现+交互
1.CSS是什么
1.1CSS定义
Cascding Style Sheet层叠样式表
CSS:表现(美化网页)
字体,颜色,边距,高度,宽度,背景图片,网页定位,网页浮动…
1.2发展史
CSS1.0 html+字体 基本样式
CSS2.0 DIV(块)+CSS,HTML与CSS结构分离的思想,网页变得简单,SEO搜索引擎优化
CSS2.1 浮动,定位
CSS3.0 圆角,阴影,动画…浏览器兼容性
2.CSS怎么用(快速入门)
规范
每一个声明最好使用分号结尾
语法:
选择器{
声明1;
声明2;
声明3;
}
建议使用引用外部文件的方法
css的优势:
- 内容和表现分离
- 网页结构表现统一,可以实现复用
- 样式十分的丰富
- 建立使用独立于html的css文件
- 利用SEO,容易被搜索引擎收录!
3.CSS选择器(重点+难点)
3.1CSS的四种导入样式
优先级:行内样式>大于内部样式>外部样式
注意加载时的覆盖原则
扩展:外部样式两种写法
-
链接式
<link rel="stylesheet" href="css/style.css">
-
导入式CSS2.1t特有
<style> @import url("css/style.css"); </style>
3.2三种基本选择器
选择器作用:选择页面上的某一个或者某一类元素
- 标签选择器:选择一类标签标签{}
- 类选择器:选择所有class属性一直的标签,跨标签 .类名{}
- id选择器:全局唯一! #id名{}
优先级:id选择器>类选择器>标签选择器
3.3层次选择器
- 后代选择器:在某个元素的后面
- 子选择器:一代
- 相邻兄弟选择器:同辈,只有一个,向下
- 通用选择器:当前选中元素的向下所有兄弟(不包括本身)
3.4结构伪类选择器
伪类:条件
超链接!!!
3.5属性选择器(常用)
id+class结合~
- =
- *=
- ^=
- $=
4.美化网页(文字、阴影、超链接、列表,渐变…)
4.1为什么要美化网页
- 有效的传递页面信息
- 美化网页,页面漂亮,才能吸引用户
- 凸显页面的主题
- 提高用户的体验
span标签:重点要突出的子,使用span套起来。
4.2文体样式
- font-family:字体
- font-size:字体大小
- font-weight:字体粗细
- color:字体颜色
4.3文本样式
- 颜色color rgb rgba
- 文本对齐的方式text-align:center
- 首行缩进text-indent:2em;
- 行高line-height
- 装饰(下划线)text-decoration
4.4超链接伪类
/*默认的颜色*/
a{
text-decoration: none;
color: #000000;
}
/*鼠标悬浮的颜色*/
a:hover{
color: orange;
}
/*鼠标单击没有释放的颜色*/
a:active{
color: #02ff00;
}
/*鼠标没有访问的颜色*/
a:link{
color: #a13d30;
}
/*鼠标点击访问后的颜色*/
a:visited{
color: #2700ff;
}
4.5阴影
/*text-shadow:阴影颜色,水平便宜,垂直便宜,阴影半径*/
#price{
text-shadow: wheat 10px 10px 10px;
}
4.6列表
list-style:
none去掉圆点
circle空心圆
decimal数字
square正方形
4.7背景
背景颜色、背景图片
div{
width: 1000px;
height: 700px;
border: 1px solid red;
background-image: url("images/1.bmp");
/*默认是全部平铺的*/
}
.div1{
background-repeat: repeat-x;
}
.div2{
background-repeat: repeat-y;
}
.div3{
background-repeat: no-repeat;
}
4.8渐变
background-color: #4158D0;
background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
5.盒子模型
5.1什么是盒子模型
margin:外边距
padding:内边距
border:边框
5.2边框
- 边框的粗细
- 边框的样式
- 边框的颜色
5.3内外边距
margin: 0 auto;
外边距的妙用:居中元素
顺序:顺时针、上下和左右
盒子的计算方式:margin+border+padding+内容宽度
5.4圆角边框
4个角
左上 右上 右下 左下 顺时针方向
圆圈:圆角 = 半径
5.5盒子阴影
div{
width:100px;
height: 100px;
border: 10px solid red;
box-shadow: 2px 2px 10px yellow;
}
6.浮动
6.1标准文档流
块级元素:h1-h6 p div 列表…
行内元素:不独占一行 span a img strong…
行内元素,可以被包含在块级元素中,反之,则不可以
6.2display
block块元素
inline行内元素
inline-block行内块元素,是块元素,但是可以内联,在一行
none 消失
这个也是一种实现行内元素排列的方式,但是我们很多情况都是用float
6.3float
左右浮动float
6.4父级边框的塌陷问题
clear:
right右侧不允许有浮动
left左侧不允许有浮动
both两侧不允许有浮动
解决方案:
- 增加父级元素的高度(不建议)
- 增加一个空的div标签,清除浮动
- 在父级元素中增加一个overflow hidden隐藏 scroll滚动条
- 在父类添加一个伪类:after
#father:after{
content:'';
display:block;
clear:both;
}
小结:
1.浮动元素后面增加空div
简单,代码中尽量避免空div
2.设置父元素的高度
简单,元素假设有了固定的高度,就会被限制
3.overflow
简单,下拉的一些场景避免使用
4.在父类添加一个伪类:after(推荐)
写法稍微复杂一点,但是没有副作用,推荐使用!
6.5对比
-
display
方向不可以控制
-
float
浮动起来的化会脱离标准文档流,所以要解决父级边框塌陷的问题~
7.定位
7.1相对定位
相对定位 position:relative;
相对于自己原来的位置,进行指定的偏移,相对定位,它任然在标准文档流中,原来的位置会被保留!
#first{
background-color: #2700ff;
border: 1px dashed #666666;
position: relative;/*相对定位:上下左右*/
top: -20px;
left: 20px;
}
7.2绝对定位
position: absolute;
绝对定位:基于xxx定位,上下左右
- 没有父级元素定位的前提下,相对于浏览器定位
- 假设父级元素存在定位,我们通常会相对于父级元素进行偏移~
- 在父级元素范围内移动
相对于父级或浏览器的位置,进行指定的偏移,绝对定位,它不在标准文档流中,原来的位置不会被保留!
7.3固定定位
position: fixed;
7.4z-index
图层
0~999
opacity:0.5背景透明度
filter:Alpha(opcity=50) IE8之前
8.网页动画(特效效果)
CSS动画、JavaScript动画