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