CSS填充允许HTML编码人员在HTML元素外部设置默认填充或死区。这样做的好处是,它避免了编码人员为该元素的每个实例重复填充代码,并且更容易在页面上创建一致性。要填充的HTML元素可以是任意数量的内容,例如段落、表格或标题。
要在CSS中创建填充,首先必须标识要填充的HTML元素。要填充的元素称为选择器。然后,您需要指定适当的填充值。CSS中有五种不同类型的填充属性-一种用于元素的所有四个边,另四种用于元素的每一侧(例如,左侧、右侧、顶部或底部)。允许程序员同时为HTML元素的所有四个边指定值的属性称为速记属性。
用于指定CSS填充声明的编码语言只是单词“padding”。在该标签之后是填充的相关“值”,或者是所需空间量的信息,通常用像素或百分比表示。填充和值写在大括号或大括号内(即“{”和“}”)。在所有这些之前是要填充的HTML元素(例如,段落的“p”或级别2标题的“H2”)。
就值的表示方式而言,值可以用像素(例如1px或5px)、点(例如1pt或5pt)或英寸(例如1in或5in)或厘米(例如1cm或5cm)表示。值也可以声明为被样式化的HTML元素的百分比。例如,如果该值为50%,则填充将等于元素大小的一半。
下面的示例是分别以百分比和长度反映的值填充HTML元素的HTML代码。如果只指定了一个值,那么web浏览器会将此填充指定给HTML元素的所有四个边。
填充:10% 填充:100px;
向上面的填充声明类型添加更多值将导致web浏览器以某种方式对其进行解释。如果指定了两个值,第一个值将对应于顶部和底部,而第二个值对应于左侧和右侧。三个值将导致第一个值引用HTML元素的顶部,第二个值引用HTML元素的左侧和右侧,第三个值引用HTML元素的底部。分配最多四个值会导致第一、第二、第三和第四个值按顺序对应于HTML元素的顶部、右侧、底部和左侧。当提供多个值时,它们应以空格分隔,并以分号结尾,例如:
填充:10px 20px 10px 20px;
CSS中的填充也可以一次进行一面填充。在这方面,还有四个填充属性可用。这些是顶部填充、右侧填充、底部填充和左侧填充。要以这种更精确的方式在CSS中创建填充,您需要使用与上述速记声明相同的语法标记属性。这些填充属性中的每一个只接受一个长度或百分比值。例如:
填充顶部:10px 右边填充:20px 垫底:10px 左侧填充:20px;
下面的代码创建一个网页,声明样式标记之间的填充属性,然后在p标记指定的段落元素中使用它们。/*和*/之间的文本是注释,用于解释所使用的填充类型,不会包含在CSS填充代码中。
&书信电报;头> &书信电报;style type=“text/css”> p、 例1{填充:10px;}/*所有四个边的简写填充*/
;p、 例2{padding:50px 30px;}/*在顶部和底部加上简短的填充,然后加上左侧和右侧*/
;p、 示例3{
;顶部填充:10px;
;底部填充:20px;
;底部填充:10px;
;左侧填充:20px;
;}/*单独填充。*/ </风格> </头> &书信电报;车身> &书信电报;p class=“example1”>;此文本的每一侧都有相同的填充。每侧的衬垫为10px。</p> &书信电报;p class=“example2”>;此文本的顶部和底部填充为50px,左侧和右侧填充为30px。</p> &书信电报;p class=“example3”>;此文本的顶部填充为10px,右侧填充为20px,底部填充为10px,左侧填充为20px。</p> </车身> </html>;
在上面的示例中,“example1”等是分配给类的名称,然后在段落中引用。代码开头的p标记和类名之间的句点表示分配给段落的类的声明。请注意,类声明后面的大括号包含填充属性值赋值。
虽然这看起来可能需要做很多工作,但它远没有为每个段落指定填充所需的劳动强度大。您可以为所需元素声明一个padding属性,在上面的示例中是p标记,然后在页面的body标记之间使用该元素时引用该类。如果所有段落只需要一种填充类型,则根本不需要使用类。只需在样式标记之间使用以下代码,然后在不指定任何类的情况下对段落进行编码。此代码将在body标记之间传递,而不是上面示例中的代码。
p{填充:10px 20px 10px 20px;}
这将创建的CSS填充将影响所有段落,即使没有指定类。
...许你读过我们的一些HTML(理解HTML)和CSS教程,但不知道如何在更大的项目中使用这些语言。 ...
...统编程语言的特殊特性。我们将深入研究它是什么,它是如何工作的,以及你能用它做什么。我们把它分解一下。 ...
... 下面是几个简单的CSS示例,向您展示如何在web页面上进行一些基本的样式更改。 ...
...得)。你为你的WordPress网站做的设计(你可以在这里学习如何在Photoshop中做)。可选:如果你不想使用内置在WordPress中的主题编辑器,你应该得到一个编程友好的文本编辑器(下面是我们为Windows和OS X挑选的。)可选:由于您的Wor...
...个属性。 覆盖的关键领域 1.什么是边距定义,例2.什么是填充定义,例3.边距和填充的区别-关键区别的比较 关键术语 CSS,边距,填充 什么是边缘(margin)? Margin是CSS中的一个属性,用于在元素周围、边界之外创建空间。程序员...
在我们关于如何创建网站的夜校系列的第一部分中,我们学习了一些关于网页的基本知识:HTML。在今天的课程中,我们将开始使用样式和CSS将衣服放到我们的网站上。上面的视频将引导您了解将样式应用于HTML文档中元素的三种...
CSS填充是CSS框模型的属性之一。此速记属性设置HTML元素所有四个边的填充。CSS填充几乎可以应用于每个HTML标记(除了一些表标记)。此外,元素的所有四边都可以具有不同的值。 css填充属性 要使用速记CSS填充属性,您可...
浏览器处理空白的方式一开始不是很直观,特别是当您比较超文本标记语言相对于文字处理程序处理空白的方式时。在文字处理软件中,您可以在文档中添加大量间距或制表符,这些间距将反映在文档内容的显示中。这种所见...
...效果应该由CSS管理。CSS3添加了选框模块,以控制浏览器如何向元素添加选框效果。 新的css3属性 CSS3添加了五个新属性来帮助控制内容在字幕中的显示方式:溢出样式、字幕样式、字幕播放计数、字幕方向和字幕速度。 溢出...
了解如何使用CSS创建段落的首字母大写别致。甚至还有一种简单的图像替换技术,可以将图形图像用于初始cap。 首字母大写的基本样式 文档中的首字母大写有三种基本样式: 凸起-最常见,第一个字母较大,与当前文...