CSS基础学习-背景、边框的学习
CSS基础学习-背景、边框的学习
背景属性
属性 | 描述 |
---|---|
background
|
简写属性,作用是将背景属性设置在一个声明中。 |
background-attachment
|
背景图像是否固定或者随着页面的其余部分滚动。 |
background-color
|
设置元素的背景颜色。 |
background-image
|
把图像设置为背景。 |
background-position
|
设置背景图像的起始位置。 |
background-repeat
|
设置背景图像是否及如何重复。 |
background-size
|
规定背景图片的尺寸。 |
background-origin
|
规定背景图片的定位区域。 |
background-clip
|
规定背景的绘制区域。 |
### 背景色 |
可以使用 background-color
属性为元素设置背景色。
这个属性接受任何合法的颜色值。这条规则把元素的背景设置为灰色:
p {background-color: gray;}
如果希望背景色从元素中的文本向外少有延伸,只需增加一些内边距:
p {background-color: gray; padding: 20px;}
可以为所有元素设置背景色,这包括 body
一直到 em
和 a
等行内元素。background-color
不能继承,其默认值是 transparent
。transparent
有“透明”之意。也就是说,如果一个元素没有指定背景色,那么背景就是透明的,这样其祖先元素的背景才能可见。
background-color
属性
值 | 描述 |
---|---|
color_name
|
规定颜色值为颜色名称的背景颜色(比如 red)。 |
hex_number
|
规定颜色值为十六进制值的背景颜色(比如 #ff0000)。 |
rgb_number
|
规定颜色值为 rgb 代码的背景颜色(比如 rgb(255,0,0))。 |
transparent
|
默认。背景颜色为透明。 |
inherit
|
规定应该从父元素继承 background-color 属性的设置。 |
设置文本的背景颜色
背景图像
要把图像放入背景,需要使用 background-image
属性。background-image
属性的默认值是none
,表示背景上没有放置任何图像。如果需要设置一个背景图像,必须为这个属性设置一个 URL 值:
body {background-image: url(/i/eg_bg_04.gif);}
大多数背景都应用到 body 元素,不过并不仅限于此。下面例子为一个段落应用了一个背景,而不会对文档的其他部分应用背景:
p.flower {background-image: url(/i/eg_bg_03.gif);}
甚至可以为行内元素设置背景图像,下面的例子为一个链接设置了背景图像:
a.radio {background-image: url(/i/eg_bg_07.gif);}
理论上讲,甚至可以向 textareas
和 select
等替换元素的背景应用图像,不过并不是所有用户代理都能很好地处理这种情况。另外还要补充一点,background-image
也不能继承。事实上,所有背景属性都不能继承。
background-image
属性
值 | 描述 |
---|---|
url('URL')
|
指向图像的路径。 |
none
|
默认值。不显示背景图像。 |
inherit
|
规定应该从父元素继承 background-image 属性的设置。
|
背景图片的滚动
背景图片是否随着内容的滚动而滚动由background-attachment
设置
background-attachment:fixed;
固定,不随内容的滚动而滚动
background-attachment:scroll;
滚动,随内容的滚动而滚动
背景重复
如果需要在页面上对背景图像进行平铺,可以使用 background-repeat
属性。属性值repeat
导致图像在水平垂直方向上都平铺,就像以往背景图像的通常做法一样。repeat-x
和 repeat-y
分别导致图像只在水平或垂直方向上重复,no-repeat
则不允许图像在任何方向上平铺。默认地,背景图像将从一个元素的左上角开始。请看下面的例子:
body{ background-image: url(/i/eg_bg_03.gif);background-repeat: repeat-y;}
background-repeat
属性
值 | 描述 |
---|---|
repeat
|
默认。背景图像将在垂直方向和水平方向重复。 |
repeat-x
|
背景图像将在水平方向重复。 |
repeat-y
|
背景图像将在垂直方向重复。no-repeat
|
inherit
|
规定应该从父元素继background-repeat 属性的设置。
|
### 背景定位 |
可以利用background-position
属性改变图像在背景中的位置。下面的例子在body
元素中将一个背景图像居中放置:
body{ background-image:url('/i/eg_bg_03.gif');background-repeat:no-repeat;background-position:center;}
为 background-position
属性提供值有很多方法。首先,可以使用一些关键字:top
、bottom
、left
、right
和 center
。通常,这些关键字会成对出现,不过也不总是这样。还可以使用长度值,如100px
或 5cm
,最后也可以使用百分数值。不同类型的值对于背景图像的放置稍有差异。
关键字
图像放置关键字最容易理解,其作用如其名称所表明的。例如,top right 使图像放置在元素内边距区的右上角。根据规范,位置关键字可以按任何顺序出现,只要保证不超过两个关键字 - 一个对应水平方向,另一个对应垂直方向。如果只出现一个关键字,则认为另一个关键字是 center。
所以,如果希望每个段落的中部上方出现一个图像,只需声明如下:
p{ background-image:url('bgimg.gif');background-repeat:no-repeat;background-position:top;}
下面是等价的位置关键字:
单一关键字 | 等价的关键字 |
---|---|
center
|
center center |
top
|
top center 或 center top |
bottom
|
bottom center 或 center bottom |
right
|
right center 或 center right |
left
|
left center 或 center left |
百分数值
百分数值的表现方式更为复杂。假设你希望用百分数值将图像在其元素中居中,这很容易:
body { background-image:url('/i/eg_bg_03.gif'); background-repeat:no-repeat; background-position:50% 50%; }
}
这会导致图像适当放置,其中心与其元素的中心对齐。换句话说,百分数值同时应用于元素和图像。也就是说,图像中描述为 50% 50%
的点(中心点)与元素中描述为50%
50%
的点(中心点)对齐。如果图像位于 0% 0%
,其左上角将放在元素内边距区的左上角。如果图像位置是 100% 100%
,会使图像的右下角放在右边距的右下角。因此,如果你想把一个图像放在水平方向2/3
、垂直方向1/3
处,可以这样声明:
body { background-image:url('/i/eg_bg_03.gif'); background-repeat:no-repeat; background-position:66% 33%; }
如果只提供一个百分数值,所提供的这个值将用作水平值,垂直值将假设为 50%
。这一点与关键字类似。background-position
的默认值是 0% 0%
,在功能上相当于top left
。这就解释了背景图像为什么总是从元素内边距区的左上角开始平铺,除非设置了不同的位置值。
长度值
长度值解释的是元素内边距区左上角的偏移。偏移点是图像的左上角。比如,如果设置值为50px 100px
,图像的左上角将在元素内边距区左上角向右 50 像素、向下 100 像素的位置上:
body { background-image:url('/i/eg_bg_03.gif'); background-repeat:no-repeat; background-position:50px 100px; }
注意,这一点与百分数值不同,因为偏移只是从一个左上角到另一个左上角。也就是说,图像的左上角与 background-position 声明中的指定的点对齐。
背景关联
如果文档比较长,那么当文档向下滚动时,背景图像也会随之滚动。当文档滚动到超过图像的位置时,图像就会消失。可以通过background-attachment
属性防止这种滚动。通过这个属性,可以声明图像相对于可视区是固定的(fixed
),因此不会受到滚动的影响:
body { background-image:url(/i/eg_bg_02.gif); background-repeat:no-repeat; background-attachment:fixed }
实例四:
<html><head><style type="text/css">body {background-image:url(/i/eg_bg_02.gif);background-repeat:no-repeat;background-attachment:fixed}</style></head><body><p>图像不会随页面的其余部分滚动。</p><p>A</p><p>B</p><p>C</p><p>D</p><p>E</p><p>F</p><p>G</p><p>H</p><p>I</p><p>J</p><p>K</p><p>L</p><p>M</p><p>N</p><p>O</p><p>P</p><p>Q</p><p>R</p><p>S</p><p>T</p><p>W</p><p>X</p><p>Y</p><p>Z</p><p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p><p>9</p></body></html>
更多实例
边框
边框属性
属性 | 描述 |
---|---|
border
|
简写属性,用于把针对四个边的属性设置在一个声明。 |
border-style
|
用于设置元素所有边框的样式,或者单独地为各边设置边框样式。 |
border-width
|
简写属性,用于为元素的所有边框设置宽度,或者单独地为各边边框设置宽度。 |
border-color
|
简写属性,设置元素的所有边框中可见部分的颜色,或为 4 个边分别设置颜色。 |
border-bottom
|
简写属性,用于把下边框的所有属性设置到一个声明中。 |
border-bottom-color
|
设置元素的下边框的颜色。 |
border-bottom-style
|
设置元素的下边框的样式。 |
border-bottom-width
|
设置元素的下边框的宽度。 |
border-left
|
简写属性,用于把左边框的所有属性设置到一个声明中。 |
border-left-colo
|
r设置元素的左边框的颜色。 |
border-left-style
|
设置元素的左边框的样式。 |
border-left-width
|
设置元素的左边框的宽度。 |
border-right
|
简写属性,用于把右边框的所有属性设置到一个声明中。 |
border-right-color
|
设置元素的右边框的颜色。 |
border-right-style
|
设置元素的右边框的样式。 |
border-right-width
|
设置元素的右边框的宽度。 |
border-top
|
简写属性,用于把上边框的所有属性设置到一个声明中。 |
border-top-color
|
设置元素的上边框的颜色。 |
border-top-style
|
设置元素的上边框的样式。 |
border-top-width
|
设置元素的上边框的宽度。 |
### 边框的样式 |
样式是边框最重要的一个方面,这不是因为样式控制着边框的显示(当然,样式确实控制着边框的显示),而是因为如果没有样式,将根本没有边框。CSS 的 border-style
属性定义了 10 个不同的非 inherit
样式,包括 none
。例如,可以为把一幅图片的边框定义为outset
,使之看上去像是“凸起按钮”:
a:link img {border-style: outset;}
定义多种样式
可以为一个边框定义多个样式,例如:
p.aside {border-style: solid dotted dashed double;}
上面这条规则为类名为 aside
的段落定义了四种边框样式:实线上边框、点线右边框、虚线下边框和一个双线左边框。这里的值采用了top-right-bottom-left
的顺序,讨论用多个值设置不同内边距时也见过这个顺序。
定义单边样式
如果希望为元素框的某一个边设置边框样式,而不是设置所有 4 个边的边框样式,可以使用下面的单边边框样式属性:
- border-top-style
- border-right-style
- border-bottom-style
- border-left-style
因此这两种方法是等价的:
p {border-style: solid solid solid none;}p {border-style: solid; border-left-style: none;}
注意:如果要使用第二种方法,必须把单边属性放在简写属性之后。因为如果把单边属性放在 border-style
之前,简写属性的值就会覆盖单边值none
。
border-top-style
设置上边框的样式:
border-right-style
设置右边框的样式
border-bottom-style
设置下边框的样式:
border-left-style
设置左边框的样式:
边框的宽度
可以通过 border-width 属性为边框指定宽度。
为边框指定宽度有两种方法:可以指定长度值,比如2px
或0.1em
;或者使用 3 个关键字之一,它们分别是 thin
、medium
(默认值) 和 thick
。
注释:CSS 没有定义 3 个关键字的具体宽度,所以一个用户代理可能把 thin
、medium
和thick
分别设置为等于 5px
、3px
和 2px
,而另一个用户代理则分别设置为 3px
、2px
和 1px
。
所以,可以这样设置边框的宽度:
p {border-style: solid; border-width: 5px;}
或者:
p {border-style: solid; border-width: thick;}
值 | 描述 |
---|---|
thin
|
定义细的边框。 |
medium
|
默认。定义中等的边框。 |
thick
|
定义粗的边框。 |
length
|
允许您自定义边框的宽度。 |
inherit
|
规定应该从父元素继承边框宽度。 |
所有边框宽度属性在一个声明之中
定义单边宽度
可以按照top-right-bottom-left
的顺序设置元素的各边边框:
p {border-style: solid; border-width: 15px 5px 15px 5px;}
上面的例子也可以简写为(这样写法称为值复制):
p {border-style: solid; border-width: 15px 5px;}
也可以通过下列属性分别设置边框各边的宽度:
- border-top-width
- border-right-width
- border-bottom-width
- border-left-width
因此,下面的规则与上面的例子是等价的:
p { border-style: solid; border-top-width: 15px; border-right-width: 5px; border-bottom-width: 15px; border-left-width: 5px; }
border-top-width
设置上边框的宽度
border-right-width
设置右边框的宽度
度。
border-bottom-width
设置下边框的宽度
度。
border-left-width
设置左边框的宽度
度。
没有边框
在前面的例子中,已经看到,如果希望显示某种边框,就必须设置边框样式,比如solid
或 outset
。那么如果把 border-style
设置为 none
会出现什么情况:
p {border-style: none; border-width: 50px;}
尽管边框的宽度是 50px
,但是边框样式设置为none
。在这种情况下,不仅边框的样式没有了,其宽度也会变成0
。边框消失了,为什么呢?这是因为如果边框样式为none
,即边框根本不存在,那么边框就不可能有宽度,因此边框宽度自动设置为0
,而不论原先定义的是什么。记住这一点非常重要。事实上,忘记声明边框样式是一个常犯的错误。根据以下规则,所有h1
元素都不会有任何边框,更不用说 20 像素宽了:
h1 {border-width: 20px;}
由于border-style
的默认值是none
,如果没有声明样式,就相当于border-style: none
。因此,如果希望边框出现,就必须声明一个边框样式。
边框的颜色
设置边框颜色非常简单。CSS 使用一个简单的 border-color
属性,它一次可以接受最多 4 个颜色值。可以使用任何类型的颜色值,例如可以是命名颜色,也可以是十六进制和 RGB 值:
p { border-style: solid; border-color: blue rgb(25%,35%,45%) #909090 red; }
如果颜色值小于 4 个,值复制就会起作用。例如下面的规则声明了段落的上下边框是蓝色,左右边框是红色:
p { border-style: solid; border-color: blue red; }
注释:默认的边框颜色是元素本身的前景色。如果没有为边框声明颜色,它将与元素的文本颜色相同。另一方面,如果元素没有任何文本,假设它是一个表格,其中只包含图像,那么该表的边框颜色就是其父元素的文本颜色(因为 color
可以继承
)。这个父元素很可能是body
、div
或另一个 table。
border-color
属性
定义和用法
border-color
属性设置四条边框的颜色。此属性可设置 1 到 4 种颜色。
border-color
属性是一个简写属性,可设置一个元素的所有边框中可见部分的颜色,或者为 4 个边分别设置不同的颜色。例子 1
border-color:red green blue pink;
上边框是红色
右边框是绿色
下边框是蓝色
左边框是粉色
例子 2
border-color:red green blue;
上边框是红色
右边框和左边框是绿色
下边框是蓝色
例子 3
border-color:dotted red green;
上边框和下边框是红色
右边框和左边框是绿色
例子 4
border-color:red;
所有 4 个边框都是红色要记住,边框的样式不能为none
或 hidden
,否则边框不会出现。
值 | 描述 |
---|---|
color_name
|
规定颜色值为颜色名称的边框颜色(比如 red)。 |
hex_number
|
规定颜色值为十六进制值的边框颜色(比如 #ff0000)。 |
rgb_number
|
规定颜色值为 rgb 代码的边框颜色(比如 rgb(255,0,0))。 |
transparent
|
默认值。边框颜色为透明。 |
inherit
|
规定应该从父元素继承边框颜色。 |
设置四个边框的颜色
定义单边颜色
还有一些单边边框颜色属性。它们的原理与单边样式和宽度属性相同:
- border-top-color
- border-right-color
- border-bottom-color
- border-left-color
要为 h1 元素指定实线黑色边框,而右边框为实线红色,可以这样指定:
h1 { border-style: solid; border-color: black; border-right-color: red; }
border-top-color
设置上边框的颜色
border-right-color
设置右边框的颜色
border-bottom-color
设置下边框的颜色
border-left-color
设置左边框的颜色
透明边框
如果边框没有样式,就没有宽度。不过有些情况下可能希望创建一个不可见的边框。CSS2 引入了边框颜色值transparent
。这个值用于创建有宽度的不可见边框。下面的例子:
<a href="#">AAA</a><a href="#">BBB</a><a href="#">CCC</a>
为上面的链接定义了如下样式
a:link, a:visited { border-style: solid; border-width: 5px; border-color: transparent; }a:hover {border-color: gray;}
从某种意义上说,利用transparent
,使用边框就像是额外的内边距一样;此外还有一个好处,就是能在你需要的时候使其可见。这种透明边框相当于内边距,因为元素的背景会延伸到边框区域(如果有可见背景的话)。
重要事项:在 IE7 之前,IE/WIN 没有提供对 transparent
的支持。在以前的版本,IE 会根据元素的 color 值来设置边框颜色。
更多实例
CSS基础学习-背景、边框的学习相关推荐
- CSS基础之 背景属性设置
CSS设置背景,不但包括背景的颜色,还包括背景图片等设置,还是老规矩演示比较靠谱. 背景 背景颜色 背景颜色和文本颜色不同,一个是设置的是文本的颜色,一个是背景的颜色.使用的是backgrou-col ...
- 前端html+css基础知识汇总(个人学习内容总结,希望对你有帮助 内含部分代码)
*小知识点 0.定位和浮动做布局,移动transform做效果 例如;京东盒子上升效果 快捷键:ctrl+f 快速查找 ctrl+g 快速跳转行号 1.text-aline:center可以让什么元素 ...
- CSS基础之背景样式
目录 前言: 一:颜色背景 二:图片背景 三:致我们 前言: 当我们在网上浏览各种好看的页面时,网页的背景样式往往是吸引我们眼球的重要因素,有用颜色作为背景图的,也有用图片作背景图的.那么怎样利用CS ...
- 【黑马前端—CSS基础】背景
内容来自b站的黑马程序员pink老师 由我收集整理 总结 CSS 的背景 通过 CSS 背景属性,可以给页面元素添加背景样式. 背景属性可以设置背景颜色.背景图片.背景平铺.背景图片位置.背景图像固定 ...
- CSS基础(3.边框设置)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Python学习笔记:22 HTML5基础和CSS基础
了解一些HTML5的基础知识和CSS基础知识有助于爬虫的学习,在学习这些基础知识之前,首先要安装HBuiderX工具.直接到官网下载标准版即可. HTML基础 可以到HTML教程学习一下HTML基础知 ...
- 妙味课堂——HTML+CSS基础笔记
妙味课堂的课程讲得非常的清楚,受益匪浅.先把HTML和CSS基础课程部分视频的学习笔记记录如下: padding #PS基础 ##前端需要的PS技能 - PS技能(前端需要):切图.修图.测量 - P ...
- css做名单,css基础教程:2021年适合新手的7个CSS入门教程推荐
上一篇我们向同学们推荐了5个html入门教程,本篇我们继续向同学们精选推荐一些适合新手学习的CSS基础入门教程,欢迎学习! 首先我们来介绍什么是CSS?以及CSS的作用 CSS 是一种标准样式表语言, ...
- css背景颜色占全部屏幕,css怎样让背景充满整个屏幕
炫酷时钟 body{ height: 100%;color: #51555c; background: url("./img/bg1.png") no-repeat; /* 背景图 ...
最新文章
- 教你用一行Python代码实现并行(附代码)
- 【转】提示框第三方库之MBProgressHUD iOS toast效果 动态提示框效果
- 《编写高质量代码:改善C#程序的157个建议》勘误表
- 收集bug开源框架_划重点 | 小程序框架全面测评
- 主板模式的两项通用性接口
- ABP Framework 5.0 RC.1 新特性和变更说明
- IOS 设置文件是否使用ARC
- 为什么莫名其妙的就被调用了
- 我在互联网上买了很多课程,但是感觉在互联网学习没有什么效果很多买的课我都不想学了
- 在Power BI Desktop中实施星型架构
- mysql my.ini配置优化_求高手帮我优化一下 mysql 的 my.ini
- 2021 年 RISC-V 会有什么大变化?
- rds mysql_Amazon RDS上MySQL
- 【C语言】在VC中使用gotoxy函数实现光标的移动
- VS2017离线安装过程及下载缓慢处理(项目打包部署)
- Boost Test学习总结(C++)
- STM32 - L4系列芯片手册: LTDC功能
- WMS系统开发总结-移库管理-下架与上架
- 大一计算机在线测试,计算机在线测试
- 增量备份、差异备份、增量备份的区别?
热门文章
- UE4材质初探(转载)
- 如何实现微信二维码支付功能???
- 一次搞懂数据大屏适配方案 (vw vh、rem、scale)
- 计算机无法继续安装程序,解决方法:如果计算机继续无法安装图形驱动程序,该怎么办...
- 关于测试,我发现了哪些新大陆
- 后台管理系统(第一天)
- pikachu通关教程
- 图书管理系统(附带源码	)
- [CVPR 2020] D3Feat: Joint Learning of Dense Detection and Description of 3D Local Features
- 数商云:分享国内快消品B2B平台的仓储物流模式