整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线：

《CSS笔记》-W3C进阶样式(三)

置表单的样式

属性选择器在为不带有 class 或 id 的表单设置样式时特别有用：

input[type="text"]

{

width:150px;

display:block;

margin-bottom:10px;

background-color:yellow;

font-family: Verdana, Arial;

}

input[type="button"]

{

width:120px;

margin-left:35px;

display:block;

font-family: Verdana, Arial;

}

如何插入样式表

当读到一个样式表时，浏览器会根据它来格式化 HTML 文档。插入样式表的方法有三种：

外部样式表

当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 <link> 标签链接到样式表。<link> 标签在（文档的）头部：

<head>

<link rel="stylesheet" type="text/css" href="mystyle.css" />

</head>

浏览器会从文件 mystyle.css 中读到样式声明，并根据它来格式文档。

外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存。下面是一个样式表文件的例子：

hr {color: sienna;}

p {margin-left: 20px;}

body {background-image: url("images/back40.gif");}

内部样式表

当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 <style> 标签在文档头部定义内部样式表，就像这样:

<head><style type="text/css">

hr {color: sienna;}

p {margin-left: 20px;}

body {background-image: url("images/back40.gif");}</style></head>

多重样式

如果某些属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来。

例如，外部样式表拥有针对 h3 选择器的三个属性：

h3 {

color: red;

text-align: left;

font-size: 8pt;

}

而内部样式表拥有针对 h3 选择器的两个属性：

h3 {

text-align: right;

font-size: 20pt;

}

假如拥有内部样式表的这个页面同时与外部样式表链接，那么 h3 得到的样式是：

color: red;

text-align: right;

font-size: 20pt;

即颜色属性将被继承于外部样式表，而文字排列（text-alignment）和字体尺寸（font-size）会被内部样式表中的规则取代。

背景色

可以使用 background-color 属性为元素设置背景色。这个属性接受任何合法的颜色值。

这条规则把元素的背景设置为灰色：

p {background-color: gray;}

如果您希望背景色从元素中的文本向外少有延伸，只需增加一些内边距：

p {background-color: gray; padding: 20px;}

背景图像

要把图像放入背景，需要使用 background-image 属性。background-image 属性的默认值是 none，表示背景上没有放置任何图像。

如果需要设置一个背景图像，必须为这个属性设置一个 URL 值：

body {background-image: url(/i/eg_bg_04.gif);}

背景关联

如果文档比较长，那么当文档向下滚动时，背景图像也会随之滚动。当文档滚动到超过图像的位置时，图像就会消失。

您可以通过 background-attachment 属性防止这种滚动。通过这个属性，可以声明图像相对于可视区是固定的（fixed），因此不会受到滚动的影响：

body

{

background-image:url(/i/eg_bg_02.gif);

background-repeat:no-repeat; background-attachment:fixed

}

background-attachment 属性的默认值是 scroll，也就是说，在默认的情况下，背景会随文档滚动。

缩进文本

把 Web 页面上的段落的第一行缩进，这是一种最常用的文本格式化效果。

CSS 提供了 text-indent 属性，该属性可以方便地实现文本缩进。

通过使用 text-indent 属性，所有元素的第一行都可以缩进一个给定的长度，甚至该长度可以是负值。

这个属性最常见的用途是将段落的首行缩进，下面的规则会使所有段落的首行缩进 5 em：

p {text-indent: 5em;}

水平对齐

text-align 是一个基本的属性，它会影响一个元素中的文本行互相之间的对齐方式。它的前 3 个值相当直接，不过第 4 个和第 5 个则略有些复杂

text-align:center 与 <CENTER>

您可能会认为 text-align:center 与 <CENTER> 元素的作用一样，但实际上二者大不相同。

<CENTER> 不仅影响文本，还会把整个元素居中。text-align 不会控制元素的对齐，而只影响内部内容。元素本身不会从一段移到另一端，只是其中的文本受影响。

