在HTML中如何设置边框?

html-css017

在HTML中如何设置边框?,第1张

在html当中,为标签设置底部边框,采用border-bottom的CSS属性即可,具体代码如下:

<style>

2.con{

3. border-bottom: 5px solid #0004.  }5.</style>6.<div class="con">标签底部有5像素黑色边框</div>

超文本标记语言,标准通用标记语言下的一个应用。

“超文本”就是指页面内可以包含图片、链接,甚至音乐、程序等非文字元素。

超文本标记语言的结构包括“头”部分(英语:Head)、和“主体”部分(英语:Body),其中“头”部提供关于网页的信息,“主体”部分提供网页的具体内容。

1.所有的 HTML 元素本质上是小的矩形块,代表着某一小块区域。

有三个影响HTML元素布局的重要属性:padding(内边距)、margin(外边距)、border(边框)。

元素的 padding 控制元素内容 content和元素边框 border 之间的距离

在这儿,我们可以看到绿方块和红方块都位于黄方块之中,但是红方块比绿方块具有更大的 padding。

当你加大绿方块的 padding, 它将扩大元素内容和元素边框的距离。

<style>

.injected-text {

margin-bottom: -25px

text-align: center

}

.box {

border-style: solid

border-color: black

border-width: 5px

text-align: center

}

.yellow-box {

background-color: yellow

padding: 10px

}

.red-box {

background-color: red

padding: 20px

}

.green-box {

background-color: green

padding: 10px

}

</style>

<h5 class="injected-text">margin</h5>

<div class="box yellow-box">

<h5 class="box red-box">padding</h5>

<h5 class="box green-box">padding</h5>

</div>

2.元素的外边距 margin 控制元素边框 border 和元素实际所占空间的距离

3.如果你将一个元素的 margin 设置为负值,元素将会变大。

4.有时你想要自定义元素,使它的每一个边具有不同的 padding。

CSS 允许你使用 padding-top、padding-right、padding-bottom 和 padding-left来控制元素上右下左四个方向的 padding

<style>

.green-box {

background-color: green

padding-top: 40px

padding-right: 20px

padding-bottom: 20px

padding-left: 40px

}

</style>

<div class="box yellow-box">

<h5 class="box red-box">padding</h5>

<h5 class="box green-box">padding</h5>

</div>

5.有时你想要自定义元素,使它的每一个边具有不同的 margin。

CSS 允许你使用 margin-top、margin-right、margin-bottom 和 margin-left 来控制元素上右下左四个方向的 margin。

<style>

.green-box {

background-color: green

margin-top: 40px

margin-left: 40px

margin-right: 20px

margin-bottom: 20px

}

</style>

<div class="box yellow-box">

<h5 class="box red-box">padding</h5>

<h5 class="box green-box">padding</h5>

</div>

6.除了分别指定元素的 padding-top、padding-right、padding-bottom 和 padding-left 属性外,你还可以集中起来指定它们,举例如下:

padding: 10px 20px 10px 20px

这四个值以顺时针方式排列:顶部、右侧、底部、左侧,简称:上右下左

<style>

.red-box {

background-color: red

padding: 20px 40px 20px 40px

}

</style>

7.除了分别指定元素的 margin-top、margin-right、margin-bottom 和 margin-left 属性外,你还可以集中起来指定它们,举例如下:

margin: 10px 20px 10px 20px

这四个值以顺时针方式排列:顶部、右侧、底部、左侧,简称:上右下左

<style>

.red-box {

background-color: red

margin: 20px 40px 20px 40px

}

</style>

html是一种网页代码,即在网页中显示的格式,当需要表格左右显示不同的颜色时,可以分开设置,如:

border-top:1px solid red

border-right:1px solid blue

border-bottom:1px solid orange

border-left:1px solid pink。

HTML简介:

HTML不是编程语言,是用来描述网页文档(页面结构)的一种标记语言;

HTML指超文本标记语言(Hyper Text Markup Language),之所以称为超文本标记语言,是因为文本中包含了所谓“超级链接”点。;

HTML规定了自己的语法规则,用来表示比“文本”更丰富的意义,比如图片,表格,链接等。浏览器 (IE,FireFox等)软件知道HTML语言的语法,可以用来查看HTML文档。目前互联网上的绝大部分网页都是使用HTML编写的。