一、上堂回顾
1.html常用的标签
table:合并单元格,将数据进行条理化,让数据显示更加清晰化
form:input,通过type的取值区分不同的数据类型
2.css
层叠样式表
作用:给html页面进行布局,为了给标签添加不同的显示样式
3.css的选择器
9种:通配符,元素,id,类
二、css与html的结合方式
1.行内样式
html元素都有一个style属性,直接对html元素进行样式设置
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <!--行内样式--> <!--style="属性:值;。。。"--> <p style="color: #ffaa45;font-size: larger;">人生若只如初见</p> <p style="color: red;font-size: smaller;">段落</p> <!-- 缺点:没有达到html和css的分离,行内样式设置的样式只对当前标签有效, 显得整个网页过于臃肿,导致后期的维护困难 --> </body> </html>
2.内嵌样式
将css代码写在style标签中,style标签是head标签的子标签
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <!--内嵌样式--> <style> /*选择器*/ #p1{ color: red; font-size: larger; } </style> <!--缺点:内嵌样式只能对当前html文件有效 所有的css代码被集中到一个文件中,无法在其他的html文件中进行引用, 对于一个大型的项目而言,后期的维护成本比较高 --> </head> <body> <p id="p1">人生若只如初见</p> <p>段落</p> </body> </html>
3.链接样式【常用】
使用频率最广
作用:将html页面本身和css完全分离,同一个css文件可以同时被作用于多个html文件,甚至可以被应用到整个网站中,使得整个网站的设计风格统一,并且后期的维护工作量大大减少
语法:
a.创建一个css文件,在其中书写css的选择器
b.在html文件的head标签中,直接通过link标签引用
href:外部css文件的路径,相对路径,类似于图片的路径
type:MIME类型【标记文档的类型,格式为大类型/小类型】
text/css:css文件
text/javascript:js文件
image/jpg:图片
image/*:所有类型的图片
rel:relationship
rel=“stylesheet”,表示样式表,描述了当前页面与href所指定的文件之间的关系,也就是说,href连接是一个css文件
@import url("style2.css"); #p1{ color: red; font-size: larger; } h2{ color: blue; }
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <!--链接样式--> <link href="css/style1.css" type="text/css" rel="stylesheet"/> <link href="css/style2.css" type="text/css" rel="stylesheet"/> </head> <body> <p id="p1">人生若只如初见</p> <p class="cls1">段落</p> <h2>标题</h2> </body> </html>
4.导入样式
导入 样式和链接样式的功能基本相同,只是语法和运作方式不同
语法:
在head标签中,在style标签中进行声明
导入方式:
@import url(“外部css文件的相对路径”)
@import url("style2.css"); #p1{ color: red; font-size: larger; } h2{ color: blue; }
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> @import url("css/style1.css"); </style> </head> <body> <p id="p1">人生若只如初见</p> <p class="cls1">段落</p> <h2>标题</h2> </body> </html>
三、css的常用属性
1.字体属性
font-family:字体类型
font-style:设置字体样式【设置字体是否倾斜】
normal:正常,不倾斜
italic:意大利体
oblique:斜体
font-weight:设置字体的粗细,取值范围为100~900,数值越大,字体越粗
normal:正常
bold:加粗
bolder:比bold还粗
lighter:比normal还细
font-size;字体大小,使用px作为单位,默认的字体大小为16px
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .cls1{ /*可以同时声明多种字体 * 浏览器会在访问者的计算机中按照顺序寻找字体 * 如果设置的字体都没有的话,则使用计算机默认的字体 */ font-family: 宋体,微软雅黑,arial; /* * italic表示意大利体,是一种字体类型,只是倾斜了一定的角度 * oblique表示真正的倾斜 * 通常情况下,在windows下,二者显示的效果是一样的, * 但是在网页中 很少出现中文倾斜的情况,一般倾斜的是英文 */ font-style: oblique; /*数字表示:100~900 * 英文单词:bold,bolder,lighter,normal */ font-weight: 900; /* * 数字表示:以px或者em作为单位 * 英文单词:small,smaller,large,larger等 */ font-size: 2em; } </style> </head> <body> <p class="cls1">字体属性</p> <p>字体属性~~~~~</p> </body> </html>
2.文本属性
text-decoration:设置文本的装饰效果
none:没有任何装饰效果
underline:下划线
line-through:添加删除线
overline:顶线
text-indent:段落缩进,中文一般采用2em 1em = 16px
text-align:对齐方式
left:向左对齐
center:居中对齐
right:向右对齐
justify:两端对齐
letter-sapcing:设置单词内部的字母间距
word-spacing:单词之间的间距
text-transform:大小写转换
none:正常显示
capitalize:单词首字母大写
uppercase:小写转为大写
lowercase:大写转为小写
direction:文本方向
ltr:left to right,文本方向为从左向右,是正常的阅读习惯
rtl:right to left,文本方向为从右向左
word-wrap:设置文字折行
break-word
white-space:
nowrap
normal
如果要设置一段文本不折行: white-space:nowrap; word-wrap:normal; word-break:keep-all 相反,如果一段文本不折行,则可能是设置了上面的样式,则样式改为: white-space:normal; word-wrap:break-word; word-break:break-all;
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .cls1{ font-style: initial; /*可以同时设置多种装饰效果,使用空格隔开*/ text-decoration: overline underline line-through; /*自定义超链接的时候,text-decoration:none;*/ /*段落缩进*/ text-indent: 2em; /*设置段落的时候肯定会用到*/ text-align: left; /*一般用于设置文字居中显示,text-align:center;*/ /*字母间距和单词间距*/ /*设置字母之间和中文之间的间距*/ letter-spacing: 10px; /*设置英文单词之间的间距*/ word-spacing: 20px; /*大小写转换*/ /*作用类似于Python中的title,将一句英文中的每个单词的首字母大写*/ text-transform: capitalize; direction: rtl; } div{ width: 200px; height: 300px; } </style> </head> <body> <p class="cls1">字本属性this is a text字本属性this is a text字本属性this is a text</p> <p>字本属性~~~~~</p> <div> 字本属性this is a text字本属性this is a text字本属性this is a tex 字本属性this is a text字本属性this is a text字本属性this is a tex 字本属性this is a text字本属性this is a text字本属性this is a tex </div> </body> </html>
3.盒子属性【掌握】
3.1边框属性
border:边框,可以统一设置上下左右的边框, 参数:边框宽度 边框样式 边框颜色
border-top/bottom/left/right :单独设置上下左右的边框,用法和border完全相同
border-width;边框的宽度
border-style:边框的样式
dotted:点画线
dashed;虚线
solid:实线
double:双画线,了解
border-color:边框的颜色
border-radius:边框削圆角【一般使用百分比表示,百分比越大,则表示圆角越大】
注意:将一个标签的正方形削成圆,则将border-radius设置为50%
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{ width: 200px; height: 100px; /*统一设置:一次性设置所有的边框,样式和颜色*/ /*样式,颜色和宽度的顺序没有要求*/ border: dashed 2px red; } #box2{ /*单独设置:只设置指定的边框*/ border-top: 4px solid green; } #box3{ /*设置四个边框,只是将样式,宽度和颜色分开设置*/ border-width: 2px; border-style: dotted; border-color: blue yellow cyan red; /*border-width,border-style,border-color给出不同数量的值,效果不一样的 * 1个:上下左右四个边框 * 2个:前者设置上下,后者设置左右 * 3个:第一个设置上,中间的设置的是左右,最后一个设置下 * 4个:上右下左【顺时针】 * */ } </style> </head> <body> <div>AAAAAA</div> <div id="box2">BBBBBBBBB</div> <div id="box3">CCCCCC</div> </body> </html>
3.2外边距
margin:类似于border
margin-top/bottom/left/right
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{ width: 200px; height: 100px; /*统一设置:一次性设置所有的边框,样式和颜色*/ /*样式,颜色和宽度的顺序没有要求*/ border: dashed 2px red; } #box2{ margin:20px; } #box3{ margin-left: 50px; } </style> </head> <body> <div>AAAAAA</div> <div id="box2">BBBBBBBBB</div> <div id="box3">CCCCCC</div> </body> </html>
3.3内边距
padding:类似于border
padding-top/bottom/left/right
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{ width: 200px; height: 200px; /*统一设置:一次性设置所有的边框,样式和颜色*/ /*样式,颜色和宽度的顺序没有要求*/ border: dashed 2px red; } #box2{ padding:30px; } #box3{ padding-left: 50px; } /*注意:padding属性的设置会改变原来标签的宽高*/ </style> </head> <body> <div>AAAAAA</div> <div id="box2">BBBBBBBBB</div> <div id="box3">CCCCCC</div> </body> </html>
4.尺寸属性
width:宽度
height:高度
line-height:行高
注意:text-align设置文字的对齐方式,设置的水平方向的对齐方式
特殊情况:如果一个标签中只有一行文本,当line-height的值和height的值相等,则表示该文本在垂直方向上居中
如果想让一个文本真正意义上居中显示,则需要同时设置text-align:center;和line-height:height的值;
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{ /*如果想要一个标签能够显示他的位置和大小,设置宽高 * a.设置边框 * b.设置背景 */ width: 300px; height: 200px; border: 1px solid blue; line-height: 200px; text-align: center; } </style> </head> <body> <div> 这是尺寸 </div> </body> </html>
5.背景属性
background:背景色/图
background-color:背景色
background-image;背景图
background-repeat:背景的平铺样式
repeat:沿着水平和垂直方向平铺,默认样式
no-repeat:不平铺,只显示一次
repeat-x:只沿着水平方向平铺
repeat-y:只沿着垂直方向平铺
background-attachment:设置背景图是否随着网页的滚动而滚动
scroll:滚动
fixed:固定的
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> body{ width: 100%; height: 5000px; /*背景*/ /*background: red;*/ /*background: url(img/背景1.jpg);*/ /*background-color: cyan;*/ /*background-image:url(img/3.jpg) ;*/ /* * 默认情况下会出现平铺的情况,取决于图片的大小 * 图片尺寸= 背景的大小 正好放下 * 图片尺寸>背景的大小 只显示背景大小的图片 * 图片尺寸<背景的大小 平铺 */ /*background-repeat: no-repeat;*/ /*设置背景是否随着滑动条的滚动而滚动 */ /*background-attachment: fixed;*/ /*扩展*/ /*设置背景色渐变*/ /*从上往下的渐变*/ /*background: linear-gradient(red,blue);*/ /*从左往右的渐变*/ /*background: linear-gradient(to right,red,blue);*/ /*从左上角到右下角的渐变*/ background: linear-gradient(to bottom right,red,blue); } </style> </head> <body> </body> </html>
6.和列表相关的属性
list-style:列表的样式,参数:项目符号 项目符号的位置
list-style-position:项目符号的位置
list-style-image:项目符号
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> li{ background-color: orange; /*list-style-image: url(img/3.jpg);*/ /*项目符号默认为outside,项目符号的大小是固定的,如果图片较大,则显示不下*/ /*list-style-position: inside;*/ list-style: url(img/3.jpg) inside; /*一般使用的方式:在数据条理化显示的时候,不需要出现项目符号*/ list-style: none; } </style> </head> <body> <ul> <li>苹果</li> <li>苹果</li> <li>苹果</li> <li>苹果</li> </ul> </body> </html>
7.浮动属性【重点掌握】
div是块级元素,在页面中独占一行,默认从上往下依次排列,这种排列方式被称为流
元素浮动之前,认为该元素在标准流中,是竖向排列的,而浮动之后可以变成横向排列
float:实现元素的浮动
none:不浮动【在标准流中】,默认值
left:向左浮动
right:向右浮动
clear:清除浮动,取值一般为left或者right,表示将原先设置的浮动清除掉,避免对后面其他标签位置的影响
总结:float的作用:将原本竖向排列的标签变成横向排列,将原本默认显示在左边的标签改到右边
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box1{ width: 100px; height:100px; background-color: red; /*设置浮动属性*/ float: left; } #box2{ width: 200px; height: 200px; background-color: blue; float: left; } #box3{ width: 300px; height: 300px; background-color: cyan; float: right; } #box4{ width: 300px; height: 300px; background-color: gray; /*如果未清除浮动,则box4位置的参照物为浏览器,如果清除浮动,则位置的参照物为前面的标签*/ clear: right; } </style> </head> <body> <div id="box1"></div> <div id="box2"></div> <div id="box3"></div> <div id="box4"></div> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> ul li{ float: left; } </style> </head> <body> <ul> <li>苹果</li> <li>苹果</li> <li>苹果</li> <li>苹果</li> </ul> </body> </html>
8.显示属性【重点掌握】
display:设置标签的显示状态
block:块级标签
特点:可以独占一行,可以设置宽高以及内外边距;如果不设置宽,默认和父标签的宽相等,如果不设置高,高度是随着内容自适应的
代表:div li 等
用法:如果给一个行内标签设置display:block;则该行内标签将可以设置宽高和内外边距
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> /*通配符选择器*/ *{ padding: 0px; margin: 0px; list-style: none; } /*包含选择器*/ ul li{ float: left; } /*超链接标签:不会自动换行*/ /*超链接标签本身不是块级标签,所以设置了宽高不起任何作用*/ a{ /*修改超链接标签的显示方式*/ display: block; width:30px; height: 30px; background-color: orange; margin: 10px; text-decoration: none; text-align: center; line-height: 30px; } </style> </head> <body> <ul> <li><a href="">1</a></li> <li><a href="">2</a></li> <li><a href="">3</a></li> <li><a href="">4</a></li> <li><a href="">5</a></li> </ul> </body> </html>
inline:行内标签
特点:不会自动换行,宽高随着内容的多少自适应,设置宽高和内外边距将无效
代表:span a等
用法:如果给一个块级标签设置display:inline;则该块级标签将不能再设置宽高和内外边距
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{ /* * * 宽高和内外边距 不起作用 div由原来的竖向排列变成了横向,类似于float的作用 * */ display: inline; width: 200px; height: 200px; background-color: orange; } </style> </head> <body> <div>aaaaa</div> <div>bbbbb</div> </body> </html>
inline-block:行内块级标签
特点:不但具有block的特点,也具有inline的特点【可以设置宽高和内外边距,也保留了不换行的特点】
用法:网页的导航
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> /*组合选择器*/ ul,li,a,*{ padding: 0; margin: 0; list-style: none; text-decoration: none; } li{ /*float: left;*/ display: inline-block; border: 1px solid red; } </style> </head> <body> <ul> <li><a href="">1</a></li> <li><a href="">2</a></li><li><a href="">3</a></li><li><a href="">4</a></li><li><a href="">5</a></li> </ul> <!-- 【面试题】 虽然内外边距全部设置为了0,但是最终的结果li之间有间距 原因:每个li标签之间有一个换行符,换行符在html中会被识别为空白符【inline自身的问题,】 --> </body> </html>
none:隐藏标签
特点:不会占用空间,也无法显示,相当于该元素不存在,用来实现动画或者改善整个网页内容的重绘或者重排
,会将input隐藏掉,会占据一定空间
9.定位属性【重点掌握】
position:表示标签的定位
absolute:绝对定位,将对象从文档流中拖出,不会保留原来的位置,可以使用top,bottom,left和right设置有效定位
参照物:父标签或者先辈标签【如果当前标签的父标签设置了有效定位,则以父标签为参照物,如果父标签没有有效定位,则以先辈标签为参照物,如果发现所有的父辈标签都没有优先定位,则以body作为参照物】
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> body{ height: 9999px; } .pos1{ /*相对于父标签的位置不改变*/ position: absolute; left: 100px; top: 150px; } </style> </head> <body> <!--<h2 class="pos1">标签的定位属性:相对定位</h2>--> <div> <p> </p> <h1> </h1> </div> </body> </html>
relative:相对定位,不会将对象从文档流中拖出,会保留原来的位置,可以使用top,bottom,left和right设置有效定位
参照物:该标签自身原来的位置
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .pos1{ position: relative; left: 100px; /*top: 100px;*/ } .pos2{ position: relative; left: -30px; } /*注意:设置了position: relative之后,必须要设置上下左右的属性,否则无效*/ </style> </head> <body> <h2>标签的定位属性:相对定位</h2> <h2 class="pos1">标签的定位属性:相对定位</h2> <h2 class="pos2">标签的定位属性:相对定位</h2> </body> </html>
fixed;固定定位,一般应用在广告中
参照物:当前打开的浏览器的窗口
注意:top,bottom,left和right的值可以为正数【在浏览器的可见区域内】,也可以为负数【有可能溢出屏幕】
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> body{ height: 3333px; } p{ position: fixed; left: 100px; top: 150px; } </style> </head> <body> <p>文本文本</p> </body> </html>