一、上堂回顾
1.网页开发的知识 组成：结构，表现，行为 实现：html，css，javascript 2.html简介 超文本标记语言 规范：标签组成 操作思想：封装 3.html中常用的标签 font：设置字体，size color p:设置段落 h：标题，注意：数字 越大，字号越小 hr：水平线 br：换行 特殊字符： < > img: src width height alt title 相对路径：../ 块标签：pre div span 列表标签：有序【ol】 无序【ul】 li 表格标签：table tr td【th】 合并单元格：colspan rowspan a：超链接标签，href target 定位资源：#top #id 音视频标签：audio video ：controls loop autoplay 表单标签：form input select textarea 属性：type：text，password，file，radio，checkbox，button,submit,reset value: name id class checked selected 头标签：head linkcss
1.概念 层叠样式表 意义：为了将结构和表现分离，为了代码的维护性和可读性 2.css的选择器 3.css和html的结合方式 内嵌样式和链接样式 行内样式和导入样式：了解
二、css的属性
1.字体属性
font-family:字体类型，比如宋体，黑体等
font-style：字体样式【是否倾斜】
normal：正常
italic：意大利体
oblique:斜体
font-weight:设置字体的粗细，取值范围为100~900，数值越大，字体越粗
normal：正常
bold：粗体
bolder：
lighter
font-size：字体大小，一般情况下，使用px为单位，默认大小为16px
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> p{ /*注意：可以同时设置多种字体，浏览器在访问者的计算机中查找宋体， * 如果查找到，则直接显示，如果查找不到，则去查找后面的字体 * 如果列出来的字体在访问者的计算中都不存在，则显示默认字体 * */ font-family: 宋体,微软雅黑,Arial; font-style: oblique; /* * italic:只是一种字体风格，意大利体，对每个字符得到结构做了一些微小的改动，来反映外观的变化 * oblique：将正常文本倾斜一定的角度，一般给英文设置倾斜 */ /*font-weight: 900;*/ font-weight: lighter; /*font-size: 30px;*/ font-size: 2em; /* * px:表示像素，与分辨率有关，表达字体大小，缩放的时候不建议使用 * em:自动适应尺寸，方便字体的放大或者缩小,用于段落缩进 * 1em = 16px */ } </style> </head> <body> <p>字体属性</p> </body> </html>
2.文本属性
text-decoration:设置文字的装饰效果
none：正常
underline：下划线
line-through:给文字添加删除线
overline：添加顶线
blink：闪烁，仅部分浏览器支持
text-indent:段落缩进，中文中常用2em【常用】
text-align:对齐方式【常用】
left：局左对齐
right
center：居中对齐【常用】
justify：两端对齐
letter-spacing:字符之间的间距
word-spacing:单词之间的间距
text-transform:变化，侧重于大小写转换
none：正常显示
capitalize:单词首字母大写
uppercase：将小写转化为大写
lowercase：将大写转化为小写
direction：文本方向
ltr：文本方向为从左到右，默认方向
rtl：文本方向为从右到左
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> p{ /*注意：可以同时给一段文本设置多个装饰效果，使用空格隔开*/ /*text-decoration: underline overline line-through;*/ /*注意：后出现的属性会覆盖先出现的属性*/ text-decoration: underline; text-indent: 2em; /*text-align: center;*/ /*使用px作为单位*/ /*字符*/ letter-spacing: 10px; /*单词，通过空格区分单词*/ word-spacing: 20px; text-transform: uppercase; direction: rtl; } </style> </head> <body> <p>文本属性css html</p> </body> </html>
3.盒子属性
在进行页面布局之前，将数据封装到一块一块的区域中，常用div
说明：所有的html的标签都能使用盒子属性
3.1边框属性
border：边框，统一设置指定标签的所有的边框，参数：边框宽度 边框样式 边框颜色
border-top: 上
border-bottom：下
border-left：左
border-right：右
border-width：边框的宽度，单位使用px
border-style:边框的样式
dotted：点画线
dashed：虚线
solid：实线
double：双线
border-color：边框颜色
border-radius：边框削圆角【注意：一般使用百分比表示，百分比越大，表示圆角越大】【常用】
50%：将正方形削圆角，取值为50%的时候，表示得到一个圆
总结：
border-width,border-color,border-style分别给出1个，2个，3个或者4个属性值的时候，分别代表的含义
1个：上下左右
2个：前者代表上下，后者代表的是左右
3个：前者代表上，中间代表左右，后者代表的下
4个：分别代表上右下左
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> div{ width: 200px; height: 100px; /*统一设置 参数可以不按照特定的顺序*/ /*border: 2px dashed blue;*/ } #div2{ /*个别设置：只设置指定的边框*/ border-right: 2px solid red; } #div3{ /*统一设置*/ border-width: 3px; border-color: purple; border-style: dotted; } #div4{ border-width: 2px; border-color: red green cyan purple; border-style: solid; } </style> </head> <body> <div>AAAAAA</div> <div id="div2">BBBBB</div> <div id="div3">CCCCC</div> <div id="div4">DDDDDD</div> </body> </html>
3.2内边距
padding；内边距，参数为距离，单位为px
padding-left
padding-right
padding-top
padding-bottom
说明：可以统一设置指定标签的上下左右的内边距，也可以单独设置
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> div{ width: 200px; height: 100px; /*统一设置 参数可以不按照特定的顺序*/ border: 2px dashed blue; } #div2{ /*统一设置内边距*/ /*注意：设置了内边距，相当于将该标签的宽和高改变*/ padding: 30px; } #div3{ /*单独设置*/ padding-left: 30px; padding-bottom: 30px; } </style> </head> <body> <div>AAAAAA</div> <div id="div2">BBBBB</div> <div id="div3">CCCCC</div> </body> </html>
3.3外边距
margin：外边距，参数为距离，单位为px
margin-left
margin-right
margin-top
margin-bottom
说明：可以统一设置指定标签的上下左右的外边距，也可以单独设置
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> div{ width: 200px; height: 100px; /*统一设置 参数可以不按照特定的顺序*/ border: 2px dashed blue; } #div2{ /*统一设置外边距*/ /*注意：外边距的参照物：页面，相邻的其他标签*/ margin: 30px; } #div3{ /*单独设置*/ margin-top: 50px; } </style> </head> <body> <div>AAAAAA</div> <div id="div2">BBBBB</div> <div id="div3">CCCCC</div> </body> </html>
3.4其他写法
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> img{ width: 400px; height: 400px; /*border-radius: 50%;*/ border-left-color: purple; border-left-width: 2px; border-left-style: solid; border-right-style: dotted; } </style> </head> <body> <img src="img/pic20.jpg" /> </body> </html>
4.尺寸属性
width：宽度
height：高度
line-height:行高
注意：当文本内容只有一行的时候，将行高设置为和height相等，【line-height = height】,就可以实现文字在垂直方向上居中显示
text-align:center,在水平方向上居中显示
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .box{ width: 200px; height: 100px; border: 1px black solid; /*设置文字真正意义上的居中显示：水平方向和垂直方向*/ line-height: 100px; text-align: center; } </style> </head> <body> <div class="box"> 尺寸属性this is a text </div> </body> </html>
5.背景属性
background；背景【颜色或者图片】
background-color:背景颜色
background-image:背景图片
background-repeat：背景样式平铺样式
repeat：沿着水平和垂直方向平铺，默认值
no-repeat；不平铺
repeat-x:沿着水平方向平铺
repeat-y:沿着垂直方向平铺
background-position：背景图像的位置
left
right
top
bottom
center
background-attachment;设置背景图片是否随着网页内容一起滚动
scroll：会随着滚动，默认值
fixed：固定，不随着滚动
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> body{ width: 100%; height: 5000px; /*背景颜色*/ /*注意：给任何的标签都可以设置背景颜色*/ /*background-color: red;*/ /*背景图片 * 图片尺寸 = 背景的大小,整体放下 * 图片尺寸 < 背景的大小,默认平铺 * 图片尺寸 > 背景的大,只显示背景的大小 * */ /*background-image: url(img/pic20.jpg);*/ /*是否允许平铺*/ /*background-repeat: no-repeat;*/ /*设置背景图的位置 *水平方向：left center right * 垂直方向：top center bottom * 数值可以自定义 * */ /*参数：左右 上下，类似于坐标系中的点*/ /*background-position: 50% 50px;*/ /*设置背景图是否随着网页内容滚动*/ /*background-attachment: fixed;*/ /*设置颜色的渐变 * background：linear-gradient() */ /*从左到右的线性渐变*/ /*background:linear-gradient(to right,red,blue);*/ /*从上到下的线性渐变*/ /*background:linear-gradient(red,blue);*/ /*从左上角到右下角的线性渐变*/ background:linear-gradient(to right bottom,red,blue); } </style> </head> <body> </body> </html>
6.和列表相关的属性
list-style:设置列表的项目符号和位置
list-style-image:设置列表的项目符号
list-style-position:设置项目符号的位置
inside：里面
outside：外面
7.浮动属性
div是块级元素，特点：在页面中独占一行【会自动换行】，当一个html页面中有多个div的时候，默认从上往下依次排列，这种排列方式被称为流
元素浮动之前，被称为元素处于标准流中，是竖向排列的，浮动之后，可以将元素的排列方式改为横向排列
float：实现标签的浮动
none：默认值，不浮动
left：向左浮动
right：向右浮动
clear： 清除浮动，取值一般为left或者right，表示将原来的浮动清除掉，避免影响后面标签的位置
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> #div1{ width: 300px; height: 300px; background-color: red; float: right; } #div2{ width: 200px; height: 200px; background-color: blue; float: right; } #div3{ width: 400px; height:400px; background-color: orange; float: right; } </style> </head> <body> <div id="div1">111</div> <div id="div2">222</div> <div id="div3">333</div> </body> </html><!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> li{ float: left; } </style> </head> <body> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </body> </html>
8.显示属性
display：标签的显示状态
none：隐藏，特点：不会占据空间，常用来进行页面的重绘或者重排
block：块级标签
特点：总是以一个块的形式表现出来，可以独占一行
可以设置宽高以及内外边距，如果不设置，默认宽度和父标签相等
高度会随着文本内容的变化而变化【自适应】
例如：div p li hn
inline：行内标签
特点：不会自动换行，宽高随着内容自适应，设置宽高和内外边距无效
设置这个值，就可以将一个块级标签转换为行内标签，那么该标签将不能设置宽高和内外边距
例如：span a
inline-block:行内块级标签
特点：不但具有block的特点：可以设置宽高和内外边距
也具有inline的特点：不换行
使用场景：导航的实现【浮动，目的是将竖向排列转换为横向排列】
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> *{ padding: 0px; margin: 0px; list-style: none; } ul li{ float: left; } a{ /*将a标签从行内标签转换为块级标签：就可以设置宽高和内外边距*/ display: block; width: 30px; height: 30px; background-color: orange; 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><!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> ul,li,a,*{ padding: 0; margin: 0; list-style: none; text-decoration: none; } li{ display: inline-block; border: 1px solid red; /*float: left;*/ } </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> <!-- 问题：将所有标签的内外边距设置为了0，但是最终显示li之间有间距，间距从哪来？ 原因：实际上，这是inline造成的，这些间距是空白符，在浏览器中，空白符不会被忽略的【换行造成的空白符】 -->
9.定位属性
9.1绝对定位
position
absolute：绝对定位，将对象从文档流中拖出
参照物：父标签或者先辈标签【如果该标签的父标签设置了有效的定位，就以父标签作为参照物，如果没有设置有效定位，则查找所有的先辈标签】
注意：可以使用left，top，right和bottom属性设置标签的位置
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> /*absolute:参照物是父标签*/ body{ height: 9999px; background-color:red; } .pos1{ position: absolute; left: 100px; top: 150px; } </style> </head> <body> <h2 class="pos1">标题yi</h2> </body> </html>
9.2相对定位
relative：相对定位，不会脱离文档流
参照物：该标签自身原来的位置
注意：可以使用left，top，right和bottom属性设置标签的位置
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> /*relative：参照自身原来的位置*/ .pos1{ position: relative; left: -20px; } .pos2{ position: relative; left: 20px; } </style> </head> <body> <h2>标题</h2> <h2 class="pos1">标题yi</h2> <h2 class="pos2">标题er</h2> </body> </html>
9.3固定定位
fixed：固定定位，脱离文档流
参照物：窗体
使用场景:应用在广告中
注意：有效的定位可以设置距离参照物上下左右的位置，如果在参照物的内部，这些属性值是正数，一旦出界就是负数
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> body{ height: 9999px; background-color:red; } .one{ position: fixed; left: 15px; top: 50px; } .two{ position: fixed; right: 30px; top: 50px; } </style> </head> <body> <p class="one"> hello </p> <p class="two"> 文本 </p> </body> </html>
9.4z-index的使用
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .x{ position: absolute; left: 0px; top: 0px; /*设置了图片的绝对定位之后，则img会覆盖h*/ z-index: 1; /* * 使用前提：该标签设置了定位属性 * z-index的作用：值决定标签显示的位置【标签层叠的时候】 * 此属性的值越大，则表示优先级越高，则被显示在最上层 * z-index默认的值为0，将z-index设置为-1.表示该标签拥有更低的优先级 */ } </style> </head> <body> <h1>标题</h1> <img class="x" src="img/pic20.jpg" /> </body> </html>
10.综合练习-百度首页
baidu.css
*{ /*去除默认的内外边距*/ padding: 0; margin: 0; } /*设置上面*/ #head{ /*向右浮动*/ float: right; margin-top:10px; } /*设置上面的超链接*/ .headlink{ color: black; font-size: 12px; margin: 10px; } /*更多产品*/ .more{ background-color: blue; color: white; text-decoration: none; margin-right: 10px; font-size: 14px; text-align: center; /*line-height: ;*/ } /*中间*/ #middle{ /*清除浮动*/ clear: right; text-align: center; /*中间的div以body为参照物*/ position: absolute; top: 80px; /*设置宽度*/ width: 100%; } /*输入框的样式*/ #key{ width: 30%; height: 30px; } /*按钮*/ #btn{ width: 70px; height: 30px; background-color: blue; color: white; } /*底部*/ #footer{ position: absolute; bottom: 10px; width: 100%; height: 150px; text-align: center; } /*底部超链接*/ #footlink{ margin: 20px; } #footlink a{ color: gray; font-size: 12px; }baiduhome.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <!--引入css文件--> <link href="css/baidu.css" type="text/css" rel="stylesheet" /> </head> <body> <!--上面--> <div id="head"> <a class="headlink" href="#">新闻</a> <a class="headlink" href="#">好123</a> <a class="headlink" href="#">地图</a> <a class="headlink" href="#">地图</a> <a class="headlink" href="#">地图</a> <a class="headlink" href="#">地图</a> <a class="headlink" href="#">地图</a> <a class="headlink" href="#">地图</a> <a class="more" href="#">更多产品</a> </div> <!--中间--> <div id="middle"> <img src="https://www.baidu.com/img/bd_logo1.png" /> <div id="sub"> <form action="#" method="get"> <input type="text" name="kw" id="key" /> <button id="btn">百度一下</button> </form> </div> </div> <!--下面--> <div id="footer"> <div> <img src="img/二维码.png" /> <p>手机百度</p> </div> <div id="footlink"> <a href="#">地图</a> <a href="#">地图</a> <a href="#">地图</a> <a href="#">地图</a> <br /> <a href="#">地图</a> <a href="#">地图</a> <a href="#">地图</a> </div> </div> </body> </html>
2954
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
