css重要标签总结

一、css背景标签

1，设置背景颜色

back-ground-color 属性指定元素的背景色。
小实例如下图所示：

运行结果如下：

可以通过选择器给不同的标签设置不同的颜色，在这里h1,div,和p标签将拥有不同的背景色：
实例：
运行结果如下图所示：

2.设置背景图像

background-image属性指定用作元素背景的图像。默认情况下，图像会重复，以覆盖整个元素。用url来引入外部图片。
具体实例如下所示：
运行结果如下图：
注意事项：使用背景图片时，要注意背景图片的样式，不要有干扰到文本的图像，以免影响效果。

css背景重复的问题
默认情况下，background-repeat属性在垂直和水平方向上都重复图像。某些图像应只适合水平或垂直方向上重复，若想仅在水平方向上重复，需要用（background-repeat：repeat-x；），则背景看起来更好；若想要仅在垂直重复图像，需设置background-repeat：repeat-y；
属性还可以指定只显示一次背景图像：用background-repeat：no-repeat标签即可。

4、指定背景图像的位置

指定背景图像的位置需要使用background-position标签
具体实例如下图所示：
下面将会展示把背景图片放在右上角的代码：
运行结果如下图所示：

5、设置背景图像固定

background-attachment 属性来设置背景图像固定，其属性值scroll图像随页面元素一起滚动（默认值），fixed图像固定在屏幕上，不随页面元素滚动。

6、设置背景图像大小

background-size 属性可以设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果设一个值，则第二个值会默认auto。其格式如下所示：
background-size：属性1 属性2；
实例如下：

运行结果如下：

7、设置图像透明效果

使用opacity属性能够使任何元素能够使任何元素呈现出透明效果，透明度在0~1之间，其格式如下：
opacity：opacityValue；

二、css边框标签

1.设置边框颜色

（1）设置边框样式（border-style）
边框样式用于定义边框的风格，常用属性值如下：
none：没有边框即忽略所有边框的宽度（默认值）。
solid：边框为单实线。
dashed：边框为虚线。
dotted: 边框为点线。
double：边框为双实线。
既可以对盒子的单边进行设置，也可以综合设置四条边的样式。使用border-style属性综合设置四边样式时，必须按照上右下左的顺时针顺序；省略时采用值复制的原则，即一个值为四条边；两个值为上下/左右；三个值为上/左右/下。
border-top-style：上边框样式
border-right-style：右边框样式。
borer-bottom-style：下边框样式。
border-left-style：下边框样式。
border-style：上边框样式右边框样式下边框样式左边框样式
border-style：上边框样式左右边框样式下边框样式。
border-style：上下边框样式左右边框样式。
border-style：上下左右边框样式。
（2)设置边框宽度（border-width）
border-width 属性用于设置边框的宽度，其格式如下
border-width：上边[右边下边左边];
在上面的语法格式中，border-with 属性常用取值单位像素px。并且同样遵循值复制的原则，其属性值可以设置1~4个，即一个值为四边，两个值为上下/左右，三个值为上/左右/下，四个值为上/右/下/左。具体如下：
border-top-width：上边框宽度
border-right-width：右边框宽度。
borer-bottom-width：下边框宽度。
border-left-width：下边框宽度。
border-width：上边框宽度右边框宽度下边框宽度左边框宽度
border-width：上边框宽度左右边框宽度下边框宽度。
border-width：上下边框宽度左右边框宽度。
border-width：上下左右边框宽度。
（3）设置边框颜色（border-color）
border-color属性用于设置边框颜色，其格式如下：
border-color：上边[右边下边左边];
设置边框样式的同时必须设置边框样式，如果未设置样式或者设置为none，则其他的边框属性无效。边框颜色的单边与综合设置，顺时针顺序，与上面的宽度和样式属性的设置规则相同，在这里就不一一描述了。
（4）综合设置边框
border-top：上边框宽度样式颜色。
border-reight：右边框宽度样式颜色
border-bottom：下边框宽度样式颜色
border- left：左边框宽度样式颜色
border：四边宽度样式颜色
（5）圆角边框
border-radius属性用于向元素添加圆角边框：
其语法格式如下图所示：
border-radius：参数1/参数2
其中“参数1”表示圆角的水平半径，“参数2”表示圆角的垂直半径，两个参数之间用“/”隔开。需要注意的是，在使用border-raidius属性时，如果第二个参数省略，则会默认等于第一个参数。通过border-radius设置边框圆角。

css背景和边框标签总结相关推荐

css揭秘实战技巧- 背景与边框 [一]
前言这段时间,一直觉得css这块感觉每次写代码都是常用的那些基本属性,觉得始终没有对css有一个更深层次的掌握,所以,最近开始学习css相关进阶知识,首先第一关就是攻克 "css揭秘&qu ...
【html5+css】文字样式 line-height 和 vertical-align css背景 css边框
**一.文字样式字体可以是列表的形式,一般英语字体放到前面,后面的字体是前面的字体的后备字体字体名称中有空格,必须要用引号来包裹** font-weight:指定字体粗细 -blod normal ...
前端笔记（4）css，复合选择器，标签的显示模式，行高，css背景，css三大特性
css样式表/层叠样式表(2) (1)css复合选择器后代选择器子元素选择器交集选择器(不常用) 并集选择器链接伪类选择器 (2)标签的显示模式块级元素block-level 行内元素inl ...
前端：CSS/10/伪类选择器，CSS列表属性，CSS边框属性，CSS内边距属性，CSS背景属性
CSS伪类选择器:给超链接加的样式(链接的不同状态加样式) 一个超链接,有四个状态: 正常状态(:link):鼠标没放上去之前的样式: 放上状态(:hover):鼠标放到链接上时的样式: 激活状态(: ...
css中的背景、边框、补丁相关属性
css中的背景.边框.补丁相关属性关于背景涉及到背景颜色与背景图片背景颜色background-color即可设定: 背景图片background-image即可设定: 但是背景图片还涉及到其他的 ...
CSS基础学习-背景、边框的学习
CSS基础学习-背景.边框的学习背景属性属性描述 background 简写属性,作用是将背景属性设置在一个声明中. background-attachment 背景图像是否固定或者随着页面的其 ...
CSS：设置边框和背景
应用边框样式边框基本设置首先简单介绍一下使用边框最常用的三个基本属性: 属性说明值 border-width 设置边框的宽度度量单位(em.px.cm等) border-color 设置边框 ...
CSS进阶（一）背景与边框
CSS进阶(一)背景与边框文章目录 CSS进阶(一)背景与边框一.浏览器前缀二.CSS编码技巧 1.尽量减少代码重复(可复用性) (1)当某些值相互依赖时,应该把他们的相互关系用代码表示出来 ( ...
【CSS】滑动门技术 ( 借助 CSS 精灵技术实现 | 外部标签设置左半部分背景图片 | 内部标签设置右半部分背景图片 | 鼠标经过更换背景 | 代码示例 )
文章目录一.滑动门技术 1.滑动门技术借助 CSS 精灵技术实现 2.外部标签设置左半部分背景图片 3.内部标签设置右半部分背景图片 4.鼠标经过时更换背景二.完整代码示例一.滑动门技术 1.滑 ...
css背景边框列表链接
ife2018 第四天,背景边框列表链接和更复杂的选择器课程目标掌握 CSS 稍微复杂的一些选择器,还有背景,边框等一些 CSS 样式属性. background属性 background-col ...

css背景和边框标签总结