css常用属性

1、文本属性

文本对齐

text-align 属性规定元素中的文本的水平对齐方式。

属性值：none | center | left | right | justify

文本颜色

color属性

文本首行缩进

text-indent 属性规定元素首行缩进的距离，单位建议使用em

文本修饰

text-decoration属性规定文本修饰的样式

属性值：none(默认) | underline(下划线) | overline(定义文本上的一条线) | line-through (定义穿过文本下的一条线) | inherit(继承父元素的text-decoration属性的值。)

行高

line-height就是行高的意思，指的就是一行的高度。

阴影

text-shadow：水平方向偏移量垂直方向偏移量模糊度阴影颜色；

文字溢出

text-overflow:clip | ellipsis

案例：文字超出部分显示...

css部分
div{
   width: 200px;
   height: 200px;
   border: 1px solid red;

 }
div p{
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
} 
html部分
<div>
       <p>变有钱 我变有钱多少人没日没夜地浪费时间</p>
       <p>变有钱 我变有钱多少人没日没夜地浪费时间</p>
       <p>变有钱 我变有钱多少人没日没夜地浪费时间</p>
</div>

2、字体属性

字体粗细

font-weight表示设置字体的粗细

字体系列

font-family

font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif

如果浏览器不支持第一个字体，则会尝试下一个。浏览器会使用它可识别的第一个值。如果都不支持则显示宋体。

使用font-family注意几点：

1.网页中不是所有字体都能用哦，因为这个字体要看用户的电脑里面装没装，
比如你设置： font-family: "华文彩云"; 如果用户电脑里面没有这个字体，
那么就会变成宋体
页面中，中文我们只使用：微软雅黑、宋体、黑体。
如果页面中，需要其他的字体，那么需要切图。英语：Arial 、 Times New Roman

2.为了防止用户电脑里面，没有微软雅黑这个字体。
就要用英语的逗号，隔开备选字体，就是说如果用户电脑里面，
没有安装微软雅黑字体，那么就是宋体：
font-family: "微软雅黑","宋体"; 备选字体可以有无数个，用逗号隔开。
3.我们要将英语字体，放在最前面，这样所有的中文，就不能匹配英语字体，
就自动的变为后面的中文字体：
font-family: "Times New Roman","微软雅黑","宋体";

4.所有的中文字体，都有英语别名，
我们也要知道：微软雅黑的英语别名：
font-family: "Microsoft YaHei";
宋体的英语别名： font-family: "SimSun";
font属性能够将font-size、line-height、font-family合三为一： font:12px/30px "Times New Roman","Microsoft YaHei","SimSun";

5.行高可以用百分比，表示字号的百分之多少。
一般来说，都是大于100%的，因为行高一定要大于字号。
font:12px/200% “宋体” 等价于 font:12px/24px “宋体”;
反过来，比如： font:16px/48px “宋体”;
等价于 font:16px/300% “宋体”

行高 line-height

针对单行文本垂直居中

公式：行高的高度等于盒子的高度，可以使当行文本垂直居中，注意只适用单行文本。

针对多行文本垂直居中

行高的高度不能小于字体的大小，不然上下字之间会紧挨一起。

第一步，一个宽度300*300的盒子，看盒子中一共显示了几行文字，假如是5行，再看一下行高，如果行高是line-height:30px; 那么就知道行高*5=150px

第二步，让(盒子的高度-150px)/2=75;那么设置盒子的padding-top:75px;同时保证盒子的高度为300px,那么高度改为225px;

vertical-align

定义：vertical-align 属性设置元素的垂直对齐方式。

该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐

常用属性值：

baseline 默认值
top
bottom
middle

它的作用：

内联元素之间的对齐
- 文字与图片垂直方向的对齐
- 图片与托片垂直方向的对齐
- 行内块元素垂直方向的对齐
单元格td的内容垂直方向的对齐

3、background

颜色表示法

一共有三种：单词、rgb表示法、十六进制表示法

rgb表示法

rgb:红色绿色蓝色三原色
光学显示器，每个像素都是由三原色的发光原件组成的，靠明亮度不同调成不同的颜色的。
用逗号隔开，r、g、b的值，每个值的取值范围0~255，一共256个值。
如果此项的值，是255，那么就说明是纯色：
黑色：background-color: rgb(0,0,0);

