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

╰半橙微兮° 2022-07-24 03:18 76阅读 0赞

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;------竖排文字

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

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 CSS——边框设置

相关 css边框效果

相关 CSS3 背景和边框

相关 DIV+CSS圆角边框

相关 div+css 彩色链接效果

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

相关【CSS+DIV】设置文字效果

相关 CSS-边框效果

相关 CSS-边框效果

相关 div&css基础知识