CSS基础知识二（段落设置CSS效果、图片边框、div和span区别、CSS控制背景、CSS控制链接）

1、 段落设置CSS效果：

（1）      对齐方式

Text-align:left / right / center / justrfy（两端对齐）

（2）      垂直对齐方式

Vertical-align:top  / bottom / middle

（3）      内边距padding（内容和边框的距离）

分开写：

Padding-top：20px;

Padding-bottom:20px;

Padding-left:20px;

Padding-right:20px;

如果四个值都一样，可以写成：

Padding:20px;

如果上下、左右值一样，可以写成：

Padding:20px10px;

20px是指上下的距离；10px是左右的距离

 

（4）      外边距 margin

分开写：

margin-top：20px;

margin-bottom:20px;

margin-left:20px;

margin-right:20px;

如果四个值都一样，可以写成：

margin:20px;

如果上下、左右值一样，可以写成：

margin:20px10px;

20px是指上下的距离；10px是左右的距离

 

 

2、 图片控制边框

 

上边框：

Border-top-style:solid(实体) / double(双线) / dashed(虚线) / dotted(点划线)------上边框线型

Border-top-width:2px;-------上边框线宽

Boeder-top-color:red;--------上边跨颜色

 

以上简写：

Border-top:线型 线宽 颜色;例子：

Border-top:solid1px red;

 

下边框：

Border-bottom-style:solid(实体) / double(双线) / dashed(虚线) / dotted(点划线)------上边框线型Border- bottom -width:2px;-------上边框线宽

Boeder- bottom-color:red;--------上边跨颜色

 

以上简写：

Border- bottom:线型 线宽 颜色;例子：

Border- bottom:solid1px red;

 

 

左边框：

Border-left-style:solid(实体) / double(双线) / dashed(虚线) / dotted(点划线)------上边框线型

Border- left-width:2px;-------上边框线宽

Boeder- left-color:red;--------上边跨颜色

 

以上简写：

Border- left:线型 线宽 颜色;例子：

Border- left:solid1px red;

 

 

右边框：

Border-right-style:solid(实体) / double(双线) / dashed(虚线) / dotted(点划线)------上边框线型

Border- right-width:2px;-------上边框线宽

Boeder- right-color:red;--------上边跨颜色

 

以上简写：

Border- right:线型 线宽 颜色;例子：

Border- right:solid1px red;

 

 

3、 div和span的区别

（1）      span是行内元素，div是块级元素

（2）      div可以定义高度可宽度；

span不能定义高度可和宽度，如果要定义的话，样式中加上：display:block;(块级显示)

4、 CSS控制背景：

分开写：

Background-color:red;-----背景颜色

Background-image:url(图像位置);------背景图像

Background-repeat:repeat / no repeat / repeat-x /repeat-y;----背景图像的重复方式

Repeat：平铺展示

no repeat：不平铺 

repeat-x：水平方向平铺

repeat-y：垂直方向平铺

Background-attachment:fixed(固定) / scroll（滚动）-----背景图片的依附方式

Bckground-position:百分比（10% 20%）/ 像素（100px 20px）/ 位置）（水平方向和垂直方向）（left /right / center/top /middle/bottom）---------背景图像定位

以上简写：

Background:背景颜色 url(图像位置) 重复方式依附方式 定位;

例子：background:red url(image/3.gif) no-repeat scroll let top;

 

注意：背景图像不显示的原因：可能div中没有设置宽度和高度

 

5、 CSS控制链接：

a:link:正常显示的链接文本状态;

a::hover:鼠标放在文本上的状态

a:active:鼠标点击文本时的状态（鼠标点击不松手）--不常用

a:visited:访问过的文本状态

注意：

一般a:link和a:visited状态是一样

 

单独对一个class设置a链接属性：语法：

a.类名称：状态（link /active / hover / visted）也可以

类名称 a:状态（link /active / hover / visted）

 

补充：

1、Background-color:red;通过padding可以控制背景的宽高，表示文字的宽度和高度

例子：设置背景颜色，通过padding设置宽高

.left a:hover{

         Background-color:#ffebe5;

Padding:10px;22%;

}

 

显示效果：

鼠标滑过的背景宽度高度：就是文字设置的padding的上下、左右距离，如图：

 

2、text-indent:2em;----首行缩进

3、wring-mode:td-rl;------竖排文字