CSS 边框属性:
CSS边框属性允许你指定一个元素边框的样式和颜色。
在四边都有边框
红色底部边框
圆角边框
左侧边框带宽度，颜色为蓝色
边框样式
边框样式属性指定要显示什么样的边界。
border-style属性用来定义边框的样式
border-style 值:
none: 默认无边框
dotted: dotted:定义一个点线边框
dashed: 定义一个虚线边框
solid: 定义实线边框
double: 定义两个边框。 两个边框的宽度和 border-width 的值相同
groove: 定义3D沟槽边框。效果取决于边框的颜色值
ridge: 定义3D脊边框。效果取决于边框的颜色值
inset:定义一个3D的嵌入边框。效果取决于边框的颜色值
outset: 定义一个3D突出边框。 效果取决于边框的颜色值
设置边框样式：<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>设置边框样式</title> <style> .none{border-style: none;} .dotted{border-style: dotted;} .dashed{border-style: dashed;} .solid{border-style: solid;} .double{border-style: double;} .groove{border-style: groove;} .ridge{border-style: ridge;} .inset{border-style: inset;} .hidden{border-style: hidden;} </style> </head> <body> <p class="none">无边框</p> <p class="dotted">虚线边框</p> <p class="dashed">虚线边框</p> <p class="solid">实线边框</p> <p class="double">双边框</p> <p class="groove">凹槽边框</p> <p class="ridge">垄状边框</p> <p class="inset">嵌入边框</p> <p class="hidden">隐藏边框</p> </body>
边框宽度
您可以通过 border-width 属性为边框指定宽度。
为边框指定宽度有两种方法：可以指定长度值，比如 2px 或 0.1em(单位为 px, pt, cm, em 等)，或者使用 3 个关键字之一，它们分别是 thick 、medium（默认值） 和 thin。
注意：CSS 没有定义 3 个关键字的具体宽度，所以一个用户可能把 thick 、medium 和 thin 分别设置为等于 5px、3px 和 2px，而另一个用户则分别设置为 3px、2px 和 1px。
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>边框样式</title> <style> p.one{ border-style: solid; border-width: 5px; } p.two{ border-style: solid; border-width: medium; } p.three{ border-style: solid; border-width: 1px; } </style> </head> <body> <p class="one">一些文本。</p> <p class="two">一些文本。</p> <p class="three">一些文本。</p> <p><b>注意:</b> "border-width" 属性 如果单独使用则不起作用。要先使用 "border-style" 属性来设置边框。</p> </body> </html>
边框颜色
border-color属性用于设置边框的颜色。可以设置的颜色：
- name - 指定颜色的名称，如 "red"
- RGB - 指定 RGB 值, 如 "rgb(255,0,0)"
- Hex - 指定16进制值, 如 "#ff0000"
您还可以设置边框的颜色为"transparent"。
注意： border-color单独使用是不起作用的，必须得先使用border-style来设置边框样式。
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>边框颜色</title> <style> .one{ border-style: solid; border-color: red; } .two{ border-style: solid; border-color: #0000FF; } </style> </head> <body> <p class="one">实线红线边框</p> <p class="two">实线红线边框</p> <p><b>注意:</b>"border-color"属性 如果单独使用则不起作用，要先使用"border-style"属性来设置边框</p> </body> </html>边框单独设置各边：
在CSS中，可以指定不同的侧面不同的边框
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>边框-单独设置各边</title> <style> p{ border-top-style: dotted; border-right-style: solid; border-bottom-style: dotted; border-left-style: solid; } </style> </head> <body> <p>两个不同的边框样式</p> </body> </html>
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>边框-单独设置各边</title> <style> p{ border-style: solid dotted; } </style> </head> <body> <p>两个不同的边界样式</p> </body> </html>
border-style属性可以有1-4个值：
- border-style:dotted solid double dashed;
- 上边框是 dotted
- 右边框是 solid
- 底边框是 double
- 左边框是 dashed
- border-style:dotted solid double;
- 上边框是 dotted
- 左、右边框是 solid
- 底边框是 double
- border-style:dotted solid;
- 上、底边框是 dotted
- 右、左边框是 solid
- border-style:dotted;
- 四面边框是 dotted
上面的例子用了border-style。然而，它也可以和border-width 、 border-color一起使用。
边框-简写属性
上面的例子用了很多属性来设置边框。
你也可以在一个属性中设置边框。
你可以在"border"属性中设置：
- border-width
- border-style (required)
- border-color
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>边框简写属性</title> <style> p{ border: 20px solid red; } </style> </head> <body> <p>段落中的一些文本</p> </body> </html>更多实例：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>所有边框属性在一个声明之中</title> <style> p{ border-style: solid; border-top: thick double #ff0000; } </style> </head> <body> <p>段落中的一些文本</p> </body> </html>
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>设置下边框的样式</title> <style> .none{ border-bottom-style: none; } .dotted{ border-bottom-style: dotted; } .dashed{ border-bottom-style: dashed; } .solid{ border-bottom-style: solid; } .double{ border-bottom-style: double; } .groove{ border-bottom-style: groove; } .ridge{ border-bottom-style: ridge; } .inset{ border-bottom-style: inset; } .outset{ border-bottom-style: outset; } </style> </head> <body> <p class="none">无底边界</p> <p class="dotted">点低边界</p> <p class="dashed">虚线底边界</p> <p class="solid">实线底边界</p> <p class="double">双线底边界</p> <p class="groove">凹槽底边界</p> <p class="ridge">垄状底边界</p> <p class="inset">嵌入底边界</p> <p class="outset">外凸底边界</p> </body> </html>
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>设置做边框的宽度</title> <style> p{ border-style: solid; border-width: 15px; } </style> </head> <body> <p><b>注意:</b>"border-left-width" 单独使用没有效果.要先使用 "border-style" 属性设置borders.</p> </body> </html>
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>设置四个边框的颜色</title> <style> .one{ border-style: solid; border-color: #0000FF; } .two{ border-style: solid; border-color: #006600; } .three{ border-style: solid; border-color: #6666ff; } .four{ border-style: solid; border-color: #98bf21; } </style> </head> <body> <p class="one">One-colored border!</p> <p class="two">Two-colored border!</p> <p class="three">Three-colored border!</p> <p class="four">Four-colored border!</p> <p><b>注意:</b> "border-color" 属性 如果单独使用则不起作用. 要先使用 "border-style" 属性来设置 borders .</p> </body> </html>
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>设置有边框的颜色</title> <style> p{ border-style: solid; border-right-color: lime; } </style> </head> <body> <p>这是段落中的一些文本。</p> </body> </html>
CSS 边框属性
| 属性 | 描述 |
|---|---|
| border | 简写属性，用于把针对四个边的属性设置在一个声明。 |
| border-style | 用于设置元素所有边框的样式，或者单独地为各边设置边框样式。 |
| border-width | 简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。 |
| border-color | 简写属性，设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色。 |
| border-bottom | 简写属性，用于把下边框的所有属性设置到一个声明中。 |
| border-bottom-color | 设置元素的下边框的颜色。 |
| border-bottom-style | 设置元素的下边框的样式。 |
| border-bottom-width | 设置元素的下边框的宽度。 |
| border-left | 简写属性，用于把左边框的所有属性设置到一个声明中。 |
| border-left-color | 设置元素的左边框的颜色。 |
| 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 轮廓（outline）
轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
轮廓（outline）属性指定元素轮廓的样式、颜色和宽度。
轮廓（outline）实例
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>在元素周围画线</title> <style> p{ border: 1px solid red; outline: green dotted thick; } </style> </head> <body> <p><b>注意:</b>如果只有一个!DOCTYP E指定 IE8 支持 outline 属性。</p> </body> </html>
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>设置轮廓的颜色</title> <style> p{ border: 1px solid red; outline-style: dotted; outline-color: lime; } </style> </head> <body> <p><b>注意:</b>如果只有一个!DOCTYP E指定 IE8 支持 outline 属性。</p> </body> </html>
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>设置轮廓的宽度</title> <style> .one{ border: solid red 1px; outline-style: solid; outline-width: thin; } .two{ border: solid red 1px; outline-style: dotted; outline-width: 3px; } </style> </head> <body> <p class="one">I have a car</p> <p class="two">I have a cat</p> <p><b>注意:</b> 如果只有一个 !DOCTYPE 指定 IE8 支持 outline 属性。</p> </body> </html>
CSS 轮廓（outline）
轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
CSS outline 属性规定元素轮廓的样式、颜色和宽度。
所有CSS 轮廓（outline）属性
"CSS" 列中的数字表示哪个CSS版本定义了该属性(CSS1 或者CSS2)。
| 属性 | 说明 | 值 | CSS |
|---|---|---|---|
| outline | 在一个声明中设置所有的轮廓属性 | outline-color outline-style outline-width inherit | 2 |
| outline-color | 设置轮廓的颜色 | color-name hex-number rgb-number invert inherit | 2 |
| outline-style | 设置轮廓的样式 | none dotted dashed solid double groove ridge inset outset inherit | 2 |
| outline-width | 设置轮廓的宽度 | thin medium thick length inherit | 2 |
CSS Margin(外边距)
CSS Margin(外边距)属性定义元素周围的空间。
Margin
margin清除周围的元素（外边框）的区域。margin没有背景颜色，是完全透明的
margin可以单独改变元素的上，下，左，右边距。也可以一次改变所有的属性。
可能的值
| 值 | 说明 |
|---|---|
| auto | 设置浏览器边距。 这样做的结果会依赖于浏览器 |
| length | 定义一个固定的margin（使用像素，pt，em等） |
| % | 定义一个使用百分比的边距 |
Margin可以使用负值，重叠的内容。
Margin - 单边外边距属性
在CSS中，它可以指定不同的侧面不同的边距：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>Margin-单边外边距属性</title> <style> p{ background-color: yellow; } .margin{ margin-top: 100px; margin-bottom: 100px; margin-right: 50px; margin-left: 50px; } </style> </head> <body> <p>这是一个没有指定边距大小的段落。</p> <P class="margin">这是一个指定边距大小的段落</P> </body> </html>
Margin - 简写属性
为了缩短代码，有可能使用一个属性中margin指定的所有边距属性。这就是所谓的缩写属性。
所有边距属性的缩写属性是"margin":
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>Margin-简写属性</title> <style> p{ background-color: yellow; } p.margin{ margin: 100px 50px; } </style> </head> <body> <p>这是一个没有指定边距大小的段落。</p> <p class="margin">这是一个指定边距大小的段落。</p> </body> </html>
margin属性可以有一到四个值。/p>
- margin:25px 50px 75px 100px;
- 上边距为25px
- 右边距为50px
- 下边距为75px
- 左边距为100px
- margin:25px 50px 75px;
- 上边距为25px
- 左右边距为50px
- 下边距为75px
- margin:25px 50px;
- 上下边距为25px
- 左右边距为50px
- margin:25px;
- 所有的4个边距都是25px
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>本文的上边距设置使用厘米</title> <style> p.ex1{ margin-top: 2cm;} </style> </head> <body> <p>一个没有指定边距大小的段落</p> <p class="ex1">一个2厘米上边距的段落</p> <p>一个没有指定边距大小的段落</p> </body> </html>
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>Set使用百分比值设置文本的下边距</title> <style> p.bottommargin{margin-bottom: 25%;} </style> </head> <body> <p>这是一个没有指定边距大小的段落。</p> <p class="bottommargin">这是一个指定下边距大小的段落。</p> <p>这是一个没有指定边距大小的段落。</p> </body> </html>
所有的CSS边距属性
| 属性 | 描述 |
|---|---|
| margin | 简写属性。在一个声明中设置所有外边距属性。 |
| margin-bottom | 设置元素的下外边距。 |
| margin-left | 设置元素的左外边距。 |
| margin-right | 设置元素的右外边距。 |
| margin-top | 设置元素的上外边距。 |
CSS Padding（填充）
CSS Padding（填充）属性定义元素边框与元素内容之间的空间。
Padding（填充）
当元素的 Padding（填充）（内边距）被清除时，所"释放"的区域将会受到元素背景颜色的填充。
单独使用填充属性可以改变上下左右的填充。缩写填充属性也可以使用，一旦改变一切都改变。
可能的值
| 值 | 说明 |
|---|---|
| length | 定义一个固定的填充(像素, pt, em,等) |
| % | 使用百分比值定义一个填充 |
填充- 单边内边距属性
在CSS中，它可以指定不同的侧面不同的填充：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>填充-单边内边距属性</title> <style> p{ background-color: yellow; } p.padding{ padding-top: 25px; padding-bottom: 25px; padding-right: 50px; padding-left: 50px; } </style> </head> <body> <p>这是一个没有指定填充边距的段落</p> <p class="padding">这是一个指定填充边距的段落</p> </body> </html>
填充 - 简写属性
为了缩短代码，它可以在一个属性中指定的所有填充属性。
这就是所谓的缩写属性。所有的填充属性的缩写属性是"padding":
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>填充-简写属性</title> <style> p{ background-color: yellow; } p.padding{ padding: 25px 50px; } </style> </head> <body> <p>这是一个没有指定填充边距的段落。</p> <p class="padding">这是一个指定填充边距的段落。</p> </body> </html>
Padding属性，可以有一到四个值。
padding:25px 50px 75px 100px;
- 上填充为25px
- 右填充为50px
- 下填充为75px
- 左填充为100px
padding:25px 50px 75px;
- 上填充为25px
- 左右填充为50px
- 下填充为75px
padding:25px 50px;
- 上下填充为25px
- 左右填充为50px
padding:25px;
- 所有的填充都是25px
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>在一个声明中的所有填充属性</title> <style> P.ex1{padding: 2cm;} p.ex2{padding: 0.5cm 3cm;} </style> </head> <body> <p class="ex1">这个文本两边的填充距一样，每边的填充距是2cm</p> <p class="ex2">这个文本的顶部和底部填充边距都为0.5cm，左右填充边距为3cm</p> </body> </html>
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>设置左部填充</title> <style> p.padding{ padding-left: 2cm; } p.padding2{ padding-left: 50%; } </style> </head> <body> <p>这是一个没有左填充边距的文本。</p> <p class="padding">这个文本的左填充边距为2厘米。</p> <p class="padding2">这个文本的左填充边距为50%。</p> </body> </html>
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>设置右部填充</title> <style> p.padding{padding-right: 2cm;} p.padding2{padding-right: 50%;} </style> </head> <body> <p>这是一个没有右填充边距的文本。这是一个没有右填充边距的文本。这是一个没有右填充边距的文本。</p> <p class="padding">这个文本的右填充边距为2厘米。这个文本的右填充边距为2厘米。这个文本的右填充边距为2厘米。</p> <p class="padding2">这个文本的右填充边距为50%。这个文本的右填充边距为50%。这个文本的右填充边距为50%。</p> </body> </html>
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>设置上部填充</title> <style> p.padding{padding-top: 2cm;} p.padding2{padding-top: 50%;} </style> </head> <body> <p>这是一个没有上部填充边距的文本。这是一个没有上部填充边距的文本。这是一个没有上部填充边距的文本。</p> <p class="padding">这个文本的上部填充边距为2厘米。这个文本的上部填充边距为2厘米。这个文本的上部填充边距为2厘米。</p> <p class="padding2">这个文本的上部填充边距为50%。这个文本的上部填充边距为50%。这个文本的上部填充边距为50%。</p> </body> </html>
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>设置下部填充</title> <style> p.padding{padding-bottom: 2cm;} p.padding2{padding-bottom: 50%;} </style> </head> <body> <p>这是一个没有上部填充边距的文本。这是一个没有上部填充边距的文本。这是一个没有上部填充边距的文本。</p> <p class="padding">这个文本的上部填充边距为2厘米。这个文本的上部填充边距为2厘米。这个文本的上部填充边距为2厘米。</p> <p class="padding2">这个文本的上部填充边距为50%。这个文本的上部填充边距为50%。这个文本的上部填充边距为50%。</p> </body> </html>
所有的CSS填充属性
| 属性 | 说明 |
|---|---|
| padding | 使用缩写属性设置在一个声明中的所有填充属性 |
| padding-bottom | 设置元素的底部填充 |
| padding-left | 设置元素的左部填充 |
| padding-right | 设置元素的右部填充 |
| padding-top | 设置元素的顶部填充 |
CSS 分组 和 嵌套 选择器
Grouping Selectors
在样式表中有很多具有相同样式的元素。
h1
{
color:green;
}
h2
{
color:green;
}
p
{
color:green;
}
{
color:green;
}
h2
{
color:green;
}
p
{
color:green;
}
为了尽量减少代码，你可以使用分组选择器。
每个选择器用逗号分隔.
在下面的例子中，我们对以上代码使用分组选择器：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>分组选择器</title> <style> h1,h2,p{color: green;} </style> </head> <body> <h1>Hello World!</h1> <h2>Smaller heading!</h2> <p>This is a paragraph.</p> </body> </html>
嵌套选择器
它可能适用于选择器内部的选择器的样式。
在下面的例子设置了三个样式：
- 为所有p元素指定一个样式
- 为所有class="marked"的元素指定一个样式
- 为所有class="marked"元素内的p元素指定一个样式
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>套嵌选择器</title> <style> p{ color: blue; text-align: center; } .marked{ background-color: red; } .marked p{ color: white; } </style> </head> <body> <p>这个段落是蓝山文本，居中对齐。</p> <div class="marked"> <p>这个段落不是蓝山文本。</p> </div> <p>所有 class=“marked”元素内的p元素指定一个样式 但有不同的文本颜色。</p> </body> </html>
扫一扫
370
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
