HTML--CSS--边框、列表、表格样式

这篇具有很好参考价值的文章主要介绍了HTML--CSS--边框、列表、表格样式。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

边框样式

属性:

border-width 边框宽度
border-style 边框外观
border-color 边框颜色
需要同时设定三个属性

border-width 边框宽度

取值为像素值

border-style 边框样式

none 无样式
dashed 虚线
solid 实线

border-color 边框颜色

如示例:
div设定了一个边框,虚线,宽度10像素,颜色是红色

<!DOCTYPE html>
<html>
<head> 
    <title>表单</title>
    <meta charset="utf-8"/>
    <style type="text/css">

    </style>
</head>
<body>
    <div style="border-style: dashed; border-width: 10px; border-color: red;">
        <p style="text-transform: uppercase;"> my room Case</p>
        <p style="text-transform: lowercase;"> MY ROOOM Case</p>
        <p style="text-transform: capitalize;"> my room case</p>
    </div>
</body>
</html>

效果:
HTML--CSS--边框、列表、表格样式,HTML学习,css,html,css3
另一写法:简写,将配置都写进border里,效果是一样的

style="border: dashed 10px red;"

局部样式 单独设定上下左右边框线,属性一致

border-top 上边框
border-bottom 下边框
border-left 左边框
border-right 右边框

如下例子:

<!DOCTYPE html>
<html>
<head> 
    <title>表单</title>
    <meta charset="utf-8"/>
    <style type="text/css">
        div{
            border-top: dashed 10px red;
            border-bottom: solid 20px yellow;
            border-left: solid 15px blue;
            border-right-color: green;
            border-right-width: 2px;
            border-right-style: dashed;
        }
        
    </style>
</head>
<body>
    <div >
        <p style="text-transform: uppercase;"> my room Case</p>
        <p style="text-transform: lowercase;"> MY ROOOM Case</p>
        <p style="text-transform: capitalize;"> my room case</p>
    </div>
</body>
</html>

效果:
HTML--CSS--边框、列表、表格样式,HTML学习,css,html,css3
PS:假如设定边框宽度为0px,则去除掉了边框

列表样式 list-style-type

之前提过列表分为有序列表 ol 和无序列表 ul
参考:HTML–列表
这里的列表样式就是针对这两种列表的

用法 list-style-type:取值;

有序列表属性:

decimal 阿拉伯数字(默认值)
lower-roman 小写罗马数字: i,ii,iii…
upper-roman 大写罗马数字:I,II,III,IV…
lower-alpha 小写英文单词:a,b,c…
upper-alpha 大写英文单词:A,B,C…

无序列表属性:

disc 实心圆(默认)
circle 空心圆
square 正方形

由此可见,其实跟HTML中列表参数基本一致,参数不太一样而已

<!DOCTYPE html>
<html>
<head> 
    <title>这是一个标题</title>
    <meta charset="utf-8"/>
    <style>
        ol,ul{list-style-type: none;}
    </style>
</head>
<body>
    <ol type="a">
        <li>列表1</li>
        <li>列表2</li>
        <li>列表3</li>
    </ol>
</body>
</html>

效果:
可以看到list-style-type优先级比ol的type属性优先级更高,即使我定义了列表序号,但是使用list-style-type可以去除掉,或者重新定义成新的样式
HTML--CSS--边框、列表、表格样式,HTML学习,css,html,css3

列表项图片 list-style-image

作用:使用图片代替列表项的序列号

<!DOCTYPE html>
<html>
<head> 
    <title>这是一个标题</title>
    <meta charset="utf-8"/>
    <style>
        ol,ul{list-style-image: url(x.gif);}
    </style>
</head>
<body>
    <ol type="a">
        <li>列表1</li>
        <li>列表2</li>
        <li>列表3</li>
    </ol>
</body>
</html>

这里定义x.gif为列表序列号,效果:
HTML--CSS--边框、列表、表格样式,HTML学习,css,html,css3

表格样式

表格标题位置 caption-side

用法:
caption-side:取值;
属性:

top 标题在顶部(默认值)
bottom 标题在底部

参考之前的文章: HTML–表格

<!DOCTYPE html>
<html>
<head> 
    <title>这是一个标题</title>
    <meta charset="utf-8"/>
    <style type="text/css">
        table,tr,td{border: 2px solid silver;}
        table{caption-side: bottom;}
    </style>
</head>
<body>
    <table>
        <caption>这是表格的标题</caption>
        <tr>
            <td>姓名</td>
            <td>性别</td>
        </tr>
        <tr>
            <td>小黑</td>
            <td></td>
        </tr>
        <tr>
            <td>小白</td>
            <td>不详</td>
        </tr>
    </table>

</body>
</html>

效果:
HTML--CSS--边框、列表、表格样式,HTML学习,css,html,css3

表格边框合并 border-collapse

属性:

separate 边框分开,有空隙(默认值)
collapse 边框合并,无空隙
用法:
table{border-collapse: collapse;}

<!DOCTYPE html>
<html>
<head> 
    <title>这是一个标题</title>
    <meta charset="utf-8"/>
    <style type="text/css">
        table,tr,td{border: 2px solid silver;}
        table{caption-side: bottom;}
        table{border-collapse: collapse;}
    </style>
</head>
<body>
    <table>
        <caption>这是表格的标题</caption>
        <tr>
            <td>姓名</td>
            <td>性别</td>
        </tr>
        <tr>
            <td>小黑</td>
            <td></td>
        </tr>
        <tr>
            <td>小白</td>
            <td>不详</td>
        </tr>
    </table>

</body>
</html>

