目录
0039 文本属性-大小和字体
学习目标
1、css属性和属性值的定义
2、css文本属性
3、css列表属性
4、css背景属性
5、css边框属性
6、css浮动属性
快捷操作：
输入lorem，会出现一堆不规则的单词和语句。
浏览器支持字体有：
示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
<style>
.p1{
font-size: 13px;
}
.p2{
/* font-family: 宋体; */
font-family: 微软雅黑;
}
</style>
</head>
<body>
<p class="p1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum nemo soluta ipsa magni eum excepturi culpa ullam eius quos dolorum voluptatibus maiores vero ut, laudantium adipisci rem quas quisquam porro?</p>
<p class="p2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Id, aspernatur totam quibusdam, ea architecto eos facilis numquam voluptatum, possimus nihil vel ipsum. Reprehenderit illo blanditiis voluptatem iure praesentium nihil minus.</p>
</body>
</html>0040 文本属性-文字颜色
实例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
<style>
/* .p1{
color: red;
} */
.p1{
/* 0-255 0最弱,255最强 */
/* color: rgb(255,0,0); */
color: #14c145;
}
/* 十进制:0-9;
二进制:01;
十六进制:0-9 A-F. */
</style>
</head>
<body>
<p class="p1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum nemo soluta ipsa magni eum excepturi culpa ullam eius quos dolorum voluptatibus maiores vero ut, laudantium adipisci rem quas quisquam porro?</p>
</body>
</html>0041 文本属性-加粗与倾斜
示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
<style>
.p1{
/* 100-900 */
/* 100 细体 lighter
400 正常 normal
700 加粗 bold
900 更粗体 bolder*/
font-weight: normal;
}
h1{
font-weight: lighter;
}
.p2{
/* italic 倾斜
oblique 更倾斜
normal 正常 */
font-style: oblique;
}
</style>
</head>
<body>
<p class="p1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum nemo soluta ipsa magni eum excepturi culpa ullam eius quos dolorum voluptatibus maiores vero ut, laudantium adipisci rem quas quisquam porro?</p>
<h1>我是标题</h1>
<p class="p2">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Corrupti nobis natus, tenetur nam est quam molestiae earum perferendis blanditiis quis a et repellendus ratione aliquid! Necessitatibus dignissimos itaque aperiam sapiente?</p>
</body>
</html>0042文本属性-文本水平对齐和单行文本垂直居中
示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
<style>
.box1{
/* left,center,right */
text-align: center;
width: 500px;
background: yellow;
}
.box2{
text-align: justify;
/* 两端对齐,多行文本用 */
width: 500px;
background: rgb(43,255,0);
}
</style>
</head>
<body>
<div class="box1">大家好</div>
<div class="box2">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam ab harum fuga asperiores ullam nostrum quo deleniti rem, ad tempore dicta cumque explicabo laudantium molestias maxime, nobis obcaecati sunt saepe?
</div>
</body>
</html>
示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
<style>
.box1{
/* left,center,right */
text-align: center;
width: 500px;
background: yellow;
}
.box2{
text-align: justify;
/* 两端对齐,多行文本用 */
width: 500px;
background: rgb(43,255,0);
}
.box3{
width: 500px;
height: 100px;
background-color: yellow;
line-height: 100px;
text-align: center;
}
.box4{
width: 500px;
height: 100px;
background: rgb(43,255,0);
line-height: 10px;
}
</style>
</head>
<body>
<div class="box1">大家好</div>
<div class="box2">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam ab harum fuga asperiores ullam nostrum quo deleniti rem, ad tempore dicta cumque explicabo laudantium molestias maxime, nobis obcaecati sunt saepe?
</div>
<div class="box3">
大家好</div>
<div class="box4">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Non ipsum unde sunt aliquam consectetur perspiciatis quas minus nihil, commodi eum, eveniet quisquam aliquid quam saepe at quo reiciendis autem iusto.
</div>
</body>
</html>0043 文本属性-间距和首行缩进
示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
<style>
/* 文本间距:词间距,字符间距 */
.p1{
letter-spacing: 10px;
}
.p2{
word-spacing: 5px;
}
</style>
</head>
<body>
<p class="p1">
费曼学习法的灵感源于诺贝尔物理奖获得者理查德·费曼（Richard Feynman），运用费曼技巧,你只需花上20分钟就能深入理解知识点,而且记忆深刻,难以遗忘。知识有两种类型，我们绝大多数人关注的都是错误的那类。第一类知识注重了解某个事物的名称。第二类知识注重了解某件事物。这可不是一回事儿。著名的诺贝尔物理学家理查德·费曼（Richard Feynman）能够理解这二者间的差别，这也是他成功最重要的原因之一。事实上，他创造了一种学习方法，确保他会比别人对事物了解的更透彻。
</p>
<p class="p2">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Natus voluptatum amet inventore, esse, omnis maxime, autem maiores suscipit laborum iste tenetur molestias! Laudantium dicta officiis doloremque quaerat? Quasi, iure quisquam.
</p>
</body>
</html>示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
<style>
</style>
</head>
<body>
<p>  费曼学习法的灵感源于诺贝尔物理奖获得者理查德·费曼（Richard Feynman），运用费曼技巧,你只需花上20分钟就能深入理解知识点,而且记忆深刻,难以遗忘。知识有两种类型，我们绝大多数人关注的都是错误的那类。第一类知识注重了解某个事物的名称。第二类知识注重了解某件事物。这可不是一回事儿。著名的诺贝尔物理学家理查德·费曼（Richard Feynman）能够理解这二者间的差别，这也是他成功最重要的原因之一。事实上，他创造了一种学习方法，确保他会比别人对事物了解的更透彻。</p>
</body>
</html>示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
<style>
p{
font-size: 20px;
text-indent: 2em;
/* 首行缩进*/
}
</style>
</head>
<body>
<p>费曼学习法的灵感源于诺贝尔物理奖获得者理查德·费曼（Richard Feynman），运用费曼技巧,你只需花上20分钟就能深入理解知识点,而且记忆深刻,难以遗忘。知识有两种类型，我们绝大多数人关注的都是错误的那类。第一类知识注重了解某个事物的名称。第二类知识注重了解某件事物。这可不是一回事儿。著名的诺贝尔物理学家理查德·费曼（Richard Feynman）能够理解这二者间的差别，这也是他成功最重要的原因之一。事实上，他创造了一种学习方法，确保他会比别人对事物了解的更透彻。</p>
</body>
</html>0044文本属性-文本修饰线
示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
<style>
p{
/* text-decoration: underline; */
/* text-decoration: line-through; */
/* text-decoration: overline;*/
text-decoration: none;
}
</style>
</head>
<body>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio illum quo ea nam enim autem possimus modi facere laborum vitae, deleniti, voluptatum voluptatem quia cupiditate expedita quod nobis quis velit.
</p>
</body>
</html>0045 千锋简介案例
0046 文本属性-检索大小写和font
代码示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
<style>
/* text-transform 大小写 */
p{
/* text-transform: capitalize; */
/* text-transform: lowercase; */
text-transform: uppercase;
/* capitalize,lowercase,uppercase,none */
}
</style>
</head>
<body>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Blanditiis sequi alias earum cum reiciendis nisi id, praesentium eaque, animi doloremque itaque veritatis culpa excepturi! Commodi maxime assumenda reprehenderit aspernatur non.
</p>
</body>
</html>代码示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
<style>
/* text-transform 大小写 */
p{
/* font: italic bold 20px/1em 微软雅黑; */
font: italic bold 20px/1em 微软雅黑;
/* font: 20px/1em 微软雅黑; */
}
</style>
</head>
<body>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Blanditiis sequi alias earum cum reiciendis nisi id, praesentium eaque, animi doloremque itaque veritatis culpa excepturi! Commodi maxime assumenda reprehenderit aspernatur non.
</p>
</body>
</html>0047 列表属性
示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
<style>
ul{
list-style-type: disc;
/*
disc 实心圆
circle 空心圆
square 实心正方形
none
*/
}
.li1{
list-style-image: url(图片路径);
}
li{
border: 1px solid red;
list-style-position: inside;
}
.box{
list-style: none url(图片路径) inside;
/* 复合属性 */
}
</style>
</head>
<body>
<ul>
<li class="li1">111111111</li>
<li class="li2">222222222</li>
<li class="li3">333333333</li>
</ul>
<ul class="box">
<li>4444444444</li>
<li>5555555555</li>
<li>6666666666</li>
</ul>
</body>
</html>0048 背景属性
示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
<style>
.box1
{
width: 300px;
height: 300px;
/* background-color: yellow; */
/* background-color: rgb(255,0,0); */
/* background-color: rgb(255,0,0); */
background-color: #000000;
}
.box2{
width: 100px;
height: 100px;
background-color: rgba(0,0,0,0.5);
}
</style>
</head>
<body>
<div class="box1">
大家好
<div class="box2"></div>
</div>
</body>
</html>示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
<style>
.box1{
width: 400px;
height: 400px;
background-color: yellow;
background-image: url(图片路径);
/*
默认平铺效果
repeat:默认平铺
repeat-x:X轴平铺
repeat-y:y轴平铺
no-repeat:不平铺
*/
/* background-repeat: repeat-x; */
/* background-repeat: repeat-y; */
background-repeat: no-repeat;
background-position: 20px 20px;
/*
1.20px 20px;
2.10% 10%
3.left center right
top center buttom
*/
}
.box2{
width: 300px;
height: 300px;
background-color: yellow;
background-image: url(图片路径);
background-position: center center;
background-repeat: no-repeat;
/*
默认裁剪效果
*/
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>0049背景图片大小
示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
<style>
.box1{
width: 400px;
height: 400px;
background-color: yellow;
background-image: url(图片路径);
/*
默认平铺效果
repeat:默认平铺
repeat-x:X轴平铺
repeat-y:y轴平铺
no-repeat:不平铺
*/
/* background-repeat: repeat-x; */
/* background-repeat: repeat-y; */
background-repeat: no-repeat;
background-position: 20px 20px;
/*
1.20px 20px;
2.10% 10%
3.left center right
top center buttom
*/
background-size: cover;
/*
1.400px 400px
2.100% 100%
3.cover:把背景图像扩展至足够大，以使背景图像完全覆盖背景区域
也许无法显示在背景定位区域中
4.contain：把图像扩展至最大尺寸，以使其宽度和高度完全适应内容区
域。铺不满盒子，留白
*/
}
.box2{
width: 300px;
height: 300px;
background-color: yellow;
background-image: url(图片路径);
background-position: center center;
background-repeat: no-repeat;
/*
默认裁剪效果
*/
background-size: contain;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>0050 背景的固定和滚动
示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
<style>
.box{
background-color: yellow;
background-image: url(图片路径或名称);
background-repeat: no-repeat;
height: 3000px;
width: 300px;
background-attachment: fixed;
margin: auto;
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
<style>
div{
width: 300px;
height: 1000px;
}
.box1{
background-image: url();
background-attachment: scroll;
background-repeat: no-repeat;
background-color: yellow;
}
.box2{
background-image: url();
background-attachment: scroll;
background-repeat: no-repeat;
background-color: red;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>0051 视觉差案例
示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
height: 750px;
background-position: center;
background-size: cover;
background-attachment: fixed;
}
.box1{
background-image: url();
}
.box2{
background-image: url();
}
.box3{
background-image: url();
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>0052 知乎案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 500px;
height: 1000px;
background-color: yellow;
margin: 0 auto;
}
body{
background-image: url();
background-size: cover;
background-attachment: fixed;
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>0053 背景的复合属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
<style>
/* 复合写法:
1. 用空格隔开
2. 顺序可以换
3. 可以只取一个值，放在后面能覆盖前面的值 */
/* background-size属性值能单独用 */
.box1{
width: 600px;
height: 600px;
/* background-color: yellow;
background-image: url();
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed; */
background: yellow url() no-repeat center fixed;
}
.box2{
width: 300px;
height: 300px;
background-color: yellow;
background: url() no-repeat center top;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>0054 浮动属性上
示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
<style>
div{
width: 100px;
height: 100px;
}
.red{
background-color: red;
float: left;
}
.green{
background-color: green;
float: left;
/* width: 300px;
height: 300px; */
}
.blue{
background-color: blue;
float: left;
}
</style>
</head>
<body>
<div class="red"></div>
<div class="green"></div>
<div class="blue"></div>
</body>
</html>0055浮动属性下-清浮动
示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
<style>
.box1,.box2{
width: 200px;
height: 200px;
float: left;
}
.box1{
background-color: yellow;
}
.box2{
background-color: blue;
}
.box{
width: 300px;
height: 300px;
background-color: red;
}
.container{
/* height: 200px; */
/* clear: both; */
overfloat:hidden;
}
/* 1. 写固定高度
2. 清浮动
3. 当清浮动元素后面补一个盒子，不设置宽高，clear:both
4. overfloat:hidden
*/
</style>
</head>
<body>
<div class="container">
<div class="box1"></div>
<div class="box2"></div>
</div>
<div class="box"></div>
</body>
</html>
扫一扫
333
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
