003day （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>

<head>

<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';

}

width: 500px;

text-indent: 2em;

}

line-height: 30px;

font-size: 20px;

}

.aa{

color: red;

}

.bb{

color:blue;

}

.cc{

color: chartreuse;

}

</style>

</head>

<body>

<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>

<head>

<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>

</ul>

</body>

</html>

附注3、

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

padding: 0%;margin: 0%;

}

div{

background-repeat: no-repeat;

background-size: 100%,100%;

background-attachment: fixed;

}

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>

<head>

<title>Document</title>

<style>

padding: 0%;margin: 0%;

}

div{

height: 1300px;

background-position: center;

background-attachment: fixed;

overflow: hidden;

}

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{

}

.b{

}

.c{

}

</style>

</head>

<body>

<p>

informatiom1

</p>

</div>

<p>

text informatiom2

</p>

</div>

<p>

text informatiom3

</p>

</div>

</body>

</html>

附注5、精灵图的应用把划勾的三个扣出来

<!DOCTYPE html>

<head>

<title>Document</title>

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>

</body>

</html>

003day （css文本、列表、背景相关属性，精灵图的制作）相关推荐

CSS animation动画效果实现精灵图、雪碧图动画，多动画应用
CSS animation动画效果实现精灵图.雪碧图动画,多动画应用素材下载分析图片动画过程图片可以分成4*6=24 小图片也就是24帧方法1 可以把每一行成一个动画,所以可以拆分4个动画方 ...
【网页制作】CSS文本和字体属性讲解【附讲解视频】
1.CSS文本和字体属性的作用:给文本和字体设置样式(具体看第二部分) 注意:在html中我们可以省略单位,但CSS中不可以省略单位. 简单的说大多数情况在html的body标签中我们可以省略单位,但 ...
CSS 文本溢出 text-overflow属性
text-overflow属性用来设置容器内的文本溢出时,如何处理溢出的内容,取值为 clip | ellipsis,默认值为 clip. clip 表示文本溢出时,简单的把溢出的部分裁剪掉:elli ...
CSS基础「七」精灵图 \ 字体图标 \ 三角 \ 用户界面样式 \ 页面初始化
本篇文章为 CSS 基础系列笔记第七篇,参考黑马程序员pink老师前端入门教程其他CSS基础相关文章: CSS基础「一」基础选择器 / 字体属性 / 文本属性 / 三种样式表 CSS基础「二」复合 ...
CSS控制列表样式属性list-style有哪些？怎么用？
CSS列表样式属性list-style有哪些类型?不同类型CSS控制列表样式使用时该注意什么? 这是W3Cschool用户Shirley于2016-11-10在W3Cschool编程问答提出的问题.云 ...
CSS 系列七高级技巧篇精灵图、字体图标、CSS三角、图片和文字对齐以及bug 、溢出文字省略号、CSS 初始化、常见的布局技巧
--------------------------- 精灵图 --------------------------- 1.1 为什么需要精灵图一个网页中往往会应用很多小的背景图像作为修饰,当网页中 ...
【CSS基础学习笔记】精灵图、字体图标、三角形、样式优化
精灵图 CSS精灵技术:能有效地减少服务器接收和发送请求的次数,提高页面的加载速度. 核心原理:将网页中的一些小背景图像整合到一张大图中,这样服务器只需要一次请求就可以了.(主要针对小的背景图片,因为 ...
html ul list style,CSS list-style列表样式属性用法介绍
list-style我们使用得最多的地方就是ul li中了,但很多朋友都搞不清楚•list-style-type,•list-style-position,•list-style-image具体的区别 ...
CSS 文本方向 direction属性
对于英文或中文等语言,默认是从左到右.从上到下进行阅读.然而,并非所有语言都是如此,还有许多从右向左阅读的语言,如阿拉伯语和希伯来语等. 于是,CSS2.1引入了 direction属性,用来定义文本 ...

003day （css文本、列表、背景相关属性，精灵图的制作）

003day （css文本、列表、背景相关属性，精灵图的制作）相关推荐

最新文章

热门文章