css学习02——表格、边框、轮廓、外边框、填充、分组与嵌套、显示与可见性

最新推荐文章于 2023-01-02 21:27:42 发布

菜鸟Jon

最新推荐文章于 2023-01-02 21:27:42 发布

阅读量397

点赞数 1

分类专栏： css

本文链接：https://blog.youkuaiyun.com/csdnmgq/article/details/90231638

版权

css 专栏收录该内容

8 篇文章

订阅专栏

本文深入探讨CSS中的表格样式、边框设置、轮廓、外边框、填充、元素分组与嵌套，以及显示与可见性的控制，帮助读者全面理解CSS布局技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

css学习02——表格、边框、轮廓、外边框、填充、分组与嵌套、显示与可见性

1、表格

border: 1px solid black;/*加表格边框*/
height:50px;/*高设置*/
width:100%;/*宽设置*/
text-align:right;/*表格文字对其方式*/
background-color:green;/*背景颜色*/

2、边框

border-style:none;/*无边框。*/
border-style:dotted;/*虚线边框。*/
border-style:dashed;/*虚线边框。*/
border-style:solid;}/*实线边框。*/
border-style:double;/*双边框。*/
border-style:groove;/*凹槽边框。*/
border-style:ridge;/*垄状边框。*/
border-style:inset;/*嵌入边框。*/
border-style:outset;/*外凸边框。*/
border-style:hidden;/*隐藏边框。*/

border-width:1px;/*边框宽度*/
border-color:red;/*边框颜色*/
border-left-width:15px;/*左边框宽度*/

border-style:solid;
border-color:#ff0000 #00ff00 #0000ff rgb(250,0,255);/*设置四面边框的颜色，必须和上衣语句使用*/

border-style:solid;
border-right-color:#ff0000;/*设置右边框颜色，需和上一条语句使用*/

3、轮廓

outline:green dotted thick;/*元素周围画一条线虚线*/
outline-color:#00ff00;/*轮廓颜色*/
/*轮廓样式*/
outline-style:dotted;/*点线轮廓。*/
outline-style:dashed;/*虚线轮廓。*/
outline-style:solid;}/*实线轮廓。*/
outline-style:double;/*双边轮廓。*/
outline-style:groove;/*凹槽边轮廓。*/
outline-style:ridge;/*垄状边轮廓。*/
outline-style:inset;/*嵌入边轮廓。*/
outline-style:outset;/*外凸边轮廓。*/

4、外边距

margin-top:100px;/*顶边距*/
margin-bottom:100px;
margin-right:50px;
margin-left:50px;

margin:25px 50px 75px 100px; /*上右下左边距*/
margin:25px 50px 75px;/*上左右下边距，其中左右为50px*/
margin:25px 50px;/*上下为25px，左右为50px*/
margin:25px;/*四个边距都为25px*/

5、填充（padding）

padding-top:25px;/*顶部填充25px*/
padding-bottom:25px;
padding-right:50px;
padding-left:50px;


padding:25px 50px 75px 100px; /*上右下左填充大小*/
padding:25px 50px 75px;/*上左右下，其中左右为50px填充*/
padding:25px 50px;/*上下为25px，左右为50px*/
padding:25px;/*四个填充值都为25px*/

6、分组和嵌套

h1,h2,p
{
    color:green;
}/*分组，将h1、h2、p三个的属性同时设置为一样*/

/*嵌套*/
p
{
	color:blue;
	text-align:center;
}
.marked
{
	background-color:red;
}
p.marked{
    text-decoration:underline;/*下划线*/
}/*同时具备p和marked的属性，即嵌套p和marked*/

7、显示与可见性

visibility:hidden;/*隐藏所修饰的内容，但是依然占用空间*/