html彩色背景指令,HTML_第四章 颜色背景的CSS,本 章 C S S 的 主 - phpStudy...

第四章 颜色背景的CSS

本 章 C S S 的 主 要 作 用

在前面的章节介绍完了声明与应用的方法及 一些特性之後,从这章开始,便要正式进入CSS的指令介绍了!本章有两个介绍的主 题,第一个部份介绍的是颜色与背景性质的CSS,其主要的作用在于设定元素的前景 颜色、背景颜色与背景图形等样式设定的性质;而第二部份为您介绍的是用于控制摆放 元素位置的CSS的指令。

颜 色 背 景 的 C S S 指 令

color 设定前景颜色

支 持:IE3、IE4、NC4

适 用:所有元素

可能值: 设定颜色,请参考第一章颜色使用的相关说明

预设值:视浏览器而定

继承性:有

一般范例:SPAN { color : BLUE }

同轴范例:

background-color 设定背景颜色

支 持:IE4、NC4

适 用:所有元素

可能值: 设定颜色,请参考第一章颜色使用的相关说明

transparent 将父元素(颜色或图案)的背景透明化

预设值:transparent

继承性:无

一般范例:BODY { background-color : BLUE }

同轴范例:

background-image 设定背景图形

支 持:IE4、NC4

适 用:所有元素

可能值: 设定图档URL,请参考第一章URL表示的相关说明

none 不使用背景图案

预设值:transparent

继承性:无

一般范例:

BODY { background-image : URL("http://yourweb/path/file_name") }

同轴范例:

background-repeat 设定背景重复

支 持:IE4、NC4

适 用:所有元素

可能值: repeat 重复背景图形填满页面

repeat-x 水平方向重复背景图形

repeat-y 垂直方向重复背景图形

no-repeat 不重复显示背景图形

预设值:repeat

继承性:无

一般范例:BODY { background-repeat : repeat-x }

同轴范例:

background-attachment 设定背景附着

支 持:IE4、NC4

适 用:所有元素

可能值: scroll 背景图形随着卷轴卷动

fixed 背景图形随着卷轴卷动(浮水印)

预设值:scrool

继承性:无

一般范例:BODY { background-attachment : fixed }

同轴范例:

background-position 设定背景位置

支 持:IE4、NC4

适 用:区块元素

可能值: X% Y% 图形上X% Y%的点对准元素的X% Y%位置

X Y 将图形左上角置于元素左上角水平 X垂直 Y之处

center 背景图形置于中央

left 背景图形对 左边

right 背景图形对 右边

top 背景图形对 顶部

bottom 背景图形对 底部

预设值:0% 0%

继承性:无

一般范例:BODY { background- position : 100% 50% }

同轴范例:

background 综合设定背景性质

支 持:IE3、IE4、NC4

适 用:所有元素

可能值: background-color 设定背景颜色

background-image 设定背景图形

background-repeat 设定背景重复

background-attachment 设定背景附着

background-position 设定背景位置

预设值:无

继承性:无

一般范例:

BODY { BLUE url(image/gif) repeat-x fixed center }

同轴范例:

位 置 摆 放 的 C S S 指 令

float 设定浮动性质(多用于文绕图的情形)

支 持:IE4、NC4

适 用:区块元素或图形

可能值: left 元素靠左,文字围绕其右

right 元素靠右,文字围绕其左

none 以预设的方法显示

预设值:none

继承性:无

一般范例:DIV { float : right }

同轴范例:

clear 设定清除性质(设定是否允许浮动元素之存在)

支 持:IE4

适 用:区块元素或图形

可能值: both 若两边有浮动元素,则该元素移至浮动元素下方

left 若左边有浮动元素,则该元素移至浮动元素下方

right 若右边有浮动元素,则该元素移至浮动元素下方

none 以预设的方法显示

预设值:none

继承性:无

一般范例:DIV { clear : right }

同轴范例:

width 设定宽度

支 持:IE4、NC4

适 用:区块元素或图形

可能值: 长度单位,请参考第一章基本单位的相关说明

百分比,以父元素宽度为基准

auto 以固定比例自动变化大小

预设值:auto

继承性:无

一般范例:DIV { width : 300pt }

同轴范例:

height 设定高度

支 持:IE4、NC4

适 用:区块元素或图形

可能值: 长度单位,请参考第一章基本单位的相关说明

百分比,以父元素宽度为基准

auto 以固定比例自动变化大小

预设值:auto

继承性:无

一般范例:DIV { height : 300pt }

同轴范例:

position 设定位置

支 持:IE4、NC4

适 用:区块元素

可能值: absolute 以父元素为基准,摆设在特定位置上

relative 以相邻元素为基准,摆设在特定位置上

static 预设位置,以该元素于原始码中位置而定

预设值:absolute

继承性:无

一般范例:DIV { position : static }

同轴范例:

top 设定顶端位置

支 持:IE4、NC4

适 用:区块元素

可能值: 长度单位,请参考第一章基本单位的相关说明

百分比,以父元素宽度为基准

auto 以正常方式显示

预设值:auto

继承性:无

一般范例:DIV { top : 30pt }