字间隔

word-spacing 属性可以改变字（单词）之间的标准间隔。其默认值 normal 与设置值为 0 是一样的。

字符转换

text-transform 属性处理文本的大小写。这个属性有 4 个值：

  • none

  • uppercase

  • lowercase

  • capitalize

默认值 none 对文本不做任何改动，将使用源文档中的原有大小写。顾名思义，uppercase 和 lowercase 将文本转换为全大写和全小写字符。最后，capitalize 只对每个单词的首字母大写。

作为一个属性，text-transform 可能无关紧要，不过如果您突然决定把所有 h1 元素变为大写，这个属性就很有用。不必单独地修改所有 h1 元素的内容，只需使用 text-transform 为你完成这个修改：

h1 {text-transform: uppercase}

处理空白符

white-space 属性会影响到用户代理对源文档中的空格、换行和 tab 字符的处理。

使用 em 来设置字体大小

如果要避免在 Internet Explorer 中无法调整文本的问题，许多开发者使用 em 单位代替 pixels。

W3C 推荐使用 em 尺寸单位。

1em 等于当前的字体尺寸。如果一个元素的 font-size 为 16 像素，那么对于该元素，1em 就等于 16 像素。在设置字体大小时，em 的值会相对于父元素的字体大小改变。

浏览器中默认的文本大小是 16 像素。因此 1em 的默认尺寸是 16 像素。

可以使用下面这个公式将像素转换为 em：pixels/16=em

（注：16 等于父元素的默认字体大小，假设父元素的 font-size 为 20px，那么公式需改为：pixels/20=em）

实例

h1 {font-size:3.75em;} /* 60px/16=3.75em */h2 {font-size:2.5em;} /* 40px/16=2.5em */p {font-size:0.875em;} /* 14px/16=0.875em */

设置链接的样式

能够设置链接样式的 CSS 属性有很多种（例如 color, font-family, background 等等）。

链接的特殊性在于能够根据它们所处的状态来设置它们的样式。

链接的四种状态：

  • a:link - 普通的、未被访问的链接

  • a:visited - 用户已访问的链接

  • a:hover - 鼠标指针位于链接的上方

  • a:active - 链接被点击的时刻

实例

a:link {color:#FF0000;}/* 未被访问的链接 */a:visited {color:#00FF00;}/* 已被访问的链接 */a:hover {color:#FF00FF;}/* 鼠标指针移动到链接上 */a:active {color:#0000FF;}/* 正在被点击的链接 */

当为链接的不同状态设置样式时，请按照以下次序规则：

  • a:hover 必须位于 a:link 和 a:visited 之后

  • a:active 必须位于 a:hover 之后

文本修饰

text-decoration 属性大多用于去掉链接中的下划线：

实例

a:link {text-decoration:none;}

a:visited {text-decoration:none;}

a:hover {text-decoration:underline;}

a:active {text-decoration:underline;}

CSS 列表属性允许你放置、改变列表项标志，或者将图像作为列表项标志。

要修改用于列表项的标志类型，可以使用属性 list-style-type：

ul {list-style-type : square}

上面的声明把无序列表中的列表项标志设置为方块。

列表项图像

有时，常规的标志是不够的。你可能想对各标志使用一个图像，这可以利用 list-style-image 属性做到：

ul li {list-style-image : url(xxx.gif)}

只需要简单地使用一个 url() 值，就可以使用图像作为标志。

列表标志位置

CSS2.1 可以确定标志出现在列表项内容之外还是内容内部。这是利用 list-style-position 完成的。

简写列表样式

为简单起见，可以将以上 3 个列表样式属性合并为一个方便的属性：list-style，就像这样：

li {list-style : url(example.gif) square inside}

list-style 的值可以按任何顺序列出，而且这些值都可以忽略。只要提供了一个值，其它的就会填入其默认值。

CSS 表格属性可以帮助您极大地改善表格的外观

表格边框

如需在 CSS 中设置表格边框，请使用 border 属性。

下面的例子为 table、th 以及 td 设置了蓝色边框：

table, th, td

{

border: 1px solid blue;

}

表格宽度和高度

通过 width 和 height 属性定义表格的宽度和高度。

表格文本对齐

text-align 和 vertical-align 属性设置表格中文本的对齐方式。

vertical-align 属性设置垂直对齐方式，比如顶部对齐、底部对齐或居中对齐：

表格内边距

如需控制表格中内容与边框的距离，请为 td 和 th 元素设置 padding 属性：

td

{

padding:15px;

}

CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式。

CSS 框模型概述

元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。

提示：背景应用于由内容和内边距、边框组成的区域。

在 CSS 中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。

假设框的每个边上有 10 个像素的外边距和 5 个像素的内边距。如果希望这个元素框达到 100 个像素，就需要将内容的宽度设置为 70 像素，请看下图：

#box {

width: 70px;

margin: 10px;

padding: 5px;

}

