文章目录
一、文字属性
1.font-style
作用: 规定文字样式
格式: font-style: italic;
取值:
normal ： 正常的， 默认就是正常的
italic : 倾斜的
2.font-weight
作用: 规定文字粗细
格式: font-weight: bold;
取值:
单词取值:
bold 加粗
bolder 比加粗还要粗
lighter 细线， 默认就是细线
数字取值：
100-900之间整百的数字
3.font-size
作用: 规定文字大小
格式: font-size: 30px;
取值: px(像素 pixel)
4.font-family
作用: 规定文字字体
格式: font-family:"楷体";
取值: 各种字体名称
注意点:
- 可以同时指定多个字体，中间以逗号隔开，表示如果浏览器不支持第一个字体，则会尝试下一个，直到找到合适的字体。body{font-family:“华文彩云”,“宋体”,“黑体”;}
- 如果取值是中文， 需要用双引号或者单引号括起来
- 设置的字体必须是用户电脑里面已经安装的字体
- 补充在企业开发中最常见的字体有以下几个
中文: 宋体/黑体/微软雅黑
英文: “Times New Roman”/Arial
宋体 SimSun
黑体 SimHei
微软雅黑 Microsoft YaHei
5.文字属性缩写
缩写格式:font: style weight size family;
例如:font:italic bold 10px "楷体";
注意点:
- 在这种缩写格式中有的属性值可以省略
- sytle可以省略
- weight可以省略
- 在这种缩写格式中style和weight的位置可以交换
- 在这种缩写格式中有的属性值是不可以省略的
- size不能省略
- family不能省略
- size和family的位置是不能顺便乱放的, size一定要写在family的前面, 而且size和family必须写在所有属性的最后
二、文本外观属性
1.text-decoration
作用: 给文本添加装饰
格式: text-decoration: underline;
取值:
underline 下划线
line-through 删除线
overline 上划线
none 什么都没有, 最常见的用途就是用于去掉超链接的下划线
2.text-align
作用: 设置文本水平对齐方式
格式: text-align: center;
取值:
left 左
right 右
center 中
3.text-indent
作用: 设置文本缩进
格式: text-indent: 2em;
取值: 2em, 其中em是单位, 一个em代表缩进一个文字的宽度
3.color
作用: 设置文本颜色
格式: color: red;
取值:
预定义的颜色值，如red，green，blue等。
十六进制，如#FF0000，#FF6600，#29D794等。常用的定义颜色的方式。
RGB代码，如红色可以表示为rgb(255,0,0)或rgb(100%,0%,0%)。
4.letter-spacing
作用: 设置文本字间距
格式: letter-spacing: 2em;
取值: 2em, 其中em是单位, 一个em代表缩进一个文字的宽度
5.word-spacing
作用: 设置单词间距
格式: word-spacing: 2em;
取值: 2em, 其中em是单位, 一个em代表缩进一个文字的宽度
6.line-height
作用: 设置行间距
格式: text-indent: 20px;
取值: 像素px，相对值em和百分比%，实际工作中常用的是像素px。
7.text-transform
作用: 设置控制英文字符的大小写
格式:text-transform: capitalize;
取值:
none：不转换（默认值）。
capitalize：首字母大写。
uppercase：全部字符转换为大写。
lowercase：全部字符转换为小写。
8.text-indent
作用: 设置文本缩进
格式: text-indent: 2em;
取值: 2em, 其中em是单位, 一个em代表缩进一个文字的宽度
9.white-space:
作用: 设置空白符处理方式
格式: white-space: pre;
取值:
normal：常规（默认值），文本中的空格、空行无效，满行（到达区域边界）后自动换行。
pre：预格式化，按文档的书写格式保留空格、空行原样显示。
nowrap：空格空行无效，强制文本不能换行，除非遇到换行标记<br />。内容超出元素的边界也不换行，若超出浏览器页面则会自动增加滚动条
10.text-shadow
作用: 设置文本阴影
格式: 选择器{text-shadow:h-shadow v-shadow blur color;}
取值: 像素px
三、背景相关属性
1.背景颜色
在CSS中可以通过background-color:属性设置网页标签的背景颜色
取值:
具体单词：red，green，blue
rgb：rgb(0,255,0)
rgba：rgba(0,0,255,0.7);
十六进制：#0ff
格式：
<style>
div{
width: 100px;
height: 50px;
}
.box1{
background-color: red;
}
.box2{
background-color: rgb(0,255,0);
}
.box3{
background-color: rgba(0,0,255,0.7);
}
.box4{
background-color: #0ff;
}
</style>
2.背景图片
在CSS可以通过background-image: url();设置背景图片
格式:
<style>
div{
width: 500px;
height: 500px;
}
.box1{
background-image: url(images/girl.jpg);
/*background-image: url(http://img4.imgtn.bdimg.com/it/u=2278032206,4196312526&fm=21&gp=0.jpg);*/
}
</style>
<div class="box1"></div>
注意点:
- 图片的地址必须放在url()中, 图片的地址可以是本地的地址, 也可以是网络的地址。
- 如果图片的大小没有标签的大小大, 那么会自动在水平和垂直方向平铺来填充
- 如果网页上出现了图片, 那么浏览器会再次发送请求获取图片
3.背景平铺
默认情况下，背景图像会自动沿着水平和竖直两个方向平铺，如果不希望图像平铺，或者只沿着一个方向平铺，可以通过background-repeat属性来控制。
取值:
repeat 默认, 在水平和垂直都需要平铺
no-repeat 在水平和垂直都不需要平铺
repeat-x 只在水平方向平铺
repeat-y 只在垂直方向平铺
格式:
<style>
/*
div{
width: 500px;
height: 500px;
}
.box1{
background-color: red;
background-image: url(images/girl.jpg);
background-repeat: repeat-y;
}
</style>
<div class="box1"></div>
应用场景:
可以通过背景图片的平铺来降低图片的大小, 提升网页的访问速度
可以将多张图片拼接成一张图片
注意点:
背景颜色和背景图片可以共存, 图片会覆盖颜色
4.背景定位
如果将背景图像的平铺属性background-repeat定义为no-repeat，图像将默认以元素的左上角为基准点显示。
在CSS中有一个叫做background-position:属性, 就是专门用于控制背景图片的位置
作用：当图片比较大的时候, 可以通过定位属性保证图片永远居中显示
格式:
background-position: 水平方向 垂直方向;
取值:
1.具体的方位名词
水平方向: left center right
垂直方向: top center bottom
<style>
div{
/*width: 500px;*/
height: 500px;
}
.box1{
background-color: red;
background-image: url(images/girl.jpg);
background-repeat: no-repeat;
/*background-position: left top;*/
/*background-position: right top;*/
/*background-position: right bottom;*/
/*background-position: left bottom;*/
/*background-position: center center;*/
/*background-position: left center;*/
background-position: center top;
}
</style>
<div class="box1"></div>
2.具体的像素
例如: background-position: 100px 200px;
记住一定要写单位, 也就是一定要写px
记住具体的像素是可以接收负数的
<style>
div{
/*width: 500px;*/
height: 500px;
}
.box1{
background-color: red;
background-image: url(images/girl.jpg);
background-repeat: no-repeat;
/*background-position: 100px 0;*/
/*background-position: 100px 200px;*/
background-position: -100px -100px;
}
</style>
5.背景属性连写
和font属性一样, background属性也可以连写
背景属性缩写的格式
格式：
background: 背景颜色 背景图片 平铺方式 关联方式 定位方式;
注意点：
background属性中， 任何一个属性都可以被省略
6.背景图像固定
默认情况下背景图片会随着滚动条的滚动而滚动， 如果不想让背景图片随着滚动条的滚动而滚动， 那么我们就可以使用background-attachment的属性修改背景图片和滚动条的关联方式。
格式： background-attachment：scroll;
取值：
scroll 默认值， 会随着滚动条的滚动而滚动
fixed 不会随着滚动条的滚动而滚动
插入图片和背景图片的区别：
1 背景图片仅仅是一个装饰, 不会占用位置； 插入图片会占用位置
2 背景图片有定位属性, 所以可以很方便的控制图片的位置； 插入图片没有定位属性, 所有控制图片的位置不太方便
3 插入图片的语义比背景图片的语义要强, 所以在企业开发中如果你的图片想被搜索引擎收录, 那么推荐使用插入图片
7.背景图像大小
在CSS3中，background-size属性用于控制背景图像的大小
语法格式：background-size:属性值1 属性值2;
具体解释如下表所示。
| 属性值 | 说明 |
|---|---|
| 像素值 | 设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会默认为auto； |
| 百分比 | 以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会默认为auto； |
| cover | 把背景图像扩展至足够大，使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中； |
| contain | 把图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域 |
8.背景的显示区域
在默认情况下，background-position属性总是以元素左上角为坐标原点定位背景图像，
运用CSS3中的background-origin 属性可以自行定义背景图像的相对位置。
其基本语法格式如下：background-origin:属性值;
取值：
padding-box：背景图像相对于内边距区域来定位。
border-box：背景图像相对于边框来定位。
content-box：背景图像相对于内容框来定位。
9.css精灵
什么是CSS精灵图
CSS精灵图是一种图像合成技术, 全称CSS Sprite
CSS精灵图作用
可以减少请求的次数, 以及可以降低服务器处理压力
如何使用CSS精灵图
CSS的精灵图需要配合背景图片和背景定位来使用
示例
<style>
.box{
width: 86px;
height: 28px;
background-image: url(images/weibo.png);
background-position: -425px -200px;
}
</style>
<div class="box"></div>
完整图片
显示的图片
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