同轴范例:

left 设定左端位置

支 持:IE4、NC4

适 用:区块元素

可能值: 长度单位,请参考第一章基本单位的相关说明

百分比,以父元素宽度为基准

auto 以正常方式显示

预设值:auto

继承性:无

一般范例:DIV { left : 30pt }

同轴范例:

clip 设定裁剪(设定某区域形状及大小,区域外通透)

支 持:IE4、NC4

适 用:区块元素

可能值: rect(top,right,bottom,left) 设定矩形之上右下左长度,会自动比对对边长度

一般 写法为rect(0,长度,长度,0)

不可以写为rect(0,0,长度,长度)

四个数值皆可以"auto"代替

auto 以正常方式显示

预设值:auto

继承性:无

一般范例:DIV { clip : rect(0,100px,50px,0) }

同轴范例:

overflow 设定溢位处理(控制当元素内容超过该元素大小时的显示方式)

支 持:IE4

适 用:区块元素

可能值: visible 元素将不会依所设订大小显示,而能看见所有内容

hidden 超过元素所设订大小之部份将被隐藏不予显示

scroll 如有必要出现卷轴可让使用者看到全部的内容

auto 以预设的方式显示

预设值:auto

继承性:无

一般范例:DIV { overflow : scroll }

同轴范例:

visibility 设定可视度

支 持:IE4、NC4

适 用:所有元素

可能值: visible 设定该元素显示

hidden 设定该元素不显示,但仍占据空间

inherit 以父元素可视度决定

预设值:inherit

继承性:无

一般范例:DIV { visibility : hidden }

同轴范例:

z-index 设定Z轴参数(三度空间)

支 持:IE4、NC4

适 用:区块元素

可能值: 十进位数值,数值大的元素会出现在数值小的元素的上方

auto 当元素位置重复时,原始码中写在後面元素会出现在写在前面元素的上方

预设值:auto

继承性:无

一般范例:DIV { z-index : 3 }

同轴范例:

本文作者:相关阅读:

asp.NET中使用include

DOS下网络浏览器的使用方法

MYSQL教程:如何选择正确的数据列类型

Windows2008 最新版Apache2、PHP5、MySQL6、PHPMyadmin、ZendOptimizer安装图解

CSS 透明背景时,记得给容器加上width宽度

css图片自适应大小

白刃之战:PHP vs. ASP.NET(节选)-架构比较

MYSQL教程:MySQL的一些优化配置

ASP 千万级数据分页的存储过程

IIS 6 的 PHP 最佳配置方法

JavaScript中Math对象使用说明

Notice: Undefined index: page in E:\PHP\test.php on line 14

JDBC连接Oracle数据库常见问题及解决方法

用CSS构建iframe效果

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/505632.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

arcgis xml 下载 切片_xml格式文件如何用arcgis进行编辑和更新

展开全部为了让你的解析器能够明白这些62616964757a686964616fe59b9ee7ad9431333335343339字符,你必须在XML文档中统一的字符编码标准。--------------------------------------------------------------------------------Windows 95/98 记事本Windows 95/98 记事本…

计算机c盘用户,windows 7 c盘的用户文件夹users如何转移

