边框属性的使用
1.组成边框的样式
- 边框宽度 border-width
- 边框样式 border-style
- 边框颜色 border-color
2.边框属性的属性值
- 边框宽度:数值加单位(px)
- 边框样式:solid(实线) dashed(虚线) dotted(点线) double(双实线)
- 边框颜色
- 英文单词:yellow、green、red...
- 十六进制:
- 以#开头,后面接六个字符(0~9a~f) #1234ab
- 当后面的六个字符相等的时候可以简写成3个
- #778899(#789) #000 #fff #ccc
3.边框属性的简写方式
- 属性:border
- 属性值:border-width border-style border-color
4.通过需求拓展边框其他属性的用法
- 改变顶部边框的颜色:border-top-color
- 改变右侧所有的样式:border-right
- 清除标签的自带边框:border:none/0
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div{
width: 200px;
height: 200px;
/* border-width: 2px;
border-style: double;
border-color: pink */
border: 5px solid #000;
border-top-color: green;
border-right: 2px dashed red
}
</style>
</head>
<body>
<div></div>
</body>
</html>效果图：
利用边框属性绘制三角形： （经常被用于前端面试题）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
html{
background-color: pink
}
div{
width: 0;
height: 0;
border: 100px solid #000;
border-top-color: transparent;/* 透明 */
border-right-color: red;
border-bottom-color: transparent;
border-left-color: transparent;
}
</style>
</head>
<body>
<div></div>
</body>
</html>效果图如下：
盒模型属性的总结
1.概念:设置元素之间的间距
2.组成部分:content、padding、border、margin
3.盒模型的分类
- 标准盒模型
- 盒子自身的大小:content+paddinng+border
- 盒子真实的大小:content+paddinng+border+margin
- 怪异盒模型
- 盒子自身的大小:content(paddinng+border)
- 盒子真实的大小:content(paddinng+border)+margin
4.如何形成怪异盒模型(IE)
- 属性:box-sizing
- 属性值:content-box(标准)/border-box(怪异)
- 特点:padding和border都是长在盒子内部的并且不会撑大盒子的宽高大小
文本大小的设置
1.属性:font-size
2.属性值:数值加单位(网页中常用的单位像素px)
- 在浏览器中默认的字体大小是16px
- 由于浏览器存在差异,官方规定最小的字体只能是12px
- 除了px单位还有很多其他可用单位
- pt、em、rem、%、deg、vw、vh、vamx、vmin、rpx
- em:相对单位,相对有父级元素计算 常用于首行缩进
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div{
font-size: 2em /* 2*16 */
}
span{
font-size: 32px;
}
</style>
</head>
<body>
<span>今天是个好日子!</span>
<div>
今天是个好日子!
</div>
</body>
</html>效果图如下：
字体类型属性
1.属性:font-family
2.属性值
- 在浏览器中默认的字体类型是微软雅黑(商用收费),win系统默认的是宋体/新宋体
- 中文属性值:建议加引号(双/单)
- 英文属性值:当属性值只有一个英文单词的时候可以省略引号,有多个必须添加引号
- 在使用设置的字体时候需要在本地中有下载字体包
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div{
font-family:'Times New Roman', Times, serif,"微软雅黑"
/* 汽车备胎: 字体1,字体2*/
}
</style>
</head>
<body>
今天是周五了,明天我放假
<div>今天是周五了,明天我放假</div>
</body>
</html>效果图如下：
加粗和倾斜的属性
一.加粗属性
1.属性:font-weight
2.属性值
- 设置100~900之间的整百数(100~500表示正常字体,600~900表示加粗字体)
- bold/bolder 加粗的/更粗的
- 重要:normal 清除默认的加粗样式
二:倾斜属性
1.属性:font-style
2.属性值
- italic(斜体字)
- oblique(倾斜的文字)
- 重要:normal 清除默认的倾斜样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div{
font-weight: bolder;
font-style: oblique
}
b,strong{
font-weight: normal
}
i,em{
font-style: normal
}
</style>
</head>
<body>
<b>这是一段加粗的文本内容</b> <strong>这是一段加粗的文本内容</strong>
<div>这是一段正常的文本内容</div>
<i>这是一段倾斜的文本内容</i> <em>这是一段倾斜的文本内容</em>
</body>
</html>效果图如下：
行高的属性使用
一:垂直方向对齐方式
1.属性:line-height
2.解释:基线,多行文本之间从第一行顶部到第二行顶部的间距
3.重点:设置行高和容器高度一样的时候,单行文本就会在垂直方向居中显示
二:水平方向对齐
1.属性:text-align
2.属性值
- left、right、center
- justify 两端对齐
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div{
width: 410px;
height: 80px;
border: 1px solid #000;
line-height: 80px;
}
</style>
</head>
<body>
<div>
欢迎XXX老板光临洗脚城
</div>
</body>
</html>效果图如下：
复合属性写法
1.属性:font
2.属性值:font-weight font-style font-size/line-height font-family
- font-weight font-style 没有需求可以不写并且位置可以互换
- font-size/line-height 不可以换位置
- font-family无论是否有需求都必须写
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div{
width: 100px;
height: 50px;
border: 1px solid #000;
/* font-size: 20px;
font-weight: bold;
font-style: oblique;
line-height: 50px;
font-family: 楷体; */
text-align: center;
font:20px/50px "微软雅黑"
}
</style>
</head>
<body>
<div>
文本
</div>
</body>
</html>效果图如下：
字体颜色及其他属性
一:字体颜色
1.属性:color(不要写成font-color)
2.属性值:
- 英文单词、十六进制
- rgb/rgba(red,green,blue,alpha) 透明度0~1
- 十六进制透明度 #00000099 取值10~99
- opacity 0~1
二:文本修饰属性
1.属性:text-decoration
2.属性值
- underline 下划线
- overline 上划线
- line-through 删除线 del、s
- 重要:none 清除默认的下划线样式
三:首行缩进
1.属性:text-indent
2.属性值
- px、em
- 首行缩进属性只针对于第一行文本起作用
- 只能在块级元素中使用(设置宽高大小的盒子)
四:中文汉字的间距设置
1.属性:letter-spacing
2.属性值:px
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div{
text-indent: 2em;
letter-spacing: 5px
}
a{
text-decoration: none;
}
</style>
</head>
<body>
<a href="">测试字体颜色</a>
<div>
测试字体颜色
</div>
</body>
</html>效果图如下：
背景属性的使用：
一.背景颜色属性
1.属性:background-color/background
2.属性值:英文单词、十六进制、rgb/rgba
二:背景图片属性
1.属性:background-image
2.属性值:url(路径)
3.特点
- 当容器比背景图片大的时候,图片会平铺 铺满整个盒子
- img图片是结构,占位置,背景图片是css样式需要容器支持不占位置的
- 如果背景图片大于容器的宽高,也只会显示和容器一样的大小区域
三:背景平铺属性
1.属性:background-repeat
2.属性值
- repeat 默认值
- no-repeat 不平铺
- repeat-x/y
四:背景定位属性
1.属性:background-position(定位)
2.属性值:x y
- x:left right center
- y:top bottom center
- x和y轴也可以使用坐标值
五:背景固定属性(大型游戏)
1.属性:background-attachment
2.属性值
- scroll 默认值 表示滚动
- fixed 固定
六:简写方式
1.属性:background
2.属性值:颜色 图片 平铺 定位 固定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div{
width: 700px;
height: 500px;
background: pink url(https://ts1.cn.mm.bing.net/th/id/R-C.ca1c627af29f268cf8190facbf88a897?rik=6oVl7fARNbfZAg&riu=http%3a%2f%2fn.sinaimg.cn%2fdefault%2f20150729%2fRtwH-fxfhxmp9761470.jpg&ehk=VA1RouduUbgv4aCid2x4BfnVlA0cHXwIuy47gZAlonM%3d&risl=&pid=ImgRaw&r=0) no-repeat center
/* background: pink;
background:pink url(https://ts1.cn.mm.bing.net/th/id/R-C.ca1c627af29f268cf8190facbf88a897?rik=6oVl7fARNbfZAg&riu=http%3a%2f%2fn.sinaimg.cn%2fdefault%2f20150729%2fRtwH-fxfhxmp9761470.jpg&ehk=VA1RouduUbgv4aCid2x4BfnVlA0cHXwIuy47gZAlonM%3d&risl=&pid=ImgRaw&r=0);
background-repeat: no-repeat;
background-position: center */
/* 水平方向=垂直方向 可以简写 */
}
/* body{
background-image: url(https://ts1.cn.mm.bing.net/th/id/R-C.ca1c627af29f268cf8190facbf88a897?rik=6oVl7fARNbfZAg&riu=http%3a%2f%2fn.sinaimg.cn%2fdefault%2f20150729%2fRtwH-fxfhxmp9761470.jpg&ehk=VA1RouduUbgv4aCid2x4BfnVlA0cHXwIuy47gZAlonM%3d&risl=&pid=ImgRaw&r=0);
background-attachment: fixed
} */
</style>
</head>
<body>
<div>
凡凡
</div>
</body>
</html>效果图如下：
列表属性：
有序和无序列表的默认样式是有兼容问题的,一般都是不用的,需要清除掉
1.属性:list-style
2.属性值:none
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
ul,ol,li{
list-style: none
}
</style>
</head>
<body>
<ul>
<li>这是一段文本</li>
</ul>
<ol>
<li>这是一段文本</li>
</ol>
</body>
</html>效果图如下：
