一、上堂回顾
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>