CSS
HTML + CSS + JavaScript
结构 + 表现 + 交互
- SASS:基于Ruby,通过服务端处理,功能强大。解析效率高。需要学习Ruby语言,上手难度高于LESS
- LESS:基于NodeJS,通过客户端处理,使用简单。功能比SASS简单,解析效率也低于SASS,但在实际开发中足够了,所以我们后台人员如果需要的话,建议使用LESS
http://lesscss.cn//
1 介绍
学习路线:
- CSS是什么
- CSS怎么用(快速入门)
- CSS选择器(重点+难点)
- 美化网页(文字,阴影,超链接,列表,渐变…)
- 盒子模型
- 浮动
- 定位
- 网页动画(特效效果 )
Cascading Style Sheet层叠级联样式表
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>
h1{
color: red;
}
</style>
</head>
<body>
<h1>
Hello World
</h1>
</body>
</html>
CSS单独存储
CSS的优势
- 内容和表现分离
- 网页结构表现统一,可以实现复用
- 样式十分的丰富
- 建议使用独立于html的css文件
- 利用SEO,容易被搜索引擎收录!
1.3 CSS的三种导入方式
优先级:遵循就近原则
-
直接在标签中添加style属性(行内样式)
-
外部样式:
-
连接式:
<link rel="stylesheet" href="CSS/style.css">
-
导入式
<style> <@import> </style>
-
2 选择器
作用:选择页面上的某一个或者某一类元素
2.1 基本选择器
1、标签选择器
标签选择器会选择到页面上所有的指定标签的元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="CSS/style.css">
<style>
h1{
color: red;
background: #121212;
border-radius: 23px;
}
</style>
</head>
<body>
<h1>
Hello World
</h1>
</body>
</html>
2、类选择器 class
可以多个标签归类,是同一个class,可以复用
格式:类选择器的格式 .class的名称{}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="CSS/style.css">
<style>
.hello{
color: red;
background: #234532;
border-radius: 3px;
}
</style>
</head>
<body>
<h1 class="hello">
Hello World
</h1>
</body>
</html>
3、id选择器
格式:#id名称{}
不能被复用,全局唯一,只有单一的标签可以使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="CSS/style.css">
<style>
#world{
color: aqua;
}
</style>
</head>
<body>
<h1 id="world">
Hello World
</h1>
</body>
</html>
优先级:(不遵循就近原则)id选择器 > class选择器 > 标签选择器
2.2 层次选择器
-
后代选择器:在某个元素的后面 太爷爷->爷爷->爸爸->你
<style> body p{ color: blueviolet; } </style> <!-- body中的字体都会变化 -->
-
子选择器
<style> body>p{ color: blueviolet; } </style> <!-- body中的一代(儿子)才有效 -->
-
相邻兄弟选择器
<style> .active + p{ color: blueviolet; } </style> <!-- .active 下面的P标签才有效 -->
-
通用选择器
<style> .active + p{ color: blueviolet; } </style> <!-- 当前选中元素的向下所有兄弟元素 -->
2.3 结构 伪类选择器
带冒号的是伪类
<style>
ul li:last-child{
color: #1ee731;
}
ul li:first-child{
color: #767071;
}
</style>
2.4属性选择器(常用)
/*
*= 代表包含
= 代表绝对等于
*/
a[class="links"]{
/*
a标签中包含class,且class=links的元素才会有效
*/
}
a[href^=http]{
/*
选中href中以http开头的元素
*/
}
a[href$=pdf]{
/*
选中href中以pdf结尾的元素
*/
}
3 美化网页元素
3.1 为什么美化网页
- 有效传递页面信息
- 美化网页,页面漂亮,吸引客户
- 凸显页面主题
- 提高用户体验
**span标签:**重点突出的字用span标签套起来
3.2 字体样式
font-family:字体
font-size:字体大小
font-weight:字体粗细
color:字体颜色
3.3 文本样式
-
颜色
单词 red、green
RGB 0~F
RGBA A:0~1
-
文本对齐方式
text-align:排版 居中
行高和块的高度一致,就可以上下居中
-
首行缩进
text-indent:2em(缩进两个字符)
-
划线
上下划线: text-decoration
-
图片
对齐需要有参照物:vertical-align:middle
3.4 超链接伪类
<style>
/* 鼠标悬浮状态 */
a:hover{
color: orange
}
/* 鼠标按住未释放的状态 */
a:active{
color: orange
}
</style>
3.5 列表
/*
list-style:
none 去掉原点
circle 空心圆
decimal 数字
square 正方形
*/
ul li{
height:30px;
list-style:none;
text-indent:1em;
}
4 盒子模型
4.1 什么是盒子模型
margin:外边距
padding:内边距
border:边框
5 浮动
5.1标准文档流
块级元素:独占一行
h1~h6 p div 列表...
行内元素:不独占一行
span a img strong...
行内元素 可以被包含在块级元素中,反之则不可以
5.2 display
block 块元素
inline 行内元素
inline-block 是块元素,但是可以内联 在一行
none
这个也是一种实现行内元素排列的方式,但是我们很多情况都是用float
5.3 float
-
左右浮动
-
CSS 的 Float(浮动),会使元素向左或向右移动,其周围的元素也会重新排列。
Float(浮动),往往是用于图像,但它在布局时一样非常有用。
元素的水平方向浮动,意味着元素只能左右移动而不能上下移动。
一个浮动元素会尽量向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。
浮动元素之后的元素将围绕它。
浮动元素之前的元素将不会受到影响。
如果图像是右浮动,下面的文本流将环绕在它左边:
5.4 父级边框塌陷的问题
由于浮动导致当前标签飘出了父级边框
解决办法:
-
增加父级元素的高度
#father{ height:1000px; }
-
overflow
在父级元素中增加一个overflow:hidden;
-
在父类添加一个伪类:after
#father:after{ content:'' display:block; clear:both }
小结
-
浮动元素后面增加空div
简单,代码中尽量避免空div
-
设置父元素的高度
简单,元素假设有了固定的高度,就会被限制
-
overflow
简单,下拉的一些场景尽量避免使用
-
父类添加一个伪类:after(推荐)
写法稍微复杂一点,但是没有副作用,推荐使用
5.5 对比
-
display
方向不可以控制
-
float
浮动起来的话会脱离标准文档流,所以要解决父级边框塌陷的问题
6 定位
6.1 相对定位
position relative属性
相对原来的位置,进行指定的偏移,相对定位的话,他仍然在标准文档流中,原来的位置会被保留。
top: -20px;
letf: 20px;
bottom: -10px;
right: 20px;
6.2 绝对定位
posotion absolute属性
定位:基于xxx定位,上下左右
- 没有父级元素定位的前提下,相对于浏览器定位
- 假设父级元素存在定位,我们通常会相对于父级元素进行偏移
6.3 固定定位 fixed
position fixed
定位:基于网页的 固定不变,下拉网页位置也不会在显示中变化
6.4 z-index
opacity:背景透明度