术语翻译

  • element : 元素。

  • padding : 内边距，也有资料将其翻译为填充。

  • border : 边框。

  • margin : 外边距，也有资料将其翻译为空白或空白边。

CSS padding 属性

CSS padding 属性定义元素的内边距。padding 属性接受长度值或百分比值，但不允许使用负值。

单边内边距属性

也通过使用下面四个单独的属性，分别设置上、右、下、左内边距：

  • padding-top

  • padding-right

  • padding-bottom

  • padding-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;}

CSS margin 属性

设置外边距的最简单的方法就是使用 margin 属性。

一切皆为框

div、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为一块内容，即“块框”。与之相反，span 和 strong 等元素称为“行内元素”，这是因为它们的内容显示在行中，即“行内框”。

CSS 定位机制

CSS 有三种基本的定位机制：普通流、浮动和绝对定位。

CSS position 属性

通过使用 position 属性，我们可以选择 4 种不同类型的定位，这会影响元素框生成的方式。

position 属性值的含义：

  • static

  • 元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。

  • relative

  • 元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。

  • absolute

  • 元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。

  • fixed

  • 元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身

欢迎关注公众号（hongji8410）和加入QQ群一起交流（522342554）

CSS3，你可以创建圆角边框，添加阴影框，并作为边界的形象而不使用设计程序，如Photoshop。

在这里边您将了解以下的边框属性：

  • border-radius

  • box-shadow

  • border-image

CSS3 圆角

在CSS2中添加圆角棘手。我们不得不在每个角落使用不同的图像。

在CSS3中，很容易创建圆角。

在CSS3中border-radius属性被用于创建圆角：

这是圆角边框！

实例

在div中添加圆角元素：

div

{

border:2px solid;

border-radius:25px;

}

CSS3盒阴影

CSS3中的box-shadow属性被用来添加阴影:

实例

在div中添加box-shadow属性

div

{

box-shadow: 10px 10px 5px #888888;

}

CSS3边界图片

有了CSS3的border-image属性，你可以使用图像创建一个边框：

border-image属性允许你指定一个图片作为边框！ 用于创建上文边框的原始图像：

在div中使用图片创建边框:

实例

在div中使用图片创建边框

div

{

border-image:url(border.png) 30 30 round;

-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 and older */

-o-border-image:url(border.png) 30 30 round; /* Opera */

}

新边框属性

属性说明CSS
border-image设置所有边框图像的速记属性。3
border-radius一个用于设置所有四个边框- *-半径属性的速记属性3
box-shadow附加一个或多个下拉框的阴影3

如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039，我们一起飞！


个网页前端是由HTML DOM与嵌套组合形成视图结加上 CSS 样式的修饰形成视图，由JavaScript 接受用户的交互请求，以事件机制来响应用户交互操作而形成的。CSS是前台页面形式最重要的部分，它负责控制DOM元素的页面布局和颜色、大小的属性。

