php学习之css常用的属性（三）
(adsbygoogle = window.adsbygoogle || []).push({ google_ad_client: "ca-pub-6940460185323525", enable_page_level_ads: true });
1.文字属性
属性名 | 描述 | 属性值 |
|---|---|---|
font-size | 文字大小 | 像素（px）、em（倍数）、百分百（%） |
font-family | 字体类型 | 宋体、微软雅黑、黑体等 值可以是一个也可以是多个，用英文逗号隔开 目的就是检索你的电脑字体，有哪个就用哪个，没有就默认字体 |
font-style | 斜体 | italic(斜体) |
font-weight | 加粗 | bold(加粗)、数字（100-900） |
案例：
2.文本属性
属性名 | 描述 | 属性值 |
|---|---|---|
color | 文本颜色 | 有3种，rgb、十六进制、单词 |
text-align | 文本水平对齐方式 | left、center、right 必须在块元素中 |
text-decoratione | 文本修饰符 | underline（下划线）、overline（上划线）、line-through(删除线)、none（无-在超链接中默认有下划线，用none去除下划线） |
line-height | 行高 | 设置当前行的高度，目的就是让文本上下居中，高度和行高一致 |
text-indent | 首行缩进 | 数值（px），基本是字体大小的二倍 |
letter-spacing | 字符间距 | 数值（px） |
word-spacing | 单词间距 | 数值（px） |
案例：
3.尺寸大小
说明：其实就是元素的宽和高，任何的标记元素都有宽和高
属性名 | 描述 | 属性值 |
|---|---|---|
width | 宽 | 像素（px）、百分百（%） |
height | 高 | 像素（px）、百分百（%） |
注意：块元素都可以设置宽和高，行内元素设置的宽和高不起作用，一般不设置高度，让内容自动撑出来
案例：
4.列表属性
说明：对ul、ol、li、dl、dt、dd、进行样式的修改
属性名 | 描述 | 属性值 | ||
|---|---|---|---|---|
List-style-type | 列表的符号样式类型 | None（无） | ||
List-style-image | 列表图片 | Url地址 如：list-style-image:url(./li01.jpg) | ||
List-style-position | 列表符号的位置，只对li用 | Inside（内）、outside（外） | ||
List-style | 把三个属性的值都写到一个属性中 | None url inside 如果三个属性都有那就按照上面的顺序，如果那个没有可以不写，如：none url | ||
案例：
tip：边框
border:粗细 样式 颜色；如border:1px dashed red;
border-bottom:下边框
5.背景属性
属性名 | 描述 | 属性值 | ||
|---|---|---|---|---|
background-color | 背景颜色 | rgb、十六进制、单词 | ||
background-image | 背景图片 | url地址。如url(./xxx.png) | ||
background-repeat | 平铺方式 | no-repeat(不平铺)、repeat-x（x轴平铺）、repeat-y（y轴平铺） | ||
background-position | 背景定位 | x轴定位和y轴定位。如：position:lift top;设置左右和上下 | ||
定位方式： 单词定位方式：left、center、right top、center、bottom单词定位可以理解为一个九宫格 像素定位方式：background-position:50px 100px; 离左边50像素，离上边100像素，只能是离左和离上 百分比方式：background-position:10% 20%; 离左边百分之3，。。离上边百分之20 4，混合方式：background-position：left 100px | ||||
backgrpund-attachment | 背景固定 | scroll（滚动-默认）、fixed（固定） | ||
List-style-position | 列表符号的位置，只对li用 | Inside（内）、outside（外） | ||
background | 简写形式 | 颜色、图片 、平铺方式、 定位、固定，其中的选项可能没用 | ||
- 单词定位方式：left、center、right top、center、bottom单词定位可以理解为一个九宫格
- 像素定位方式：background-position:50px 100px; 离左边50像素，离上边100像素，只能是离左和离上
- 百分比方式：background-position:10% 20%; 离左边百分之3，。。离上边百分之20
- 4，混合方式：background-position：left 100px
backgrpund-attachment 背景固定 scroll（滚动-默认）、fixed（固定） List-style-position 列表符号的位置，只对li用 Inside（内）、outside（外） background 简写形式 颜色、图片 、平铺方式、 定位、固定，其中的选项可能没用
案例：
<style type="text/css">
body{background-color:red}
div{
width:500px;
margin:0px auto;
padding:20px;
background-image:url(./64.jpg);
background-attachment:fixed;/*背景固定fixed，scroll滚动*/
background-repeat:repeat-x;/*平铺方式no-repeat不平铺、repeat-x水平平铺、repeat-y纵向平铺*/
background-position:50px 20%;/*背景定位，可以是数字，百分比，字母、混合*/
}
</style>
精灵图：
说明就是吧很多小图片放入一个大的图片背景中，这个图就称为“精灵图”
在制作网站时只要精灵图必须是背景才能设置
腾讯云开发者