光学显示器，每个元件都不发光，黑色的。

白色：background-color: rgb(255,255,255);

颜色可以叠加，比如黄色就是红色和绿色的叠加：

background-color: rgb(255,255,0);

再比如：background-color: rgb(111,222,123);

就是红、绿、蓝三种颜色的不同比例叠加。

十六进制表示法

所有用#开头的值，都是16进制的。
#ff0000：红色
16进制表示法，也是两位两位看，看r、g、b，但是没有逗号隔开。
ff就是10进制的255 ，00 就是10进制的0，00就是10进制的0。所以等价于rgb(255,0,0);

怎么换算的？我们介绍一下
我们现在看一下10进制中的基本数字（一共10个）:
0、1、2、3、4、5、6、7、8、9

16进制中的基本数字（一共16个）:
0、1、2、3、4、5、6、7、8、9、a、b、c、d、e、f

16进制对应表：
十进制数十六进制数
0 0
1 1
2 2
3 3
……
10 a
11 b
12 c
13 d
14 e
15 f

16 10
17 11
18 12
19 13
……
43 2b
……
255 ff

十六进制中，13 这个数字表示什么？
表示1个16和3个1。那就是19。这就是位权的概念，开头这位表示多少个16，末尾这位表示多少个1。
小练习：
16进制中28等于10进制多少？
答：2*16+8 = 40。

16进制中的2b等于10进制多少？
答：2*16+11 = 43。

16进制中的af等于10进制多少？
答：10 * 16 + 15 = 175

16进制中的ff等于10进制多少？
答：15*16 + 15 = 255

所以，#ff0000就等于rgb(255,0,0)

要记住：
#000 黑
#fff 白
#f00 红
#333 灰
#222 深灰
#ccc 浅灰

background-color属性表示背景颜色

background-img:表示设置该元素的背景图片

默认的背景图片，水平方向和垂直方向都平铺

background-repeat:表示设置该元素平铺的方式

属性值：

值	描述
repeat	默认。背景图像将在垂直方向和水平方向重复。
repeat-x	背景图像将在水平方向重复。
repeat-y	背景图像将在垂直方向重复。
no-repeat	背景图像将仅显示一次。
inherit	规定应该从父元素继承 background-repeat 属性的设置。

给元素设置padding之后，发现padding的区域也会平铺背景图片。

repeat应用案例

还是上面那个超链接导航栏的案例，我们给body设置平铺的图片，注意：一定找左右对称的平铺图片，才能实现我们要的效果

background-position: 属性设置背景图像的起始位置。这个属性设置背景原图像（由 background-image 定义）的位置

属性值：

值	描述
top left top center top right center left center center center right bottom left bottom center bottom right	如果您仅规定了一个关键词，那么第二个值将是"center"。默认值：0 0；这两个值必须挨在一起。

值

描述

top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right

如果您仅规定了一个关键词，那么第二个值将是"center"。

默认值：0 0；

这两个值必须挨在一起。

雪碧图技术（精灵图技术）

CSS雪碧即CSS Sprite，也有人叫它CSS精灵，是一种CSS图像合并技术，该方法是将小图标和背景图像合并到一张图片上，然后利用css的背景定位来显示需要显示的图片部分

CSS 雪碧图应用原理：
只有一张大的合并图，每个小图标节点如何显示单独的小图标呢？

其实就是截取大图一部分显示，而这部分就是一个小图标。

使用雪碧图的好处：

1、利用CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能，这也是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因；
2、CSS Sprites能减少图片的字节，曾经比较过多次3张图片合并成1张图片的字节总是小于这3张图片的字节总和。
3、解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需要对每一个小元素进行命名，从而提高了网页的制作效率。
4、更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变。维护起来更加方便

不足：

1）CSS雪碧的最大问题是内存使用
2）拼图维护比较麻烦
3）使CSS的编写变得困难
4）CSS 雪碧调用的图片不能被打印

我们可以使用background综合属性制作通天banner，什么是通天banner呢，就是一般我们电脑的屏幕都是1439.但是设计师给我们的banner图都会比这个大，

那么我们可以此属性来制作通天banner。

background:  red  url(‘./images/banner.jpg‘)  no-repeat   center top;

background-attach

设置fixed之后，该属性固定背景图片不随浏览器的滚动而滚动

链接: https://fly63.com/article/detial/4105