一、字体属性
1、font-weight:文字粗细
取值 | 描述 |
---|---|
normal | 默认值,标准粗细 |
bord | 粗体 |
border | 更粗 |
lighter | 更细 |
100~900 | 设置具体粗细,400等同于normal,而700等同于bold |
inherit | 继承父元素字体的粗细值 |
2、font-style:文字风格
normal 正常,默认就是正常的
italic 倾斜
3、font-size:文字大小
ps:一般是12px或13px或14px
注意:
1、通过font-size设置文字大小一定要带单位,即一定要写px
2、如果设置成inherit表示继承父元素的字体大小值。
4、font-family:文字字体
font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif
常见字体:
serif 衬线字体
sans-serif 非衬线字体
中文:宋体,微软雅黑,黑体
注意:
1、设置的字体必须是用户电脑里已经安装的字体,浏览器会使用它可识别的第一个值。
2、如果取值为中文,需要用单或双引号扩起来
5、文字属性简写
/*font-weight: bolder;*/ /*font-style: italic;*/ /*font-size: 50px;*/ /*font-family: 'serif','微软雅黑';*/ 简写为 font: bolder italic 50px 'serif','微软雅黑';
6、color:文字颜色
取值 | 格式 | 描述 |
---|---|---|
英文单词 |
color:red; |
大多数颜色都有对应的英文单词描述,但英文单词终究有其局限性:无法表示所有颜色 |
rgb | color:rgb(255,0,0) |
什么是三原色? 数字的范围0-255,0代表不发光,255代表发光,值越大越亮 红色:rgb(255,0,0) |
rgba | color:rgba(255,0,0,0.1); |
rgba到css3中才推出,比起rgb多了一个a,a代表透明度 |
十六进制 | color: #FF0000; |
#FFEE00 其中FF代表R,EE代表G,00代表B |
7、字体属性举例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> p { /*font-weight: 900;*/ /*font-style: italic;*/ /*font-size: 50px;*/ /*font-family: "Microsoft YaHei UI Light";*/ font: lighter italic 20px "Microsoft Himalaya"; /*color: blue;*/ /*color: rgb(182, 201, 231);*/ /*color: rgba(182, 201, 231,0.3);*/ /*color: #0000FF;*/ } </style> </head> <body> <p>一行白鹭上青天</p> </body> </html>
二、文本属性
1、text-align:规定元素中的文本的水平对齐方式
值 | 描述 |
---|---|
left | 左边对齐 默认值 |
right | 右对齐 |
center | 居中对齐 |
justify | 两端对齐 |
2、text-decoration:文本装饰
值 | 描述 |
---|---|
none | 默认。定义标准的文本,通常用来去掉a标签的下划线 |
underline | 定义文本下的一条线。 |
overline | 定义文本上的一条线。 |
line-through | 定义穿过文本下的一条线。 |
inherit | 继承父元素的text-decoration属性的值。 |
3、text-indent:首行缩进
#将段落的第一行缩进 32像素,16px;=1em; p { text-indent: 32px; }
4、line-height:行高
5、文本属性举例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div { width: 200px; height: 200px; background-color: red; /*text-align: center;*/ /*line-height: 200px;*/ /*text-decoration: underline;*/ /*text-decoration: overline;*/ /*text-decoration: line-through;*/ text-indent: 10px; } </style> </head> <body> <div> 你好啊阿斯 </div> </body> </html>
三、背景属性
1、属性描述
ps:没有宽高的标签,即便设置背景也无法显示
属性 | 描述 | 值 | |
---|---|---|---|
background-color |
设置标签的背景颜色的 |
background-color: rgb(0,255,0); background-color: #00ffff; |
|
background-image |
设置标签的背景图片 |
background-image: url("images/2.jpg"); background-image: url("图片网址"); 注意:如果图片的大小没有标签的大小大, 那么会自动在水平和锤子方向平铺和填充 |
|
background-size |
设置标签的背景图片的宽、高 |
background-size: 300px 300px; background-size: 100% 100%; |
|
background-repeat |
设置标签的背景图片的平铺方式 |
background-repeat: repeat; |
|
background-attachment |
设置标签的背景图片在标签中固定 |
background-attachment: scroll; |
|
background-position |
前端的坐标系": -------------------->x轴 |
background-position:水平方向的值,垂直方向的值 1、具体的方位名词 第一个值是水平位置,第二个值是垂直位置。 3、具体的像素(一定要加px单位) 例如:30px,50px等等
|
|
inherit |
设置从父元素继承background属性值 |
以上背景属性的值均可以设置为inherit, 代表从父元素继承background属性 |
|
背景缩写 |
|
2、背景图片和插入图片的区别
#1、
背景图片仅仅只是一个装饰,不会占用位置,
插入图片会占用位置
#2、
背景图片有定位属性,可以很方便地控制图片的位置,
而插入图片则不可以
#3、
插入图片语义比背景图片的语义要强,所以在企业开发中如果你的图片
想被搜索引擎收录,那么推荐使用插入图片
3、背景属性举例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .box1 { width: 600px; height: 600px; background-color: red; background-image: url("bg.jpg"); /*background-size: 600px 600px;*/ background-size: 100px 100px; background-repeat: no-repeat; /*background-repeat: no-repeat;*/ /*background-repeat: repeat-x;*/ /*background-repeat: repeat-y;*/ /*background-position: 水平方向 垂直方向的位置;*/ /*background-position: right bottom;*/ /*background-attachment: fixed;*/ } .box2 { width: 200px; height: 200px; background-color: yellow; } .box2 img { width: 100px; } .box3 { width: 200px; height: 2000px; background-color: green; } </style> </head> <body> <div class="box1"> <p>123213123123123</p> </div> <div class="box2"> <img src="timg.jpg" alt=""> <p>123123123123123</p> </div> <div class="box3"></div> </body> </html>
4、练习1:背景属性缩写
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>后代选择器</title> <style type="text/css"> div { width: 500px; height: 500px; /*background-color: red;*/ /*background-image: url("a/aa.jpg");*/ /*background-repeat: no-repeat;*/ /*background-position: right bottom;*/ /*background-size: 100px 100px;*/ background: red url(a/bb.jpg") no-repeat right bottom/100px 100px; } </style> </head> <body> <div></div> </body> </html>
5、练习2:图片拼接(背景图片小居中下显示&插入图片覆盖整页)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*body {*/ /* background-image: url("img/bg2.jpg");*/ /*}*/ .box1 { width: 960px; height: 720px; background-image: url("img/bg1.jpg"); background-size: 960px 720px; } .box2 { width: 960px; height: 720px; background-image: url("img/ksyx.png"); background-repeat: no-repeat; background-position: center bottom; } </style> </head> <body> <div class="box1"> <div class="box2"></div> </div> </body> </html>
6、练习3:导航条(纯色或者花色一样的图片只用一小部分拼接起来,变成一长条,这样省内存,肉眼看着是一张长图)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .header { width: 960px; height: 118px; background-image: url("img/dht.png"); background-repeat: repeat-x; } </style> </head> <body> <div class="header"> </div> </body> </html>
7、练习4:精灵图(如下图)
#1、什么是CSS精灵图(可以通过浏览器抓包分析:微博,京东都有精灵图)
CSS精灵图是一种图像合成技术
#2、CSS精灵图的作用
一个电商网站可能有很多图片,比如有10张图片,这就要求客户端发10次请求给服务端
但其实一次请求的带宽就足够容纳10张图片的大小
精灵图的作用就是用来较少请求次数,以及降低服务器处理压力
#3、如何使用CSS精灵图
CSS的精灵图需要配合背景图片和背景定位来使用
#4、强调:切图需要用到frameworks软件,可以知道每个图片具体宽多少个像素高多少个像素,该软件与ps属于一个家族
在右面,图层-》位图-》出一把锁固定住图片
然后左侧,有一个切片工具,框住图片
精灵图练习:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .box1 { width: 86px; height: 28px; background-image: url("img/jlt.png"); background-position: -425px -100px; } </style> </head> <body> <div class="box1"> </div> </body> </html>
8、rgba与opacity
rgba 只能给背景设置透明度
opacity 改变整个标签的透明度
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> .c1 { width: 200px; height: 200px; /*只能给背景设置透明度*/ /*background-color: rgba(0,0,0,0.65);*/ background-color: rgb(0,0,0); opacity: 0.65; /*改变整个标签的透明度*/ } </style> </head> <body> <div class="c1">我是我啊啊啊啊</div> </body> </html> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> .c1 { height: 800px; /*背景颜色不能与背景颜色同时使用,如果想给背景图片设置透明度,则必须使用opacity*/ background-image: url("https://images2018.cnblogs.com/blog/1036857/201805/1036857-20180516225809591-1990809146.jpg"); background-size:300px auto; opacity: 0.55; /*改变整个标签的透明度*/ } </style> </head> <body> <div class="c1"></div> </body> </html>