CSS 基础使用
一、CSS介绍
CSS全称为： Cascading Style Sheets ，意为层叠样式表 ，与HTML相辅相成，实现网页的排版布局与样式美化
二、CSS使用方式
1. 行内样式/内联样式
借助于style标签属性，为当前的元素添加样式声明
<标签名 style="样式声明">代码：<div style="color:red; font-size:60px;">行内样式</div>弊端：维护困难，数据多很难修改
CSS样式声明 : 由CSS属性和值组成
例：
style="属性:值;属性:值;"
常用CSS属性 :
- 设置文本颜色 color:red;
- 设置背景颜色
- 设置字体大小 font-size:32px;
2. 内嵌样式
借助于style标签，在HTML文档中嵌入CSS样式代码，可以实现CSS样式与HTML标签之间的分离。同时需借助于CSS选择器到HTML 中匹配元素并应用样式
示例:
<style>
选择器{
属性:值;
属性:值;
}
</style>
选择器 : 通过标签名或者某些属性值到页面中选取相应的元素，为其应用样式
示例：
```
/标签选择器 : 根据标签名匹配所有的该元素/
p{
color:red;
}
```
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <!--引入外部样式表--> <link rel="stylesheet" href="index.css"> <style> /*内嵌样式,借助style标签书写样式声明, 实现样式与结构的分离*/ /*使用选择器匹配文档元素,为其应用样式*/ /*标签选择器:根据标签名匹配元素应用样式*/ h1{ background:green; } span{ color:orange; } span{ color:pink; } </style> </head> <body> <!--行内样式,借助style标签属性设置样式规则--> <!--CSS样式声明 属性名:属性值;--> <h1 style="font-size:16px;color:red;">老祁营救小泽失败</h1> <h1 style="font-size:16px;color:red;">隔壁老王在扒图</h1> <h2> 测试<span>老王</span> </h2> <span>老王2</span> <div style="color:green;"> <p style="color:blue;"> <span style="color:gray;">子元素可以继承父元素或祖先元素的文本样式</span> </p> </div> </body> </html>
3. 外链样式表
- 创建外部样式表文件 后缀使用.css
- 在HTML文件中使用标签引入外部样式表
html
<link rel="stylesheet" href="URL" type="text/css">
其中rel="stylesheet"表示样式表文件；href="URL"路径， type="text/css"固定书写格式，不能写反 - 样式表文件中借助选择器匹配元素应用样式
三、 样式表特征
1. 层叠性
多组CSS样式共同作用于一个元素
2. 继承性
后代元素可以继承祖先元素中的某些样式
例 : 大部分的文本属性都可以被继承，超链接a标签文本颜色不能由继承得到，需要单独修改。
注意：块元素默认宽度和父元素保持一致。
3. 样式表的优先级
优先级用来解决样式冲突问题。同一个元素的同一个样式(例如文本色)，在不同地方多次进行设置，最终选用哪一种样式？此时哪一种样式表的优先级高选用哪一种。
- 行内样式的优先级最高
- 文档内嵌与外链样式表,优先级一致,看代码书写顺序,后来者居上
- 浏览器默认样式和继承样式优先级较低
四、CSS 选择器 重点
1. 作用
匹配文档中的某些元素为其应用样式
2. 分类 :
1. 标签选择器
根据标签名匹配文档中所有该元素
语法 :
标签名{属性:值;}
2. id选择器
根据元素的 id 属性值匹配文档中惟一的元素，id具有唯一性，不能重复使用
语法 :
注：需要放置在属性标签<style>内<style>#baidu1{color:red;font-size:20px;text-decoration:none; }</style><a href="https://www.baidu.com" target="_blank" id="baidu1">百度</a>
注意 :
id属性值自定义,可以由数字，字母，下划线，- 组成，不能以数字开头;
尽量见名知意，多个单词组成时，可以使用连接符，下划线，小驼峰表示
练习：创建超链接，修改文本颜色，取消下划线。
取消下划线，用text-decoration：none；
代码：
<style>
a{
color:#000000;
text-decoration:none;
}
</style>
3. class选择器/类选择器
根据元素的class属性值匹配相应的元素,class属性值可以重复使用,实现样式的复用
语法 :
.class属性值 {
}
特殊用法 :
1. 类选择器与其他选择器结合使用
注意标签选择器与类选择器结合时,标签在前,类选择器在后
例 : a.c1{ }
2. class属性值可以写多个,共同应用类选择器的样式
例 :
.c1{ }
.c2{ }
<p class="c1 c2"></p>
<p class="c1 c2">选择器和选择器结合使用</p>
为一组元素统一设置样式
语法 :
selector1,selector2,selector3{
}
例：h1,div,p{
}或者.c1,#d1{ }
5. 后代选择器
匹配满足选择器的所有后代元素(包含直接子元素和间接子元素)
语法 :
selector1 selector2{
}
选择器1表示外层元素，选择器2表示内层元素。注意中间空格为后代。
例如： #nav span{color:red;}
代码：
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#nav span{
color:red;}
</style>
</head>
<body>
<!--nav做导航-->
<div id="nav">
<span>导航中的文本</span>
<ul>
<li>示例
<span>文本</span>
</li>
</ul>
</div>
<div id="main">
<span>
主体中的文本
</span>
</div>
</body>
匹配selector1中所有满足selector2的后代元素（包括直接和间接）
6. 子代选择器
匹配满足选择器的所有直接子元素
语法 :
selector1>selector2{
}
代码如下：
<style>
#nav>span{
color:red;}
</style>
</head>
<body>
<!--nav做导航-->
<div id="nav">
<span>导航中的文本</span>
<ul>
<li>示例
<span>文本</span>
</li>
</ul>
</div>
<div id="main">
<span>
主体中的文本
</span>
</div>
</body>
7. 伪类选择器
为元素的不同状态分别设置样式,必须与基础选择器结合使用
分类 :
:link 超链接访问前的状态
:visited 超链接访问后的状态
:hover 鼠标滑过时的状态
:active 鼠标点按不抬起时的状态(激活)
:focus 焦点状态(文本框被编辑时就称为获取焦点比，输入框)
使用 :
a:link{
}
a:visited{
}
.c1:hover{ } **最常用**
代码如下：
<style>
a:link{
color:black;}
a:visited{
color:gray;}
a:hover{
background-color:orange;}
a:active{
color:blue;}
</style>
</head>
<body>
<a href="#">超链接</a>
</body>
注意：书写顺序必须按照以上4部顺序书写，否则可能有些状态显示不出
文本框聚焦代码如下：
<style>
input:focus{
/*取消轮廓线*/
outline:none}
</style>
<input type="text">
注意 :
1. 超链接如果需要为四种状态分别设置样式,必须按照以下顺序书写
:link
:visited
:hover
:active
超链接常用设置 :
a{
/*统一设置超链接默认样式(不分状态)*/
}
a:hover{
/*鼠标滑过时改样式*/
}
以超链接为例：
常用设置：基础样式
a{ /*统一设置超链接默认样式(不分4种状态)*/
color:gray;
text-decoration:none
}
a:hover{background-color:orange;}
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> /*1.根据标签名匹配所有相应元素应用样式*/ h1{ color:green; } /*2.根据元素的id属性值匹配(id选择器)*/ #d1{ /*匹配id为"d1"的元素*/ font-size:40px; } #d2{ font-size:42px; } /*3.类选择器:根据元素的class属性值匹配到相应元素*/ .c1{ background: orange; } .c2{ width:200px; } /*组合选择器*/ h2.c1{ /*匹配类名为c1的h2元素*/ height:200px; } /*4.群组选择器:将选择器组合起来,统一为元素设置样式*/ h2,h3,h4{ font-size:20px; } #d1,.c1{} /*5.后代选择器:匹配所有满足选择器的后代元素*/ div span{ color:red; } /*6.子代选择器:匹配所有满足选择器的直接后代*/ div>span{ background:cyan; } /*7.伪类选择器:为元素的不同状态分别设置样式, 需要和基础选择器结合使用*/ /* 超链接伪类: :link(超链接访问前的状态) :visited(超链接访问后的状态) 动态伪类: :hover(鼠标悬停时的状态) :active(激活状态,鼠标点按时的状态) :focus(表单控件的焦点状态,输入框的编辑状态) */ /* a:link{ color:black; } a:visited{ color:gray; } a:hover{ font-size:28px; } a:active{ background:orange; } */ /* 1.统一设置超链接四种状态下的样式 2.单独设置鼠标悬停时的样式 */ a{ color:black; /*取消超链接默认下划线*/ text-decoration:none; } a:hover{ color:orange; } /*创建h5标签,设置初始尺寸和背景颜色; 鼠标悬停时修改背景颜色*/ h5{ width:200px; height:200px; background:pink; } h5:hover{ background:green; } /*取消表单控件在焦点状态下的轮廓线*/ input:focus{ outline:none; } </style> </head> <body> <input type="text"> <h5></h5> <a href="01_form.html">表单应用</a> <div> <span>div->span</span> <p> <span>div->p->span</span> </p> </div> <!--基础选择器:标签,id,类--> <!--class属性可以取多个值,使用空格隔开--> <h1 id="d2" class="c1 c2">老祁</h1> <h1 id="d3" class="c1">小泽</h1> <h1 id="d1">老王</h1> <h2 class="c1 c2">MM</h2> <h2>参考</h2> <h3>测试</h3> <h4>测试2</h4> </body> </html>
3. 选择器的优先级
使用选择器为元素设置样式,发生样式冲突时,主要看选择器的权重,权重越大,优先级越高
| 选择器 | 权重 |
|---|---|
| 标签选择器 | 1 |
| (伪)类选择器 | 10 |
| id选择器 | 100 |
| 行内样式 | 1000 |
复杂选择器(后代,子代,伪类)最终的权重为各个选择器权重值之和
群组选择器权重以每个选择器单独的权重为准，不进行相加计算
例 :
/*群组选择器之间互相独立，不影响优先级*/
body,h1,p{ /*标签选择器权重为 1 */
color:red;
}
.c1 a{ /*当前组合选择器权重为 10+1 */
color:green;
}
#d1>.c2{ /*当前组合选择器权重为 100+10 */
color:blue;
}
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .c1{ color:blue; } #d1{ color:pink; } h1{ color:red; } h1{ color:green; } /*十六进制表示颜色,以#前缀,每两位为一组, 代表一种三原色(r,g,b),每位字符取值范围0~9,a~f ff:(255)*/ #d1{/*100*/ color:#997679; } div h1{/*1+1*/ color:red; } div .c1{/*1+10*/ color:green; } div #d1{/*1+100*/ /*#000000*/ color:#000; } </style> </head> <body> <div> <h1 id="d1" class="c1">小泽Maria</h1> </div> </body> </html>
五、标签分类及嵌套
独占一行,不与元素共行;可以手动设置宽高,默认宽度与与父元素保持一致
例 : body div h1~h6 p ul ol li form, table(默认尺寸由内容决定)
2. 行内元素
可以与其他元素共行显示;不能手动设置宽高,尺寸由内容决定
例 : span label b strong i s u sub sup a
3. 行内块元素
可以与其他元素共行显示,又能手动调整宽高
例 : img input button (表单控件)
行内块元素调整属性：vertical-align 可取top/middle/bottom */调整行内块元素的垂直对齐方式，默认为baseline（文本基线对齐）一般有文本和输入框或者图片时使用。
4. 嵌套原则
块元素中可以嵌套任意类型的元素
p元素除外,段落标签只能嵌套行内元素,不能嵌套块元素
行内元素中最好只嵌套行内或行内块元素
5.转换元素类型：
属性：display
取值:liline:(行内元素)、block（元素 ）、inline-block(行内块元素)、none（隐藏）
6. 尺寸与颜色原则
1、尺寸单位
px 默认使用像素
%默认参照父元素相应的属性值进行百分比计算
代码如下：
div{
width:600px;
height:300px;
background-color:red;}
h1{
width:50%;
height:50%;
background-color:pink;}
<body>
<div>
<h1>标签好</h1>
</div>
</body>
em参照父元素的字体大小计算（默认1em=16px）
rem 参照根元素的字体大小计算（默认1em=16px）
2、颜色取值
- 去颜色的英文单词； rgb（R,G，B）三原色设置，每种颜色取值范围0-255
- rgba（R,G，B，alpha）设置三原色及透明度，alpha取值0（透明度）~1（不透明）
-
将三原色的范围0-255转换16进制表示（00-ff）
-
长十六进制，每2位表示一组代表一种三原色。
#ff0000 red
- 短16进制，采用三位字符代表三原色，浏览器会自动对每一位进行重复，最终完善为长十六进制。
#0f0--》#00ff00
例：
black rgb（0,0,0）
white rgb（0,0,0）
red rgb（255,0,0）
rgb（R,G，B）
下拉选择器列表代码如下：使用ul，ol
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
ul,ol{
list-style:none;/*取消列表的项目符号*/
padding:0; /*清除默认的内边距，列表中有默认的项目符号padding占4px；需要去除*/
width:150px;
background-color:yellow;}
ol{
/*默认隐藏*/
display:none;}
/*设置内层列表显示*/
#set:hover ol{
display:block;
}
ol li:hover{
background-color:gray;
}
</style>
</head>
<body>
<div>
请选择城市:
<select name="city" >
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="nanjing">南京</option>
<option value="hangzou">杭州</option>
</select>
</div>
<div>
<ul>
<li id="set">设置
<ol>
<li>高级设置</li>
<li>高级设置</li>
<li>高级设置</li>
<li>高级设置</li>
</ol>
</li>
</ul>
</div>
</body>
</html>
注其中有属性：
dispaly:none 表示隐藏显示
diaplay:block 表示显示
作业：淘宝引擎
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#nav{
width:500px;
height:50px;
background-color:orange;
font-size:0; /*解决换行空隙问题*/
}
a{
display:inline-block;
text-decoration:none;
color:#fff;
width:100px;
height:50px;
font-size:16px; /*子继承父字体为0，需要重新设置字体大小可见*/
text-align:center; /*水平居中*/
line-height:50px; /*文本垂直居中调整行高，将行高调整为与元素高度一致*/
}
a:hover{background-color:pink;}
</style>
</head>
<body>
<!--导航栏-->
<div id="nav">
<a href="">首页</a>
<a href="">首页</a>
<a href="">首页</a>
<a href="">首页</a>
<a href="">首页</a>
</div>
</body>
</html>
ul{
200px;
background:orange;
/*设置水平居中*/
text-align:center;
/*设置鼠标的显示形状,取default(箭头),
pointer(手指),text(文本'I')*/
cursor:default;
}
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> table,form,span,b,a,input{ width:300px; height:300px; background:pink; } </style> </head> <body> <h1>标题</h1> <p>段落</p> <ul> <li>列表项</li> </ul> <table> <tr> <td>单元格</td> </tr> </table> <form action=""> 此处为表单 <input type="text"> </form> <div>容器标签</div> <span>span</span> <b>加粗</b> <a href="">超链接</a> <div> <div> <h1> <span></span> <button></button> </h1> </div> </div> <p> <h1>1.参照效果图实现表单练习</h1> <h1>2.实现下拉菜单的隐藏与显示 (display:none(隐藏)/block(显示))</h1> <h1>3.模拟横向导航栏(淘宝), 鼠标悬停时修改导航项文本色或背景色</h1> </p> </body> </html>
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <form action="/login" method="get" enctype=""> <h1>增加管理员</h1> <table> <tr> <td>姓名:</td> <td> <input type="text" name="uname" value="" placeholder="" maxlength="10"> </td> <td>十个字符以内</td> </tr> <tr> <td>密码:</td> <td> <input type="password" name="upwd" value="" placeholder="" maxlength="10"> </td> <td>十个字符以内</td> </tr> <tr> <td>性别:</td> <td colspan="2"> <input type="radio" name="gender" value="man">男士 <input type="radio" name="gender" value="woman">女士 </td> </tr> <tr> <td>角色:</td> <td> <input type="checkbox" name="role" value="superAdmin" checked>超级管理员 <br> <input type="checkbox" name="role" value="billAdmin">账单管理员 </td> <td>至少选择一个角色</td> </tr> <tr> <td>头像:</td> <td> <input type="file" name="uimg"> </td> <td></td> </tr> <tr> <td></td> <td> <input type="button" value="保存"> <input type="reset" value="重填"> </td> <td></td> </tr> </table> </form> </body> </html>
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> ul,ol{ /*取消默认内边距*/ padding:0; /*取消列表的项目符号*/ list-style:none; } ul{ width:200px; background:orange; /*设置水平居中*/ text-align:center; /*设置鼠标的显示形状,取default(箭头), pointer(手指),text(文本'I')*/ cursor:default; } ol{ /*默认隐藏*/ display:none; } .address:hover ol{ /*设置显示*/ display:block; } ol li:hover{ background:pink; } </style> </head> <body> <ul> <li class="address"> 北京 <ol> <li>北京</li> <li>上海</li> <li>张家口</li> <li>深圳</li> </ol> </li> </ul> </body> </html>
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> #nav{ width:500px; height:50px; background:orange; color:#fff; /*处理水平方向上由于换行导致的空隙, 子元素需要手动设置可见大小*/ font-size:0px; } a{ font-size:24px; color:#fff; text-decoration:none; /*转换元素类型,按照指定元素类型显示 display取值:block(块元素)/inline(行内元素)/ inline-block(行内块元素)/none(隐藏) */ display:inline-block; width:100px; height:50px; text-align:center; /*一行文本在当前行中永远垂直居中, 可以设置行高与元素高度一致, 实现一行文本的垂直居中效果*/ line-height:50px; } a:hover{ background:green; } </style> </head> <body> <!--导航栏整体尺寸为500*50,包含五个导航项--> <div id="nav"> <!-- 文本属性可以被继承,但是超链接的文本颜色需要单独设置, 表单控件的文本样式也需要单独设置 <span>测试</span> <input type="text"> --> <!--代码中的换行会被解析为一个空格字符,影响布局--> <a href="">天猫</a><a href="">天猫</a> <a href="">天猫</a> <a href="">天猫</a> <a href="">天猫</a> </div> <div id="main"></div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #nav{ width:500px; height:50px; background-color:orange; color:#fff; /*处理水平方向上换行导致的空格问题，但a继承父也为0，需要从新设置子元素*/ font-size:0; } a{ font-size:24px; /*因父元素设置为0继承，需要重新设置字体大小*/ color:white; text-decoration:none; /*去除下划线*/ display:inline-block; /*a标签行内元素，不能调整宽高，变成行内块元素调整*/ width:100px; height:50px; background-color:green; line-height:50px; text-align:center; } a:hover{ background:blue;} </style> <script> </script> </head> <body> <div id="nav"> <a href="">天猫1</a> <a href="">天猫2</a> <a href="">天猫3</a> <a href="">天猫4</a> <a href="">天猫5</a> </div> <div id="main"></div> </body> </html>
一、尺寸与颜色单位
1. 尺寸单位
-
px 像素单位
-
% 百分比，参照父元素对应属性的值进行计算
-
em 字体尺寸单位，参照父元素的字体大小计算，1em=16px
-
rem字体尺寸单位,参照根元素的字体大小计算，1rem=16px
2. 颜色单位
-
英文单词：red，green，blue
-
rgb(r,g,b) 使用三原色表示，每种颜色取值0~255
-
rgba(r,g,b,alpha) 三原色每种取值0~255，alpha取值0（透明）~1（不透明）
-
十六进制表示：以#为前缀，分为长十六进制和短十六进制。
- 长十六进制：每两位为一组，代表一种三原色；每位的取值范围0~9，a~f
例：red rgb(255,0,0) #ff0000
- 短十六进制：由3位组成，每一位代表一种三原色，浏览器会自动对每一位进行重复扩充，仍然按照长十六进制解析
例：#000 #fff #f00
2. CSS 盒模型
1. 内容尺寸
-
一般情况下，为元素设置width/height，指定的是内容框的大小
-
内容溢出：内容超出元素的尺寸范围，称为溢出。默认情况下溢出部分仍然可见，可以使用overflow调整溢出部分的显示,取值如下：
overflow：visible 默认值，溢出部分可见
overflow：hidden 溢出部分隐藏 ,容易显示下一行字体的一半，解决布局问题可以使用
overflow：scroll 强制在水平和垂直方向添加滚动条
overflow：auto 自动在溢出方向添加可用滚动条
View Code
2. 边框
1. 边框实现
1、盒模型包含内容区域，padding（内边距），border（边框），margin（外边距），关系元素在文档中的实际占位，影响排版布局
2、内容区域，使用width/height属性设置（按钮元素除外）
3、边框设置
边框实现
border:width style color; 其中style必填项
#d1{ border:5px solid red;}
边框样式为必填项，分为：
| 样式取值 | 含义 |
| solid | 实线边框 |
| dashed | 虚线边框 |
| dotted | 点线边框 |
| double | 双线边框 |
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
h1{
/*
300px; 文本内容宽高
height:200px;} */
width:0;
height:0;}
#d1{
border-top:250px solid red;
border-right:250px solid transparent;
border-bottom:250px solid transparent; 边框样式必填
border-left:250px solid transparent;}
#d2{
border:5px dashed green;}
#d3{
border:5px dotted yellow;}
#d4{
border:double;}
#d5{
border:solid;}
</style>
</head>
<body>
<h1 id="d1"></h1>
<h1 id="d2"></h1>
<h1 id="d3"></h1>
<h1 id="d4"></h1>
<h1 id="d5"></h1>
</body>
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> h1{ width:300px; height:100px; background:pink; } #d1{ border:solid; } #d2{ border:5px solid red; } #d3{ border:5px dotted green; } #d4{ border:5px dashed blue; } #d5{ border:5px double gray; } div{ width:0px; height:0px; /* border-top:10px solid red; border-right:10px solid rgba(0,0,0,0); border-bottom:10px solid transparent; border-left:10px solid transparent; */ border:10px solid transparent; border-top:10px solid red; } span{ /* display:inline-block; 0; height:0; */ /*行内元素默认不能手动调宽高,空标签默认宽度为0, 默认高度与字体大小有关,可以设置字体大小为0实现高度为 0的效果*/ font-size:0; border-top:10px solid red; border-right:10px solid green; border-bottom:10px solid blue; border-left:10px solid gray; } </style> </head> <body> <div></div> <span></span> <h1 id="d1"></h1> <h1 id="d2"></h1> <h1 id="d3"></h1> <h1 id="d4"></h1> <h1 id="d5"></h1> </body> </html>
2. 单边框设置
分别设置某一方向的边框，取值：width style color;
| 属性 | 作用 |
| border-top | 设置上边框 |
| border-right | 设置右边框 |
| border-bottom | 设置下边框 |
| border-left | 设置左边框 |
3. 网页三角标制作
元素设置宽高为0
分别添加四个方向的边框，保留一个可见色，其他为透明色
三角形的大小可通过边框宽度调整
通常使用文本标签来做辅助的效果。
块元素自带默认的宽度，行内标签自带默认的高度
设置矩形边框
h1{
/*
300px;
height:200px;} */
width:0;
height:0;}
#d1{
border-top:250px solid red;
border-right:250px solid transparent;
border-bottom:250px solid transparent;
border-left:250px solid transparent;}
图像呈现一个三角形，使用了透明transparent;统一设置四个方向透明边框
获取一个三角形图标代码如下图所示
#d1{
border-top:250px solid red;
border-right:250px solid transparent; 其中transparent为透明
border-bottom:250px solid transparent;
border-left:250px solid transparent;}
调整某个方向边框可见色，一般文本和三角标并行并行 :
span{
border:25px solid transparent;
border-top:25px solid green;
}
4. 圆角边框
属性：border-radius 指定圆角半径
取值：像素值或百分比
取值范围：
1.统一设置四个角的圆角半径，最大取50%(超过50%,仍然显示50%的效果，过大图像变样)
2.单独设置每个角的圆角半径可以取0%-100%。一般取高度的一半作为圆弧半径，设置像素值。例如：淘宝搜索框。
h1{
background-color:blue;
border-radius:50%;}
取值规律：
一个值 表示统一设置上右下左
div{
background-color:red;
/*一个值，左上角开始为起点*/
border-radius:20px }
四个值 表示分别设置上右下左，顺时针描述，以左上角为起点。
代码
div{ background-color:red;
/*按照上右下左顺序分别设置，左上角开始为起点，表示上*/
border-radius:20px 30px 40px 50px;}
两个值 表示分别设置上下 左右
div{
background-color:red;
/*按照上右下左顺序分别设置，左上角开始为起点*/
border-radius:20px 50px;}
三个值 表示分别设置上右下，（左右）保持一致
代码
div{
background-color:red;
/*按照上右下左顺序分别设置，左上角开始为起点*/
border-radius:20px 30px 50px;}
扩充内容：过度属性：在元素切换时添加平滑效果 代码：transition:3s
注意：书写位置不同，效果不同，书写在默认属性中，有往返效果。写在hover内只有鼠标进入时有效果，移除时没有效果。
div:hover{
border-radius:50px;
/*过度属性：在元素切换时添加平滑效果*/
transition:3s;}
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> div{ width:300px; height:50px; background:orange; /*上 右 下 左*/ /*border-radius:10px 20px 30px;*/ /*百分比表示参照元素自身尺寸, 分别计算横轴半径和纵轴半径, 统一设置四个角的圆角半径时,最多取到50%, 改变元素形状*/ /*border-radius:50%;*/ border-radius:25px; } /*创建h1,设置尺寸为200*200,自定义背景颜色, 鼠标悬停时修改背景颜色并且显示为圆形*/ h1{ width:200px; height:200px; background:green; /*过渡属性:在元素两种状态切换时添加平滑过渡效果*/ transition:3s; } h1:hover{ border-radius:50%; background:red; } </style> </head> <body> <div></div> <h1></h1> </body> </html>
5. 轮廓线
属性：outline
取值：width style color
区别：边框实际占位，轮廓不占位
#d2{
outline:green solid 5px;}
特殊：文本输入框在编辑状态自带轮廓线，取消可以设置outline：none
按照width style color顺序书写，写反则显示不出。
input:focus{outline:none}取消轮廓线
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> div,h1{ width:300px; height:50px; background:pink; } div{ border:5px solid red; } h1{ outline:5px solid green; } input:focus{ /*取消表单控件焦点状态下默认轮廓线*/ outline:none; } h2{ width:300px; height:100px; background:orange; box-shadow:0px 0px 0px; } </style> </head> <body> <div></div> <h1></h1> <input type="text"> <h2></h2> </body> </html>
6. 盒阴影
属性：box-shadow
取值：offsetX offsetY blur (spread) color;
注：以坐标点为中心，向右为正方向，向下为正方向，负号则反方向。
<style>
div{
width:300px;
height:200px;
border:1px solid red;
box-shadow:10px 10px 10px blue}
</style>
使用：
不管是浏览器窗口还是元素自身都可以构建坐标系，统一以左上角为原点，向右向下为X轴和Y轴的正方向
offsetX 取像素值，阴影的水平偏移距离，正值向右，负值向左
offsetY 取像素值，阴影的垂直偏移距离，正值向下，负值向上
blur 取像素值，表示阴影的模糊程度，值越大越模糊
spread 选填，取像素值，阴影是否需要延伸，选择使用一般不超过20
color 设置阴影颜色,默认为黑色
box-shadow:10px 10px 10px blue}
坐标系:不管是元素还是窗口都可以构建坐标系，一律以左上角为原点（0,0），向右向下为x轴和y轴正方向 ，延伸扩展一般不超过20px,阴影分内阴影和外阴影。
3. 内边距
属性：padding
作用：调整元素内容框与边框之间的距离
取值：
20px; 一个值表示统一设置上右下左
20px 30px; 两个值表示分别设置(上下) (左右)
20px 30px 40px; 三个值表示分别设置上右下，左右保持一致
20px 30px 40px 50px; 表示分别设置上右下左
单方向内边距,只能取一个值：
padding-top
padding-right
padding-bottom
padding-left
行内元素对盒模型属性不完全支持,不能设置宽高,不支持上下内边距
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> div{ width:200px; height:200px; border:1px solid orange; /*padding:10px 50px 60px;*/ padding-top:20px; padding-left:50px; } h1{ width:200px; height:200px; background:pink; padding:50px; } span{ width:200px; height:200px; border:1px solid blue; /*行内元素对盒模型属性不完全支持, 不能设置宽高,不支持上下内边距*/ padding:0 50px; } </style> </head> <body> <div>老祁真帅</div> <h1>小泽真稳重</h1> <span>老王</span> </body> </html>
4. 外边距
属性：margin
作用：调整元素与元素之间的距离
特殊：
1）margin:0; 取消默认外边距
50px：一个值统一设置四个方向的外边距
20px 50px：上下20px，左右50px的外边距
20px 30px 40px：分别设置上，下，（左右）保持一致
20px 30px 40px 50px：分别设置四个方向的外边距
```
body{
margin:0}
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> div{ width:200px; height:200px; background:red; } #d1{ /*100%;*/ background:green; /*margin:0 auto;*/ border:1px solid blue; padding:50px; margin:50px; } b,span{ background:green; /*行内元素不支持上下边距*/ margin:50px; } b{ margin-right:-5px; } </style> </head> <body> <div id="d1"></div> <div></div> <b>加粗</b> <span>span</span> 作业2:完善横向导航栏,模块500*50,实现整体居中, 内部导航项之间添加10像素外边距 作业1:参照百度搜索栏,创建输入框(500*50)和按钮(150*50) </body> </html>
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> #nav,#search{ width:650px; margin:0 auto; } #nav{ margin-bottom:50px; height:30px; background:gray; font-size:0; } a{ display:inline-block; text-decoration:none; color:#fff; width:122px; height:30px; font-size:20px; background:green; /*调边距,行内块元素完全支持盒模型属性*/ /*margin:5px 10px;*/ margin-right:10px; text-align:center; line-height:30px; } .no-margin{ margin:0; } #search{ height:200px; background:gray; } input{ width:500px; height:50px; /*调整盒模型的计算方式,取值为border-box时,表示 当前元素指定的width/height是包含边框在内区域的尺寸*/ box-sizing:border-box; border:1px solid red; padding:5px 10px; } button{ border:none; /*水平方向上元素之间的垂直对齐方式,可取: top/middle/bottom */ vertical-align:middle; width:150px; height:50px; } </style> </head> <body> <!--导航栏--> <div id="nav"> <a href="">首页</a> <a href="">导航</a> <a href="">天猫</a> <a href="">天猫</a> <a href="" class="no-margin">天猫</a> </div> <!--搜索栏--> <div id="search"> form <input type="text"><button>全网搜</button> </div> </body> </html>
2）margin:0 auto;左右自动外边距，实现元素在父元素范围内水平居中，如果子元素和父元素外边距相等则水平居中无效，只有父元素的padding大于子元素的padding才显示居中。
注意：不支持垂直方向居中，只支持水平方向。
3）margin:-10px;元素位置的微调
margin: 0 0 0 -5px;
1. 单方向外边距：只取一个值
margin-top
margin-right
margin-bottom
margin-left
1. 外边距合并：
1）垂直方向
1. 子元素的margin-top作用于父元素上，使父元素位置发生变化。
解决：
1、为父元素添加顶部透明边框transparent；
2、或为父元素设置padding-top:0.1px ;
2. 元素之间同时设置垂直方向的外边距（2个元素的间距），最终取较大的值显示。
2）水平方向
块元素对盒模型相关属性（width,height,padding,border,margin）完全支持;
行内元素对盒模型相关属性不完全支持，不支持width/height,不支持上下边距
行内元素水平方向上的外边距会叠加显示
带有默认边距的元素（带有默认的上下外边距）：
body,h1,h2,h3,h4,h5,h6,p,ul,ol{
margin:0;
padding:0;
list-style:none;
}
5. 元素最终尺寸的计算
盒模型相关的属性会影响元素在文档中的实际占位，进而影响布局
属性：box-sizing
取值：content-box/border-box
1）标准盒模型计算：各个属性值累加得到最终尺寸
box-sizing:content-box;
元素设置width/height指定的是内容框的大小
最终尺寸 = width/height+padding+border+margin
2）特殊盒模型计算（按钮元素）：
box-sizing:border-box;
元素设置width/height指定的是包含边框在内的区域大小
最终尺寸 = width/height+margin
作业：
在横向导航栏的基础上，调整导航项的边距
1. 整体导航栏水平居中
2. 导航项之间10px的外边距
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> #nav,#search{ width:650px; margin:0 auto; } #nav{ margin-bottom:50px; height:30px; background:gray; font-size:0; } a{ display:inline-block; text-decoration:none; color:#fff; width:122px; height:30px; font-size:20px; background:green; /*调边距,行内块元素完全支持盒模型属性*/ /*margin:5px 10px;*/ margin-right:10px; text-align:center; line-height:30px; } .no-margin{ margin:0; } #search{ height:200px; background:gray; } input{ width:500px; height:50px; /*调整盒模型的计算方式,取值为border-box时,表示 当前元素指定的width/height是包含边框在内区域的尺寸*/ box-sizing:border-box; border:1px solid red; /*给出指定内容可让浏览器自动计算*/ padding:5px 10px; /*给出指定内容可让浏览器自动计算*/ } button{ border:none; /*水平方向上元素之间的垂直对齐方式,可取: top/middle/bottom */ vertical-align:middle; width:150px; height:50px; } </style> </head> <body> <!--导航栏--> <div id="nav"> <a href="">首页</a> <a href="">导航</a> <a href="">天猫</a> <a href="">天猫</a> <a href="" class="no-margin">天猫</a> </div> <!--搜索栏--> <div id="search"> form <input type="text"><button>全网搜</button> </div> </body> </html>
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> body{ margin:0; /*border-top:1px solid blue;*/ padding-top:0.1px; } div{ width:200px; height:200px; background:red; margin-top:100px; margin-bottom:200px; } h1{ width:200px; height:200px; background:green; margin-top:100px; } b,span{ background:blue; /*行内元素不支持垂直边距,水平方向上外边距会 叠加显示*/ margin:10px 50px; } body,h1,h2,h3,h4,h5,h6,p,ul,ol{ /*取消默认样式*/ margin:0; padding:0; list-style:none; } </style> </head> <body> <!--第一个子元素的margin-top作用于父元素上 解决: 方式1.父元素添加顶部边框 方式2.父元素添加padding-top:0.1px; --> <div></div> <!--同时设置垂直方向上的边距,取最大值--> <h1></h1> <b>加粗</b> <span>span文本</span> <h2></h2> <p></p> <ul></ul> <form action=""></form> </body> </html>
一、布局方式
默认布局方式,按照代码书写顺序及标签类型从上到下,从左到右依次显示
主要用于设置块元素的水平排列
1）属性
float
2）取值
可取left或right，设置元素向左浮动或向右浮动
float:left/right;
3）特点
元素设置浮动会从原始位置脱流,向左或向右依次停靠在其他元素边缘,在文档中不再占位
元素设置浮动,就具有块元素的特征,可以手动调整宽高，不论任何元素（包含块元素，span元素等）
"文字环绕":浮动元素遮挡正常元素的位置,无法遮挡正常内容的显示,内容围绕在浮动元素周围显示;行内元素直接围绕浮动标签显示；
如果浮动元素的高度不一致，则浮动元素靠近相邻的元素位置，位置不够往下移动。
4）常见问题
子元素全部设置浮动,导致父元素高度为0,影响父元素背景色和背景图片展示,影响页面布局
5）解决
对于内容固定的元素,如果子元素都浮动,可以给父元素固定高度(例:导航栏)
在父元素的末尾添加空的块元素。设置clear:both;清除浮动造成的影响。即在正常元素内添加。clear:取值left/right/both;
为父元素设置overflow:hidden;解决高度为0
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> #nav{ width:900px; height:30px; background:gray; } .left{ width:300px; float:left; background:green; } .right{ width:300px; float:right; background:red; } ul{ margin:0; padding:0; list-style:none; } li{ float:left; margin-right:30px; } #main{ margin-top:50px; width:900px; /*解决子元素全部浮动造成父元素高度为0的问题*/ /*height:400px;*/ /*overflow:auto;*/ background:pink; } .item1{ width:580px; height:400px; background:gray; float:left; } .item2,.item3{ float:right; width:300px; height:190px; background:gray; } .item2{ margin-bottom:20px; } #d1,#d2{ width:200px; height:200px; background:red; } #d1{ background:green; float:left; } #d2{ /*使文档中正常元素不受前面浮动元素的影响 clear:left/right/both; */ clear:left; } .clear{ clear:both; } </style> </head> <body> <div id="nav"> <div class="left"> <ul> <li>首页</li> <li>物流</li> <li>客服</li> </ul> </div> <div class="right">右侧导航</div> </div> <div id="main"> <div class="item1">1</div> <div class="item2">2</div> <div class="item3">3</div> <div class="clear"></div> </div> <div> 联系我们 <div id="d1"></div> <div id="d2"></div> </div> </body> </html>
3. 定位布局
结合偏移属性调整元素的显示位置
1）属性
position
2） 取值
可取relative（相对定位）/absolute（绝对定位）/fixed（固定定位）
postion:relative/absolute/fixed
3）偏移属性
设置定位的元素可以使用偏移属性调整距离参照物的位置
top 距参照物的顶部
right 距参照物的右侧
bottom 距参照物的底部
left 距参照物的左侧
4）分类
relative 相对定位
元素设置相对定位,可参照元素在文档中的原始位置进行偏移,不会脱离文档流
代码：
#d1{
background-color:green;
/*相对位置,调整*/
position:relative;
top:100px;
right:100px;
}
absolute 绝对定位
1. 绝对定位的元素参照离他最近的已经定位的祖先元素进行偏移,如果没有,则参照窗口（html）进行偏移
2. 绝对定位的元素会脱流,在文档中不占位,可以手动设置宽高
使用绝对定位 :
"父相子绝" : 父元素设置相对定位,子元素绝对定位，参照已定位的父元素偏移.
+ fixed 固定定位
1. 参照窗口进行定位,不跟随网页滚动而滚动
2. 脱离文档流，参照窗口进行偏移
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> #main{ height:1500px; background:pink; } #chat{ width:300px; height:300px; background:orange; /*固定定位:脱离文档流,参照窗口进行偏移;不跟随 页面滚动而滚动*/ position:fixed; right:0; bottom:0; } </style> </head> <body> <div id="main"> </div> <div id="chat"></div> </body> </html>
#chat{
width:300px;
height:300px;
background:blue;
position:fixed;
right:0;
bottom:0;
}
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> #banner{ width:300px; height:250px; position:relative; } a{ color:#fff; background:orange; position:absolute; width:100px; height:30px; right:10px; /*根据参照物对应方向的值计算偏移量 (250*50%)*/ top:50%; /*通过外边距微调元素的位置*/ margin-top:-15px; } </style> </head> <body> <div id="banner"> <img src="northStar.jpg" alt=""> <a href="">下一张</a> </div> </body> </html>
5）堆叠次序
元素发生堆叠时可以使用 z-index 属性调整已定位元素的显示位置，值越大元素越靠上：只有定位元素能使用偏移属性调整位置；
+ 属性 : z-index
+ 取值 : 无单位的数值,数值越大,越靠上
堆叠：
定位元素与文档中正常元素发生堆叠，永远是已定位元素在上
同为已定位元素发生堆叠，按照 HTML 代码的标签的书写顺序，后来者居上 与css无关。
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> div{ width:200px; height:200px; background:red; } #d1{ background:green; position:relative; z-index:1; /*只有定位元素才能使用偏移属性调位置*/ /* top:100px; left:100px; */ } #d2{ position:relative; left:100px; bottom:-100px; } #d2:hover{ /*调整堆叠次序.属性:z-index 取值为无单位的整数,值越大越靠上;只有定位元素能够 使用z-index属性调整次序*/ z-index:10; } </style> </head> <body> <!--正常元素与定位元素发生堆叠,永远是定位元素在上方显示--> <!--同为定位元素发生堆叠,根据标签书写顺序,后来者居上--> <div id="d2"></div> <div id="d1"></div> <h1> 实现网页: 上方为导航栏(包含若干导航项,包含下拉菜单) 下方为轮播图区域(包含图片,图片索引,左右按钮) </h1> </body> </html>
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> /*清除浏览器默认样式*/ body,ul,ol{ margin:0; padding:0; /*取消列表默认样式(项目符号)*/ list-style:none; } body{ color:#ddd; } a{ text-decoration:none; color:#ddd; } /*外围结构的样式*/ #nav,#banner{ width:990px; margin:0 auto; } /*单独设置每个模块的样式*/ /*1.导航栏*/ #nav{ background: green; height:30px; } /*匹配ul中的直接子元素li*/ #nav ul>li{ float:left; margin-left:50px; line-height:30px; } #nav ul>li:first-child{ position:relative; } #nav ol{ display:none; position:absolute; z-index:10; } /*子元素过滤选择器, li:first-child匹配作为第一个子元素存在的li */ #nav ul>li:first-child:hover ol{ background:red; display:block; } #nav ol li:hover{ background:orange; } /*2.轮播图*/ #banner{ /*margin-top:30px;*/ margin:30px auto; height:300px; position:relative; } #banner>img{ width:990px; height:300px; } #banner ul{ width:140px; position:absolute; bottom:20px; /*参照父元素的宽度计算偏移量*/ left:50%; margin-left:-70px; background:green; } #banner li{ float:left; width:20px; height:20px; background:red; border-radius:50%; margin-left:10px; } #banner ul>li:first-child{ margin:0; } #banner a{ /*元素脱流之后,可以手动调整尺寸,默认大小由内容决定*/ position:absolute; width:60px; height:30px; background:orange; top:50%; margin-top:-15px; } .prev{ left:10px; } .next{ right:10px; } </style> </head> <body> <div id="nav"> <ul> <li> 北京 <ol> <li>北京</li> <li>上海</li> <li>广州</li> <li>深圳</li> </ol> </li> <li>订单查询</li> <li>配送范围</li> </ul> </div> <div id="banner"> <img src="wxy.jpeg" alt=""> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> <!--阻止超链接默认的跳转行为 href="javascript:void(0)" 才能添加自定义点击事件--> <a href="javascript:void(0)" class="prev">上一张</a> <a href="javascript:void(0)" class="next">下一张</a> </div> </body> </html>
二、背景属性
1. 背景颜色
background-color: red;
2. 背景图片相关
1） 设置背景图片
background-image : url("路径");
background-image:url(wxy.jpg)
设置背景图片，指定图片路径，如果路径中出现中文或空格，需要加引号
2） 设置背景图片的重复方式
默认背景图片从元素的左上角显示，如果图片尺寸与元素尺寸不匹配时，会出现以下情况：
1. 如果元素尺寸大于图片尺寸，会自动重复平铺，直至铺满整个元素
2. 如果元素尺寸小于图片尺寸，图片默认从元素左上角开始显示，超出部分不可见
background-repeat:repeat/repeat-x/repeat-y/no-repeat
取值 ：
repeat 默认值，沿水平和垂直方向重复平铺
repeat-x 沿X轴重复平铺
repeat-y 沿Y轴重复平铺
no-repeat 不重复平铺
3） 设置背景图片的显示位置
默认显示在元素左上角
background-position:x y;
取值方式 ：
1. 像素值
设置背景图片的在元素坐标系中的起点坐标(0,0)
2. 方位值
水平 ：left/center/right
垂直 ：top/center/bottom
注：如果只设置某一个方向的方位值，另外一个方向默认为center
3. 百分比
类似于方位值，根据百分比计算背景图片的显示坐标。
计算方式：
横坐标 = (元素宽度 - 背景图片宽度）* x%
纵坐标 = (元素高度 - 背景图片高度) * y %
特殊值：
0% 0% 左上角
100% 100% 右下
50% 50% 居中显示
精灵图技术 ：为了减少网络请求，可以将所有的小图标拼接在一张图片上，一次网络请求全部得到；借助于background-position进行背景图片位置的调整，实现显示不同的图标
div:hover{ background-position:-130px -10px;}
4）设置背景图片的尺寸
background-size:width height;
取值方式 ：
1. 像素值
1. 500px 500px; 同时指定宽高
2. 500px; 指定宽度，高度自适应
2. 百分比
百分比参照元素的尺寸进行计算
1. 50% 50%; 根据元素宽高,分别计算图片的宽高
2. 50%; 根据元素宽度计算图片宽高,图片高度等比例缩放
3、 cover将图片等比例拉伸足够大，完全覆盖元素，超出部分不可见
contain：将图片拉伸至刚好被元素容纳。
background-size：cover
3. 背景属性简写
background:color url("") repeat position;
h2{
width:200px;
height:200px;
background:red url(mm.jpg) no-repeat center;}
注意 ：
1. 如果需要同时设置以上属性值，遵照相应顺序书写
2. background-size 单独设置
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> div,h1{ width:100px; height:100px; margin:200px auto; background-color:pink; background-image:url(wxy.jpeg); background-repeat:no-repeat; /*background-position:-100px -100px;*/ /*background-position:right bottom;*/ /*background-position:10% 10%;*/ } div:hover{ background-position:-130px -10px; } h1{ width:500px; height:500px; margin:0 auto; /* background-size特殊取值: cover将图片等比拉伸至足够大,完全覆盖元素,超出部分不可见 contain将图片拉伸至刚好被元素容纳 */ background-size:cover; } h2{ width:500px; height:500px; background:cyan url(wxy.jpeg) no-repeat center; font:italic 400 32px youyuan; } </style> </head> <body> <h2>字体样式展示</h2> <h1></h1> <div></div> </body> </html>
三、文本属性
1. 字体相关
1） 设置字体大小
font-size:20px;
2）设置字体粗细程度
font-weight:normal;
取值 ：
1. normal（默认值）等价于400
2. bold (加粗) 等价于700
3）设置斜体
font-style:italic;
4） 设置字体名称
font-family:Arial,"黑体";
取值 :
1. 可以指定多个字体名称作为备选字体,使用逗号隔开
2. 如果字体名称为中文,或者名称中出现了空格,必须使用引号
例 :
font-family:Arial;
font-family:"黑体","Microsoft YaHei",Arial;
5）字体属性简写
font : style weight size family;
注意 :
1. 如果四个属性值都必须设置,严格按照顺序书写
2. size family 是必填项
2. 文本样式
1）文本颜色
color:red;
2） 文本装饰线
text-decoration:none;
取值 :
underline 下划线
overline 上划线
line-through 删除线
none 取消装饰线
3）文本内容的水平对齐方式
text-align:center;
取值 :
left(默认值) 左对齐
center 居中对齐
right 右对齐
justify 两端对齐
4）行高
line-height:30px;
使用 :
文本在当前行中永远垂直居中,可以借助行高调整文本在元素中的垂直显示位置
line-height = height 设置一行文本在元素中垂直居中
line-height > height 文本下移显示
line-height < height 文本靠上显示
特殊 :
line-height可以采用无单位的数值,代表当前字体大小的倍数,以此计算行高
5） font属性简写2
font : size/line-height family;
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> p{ font-size:32px; font-weight:bold; /*font-style:italic;*/ font-family:"黑体","宋体"; color:blue; /*text-decoration:overline;*/ width:200px; height:200px; background:orange; text-align:justify; /*根据字体大小计算行高*/ line-height:2; } span{ font:italic 700 32px/2 "黑体","宋体"; background:red; } </style> </head> <body> <h1>小泽老师</h1> <p>隔壁老王hello隔壁老text-decoration王隔壁老王</p> <span>王老师最帅</span> </body> </html>
<div style="400px;height:80px; position:relative" > <input type="text" style="370px;height:80px;padding-right:30px;"> <span style="background-image:url('用户名1.jpg');85px;height:70px;display:inline-block; radius:50%;position:absolute;right:0;top:10px;" ></span> </div> 利用：padding-right,position:relative，absolute