1 css概述
网页分为三部分:
-
结构(HTML)
-
表现(CSS)
-
行为(JavaScript)
早期在没有css以前,html都是靠下边这些标签修饰的,用html来修饰网页非常麻烦,需要用到大量的标签,为了解决这个问题,就诞生了css语言,专门用作修饰网页内容
<a href="#">
<b>
<font>
<i>
<s>
新浪
</s>
</i>
</font>
</b>
</a>
CSS(Cascading Style Sheets):级联样式表(又称为:层联样式表)
-
是一种样式表语言,用于为HTML文档控制外观,定义布局。eg:字体、颜色、边距、高度、宽度、背景图像、高级定位等方面 。
-
可将页面的内容与表现形式分离,页面内容存放在HTML文档中,用于定义表现形式的CSS在一个.css文件中或HTML文档的某一部分。
网页实际是一个多层的结构,通过css可以为网页中的每一层设置样式,我们最终看到的只是最上面的一层,总而言之,css就是用来设置网页中元素的样式的。
2 基本语法
1.行级样式表(也称内联样式表):在标签行内修饰
-
我们通过举例来说明如何使用行级样式表来修改元素的样式:
<p style="color: red;font-size: 20px;">
我是一个段落,我的颜色和大小是使用行级样式表修饰的。
</p>
效果:
-
style属性中的内容都是css的内容,css中的声明和html中的属性一样,都是名值对的形式
-
名和值之间用:隔开,使用;结尾。
-
-
行级样式表一般在优先级最高时使用,因为如果在多个同样的使用场景下就要重复写,麻烦且不够高级
eg:
<a href="#" style="color: red;font-size: 20px;">百度</a>
<a href="#" style="color: red;font-size: 20px;">百度</a>
<a href="#" style="color: red;font-size: 20px;">百度</a>
<a href="#" style="color: red;font-size: 20px;">百度</a>
-
这种情况下就需要用到下面的内嵌样式表,将几种使用相同样式修饰的标签分为一类
2.内嵌样式表
-
将CSS代码集中写在HTML文档的head头部标签中,并且用style标签定义。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
/* 此标签内写的都是css语法 */
.a1{
color: blue;
font-size: 20px;
}
.a2{
color: coral;
font-size: 15px;
}
</style>
</head>
<body>
<a href="#" class="a1">我是一个链接,我的颜色和大小是使用内嵌样式表修饰的。</a>
<a href="#" class="a1">我是一个链接,我的颜色和大小是使用内嵌样式表修饰的。</a>
<a href="#" class="a2">我是一个链接,我的颜色和大小是使用内嵌样式表修饰的。</a>
<a href="#" class="a2">我是一个链接,我的颜色和大小是使用内嵌样式表修饰的。</a>
</body>
</html>
效果:
3.外部样式表
-
将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中,通过link标签将外部样式表文件链接到HTML文档中
3 选择器
因为CSS样式和HTML页面中的标签是分离的,我们需要将样式和标签联系起来,就需要通过选择器实现。
3.1 标签选择器
-
根据标签名来选择页面中的所有指定标签
-
语法:标签名 { 样式表 }
-
eg:p{},h1{},div{}
实际代码举例:
<style type="text/css">
/* 所有的p标签都会选中 */
p{
color:#FF0000;
}
</style>
3.2 类选择器
-
根据元素的class属性值匹配,表示一组,可以有多个标签属于一组,从而具有相同的样式。
-
语法:.class属性值{ 样式表 }
实际代码举例:
<style type="text/css">
.p1{
color: #008000;
}
.p2{
color: yellow;
}
</style>
3.3 id选择器
-
通过标签的id属性值选中唯一的一个标签
-
语法:#id属性值 { 样式表 }
实际代码举例:
<style type="text/css">
#p0{
color: blue;
}
</style>
3.4 通配选择器
-
可以用来选中页面中的所有的标签
-
语法:*{}
<style type="text/css">
*{
color: aqua;
font-size: 30px;
}
</style>
选择器组合
-
可以将公共的样式写进来
-
语法:选择器1,选择器2,选择器N{}
<style type="text/css">
p,.p1,#p0,h1{
font-size: 20px;
}
</style>
注意:
-
当一个标签被多个选择器选中时,会显示优先级高的样式
-
优先级从高到低:id >类 >标签 >通配选择器
4 文本,背景,列表,伪类,透明
4.1 文本
-
color:字体颜色
-
font-size:字体大小
-
eg:16px (px:像素单位,css中必须加单位)
-
-
font-family:字体
-
eg:楷体、宋体等
-
-
text-align:文本内容对齐
-
注意:只能让文本内容对齐
-
如果设置文本居中,这里的居中指的只是水平方向的居中,我们如果想要垂直方向也居中,就要通过line-height属性将我们的行高设置到和文字占据的块或者是行一样高。
-
-
font-weight:设置字体粗细
-
text-decoration:设置对文本的修饰
-
line-through:表示穿过文本的一条线(删除线)
-
underline:下划线
-
none:定义标准的文本
-
可以用来去除超链接默认的下划线
-
-
-
font-style: italic:斜体文本
-
line-height:设置行高
-
letter-spacing:可以指定字符间距
-
word-spacing:设置每个单词之间的间距
-
text-indent:设置首行缩进
-
建议使用单位em(表示当前一个文本中一个文字尺寸大小),假如我们使用单位px,那么在修改了字体大小的时候,缩进的大小也需要改变,这样来回修改就很麻烦,所以建议直接使用em。
-
4.2 背景
-
background-color:背景颜色
-
background-image:背景图片(优先级高于背景颜色)
-
默认情况下设置的背景图片是可重复的,如果一张图片不足以将背景完全填充,那么就会重复产生几个照片对没有完全填充的部分进行填充,如果我们不想填充,可以通过background-repeat:no-repeat属性设置为不重复,这个时候即使我们的图片不足以将背景完全填充时,也不会产生重复照片去填充。
-
-
background-repeat:设置背景是否可重复
-
background-size:设置背景尺寸(宽和高)
-
background- position:设置背景位置
-
可以设置四个值:left,right,top,bottom(也可以左上,右上这样组合设置)
-
4.3 列表
CSS 列表属性可以放置、改变列表项标志,或者将图像作为列表项标志 。
-
list-style-image:将图象设置为列表项标志。
-
样式值的格式为url(图片地址)
-
-
list-style-position:设置列表中列表项标志(图标)的位置。
-
样式值可以设置为:inside、outside
-
设置为inside代表图标在列表项里
-
设置为outside代表图标在列表项外面
-
-
-
list-style-type:设置列表项标志的类型。
-
设置为none就表示去除默认图标
-
设置为circle就表示图标为圆圈
-
总结: 可以对上面三条进行一个简写(list-style:简写属性)
eg:list-style:none url() inside;
-
注意:这三个样式之间没有先后顺序
-
一般都是位置才有先后顺序,并且一般都是顺时针顺序(上右下左),对于为位置我们如果只指明一个,那就是上右下左都是这个值,如果指明两个,就是上下为第一个值,左右为第二个值,如果指明三个,就是上为第一个值,左右为第二个值,下为第三个值,如果指明四个,就是对应上右下左。
-
4.4 伪类
CSS伪类专门用来表示标签的一种的特殊的状态,当我们需要为处在这些特殊状态的标签设置样式时,就可以使用伪类 。
伪类的语法:
:hover 选择鼠标悬停在上面的元素
:active 选择鼠标在上面并且按键按下不松手的元素
:focus 输入标签获得鼠标焦点时状态
4.5 透明度
css中设置透明度有两种方式:rgba和opacity
1.grba
-
语法:rgba(R,G,B,A);
-
rgba只是单纯的设置颜色的透明度,但是标签上的文字不会透明,即透明元素的子元素不会继承其透明效果。
案例:
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#p1{
background-color: rgba(255, 255, 0, 1);
}
#p2{
background-color: rgba(255, 255, 0, 0.2);
}
</style>
</head>
<body>
<p id="p1">这是一个段落,这是一个段落</p>
<p id="p2">这是一个段落,这是一个段落</p>
</body>
</html>
效果:
2.opacity
-
用来设置标签的透明度。
-
语法:opacity:value;
-
value取值: 0.0 (完全透明)到 1.0(完全不透明)。
-
opacity属性具有继承性,因此会使得容器中所有的元素都具有透明度,所以我们设置的字体也会边透明。
案例:
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.a1{
opacity: 1;
}
.a2{
opacity: 0.5;
}
</style>
</head>
<body>
<div class="a1">
<img src="img/背景.jpg"/>
<span>这是一个span标签</span>
</div>
<div class="a2">
<img src="img/背景.jpg"/>
<span>这是一个span标签</span>
</div>
</body>
</html>
效果:
5 标签分类
5.1 块级标签
-
会自动换行的标签,无论内容有多少,都会独占一行
-
此类标签可以设置宽高
-
默认的大小:宽与body一样,高与内容一样,如果没有内容高度为0
例如:<p>、<h1>、<ul>、<ol>、<hr/>等
5.2 行级标签
-
只占自身大小的标签,不会占一行
-
不能设置宽高
例如:<font>、<b>、<i>、<a>等。
5.3 行级块标签
-
可以设置大小,但是不占一行
例如:<input/> <img>等。
注意:
-
一般情况下使用块级标签包含行级标签,不使用行级标签包含块标签。
-
因为块级标签主要用来布局,行级标签主要用来文字选中。
-
-
a可以包含任何标签,除去a本身;
-
比如用超链接把图片包裹起来
-
-
p标签不可以包含任何的块标签。
6 display属性
-
用来修改标签的类型
可选值:
display:inline :设置标签为行级标签 block :设置标签为块标签 none :隐藏标签(标签将在网页中完全消失,不占空间) inline-block :设置标签为行级块标签
7 div和span
7.1 div标签
-
块级标签,可以包含任何标签(行内元素、块级元素都行)
-
没有默认样式,定义什么样式就变成什么样子。
-
比如可以通过css样式来设置自身的宽度(没有定义宽度时,div标签的宽度为容器的100%),高度,以及标签之间的距离(内边距和外边距)
-
-
主要的作用是用来进行网页布局,是一个纯净版的块级标签
7.2 span标签
-
行级标签,标签内只能添加行内元素的标签或文本,不能容纳块级元素
-
没有任何默认样式宽度
-
高度无法通过css样式设置、它的宽高受其本身内容控制,随着内容的宽高改变而改变
-
span标签可以设置左右的外边距和内边距,但是上下的外边距和内边距无法设置
-
-
span标签主要用来选中文本,然后修饰文本
8 盒子模型
CSS处理网页时,它认为每个标签都包含在一 个不可见的盒子里,如果把所有的标签都想象成盒子,那么我们对网页的布局就相当于是摆放盒子,我们只需要将相应的盒子摆放到网页中相应的位置,即可完成网页的布局。
盒子模型:
一个盒子我们会分成几个部分:
-
内容区(content)
-
内容区指的是盒子中放置内容的区域,也就是标签中的文本内容,子标签放置于内容区中
-
当一个标签没有内边距、边框,那么内容区大小就是标签的大小
-
通过width和height两个属性设置的是内容区的大小而不是整个盒子的大小
-
width和height属性只适用于块标签(包含行级块)
-
-
内边距(padding)
-
内边距指的是内容区到边框之间的距离
-
内边距会影响整个盒子的大小,使用padding属性来设置标签的内边距。
代码示例:
padding-top: 10px;/*设置内容区与上方边框的距离*/ padding-bottom: 10px;/*设置内容区与底部边框的距离*/ padding-left: 10px;/*设置内容区与左边框的距离*/ padding-right: 10px; /*设置内容区与右边框的距离*/ padding:10px 20px 30px 40px; /*设置标签上、右、下、左(顺时针)四个方向的内边距*/ padding: 10px; /*上下左右边距都一样时可以这样简写*/ 图示:
加padding: 10px 后效果图:
-
-
边框(border)
-
标签的最外层,会影响标签的大小
-
使用border属性设置盒子的边框
-
边框样式: dotted(点线)、dashed(虚线)、solid(实线)、double(双线)、groove(槽线)
border-radius:设置四个角为圆角边框
border-top-left-radius:设置左上为圆角边框
border:1px red solid; /* 分别指定了边框的宽度、颜色和样式 */ /* 也可以使用border-top/left/right/bottom分别指定上右下左 四个方向的边框 */
-
-
外边距(margin)
-
外边距是标签距离另一个标签之间的距离,不影响标签的
-
不影响标签的大小,但是会影响标签的位置,标签所占的空间会改变
-
使用margin属性可以设置外边距,用法和padding类似
-
可以通过margin-top/lift/right/bottom这些属性修饰
/* 上下不能给auto,只能给具体的值 */ margin-top: 10px; margin-bottom: 10px; /* 组合使用可使标签居中 auto(外边距最大化)*/ margin-left: auto; margin-right: auto;
(margin: 10px auto;) 效果:
-
注意:
-
标签整体大小 = 内容区 + 内边距 + 边框
9 清除浏览器的默认样式
浏览器为了在页面中没有样式时,也可以有一个比较好的显示效果,所以为很多的标签都设置了一些默认的margin和padding,而它的这些默认样式,正常情况下我们是不需要使用的,所以我们往往在编写样式之前需要将浏览器中的默认的margin和padding统统的去掉。
*{
margin: 0;
padding: 0;
}
10 文档流--浮动,定位
网页是一个多层的结构,一层叠加一层。
-
我们通过css可以分别为每一层来设置样式
-
用户只能看到最顶上的一层,这些层最下面的一层我们就称之为文档流
-
文档流是网页的基础
-
更通俗的说文档流就是标签在网页中默认的排放顺序,将窗体自上而下分成一行行 ,并在每行中按从左至右的顺序排放标签。
-
文档流中标签默认会紧贴到上一个标签的右边,如果右边不足以放下标签,标签则会另起一行,在新的一行中继续从左至右摆放。
-
这样一来每一个块标签都会另起一行,那么我们如果想在文档流中进行布局就会变得比较麻烦。
图示:
因此,我们要进行网页的布局,就必须打破这一默认排放规则。
那么怎么打破网页的默认排放规则呢?
-
浮动
-
定位
11 浮动
11.1 浮动概述
浮动指的是使标签脱离原来的文档流,在父标签中浮动起来,浮动使用float属性。
可选值:
none :不浮动 left :向左浮动 right :向右浮动
块级标签和行级标签都可以浮动,当一个行级标签浮动以后将会自动变为一个块级标签;当一个块级标签浮动后,宽度会默认是内容的宽度,所以当漂浮一个块级标签时我们都会为其指定一个宽度。
-
当一个标签浮动以后,其下方的标签会上移。
-
浮动会使标签完全脱离文档流,也就是不再在文档中在占用位置,标签浮动以后不会再影响父标签的高度,也就是浮动标签不会撑开父标签。
11.2 清除浮动
clear属性可以用于清除标签周围的浮动对标签的影响,其他标签的位置不发生变化。
可选值:
left : 忽略左侧浮动
right :忽略右侧浮动
both :忽略全部浮动
案例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* 外边的盒子如果不设置宽度,默认宽度就是浏览器宽度,已经是居中状态,
所以要想使内容居中,就要给外边的盒子设置宽度,然后再调整margin属性使内容居中 */
.nav_box{
background-color: antiquewhite;
width: 750px;
margin: auto;
}
.nav{
float: left;
background-color: palegreen;
width: 150px;
padding: 10px 0px;
text-align: center;
}
.content_box{
width: 750px;
margin: auto;
margin-top: 10px;
}
.content_box_left{
background-color: pink;
float: left;
width: 200px;
height: 400px;
}
.content_box_center{
background-color: aqua;
float: left;
width: 334px;
height: 400px;
margin: 0px 8px;
}
.content_box_right{
background-color: pink;
float: left;
width: 200px;
height: 400px;
}
.content_box_bottom{
background-color: aquamarine;
height: 40px;
}
</style>
</head>
<body>
<div class="nav_box">
<div class="nav">首页</div>
<div class="nav">公司介绍</div>
<div class="nav">产品案例</div>
<div class="nav">公司新闻</div>
<div class="nav">联系我们</div>
<!--
浮动后的标签不占原来的空间,没有把父级标签撑起来,
所以下面继续写的内容就会被浮动起来的内容盖住
解决:清除浮动,会自动将父级标签撑开
-->
<div style="clear: left;"></div>
</div>
<div class="content_box">
<div class="content_box_left">left</div>
<div class="content_box_center">center</div>
<div class="content_box_right">right</div>
<div style="clear: left;"></div>
<div class="content_box_bottom">底部</div>
</div>
</body>
</html>
图片解释:
最终效果:
12 定位(Position)
定位的基本思想很简单,它允许你定义的标签相对于其正常位置,或者相对于父标签、另一个标签甚至浏览器窗口本身而出现的位置。
-
需要有参照物 比如:自己、其他标签、父标签、浏览器本身
12.1 相对定位(relative)
-
移动时,是以自己本身的位置为参照物的(也就是它的起点)进行移动,移动后,原来的空间还被占用。
-
通过position:relative; 开启相对定位,left right top bottom四个属性来设置标签的偏移量。
相对定位的特点:当标签的position属性设置为relative时,则开启了标签的相对定位
-
当开启了标签的相对定位以后,而不设置偏移量时,标签不会发生任何变化
-
相对定位是相对于标签在文档流中原来的位置进行定位
-
相对定位的标签不会脱离文档流
案例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.box1{
width: 100px;
height: 100px;
background-color: palegreen;
/*开启相对定位*/
position: relative;
left: 100px;
}
.box2{
width: 100px;
height: 100px;
background-color: paleturquoise;
}
</style>
</head>
<body>
<div class="box1">box1</div>
<div class="box2">box2</div>
</body>
</html>
效果:
12.2 绝对定位
-
绝对定位是不占空间的,运用了绝对定位的标签会脱离原来的文档流,浮动起来,因此视觉上会其他的标签重叠。
-
可以通过position: absolute; 开启绝对定位, left right top bottom四个属性来设置标签的偏移量
绝对定位的特点:
-
开启绝对定位,会使标签脱离文档流,也就是使标签上升一个层级
-
开启绝对定位以后,如果不设置偏移量,则标签的位置不会发生变化
-
参照物:相对于离他最近的开启了定位的祖先标签进行定位(一般情况,开启了子标签的绝对定位都会同时开启父标签的相对定位),如果所有的祖先标签都没有开启定位,则会相对于浏览器窗口进行定位,一般情况,开启了一个标签的绝对定位,都会开启父级标签的相对定位。
-
绝对定位会改变标签的性质,行级标签变成块标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.box1{
width: 100px;
height: 100px;
background-color: aqua;
position: absolute;/*开启了绝对定位*/
left: 100px;
top: 100px;
}
.box2{
width: 100px;
height: 100px;
background-color: red;
}
.box3{
width: 200px;
height: 200px;
background-color: palegreen;
position: relative;
}
</style>
</head>
<body>
<div class="box3">box3
<div class="box1">box1</div>
</div>
<div class="box2">box2</div>
</body>
</html>
图片说明: