css(三)之样式

样式

使用选择器定位好了标签后，就需要修改样式。

文本类样式

设置字体

• font-family：设置字体
• font-size：设置字号大小，font-size:18px
• font-weight：设置字体粗细，font-weight=700
• font-style：设置字体样式（斜体，粗体）

设置颜色

color属性

body{
  color:red;
}
h1{
  color:#00ff00;
}
p{
  color:rgb(0,0,255);
}

文本对齐

h1 {text-align:center}
h2 {text-align:left}
h3 {text-align:right}

水平垂直居中

水平居中

text-align:center;

垂直居中

line-heigh:盒子高度

装饰文本

p{
	text-decoration:underline;
}

属性值	描述
none	默认，没有装饰线
underline	下划线
overline	上划线
line-through	删除线

文本缩进

text-indent可以使得段落首字母缩进。

p{
	text-indent:2em;
}

em指的是当前元素一个文字的大小。

行间距

text-height可以设置行间距。是文字行与行间的距离。

p{
	text-height:26px;
}

背景类

背景颜色

background-color:red

背景图片

用于logo或者装饰性小图片或者超大背景图片，优点是便于控制。

background-image:url(图片路径)

背景平铺

一个盒子假如300x300像素，而log只有100x100像素，那么就会对图片进行平铺（图片重复9次），这时如果不需要平铺，那么就需要用到background-repeat属性。

background-repeat: repeat | no-repeat | repeat-x | repeat-y

背景位置

background-position: x y

其中x,y可以是方位方位名词或者精确值

• 方位名词

background-position: center top

这个表示对于x居中，对于y在头部。

• 精确单位

background-position: 10px 10px

背景附着

background-attachment: scroll | fixed

• scroll：随内容滚动
• fixed：背景图像固定

背景半透明

background: rgba(0,0,0,0.3)

rgb代表红绿蓝
a代表透明度范围0-1。

混合写法

background : background-color background-image background-repeat background-attachment background-position;

精灵图

可以有效的减少服务器接收和发送请求的次数，提高页面的加载速度。
就是将小模块粘合成大模块，减少请求次数。

1. 测量所需图片在大图中的位置x,y以及长宽a,b。
2. 编写相关div+css。

.box{
	width:bpx;
	height:apx;
	background:url() no-repeat -x -y;
}

垂直水平居中

垂直居中：

verticle-align:baseline | top | middle| bottom;

注意：只有行内元素和行内块元素才可以使用这个。
水平居中：

margin: 0px auto

鼠标类

cursor:pointer;

• default: 默认
• pointer: 小手
• move: 移动
• text: 文本
• not-allow: 禁止

显示与隐藏

display显示隐藏

可以隐藏元素并且不占有原来的位置。

display:none;/*隐藏对象*/
display:block;/*显示对象*/

visibility显示隐藏

可以隐藏元素并且占有原来的位置。

visiblity:visible;/*隐藏对象*/
visiblity:hidden;/*显示对象*/

overflow显示隐藏

有时需要对盒子溢出部分进行隐藏，就要用到overflow属性。

overflow:visible;/*显示对象*/
overflow:hidden;/*隐藏对象*/
overflow:scroll;/*溢出部分滚动条*/
overflow:auto;/*在需要的时候用滚动条*/

单行文本溢出省略号

white-space:nowrap;/*默认normal自动换行*/
overflow:hidden;/*隐藏对象*/
text-overflow:ellipsis;/*文字溢出用省略号显示*/

多行文本溢出省略号

overflow:hidden;/*隐藏对象*/
text-overflow:ellipsis;/*文字溢出用省略号显示*/
display:-webkit-box;/*弹性伸缩盒子模型显示*/
-webkit-line-clamp:2;/*限制在一个块元素显示的文本的行数*/
-webkit-box-orient:vertic;/*设置伸缩盒对象的子元素的排列方式*/