本文详细介绍了CSS中的文本属性，如字体颜色、大小、样式、对齐方式、行高以及装饰样式等，还涵盖了列表样式和背景属性的设置，包括背景颜色、图片、平铺、位置等。此外，提到了精灵图技术在网页优化中的应用，以及如何通过CSS实现图片和文字的布局。内容涵盖字体、列表、背景和图片等多个方面，旨在提升网页设计的效率和用户体验。
一、css文本相关属性
1、字体的颜色也可以转换为16进制的颜色（可以直接百度搜索16进制颜色表）和rgb属性的颜色。例如：red=#b0b0b0=rgb（211，176，33）。
一共三种表现形式像括号里面的一样。
2、font-size设置字体大小单位可以是px，pt，em。12pt=16px=1em 浏览器默认是16px,设计图常用字号是12px。在浏览器右键设置里面可以设置字体。
3、font-family字体样式，加不加引号都ok
4、font-weight（后面可以跟数字或bold，bolder，lighter类型）（100-900，100-500变细，600-900变粗）
5、font-style：italic 斜体
oblique斜体
normal正常 （默认的）
6、text-align：center（参照物为父亲元素的宽度）
text-align：right右对齐
【假如同时加text-align：right
text-align：left 优先显示下面的】
7、text-align:justify;水平2端对齐，但是只对多行起作用。
8、line-height行高
昨天学过假如让字体居中就是 height=line-height的值
9、text-decoration：none 去除超链接下划线
text-decoration：through 加个中划线 一般改价格用
text-decoration：underline下划线
text-decoration：overline上划线
line-through 删除线 （降价用的）
10、text-indent 首行缩进 只对首行有作用（也可以加数值，也可以加负的）
例如text-indent：2em/50% 这种类型的都可以
11、控制文字和文字之间的间距
letter-spacing：1em或者10px 常用中文
word-spacing 常用英文
（一般英文都加空格所以用下面的）
12、font是font-style font-weight font-size / line-height font-family 的简写。
font:italic(倾斜) 800(粗细) 30px/80px(大小) "宋体"(字体)；顺序不能改变 ,必须同时指定font-size和font-family属性时才能起作用
13、苹果电脑能识别的字体类型
二、列表相关属性
1、设置列表前面的风格图片
在head中加入
ul{list-style-image：url（地址）}
2、设置列表样式类型
list-style-type： none 没有
circle空心圆
disc实心圆
square实心正方形
3、设置列表样式的位置
list-style-position： inside 在列表里面
outside 在列表外面（默认的）
4、list-style：none 去除列表符号
三、背景相关属性
1、background-color 背景颜色 background-color：red；
background-color regb(，，，注)最后一个值为透明度，透明度的取值范围为0-1
2、background-image 背景图片 background-image:url();
注：背景图片是加入的head中不是body中的，插入进去直接默认平铺
3、background-repeat（可以跟4个值） 背景图片的平铺 background-repeat:no-repeat/repeat/repeat-x/repeat-y；
4、background-position 背景图片位置 background-position ：两个方位/一个方位/两个像素值/一个像素值。例如（background-position：left/right/100px，200px）【【【【【注意前面写的是错的多了一个逗号】】】】】】前面是x值后面的是y值。当只设定一个值另外一个默认为居中，像素值可以为负的。
注：调整背景图片位置的时候先把图片设置成不平铺
5、background-attachment 背景图片的固定 background-attachment : scroll (滚动)/ fixed（固定，固定在浏览器窗口里面，固定之后就相对于浏览器窗口了） ;
6、背景缩写
注：无顺序问题
7、background-size 图片大小 backgroung-size:100%,80%（前面是宽度，后面是高度）
8、注意：不加background-attachment:fixed以div为参照物
加background-attachment:fixed以屏幕为参照物
9、补做小米页面补充知识点（以后的课会详细的讲）
margin-top：200px（写下一个标签里面距离上面200px距离）
overflow：hidden（把上面空白的弄没）
rgba最后一个a代表透明度
10、做了一个小米页面很重要，vsc里面有，已经做好
四、图片的应用之精灵图
1、精灵图主要是减少服务器与浏览器发送的次数，可以有效的提高效率，所以就用css的精灵技术把很多小的图片都整合到一张大的图片上，那样就不用请求很多次了，请求一次就可以了，可以决解服务器压力，比如下面都是用的精灵技术
2、注意下电脑中的坐标与我们平时学的数学的不一样（下面左边为数学中右边为电脑中的坐标）
3、原理就是先把要扣下来的精灵图width和height量出来，之后再插入那个整的图片作为背景图，然后再把背景图向width和height量出来的那个小块里面移动就行了，注意：移动的距离一边都是负的，整图向左一就是负，向上移就是负，电脑会已左上角的左边为（0，0）
附注1、
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
padding: 0;margin: 0;
}
h1{
width: 200px;
height: 50px;
line-height: 50px;
font-size: 25px;
color:white;
background-color: grey;
text-align: center;
font-family: 'Courier New';
}
p{
width: 500px;
text-indent: 2em;
}
b{
line-height: 30px;
font-size: 20px;
}
.aa{
color: red;
}
.bb{
color:blue;
}
.cc{
color: chartreuse;
}
</style>
</head>
<body>
<h1>千锋简介</h1>
<p><b>北京千锋互联科技有限公司（简称千锋） </b>成立于2011年1月。
公司总部位于北京，目前已在 <span class="aa">深圳、上海、郑州、广
州、大连、武汉、成都、西安、杭州、青岛、重庆、长沙、哈尔滨、南京、太原 </span>建立分公司。</p>
<p>千锋旗下现有 <b>教育培训、人才服务、项目研发、创业孵化</b>等业务。 教育培训业务主
要为大学生、企业提供技术培训服务；人才服务业务主要为企业提供优秀
的互联网研发人才； 项目研发业务主要为企业提供APP解决方案及APP项目研发； 创业孵
化业务为有创业梦想的学员设立，为其提供创业辅导及天使投资等服务。</p>
<p>千锋秉承着 <span class="bb">“用良心做教育”</span> 的理念踏踏实
实的做事， <span class="cc">创办7年，现已成
为业内口碑好、规模大、教学强的移动互联网研发培训机构。</span> 目前累计与
国内 <b>超过8200多家 </b>IT相关企业建立人才输送合作，与 <b>562所大学 </b>建立实训就
业合作，每年为中国IT企业输送上万名移
动开发工程师。计划未来5年内实现年营收过10亿，为中国教育行业贡献一份力量。</p>
</body>
</html>
附注2、
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
padding: 0; margin: 0;
}
ul{
width: 640px;
height: 650px;
background-color: pink;
}
li{
list-style-image: url(img/icon.jpg);
list-style-position: inside;
font-size: 29px;
line-height: 69px;
}
</style>
</head>
<body>
<ul>
<li>王菲戴头巾出席活动意外撞上20年前造型</li>
<li>王菲戴头巾出席活动意外撞上20年前造型</li>
<li>王菲戴头巾出席活动意外撞上20年前造型</li>
<li>王菲戴头巾出席活动意外撞上20年前造型</li>
<li>王菲戴头巾出席活动意外撞上20年前造型</li>
<li>王菲戴头巾出席活动意外撞上20年前造型</li>
<li>王菲戴头巾出席活动意外撞上20年前造型</li>
<li>王菲戴头巾出席活动意外撞上20年前造型</li>
<li>王菲戴头巾出席活动意外撞上20年前造型</li>
</ul>
<img src="img/pic.jpg"width="500px">
</body>
</html>
附注3、
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
padding: 0%;margin: 0%;
}
div{
background-image: url(img/大天使-拉克丝.jpg);
background-repeat: no-repeat;
background-size: 100%,100%;
background-attachment: fixed;
}
p{
line-height: 58px;
font-size: 20px;
}
</style>
</head>
<body>
<div>
<p>
拉克珊娜·冕卫出身自德玛西亚，一个将魔法视为禁忌的封闭国
度。 只要一提起魔法，人们总是带着恐惧和怀疑。
所以拥有折光之力的她，在童年的成长过程中始终担心被人
发现进而遭到放逐，一直强迫自己隐瞒力量，以此
保住家族的贵族地位。虽然如此，拉克丝的乐观和顽强让她
学会拥抱自己独特的天赋，现在的她正在秘密地运用
自己的能力为祖国效力。
</p><br />
<p>
光芒四射被动技能 拉克丝的伤害类技能会将能量注入敌
人的体内，这股能量会持续6秒。 拉克丝的下一次攻击将会
点燃这股能量，以对目标造成额外魔法伤害（取决于拉克丝的等级）。
</p><br />
<p>
光之束缚快捷键：Q 朝目标地点发射一团光球，最多可束
缚2个敌方单位2秒并对每个目标造50/100/150/200/250(+0.7)
魔法伤害。
</p><br />
<p>曲光屏障快捷键：W 朝目标方向掷出拉克丝的魔杖，来保护
她自己以及被魔杖触及的所有友方英雄免受50/65/80/
95/110(+0.2)伤害，持续3秒。
当魔杖到达它的飞行终点时，就会进行返程，来保护她和
被魔杖触及的所有友方英雄免受额外的50/65/80/95/11
0(+0.2)伤害，持续3秒。 如果去程时命中了一名友
方英雄，那么返程提供的护盾值翻倍。</p>
<br />
<p>透光奇点快捷键：E 创建一个区域，使其中的敌方单
位减速25/30/35/40/45%。 在5秒后，该区域会爆炸，对区域内的敌
人造成60/105/150/195/240(+0.6)魔法伤害。
再次激活此技能可以提前引爆该区域。</p><br />
<p>终极闪光快捷键：R 拉克丝发射一束耀目的光能射线
，对一条直线上的所有敌人造成300/400/500(+0.75)魔法伤害。
如果有敌方英雄在被【终极闪光】命中后的1.75秒内
死亡，那么就会返还它30/40/50%的冷却时间。
终极闪光还会引燃并刷新目标身上的光芒四射效果。</p></div>
</body>
</html>
附注4、
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
padding: 0%;margin: 0%;
}
div{
height: 1300px;
background-position: center;
background-attachment: fixed;
overflow: hidden;
}
p{
background-color:rgba(255,255,255,0.8);
height: 200px;
line-height: 200px;
text-align: center;
margin-top: 200px;
background-position: center;
font-size: 24px;
}
.a{
background-image: url(img/bg1.png);
}
.b{
background-image: url(img/bg2.png);
}
.c{
background-image: url(img/bg3.png);
}
</style>
</head>
<body>
<div class="a">
<p>
informatiom1
</p>
</div>
<div class="b">
<p>
text informatiom2
</p>
</div>
<div class="c">
<p>
text informatiom3
</p>
</div>
</body>
</html>
附注5、精灵图的应用把划勾的三个扣出来
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
padding: 0;margin: 0;
}
.a{
width: 136px;
height: 132px;
background-image:url(img/精灵图.jpg);
background-position: -197px -384px;
}
.b{
width: 136px;
height:132px;
background: url(img/精灵图.jpg) -554px -575px;
}
.c{
width: 136px;
height: 132px;
background: url(img/精灵图.jpg) -736px -786px;
}
</style>
</head>
<body>
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
</body>
</html>
317
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