效果:
HTML--CSS--边框、列表、表格样式,HTML学习,css,html,css3

表格边框间距 border-spacing(注意这个需要边框是分开的才能生效)

用法:
border-spacing:像素值;

<!DOCTYPE html>
<html>
<head> 
    <title>这是一个标题</title>
    <meta charset="utf-8"/>
    <style type="text/css">
        table,tr,td{border: 2px solid silver;}
        table{caption-side: bottom;}
        table{
            border-collapse: separate;
            border-spacing: 10px;
        }
    </style>
</head>
<body>
    <table>
        <caption>这是表格的标题</caption>
        <tr>
            <td>姓名</td>
            <td>性别</td>
        </tr>
        <tr>
            <td>小黑</td>
            <td></td>
        </tr>
        <tr>
            <td>小白</td>
            <td>不详</td>
        </tr>
    </table>
</body>
</html>

效果:
HTML--CSS--边框、列表、表格样式,HTML学习,css,html,css3文章来源地址https://www.toymoban.com/news/detail-796010.html

三级标题

四级标题
五级标题
六级标题

到了这里,关于HTML--CSS--边框、列表、表格样式的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • CSS3表格和表单样式

    在传统网页中,表格主要用于网页布局,因此也成为网页编辑的主要工具;在标准化网页设计中,表格的主要功能是显示数据,也可适当辅助结构设计。本章主要介绍如何使用CSS控制表格和表单的显示效果,如表格和表单的边框、背景等样式。 CSS为表格定义了5个专用属性,

    2024年02月06日
    浏览(36)
  • [HTML]Web前端开发技术2(HTML5、CSS3、JavaScript )格式化文本标记,定义列表,<blockquote>,definition description,ruby——喵喵画网页

    希望你开心,希望你健康,希望你幸福,希望你点赞! 最后的最后,关注喵,关注喵,关注喵,大大会看到更多有趣的博客哦!!! 喵喵喵,你对我真的很重要! 目录 前言 格式化文字与段落 Web页面设计原则 向Web页面添加文字信息 格式化文本标记 标题字标记 添加空格与特

    2024年02月05日
    浏览(94)
  • [HTML]Web前端开发技术16(HTML5、CSS3、JavaScript )表格课后练习网页标题:域标签的使用网页标题:美家装饰联系我们网页标题:登录界面网页标题问卷调查——喵喵画网页

    希望你开心,希望你健康,希望你幸福,希望你点赞! 最后的最后,关注喵,关注喵,关注喵,佬佬会看到更多有趣的博客哦!!! 喵喵喵,你对我真的很重要! 目录 前言 表格课后练习 网页标题:域标签的使用 网页标题:美家装饰联系我们 网页标题:登录界面 网页标题

    2024年01月24日
    浏览(44)
  • HTML5和CSS3七CSS3四

    代码下载地址 Transision过渡动画是从一个状态到另一个状态,而Animation动画可以有多个关键帧 animation-name:设置动画ID animation-duration:设置动画总时长 animation-timing-function:设置动画时间函数,同过渡动画 animation-iteration-count:设置动画播放次数,默认1次,可以是具体次数也可

    2023年04月23日
    浏览(52)
  • 编程笔记 html5&css&js 041 CSS边框属性

    盒子是由四周的边框组成,边框的属性就构成了盒子的大部分样式。 CSS border 属性允许您指定元素边框的样式、宽度和颜色。 border-style 属性指定要显示的边框类型。 允许以下值: border-style 属性可以设置一到四个值(用于上边框、右边框、下边框和左边框)。 注意:除非设

    2024年01月19日
    浏览(45)
  • CSS3与HTML5

    box-sizing content-box:默认,宽高包不含边框和内边距 border-box:也叫怪异盒子,宽高包含边框和内边距 动画:移动translate,旋转、transform等等 走马灯:利用动画实现animation:from… to… 隐藏元素: visibility:hidden 占位 display:none 不占位 画页面前重置浏览器自带样式 快格式化上

    2024年02月07日
    浏览(38)
  • HTML5和CSS3笔记

    1.1:页面结构: 1.2:标签类型: 1.2.1:块标签:  1.2.2:行内标签: 1.2.3:行内块标签: 1.2.4:块标签与行内标签的转换: (可以设置在不在同一行和隐藏) 1.3:表单与表格标签:   表单:    表格:   1.4:H5标签: 1.4.1:语义标签:   1.4.2:多媒体标签: (音频audio和视

    2024年03月24日
    浏览(49)
  • 尚硅谷html5+css3(3)布局

    1.文档流normal flow -网页是一个多层结构 -通过CSS可以分别为每一层设置样式 -用户只能看到最顶层 -最底层:文档流(我们所创建的元素默认都是从文档流中进行排列) 2.盒子模型   1.盒子模型-边框 2.盒子模型-内边距 3.盒子模型-外边距 4.盒子模型-水平方向的布局 5.盒子模型

    2024年04月09日
    浏览(62)
  • HTML5CSS3提高

    HTML5 的新增特性主要是针对于以前的不足,增加了一些新的标签、新的表单和新的表单属性等。 这些新特性都有兼容性问题,基本是 IE9+ 以上版本的浏览器 才支持,如果不考虑兼容性问题,可以大量使用这些新特性。 以前布局,我们基本用 div 来做。div 对于搜索引擎来说,

    2024年02月14日
    浏览(49)
  • html5和css3的新特性

    标签         !-- 高亮 mark --         !-- 摘要概述 --         details             summary                 咖啡             /summary             ul                 li拿铁/li                 li美式/li             /ul         /details           

    2024年02月11日
    浏览(41)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包