在CSS中有一著名的盒子模型理论，可以用它来控制DOM的位置。基于div+css技术的“盒子模型”的出现大大代替了传统的table表格嵌套。

虽然其十分好用，但是对于很多新手来说，却很难搞清楚它几个属性和内容之间的联系个区别。

盒子模型概念

所有页面的元素都可以看做一个盒子，占据着一定的页面空间。一般来说这些被占据的空间往往会比单纯的内容要大。因此，可以通过盒子的边框和距离等参数来控制内容的位置。

Div+CSS 盒子模型

说明：

1、Margin：中文叫外边距，主要作用是控制边框外（Border以外）的区域，外边距是透明的。

2、Border：中文叫边框，是围绕在内边距（Padding）和内容外的边框。注意，它不是透明的。

3、Padding：中文叫内边距，控制内容周围的区域，内边距是透明的。

4、Content：内容，盒子的内容，显示文本和图像。

5、在Css文件中设置的Div的Css.width和Css. height就是内容的宽和高。

6、盒子实际尺寸有可能大于内容尺寸：

盒子模型的总宽度等于content（宽）+padding（左右）+border（左右）+margin（左右）;

盒子模型的总高度等于content（高）+padding（上下）+border（上下）+margin（上下）;

实例演示--原始样式

接下来通过实例演示的方式来一一讲解Margin、Border、Padding的作用和区别。

页面如图所示：


原始样式

代码：

HTML:
<body>
    <div class="TsetUpper"></div>
    <div class="TsetMiddle"></div>
    <div class="TsetDown"></div>
</body>
CSS:
.TsetUpper{
	width: 400px;
	height: 200px;
	background-color: black;
	position: relative;
	margin: auto;
	text-align: center;
}
.TsetMiddle{
	width: 600px;
	height: 200px;
	background-color: red;
	position: relative;
	margin: auto;
}
.TsetDown{
	width: 400px;
	height: 200px;
	background-color: black;
	position: relative;
	margin: auto;
	text-align: center;
}

Border

元素边框：我们可以在CSS边框属性中设置元素边框的样式和颜色。

按如下代码设置Div(TsetMiddle)的Border（边框）：

border-style:solid;
border-width: 10px;
border-color: aqua;

刷新页面如下图：此时TsetMiddle这个盒子的总宽度已经变成200+30+30了，而且可以设置其底色和线条样式。

Border

Margin

margin 控制周围的元素区域。margin 没有背景颜色，是完全透明的。通过margin可以控制元素与四周元素的空隙距离；

按如下代码设置Div(TsetMiddle)的margin（外边距）：

margin: 30px auto;

刷新页面如下图：此时TsetMiddle这个盒子的总宽度已经变成200+30（Border）+30（Margin）+30（Border）+30（Margin）了。

Margin

Padding

Padding：当元素的 padding（填充）内边距被清除时，所释放的区域将会受到元素背景颜色的填充。

按如下代码设置Div(TsetMiddle)的margin（外边距）：

padding: 30px;

刷新页面如下图：此时TsetMiddle这个盒子的总宽度已经变成200+30（Padding）+30（Border）+30（Margin）+30（Padding）+30（Border）+30（Margin）了。

Padding

总结

1、各属性的值可以用px为单位，也可以用em，百分比等。

2、可以利用盒子的各种属性，调整其内容在父容器中的位置。


在线咨询
上一篇：如何在Java中将 WPS 文字文档转为 PDF？国产控件就能搞定
下一篇：html多页面实现背景音乐的连续播放，简单处理笔记

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

推荐阅读
友情链接 君山区 淅川县 金牛区 华容区 临沂 浦北县 网站制作
Copyright © 2002-2019 雨点网络设计有限公司 版权所有   冀ICP备11025394号
联系电话：   E-mail：279303980@qq.com  
主营业务：技术文章网站建设、网站定制、技术文章营销型网站建设、技术文章网站优化、技术文章微商城制作、三级分销系统开发
电话沟通
在线客服