在这儿逛的朋友一看转移系统文件夹,肯定想到了Windows7优化大师或者魔方,通过他们可以轻松的转移“收藏夹”、“我的文档”等等系统文件夹。但是,如果要把 c:users 这个文件夹彻底转移怎么办呢?Windows7的用户文件夹默认所在位置是系统盘(通…

spark-sql建表语句限制_SparkSQL

SparkSQL介绍Hive是Shark的前身,Shark是SparkSQL的前身,SparkSQL产生的根本原因是其完全脱离了Hive的限制。SparkSQL支持查询原生的RDD。 RDD是Spark平台的核心概念,是Spark能够高效的处理大数据的各种场景的基础。能够在scala中写SQL语句。支持简单的SQ…

docker harbor 域名_docker registry harbor

部署 harbor安装方式: offline软件安装需求:docker 1.10.0 and docker-compose 1.6.0docker 我们选用官方的 repo , yum install docker-ce -ydocker-compose , yum install python-pip,pip install docker-compose下载 Harbor离线安装包: ht…

groupwise_GroupWise部分文档翻译

最近用到了GroupWise,BaiDu了一下,基本没有中文资料,所以只有看英文文档,顺便把看到的东西记录下来,以备以后使用.*****PostOffice的信息存储1.PostOffice数据库PostOffice数据库(wphost.db)包括了所有PostOffice管理的信息,包括PostOffice地址薄(Address Book)的Copy,在GW系统…

苏州大学计算机学院报录比,【图片】18年苏州大学计算机872考研经验分享【苏州大学研究生吧】_百度贴吧...

该楼层疑似违规已被系统折叠 隐藏此楼查看此楼二、面试苏大的面试环节个人感觉就很水了。面试一共300′,但是大多数人五分钟就完事了,所以不大会有什么差距,除非你很优秀或者是什么都答不上来。苏大的面试是分组的,具体分到什么组…

计算机大作业论文意义,大学的大作业是什么?

原标题:大学的大作业是什么?大学里面的大作业一般就是课程设计之类的,一些老师会让学生做些课外实践的作业,作为平时成绩的一部分大作业听起来很高大上,然而好多课程其实只是一篇论文。论文类的就是有点水的了。毕竟学…

arduino智能浇花系统_arduino+水泵+继电器+RFID

arduino继电器电机应用场合:加湿器、自动浇花、智能门锁、报警系统.......总之很多场合都适用。本章就介绍利用RFID卡输入,驱动水泵。/* * ---------------------------------------------------------------------------------------------------------…

改革以来计算机应用发展总结,计算机应用基础总结论文

高等教育教学改革不仅仅只是对知识的更新,对教学方法的改进,课程的考试模式改革也是非常重要的。下面是学习啦小编为大家整理的计算机应用基础总结论文,供大家参考。计算机应用基础总结论文范文一:计算机应用基础课程教学改革分析摘要:计算机…

7段均衡器最佳调节图_超高级的吉他均衡器 更细腻的控制 你值得拥有

BOSS DD-200吉他均衡器最近 BOSS推出了一款全新的吉他均衡效果器,为了追求更细腻的控制,这一次的更新,EQ200 可以说做出了不少的颠覆性改进。面板上很直观的看到,EQ的推子增加到了10段,外加一个总音量,对于…

金华职业技术学院计算机应用技术分数线,金华职业技术学院录取分数线2021是多少分(附历年录取分数线)...

金华职业技术学院录取分数线2020是多少分,各专业录取分数线是多少,是每个填报金华职业技术学院的考生最关注的问题,随着各省高考录取批次相继公布,考生也开始关心是否被录取,本站小编整理相关信息供参考,仅…

京瓷m5021cdn如何设置扫描_京瓷产品让您轻松应对潮湿天气

随着即将到来的四月,中国南方大部分地区也将伴随着雨季的到来。这也意味着很多复印件、打印机将会收到潮湿天气的影响,更容易出现卡纸、图像模糊等一系列问题。而京瓷公司最新推出的“黑金刚”系列增加了特有的感光鼓加热功能,有效减少机器受…

矩阵键盘简易计算机设计报告,矩阵键盘显设计报告..doc

摘要在日常生活中,我们经常要用到键盘来实现对电子装置的控制。小到手表手机,中到电视电脑,大到各种复杂仪器,都需要通过各种按键来实现各种操作。本次课程设计以按键控制显示为主题,以MSP430G2553单片机及其接口芯片为…

server sql 去 反斜杠_%00截断配合反序列化的奇妙利用

文章来源:安全客原文链接:%00截断配合反序列化的奇妙利用 - 安全客,安全资讯平台前言前段时间做了一个CTF题目,发现这道题目相当的精妙,主要是利用了%00的截断来绕过安全校验,最终利用反序列化达成目的。漏…

计算机内码和国际码的转换,汉字机内码、国标码和区位码之间转换关系图

《汉字机内码、国标码和区位码之间转换关系图》由会员分享,可在线阅读,更多相关《汉字机内码、国标码和区位码之间转换关系图(1页珍藏版)》请在人人文库网上搜索。1、区位码区位码 (4 4位十进制位十进制) 国标码国标码 (十六进制十六进制) 机内码机内码 …

刷卡提示57能恢复吗_硬盘格式化之后数据还能恢复吗?

硬盘格式化之后数据还能恢复吗? 移动硬盘是工作生活中常用的一种存储介质,如果在其中存储了重要的数据,但是却因为中了病毒、人为删除或者不小心误删除文件或是格式化等而导致数据丢失该怎么办?移动硬盘数据可以恢复吗?如何进行移…

win7电脑蓝屏没有修复计算机,教你win7开机蓝屏怎么修复

在使用电脑的过程中,经常会遇到一些问题,最常见的莫过于win7开机蓝屏了,很多朋友并不知道win7开机蓝屏怎么修复,那么遇到win7开机蓝屏的情况应该怎么办呢?下面小编针对此问题教程大家开机蓝屏怎么修复。方法一、系统自…

如何计算给定一个unigram语言模型_CS224n笔记[5]:语言模型(LM)和循环神经网络(RNNs)...

CS224n笔记[5]:语言模型(LM)和循环神经网络(RNNs)作者:郭必扬许久没更新了,十分惭愧,翻了翻之前的笔记,才之前上一期我们讲的是“依存分析”。本期,我们介绍一下语言模型…

怎么从计算机上删除东西吗,怎么在电脑中删除不想要的软件

在电脑中删除不想要的软件该怎么操作呢,那么怎么在电脑中删除不想要的软件的呢?下面是学习啦小编收集整理的怎么在电脑中删除不想要的软件,希望对大家有帮助~~在电脑中删除不想要的软件的方法工具/原料笔记本电脑 或者台式电脑方法/步骤用鼠标点击选择电…

js输出100以内的质数_Python 计数质数

一个很经典的问题,从 2 到 N ,一共有多少个质数??一个非常 Naive 的方法,从 2 到 N,判断每个数是不是质数只判断一个数是不是质数,需要 的时间,现在有 N 个数,那么就是 埃…