1、初识CSS
- CSS是什么?
- CSS怎么用?
- CSS选择器
- 美化网页(文字,阴影,超链接,列表,渐变…)
- 盒子模型
- 浮动
- 定位
- 网页动画(特效效果)
1.1、什么是CSS?
Cascading Style Sheet 层叠样式表
CSS:表现(美化网页)
字体、颜色、边框、高度、宽度、背景图片、网页浮动、网页定位
1.2、发展史
- CSS1.0
- CSS2.0 DIV (块) + CSS,HTML与CSS结构分离的思想,网页变得简单,SEO
- CSS2.1 浮动, 定位
- CSS3.0 圆角,阴影,动画…浏览器兼容性~
1.3、快速入门
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
<!-- 规范,可以编写css的代码,每一个声明,最好以 ; 结尾
语法:
选择器{
属性:值;
属性:值;
属性:值;
.....
}
-->
<style>
*{margin:0;padding:0;}
h1{
font-size: 16px;
color: red;
}
</style>
</head>
<body>
<h1>我是标题</h1>
</body>
</html>
建议使用link嵌入css代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>我是标题</h1>
</body>
</html>
1.4、CSS的3种导入方式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
<!--内部样式-->
<style>
h1{
color: green;
}
</style>
<!--外部样式-->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!--优先级:就近原则-->
<!--行内样式:在标签元素中,编写一个style属性,编写样式即可-->
<h1 style="color: coral;">我是标题</h1>
</body>
</html>
扩展:外部样式两种写法
-
链接式(先渲染样式,后加载结构 推荐使用)XHTML
<!--外部样式--> <link rel="stylesheet" href="css/style.css">
-
导入式(先加载结构,后渲染样式)@importCSS2.1特有
<!--导入式--> <style> @import url("css/style.css"); </style>
2、选择器
2.1、基本选择器
作用:选择页面上的某一个或者某一类元素
-
标签选择器 选择一类标签 标签名{}
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Test</title> <style> /* 标签选择器 标签名{} 会选择到页面上所有的这个标签的元素 */ h1{ color: red; font-weight: normal; } p{ font-size:35px; } </style> </head> <body> <h1>学WEB</h1> <h1>学WEB</h1> <p>提升自己!</p> </body> </html>
-
类选择器 class:选择所有class属性一致的标签,跨标签.类名{}
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Test</title> <style> /* 类选择器:.class的名称{} 好处,可以多个标签归类,是同一个class */ .one{ color: red; } .two{ color: green; } .three{ color: blue; } </style> </head> <body> <h1 class="one">标题一</h1> <h1 class="two">标题二</h1> <h1 class="three">标题三</h1> <p class="one">p标签</p> </body> </html>
-
id选择器 id:全局唯一! #id名{}
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Test</title> <style> /* id选择器 #id名称{} id必须保证全局唯一 */ #one{ color: red; } .one{ color: green; } .two{ color: orange; } h1{ color: skyblue; } </style> </head> <body> <h1 class="one" id="one">标题一</h1> <h1 class="two">标题二</h1> <h1>标题三</h1> </body> </html>
优先级:id选择器>class选择器>标签选择器(不遵循就近原则,固定的)
2.2、层次选择器
-
后代选择器:在某个元素的后面
/*后代选择器*/ body p { background-color: green; }
-
子选择器(一代,儿子)
/*子选择器*/ body>p { background-color: red; }
-
相邻兄弟选择器(同辈)
/*相邻兄弟选择器 只有一个,(向下延伸)*/ .two+p { background-color: blue; }
-
通用兄弟选择器
/*通用兄弟选择器 当前选中的元素的向下的所有兄弟元素*/ .two~p { background-color: skyblue; }
2.3、结构伪类选择器
/*ul的第一个子元素*/
ul>li:first-child {
background-color: red;
}
/*ul的第一个最后子元素*/
ul>li:last-child {
background-color: green;
}
/*选择当前p元素的父级元素,选择父级元素的第二个,并且是当前元素才生效!
(按照顺序!)
*/
p:nth-child(2) {
background-color: skyblue;
}
/*选中父元素下的p元素的第二个。(按照类型!)*/
p:nth-of-type(1) {
background-color: coral;
}
/*注:even(偶数)、odd(奇数)
详解:
选择器 | 功能描述 |
---|---|
E:first-child | 作为父元素的第一个子元素的元素E |
E:last-child | 作为父元素的最后一个子元素的元素E |
E F:nth-child(n) | 选择父级元素E的第n个子元素F,(n可以是1、2、3),关键字为even(偶数)、odd(奇数) |
E:first-of-type | 选择父元素内具有指定类型的第一个E元素 |
E:last-of-type | 选择父元素内具有指定类型的最后一个E元素 |
E F:nth-of-type(n) | 选择父元素内具有指定类型的第n个F元素 |
2.4、属性选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
<style>
.demo a{
float: left;
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
background-color: wheat;
text-decoration: none;
margin: 0 20px;
border-radius: 10px;
font-size: 20px;
font-weight: bold;
color: white;
}
/*存在id的元素*/
.demo>a[id]{
color: green;
}
/*id等于first的元素*/
.demo>a[id="first"]{
background-color: red;
}
/*class中包含links的元素
*/
.demo>a[class*='links']{
background-color: skyblue;
}
/*选择href中以http开头的元素*/
.demo>a[href^=http]{
background-color: yellow;
}
/*选择href中以jpg结尾的元素*/
.demo>a[href$=jpg]{
background-color: orange;
}
</style>
</head>
<body>
<p class="demo">
<a href="http://www.baidu.com" class="links item first" id="first">1</a>
<a href="#" class="links item active" target="_blank" title="test">2</a>
<a href="images/1.jpg" class="links item">3</a>
<a href="images/2.jpg" class="links item">4</a>
<a href="#" class="links item">5</a>
<a href="#" class="links item">6</a>
<a href="#" class="links item">7</a>
<a href="123.pdf" class="links item">8</a>
<a href="#" class="links item" id="k">9</a>
<a href="#" class="links item last">10</a>
</p>
</body>
</html>
= 绝对等于
*= 包含这个元素
^= 以……开头
$= 以……结尾
3、美化网页元素
3.1、为什么要美化网页?
- 有效的传递页面信息
- 使用CSS美化过的页面文本 , 漂亮 、 美观 ,可以更好的吸引用户
- 更好的突出网站主题
- 增强用户体验
span标签:重点要突出的字,使用span包裹起来
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
<style>
.font{
font-size: 26px;
color: red;
}
</style>
</head>
<body>
<p>欢迎学习<span class="font">WEB</span>前端</p>
</body>
</html>
3.2、字体样式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
<!--
font-family 字体类型
font-size 字体大小
font-style 字体风格
font-weight 字体的粗细
-->
<style>
body{
font-family: 'Courier New',"楷体";
color: orange;
}
h1{
font-size: 16px;
}
.p1{
font-weight: bolder;
font-style: oblique;
}
</style>
</head>
<body>
<h1>内容介绍</h1>
<p class="p1">金耀基尝言,自由独立是通识的基础,后者又反过来加强前者。在教育中排除掉通识,则摧毁其生命。致力通识教育,是世界范围内有抱负的大学的重要目标。关于通识教育,l946年华盛顿大学诺斯兰教授的定义是:“其主旨在个人的整体健全发展,包含提升生活的目的、提炼对情绪的反应,以及运用我们最好的知识来充分了解各种事物的本质</p>
</body>
</html>
补充:
font-weight属性
normal:正常 (默认,等同400)
bold:粗体 (等同700)
bolder:更粗 (等同900)
lighter:更细 (等同100)
font复合属性
简写:字体风格→字体粗细→字体大小→字体类型
p{font:oblique bold 12px "楷体";}
注:字体风格与字体粗细可以省略
3.3、文本样式
- 颜色 color rgb rgba
- 文本对齐方式 text-align:center;
- 首行缩进 text-indent:2em;
- 行高 line-height 单行文字上下居中 line-height = height
- 装饰 text-decoration:none;
- 文本图片垂直对齐 vertical-align:middle;
3.4、文本阴影
/* text-shadow:阴影颜色 水平偏移 垂直偏移 阴影半径 */
a{
text-shadow: red 10px 5px 5px;
}
3.5、超链接伪类
伪类名称 | 含义 | 示例 |
---|---|---|
a:link | 未单击访问时超链接样式 | a:link{color:red;} |
a:visited | 单击访问后超链接样式 | a:visited {color:green;} |
a:hover | 鼠标悬浮其上的超链接样式 | a:hover{color:blue;} |
a:active | 鼠标单击未释放的超链接样式 | a:active {color:pink;} |
注:设置伪类的顺序:a:link->a:visited->a:hover->a:active
3.6、列表
/*
list-style:
none 无标记符号
circle 实心圆
decimal 数字
square 实心正方形
disc 空心圆
*/
ul>li{
list-style: none;
line-height: 30px;
text-indent: 2em;
}
3.7、背景
background-color:背景颜色
background-image:背景图片
background-position:背景定位
background-repeat:背景重复
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
<style>
/*默认全部平铺 repeat*/
div{
width: 1200px;
height: 2000px;
/*颜色 图片 定位 平铺*/
background: skyblue url(./images/6.jpg) 200px 200px no-repeat;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
3.8、渐变
background的渐变色虽然看起来像颜色,但是它在渲染的时候其实是一张“图片”
body{
background-color: skyblue;
/*渐变的方向(或角度) 颜色值1,颜色值2,颜色值3*/
background-image: linear-gradient(115deg,#ffffff 0%,#6284ff 50%,#ff0000 100%);
}
浏览器兼容性
-
IE浏览器是Trident内核,加前缀:-ms-
-
Chrome浏览器是Webkit内核,加前缀:-webkit-
-
Safari浏览器是Webkit内核,加前缀:-webkit-
-
Opera浏览器是Blink内核,加前缀:-o-
-
Firefox浏览器是Mozilla内核,加前缀:-moz-
4、盒子模型
4.1、什么是盒子模型?
margin:外边距
padding:内边距
border:边框
4.2、边框
- border-width:边框粗细
- border-style:边框样式
- border-color:边框颜色
#box{
width: 200px;
height: 200px;
background-color: pink;
border: 1px dashed red;
}
4.3、内外边距
外边距的妙用
/*网页居中对齐*/
#box{
margin:0px auto
width:100%;
height:600px;
}
/*
网页居中对齐的必要条件
块元素
固定宽度
*/
设置顺序:
- 当四个值时:排列顺序为上 右 下 左
- 当三个值时:排列顺序为上 左 右 下
- 当二个值时:排列顺序为上 下 左 右
- 当一个值时:排列顺序为上 下 左 右
盒子的间距:
内边距padding的特点:会撑大自身、不会改变自身位置
外边距margin的特点:会改变自身盒子位置,但不会改变自身大小、同时也不会改变父级
盒子模型的计算方式,你这个盒子模型到底有多大?
标准盒模型:盒子模型总尺寸=border+padding+margin+内容宽度
4.4、圆角边框
应用场景:让盒子四个角变得圆润,增加页面细节,提升用户体验
属性名:border-radius
常见取值:数字+px、百分比
赋值规则:从左上角开始赋值,然后顺时针赋值,没有赋值的看对角!
/*顺序:左上 右上 右下 左下*/
/*
圆形:
必须是正方形
元素的宽度和高度必须相同
圆角的半径为元素宽度的一半,或者直接设置圆角半径值为50%
*/
#box{
width: 100px;
height: 100px;
background-color: pink;
border-radius: 50%;
}
/*
半圆形:
制作上半圆或下半圆时,元素的宽度是高度的2倍,而且圆角半径为元素的高度值
制作左半圆或右半圆时,元素的高度是宽度的2倍,而且圆角半径为元素的宽度值
*/
#box{
width: 200px;
height: 100px;
background-color: pink;
border-radius: 100px 100px 0 0;
}
/*
扇形:
利用border-radius属性制作扇形遵循“三同,一不同”原则
三同”是元素宽度、高度、圆角半径相同
“一不同”是圆角取值位置不同
*/
#box{
width: 100px;
height: 100px;
background-color: pink;
border-radius: 100px 0 0 0;
}
/*
胶囊按钮:
必须是长方形
盒子高度一半
*/
#box {
width: 200px;
height: 100px;
background-color: pink;
border-radius: 100px;
}
4.5、盒子阴影
img{
width: 80px;
height: 80px;
border-radius: 50%;
box-shadow: 5px 5px 5px red,
10px 10px 10px green,
15px 15px 15px rgb(167, 22, 235);
}
/*盒子阴影: X轴位移 Y轴位移 模糊半径 颜色 阴影类型(inset内阴影)默认outset:外阴影*/
5、浮动
5.1、标准文档流
什么是标准文档流?
标准文档流:指元素根据块元素或行内元素的特性按从上到下,从左到右的方式自然排列。这也是元素默认的排列方式
块级元素(block)从上往下、垂直布局、独占一行,高度由内容撑开、宽度默认继承父级宽度
<h1><h6>、<p>、<div>、<ul><li></li></ul>
内联元素(inline)从左往右、水平布局、空间不够自动折行,不独占一行,能跟其他行内元素共享一行空间、 不支持宽高
<span>、<a>、<img/>、<strong>...
行内元素可以被包含在块级元素中,反之,则不可以~
5.2、display属性
<!--
block 块元素的默认值 前后带有换行符
inline 内联元素的默认值 前后没有换行符
inline-block 行内块元素 既有内联元素的特性,又有块级元素的特性
none 设置元素不会被显示
-->
<style>
div{
width: 100px;
height: 100px;
border: 1px red solid;
display: inline-block;
}
span{
width: 100px;
height: 100px;
border: 1px red solid;
display: inline-block;
}
display也是一种实现块级元素并排的方式,但浏览器解析行内块或行内标签的时候,如果标签换行书写会产生一个空格的距离,最佳解决方案:使用浮动
5.3、float属性
元素并排显示:浮动float:left | right
浮动元素的特点:
- 自身浮动后会脱离文档流,在标准流中不占位置
- 浮动元素比标准流高出半个级别,可以覆盖标准流中的元素
- 浮动元素不会撑开父级高度【父级高度坍塌】
- 如果浮动元素是行内元素,那么这个时候行内元素就可以支持宽高,支持margin和padding(浮动后的元素具备了行内块特性)
注:浮动的元素不能通过text-align:center或者margin:0 auto
5.4、浮动导致父级边框塌陷的问题(BFC)
BFC是什么?
BFC:元素内部的所有的子元素的行为不会影响外界的元素。
BFC如何触发?
- 浮动
- overflow 只要它的值不是
visible
就可以触发 - display为inline-block、table-cell、flex、table-caption或者inline-flex 【不推荐使用】
- position定位absolute和fixed
清除浮动,防止父级边框塌陷的五种方法
-
设置宽高法:设置父元素的高度
缺点:元素固定高会降低扩展性
.box{ width: 100%; height: 500px; border:5px red solid; }
-
额外标签法:浮动元素后面加空div
空div会造成HTML代码冗余,并设置:clear:both属性
<div style="clear: both;"></div>
-
单伪元素清除法:父级添加伪元素after
写法比上面稍微复杂一点,但是没有副作用,原理同额外标签法一致,推荐使用
.clearfix::after { content: ''; /* 伪元素添加的标签默认为行内,此处需要转为块 */ display: block; clear: both; /* 兼容性低版本浏览器 补充代码:在网页中看不到伪元素 */ height: 0; visibility: hidden; }
-
双伪元素清除法:父级添加伪元素before、after
/* .clearfix::before 作用:解决外边距塌陷问题 外边距塌陷:父子标签,都是块级,子级加了margin会影响父级的位置 */ /* 双伪元素清除浮动 */ .clearfix::before, .clearfix::after { content: ''; display: table; } /* 真正清除浮动的标签 */ .clearfix::after { clear: both; }
-
父级添加overflow属性(hidden、auto)
下拉列表框的场景不能用(会隐藏希望显示的内容)
.box{ width: 100%; overflow: hidden; border:5px red solid; }
CSS的书写顺序:
- 定位
- 浮动 | display
- 盒子模型:margin、padding、border、width、height、背景色(bgc)
- 文字样式
好处:遵循上述规则编码,浏览器的执行效率会较高!
5.5、display和浮动的对比
-
display
方向不可控制
-
float
浮动起来的话会脱离标准文档流,所有要解决父级边框塌陷的问题~
6、定位(position)
定位可以让元素自由的摆放在网页的任意位置
一般用于盒子之间的层叠情况
6.1、相对定位
相对定位:relative
- 参考目标为自身原来的位置,进行偏移。不会脱离标准文档流
6.2、绝对定位
绝对定位:absolute
- 参考目标直系父辈离自己最近的一个position的值不为static的标签 ,进行偏移。 脱离标准文档流
6.3、固定定位
固定定位:fixed
- 参考目标:根据浏览器窗口 进行上、下、左、右偏移 脱离文档流
经验:
相对定位的特性
- 元素位置发生偏移后,它原来的位置会被保留下来
- 层级提高,可以把标准文档流中的元素及浮动元素盖在下边
- 使用场景(很少单独使用)
绝对定位的特性(通常配合相对定位一起使用~)
- 元素位置发生偏移后,原来的位置不会被保留
- 如果没有设置定位父级,则相对浏览器窗口来定位(父相子绝)
- 层级提高,可以把标准文档流中的元素及浮动元素盖在下边
- 使用场景(下拉菜单、焦点图轮播、弹出数字气泡)
改变定位视图后会不会影响周边元素的位置?
- 脱离文档流【脱离的程度远远大于浮动脱离的程度】
子元素在绝对定位时:选定的参考目标要基于如下的思路:
-
在能满足条件的基础上,选择最近的
-
元素脱离后,后续在文档流中的元素会上来取代当前元素的位置。(写代码时要可预见性的提前布局)
固定定位的特性
- 相对浏览器窗口来定位
- 使用场景(窗口左右两边的固定广告、返回顶部图标)
注:
- 脱离标准文档流后,父级标签的height不能撑开
- 被绝对定位或固定定位后的元素都是块级盒子特性
6.4、偏移量方向
偏移设置: left、right、top、bottom
注:如果设置偏移left和right都有,以left为准,top和bottom都有,以bottom为准,通常水平/垂直方向只设置即可!
绝对定位的盒子不能使用左右的margin auto居中,
left 50% 整个盒子会移动到浏览器中间偏右的位置,把盒子向左侧移动,移动自己盒子宽度的一半,或通过transform的translate属性动态改变元素位置
6.5、z-index
什么是z-index?
调整元素定位时重叠层的上下位置,该属性设置一个定位元素沿 z 轴的位置,z 轴定义为垂直延伸到显示区的轴。如果为正数,则离用户更近,为负数则表示离用户更远
不同布局方式元素的层级关系:定位 > 浮动 > 标准流
不同定位之间的层级关系:
- 相对、绝对、固定默认层级相同
- 此时HTML中写在下面的元素层级更高,会覆盖上面的元素,通过z-index属性可改变元素元素的上下位置
z-index:
- 非定位元素和正常定位但未设置z-index值的定位元素层级都可以记为0
- IE FireFox Safari的z-index最大值是2147483647 ,Opera的最大值是2147483584
- 必须是定位元素才能生效
opacity :
- 设置元素的不透明度
- 从 0.0 (完全透明)到 1.0(完全不透明)
注:opacity会让元素整体透明,包括里面的内容,如:文字、子元素等……
布局:
- 布局时如果能不使用浮动和定位能实现效果,就尽量不要使用。
- 如果是多个相同元素并排,使用浮动
- 单一元素,不管位置在那一般就可以使用定位
6.6、垂直对齐方式
基线:浏览器文字类型元素排版中存在用于对齐的基线(baseline)
浏览器在处理行内标签和行内块标签的时候,默认按照文字的特点去解析
属性名:vertical-align
属性值
属性值 | 效果 |
---|---|
baseline | 默认,基线对齐 |
top | 顶部对齐 |
middle | 中部对齐 |
bottom | 底部对齐 |
主要用于解决行内/行内块元素垂直对齐问题
6.7、光标类型
应用场景:设置鼠标光标在元素上时显示的样式
属性名:cursor
常见的属性值:
属性值 | 效果 |
---|---|
default | 默认值,是一个箭头 |
pointer | 小手效果,提示用户可以点击 |
text | 工字型,提示用户可以选择文字 |
move | 十字光标,提示用户可以移动 |
6.8、溢出部分显示效果(overflow)
溢出部分:指的是盒子内容部分所超出盒子范围的区域
应用场景:控制内容溢出部分的显示效果,如:显示、隐藏、滚动条…
属性名:overflow
常见的属性值:
属性值 | 效果 |
---|---|
visable | 默认值,溢出部分可见 |
hidden | 溢出部分隐藏 |
scroll | 无论是否溢出,都显示滚动条 |
auto | 根据是否溢出,自动显示或隐藏滚动条 |
6.9、元素本身隐藏
应用场景:让某元素本身在屏幕中不可见。如:鼠标:hover之后元素隐藏
常见属性:
- visibility:hidden
- display:none
两者区别:
- visibility:hidden 隐藏元素本身,并且在网页中占位置
- display:none 隐藏元素本身,并且在网页中不占位置
7、伪元素
7.1、什么是伪元素?
伪元素指某一类非实际存在于html内的元素标签,这种标签通过css进行添加的。
作用:主要是用于做一些特殊的辅助效果
主要分为两种:before、after
- 伪元素不能单独创建,必须基于一个实体标签才能创建
- 伪元素的css内有一条必须存在的属性:content,该属性表示伪元素的内容,当伪元素如果没有内容时 就给一个空引号
''
- 伪元素默认为行内元素
- 任意一个实体标签均可以创建两个附属的伪元素,伪元素是实体标签的儿子(before是现在该元素内部所有实体标签之前,after则出现在最后)
first-line 选中第一行文字
first-letter 选中第一个文字
8、继承与盒模型
8.1、继承
- css默认值:任何标签在页面显示时,其实所有的css都已经在他身上出现了
- 大部分css属性的默认值都是inherit,当css属性值为inherit时,意思就是当前的属性值保持跟父级同属性的值一致,依次向上级标签继承
8.2、什么是盒模型?
盒模型是浏览器解析标签的规则:标准盒模型(浏览器默认的盒模型)、IE盒模型(怪异盒模型)
标准盒模型:
标准盒模型下,width/height的值时设置给内容区,padding和border会撑大容器的占位面积
width/height(100) + padding(302)+ border(202)= 标签的真实占位空间大小
怪异盒模型:box-sizing:border-box
当开启怪异盒模型时,width、height所设置的值分别会被border、padding和content所分享。导致的结果就是会因为padding和border的出现压缩了内部的空间