CSS数据样式

表格

定制表格


  我们除了可以使用<table>标签进行绘制表格,在css3display也支持进行表格的样式绘制。

样式规则 说明
table 对应 table
table-caption 对应 caption
table-row 对表 tr
table-cell 对于th或td
table-row-group 对应 tbody
table-header-group 对应 thead
table-footer-group 对应 tfoot

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css学习.css">
</head>
<body>
<article>
<nav>一份表格</nav>
<section>
<ul>
<li>姓名</li>
<li>性别</li>
<li>年龄</li>
</ul>
</section>
<section>
<ul>
<li>小明</li>
<li>男</li>
<li>18</li>
</ul>
</section>
<section>
<ul>
<li>小红</li>
<li>女</li>
<li>19</li>
</ul>
</section>
<section>
<ul>
<li>小姜</li>
<li>女</li>
<li>21</li>
</ul>
</section>
</article>
</body>
</html>

元素表单HTML

body article {
display: table;
}
body article nav {
display: table-caption;
font-weight: bolder; text-align: center;
vertical-align: middle;
}
body article section:nth-of-type(1) {
display: table-header-group;
}
body article section:nth-of-type(2) {
display: table-row-group; }
body article section:nth-of-type(3) {
display: table-row-group;
}
body article section:nth-of-type(4) {
display: table-footer-group; }
body article section ul {
display: table-row;
}
body article section ul li {
display: table-cell;
border: solid 1px #ddd;
padding: 10px;
}

元素表单CSS

表格标题


  我们可以使用caption-side设置表格标题的位置,值可以是top或者bottom

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table>caption:first-child{
caption-side: bottom;
border: solid 1px #ddd;
}

</style>
</head>
<body>
<table border="1px">
<caption>一份表格</caption>
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>小明</td>
<td>男</td>
<td>18</td>
</tr>
</tbody>
</table>
</body>
</html>

表格标题位置

内容对齐


  表格中内容对齐方式可以使用text-aligen以及vertical-aligen来进行控制。

  水平对齐text-aligent

描述
left 左对齐
right 右对齐
center 居中对齐

  垂直对齐vertical-aligen

属性 说明
top 顶对齐
middle 垂直居中
bottom 底部对齐

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table>caption:first-child{
caption-side: bottom;
border: solid 1px #ddd;
}
table tr td{
/* 垂直与水平居中 */
vertical-align: middle;
text-align: center;
}
</style>
</head>
<body>
<table border="1px">
<caption>一份表格</caption>
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>小明</td>
<td>男</td>
<td>18</td>
</tr>
</tbody>
</table>
</body>
</html>

表格内容对齐

颜色设置


  我们可以为<table>中的任何HTML元素进行颜色设置。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table>caption:first-child{
caption-side: bottom;
border: solid 1px #ddd;
}
table tr td{
/* 垂直与水平居中 */
vertical-align: middle;
text-align: center;
}
table tbody tr:nth-child(odd){ }
</style>
</head>
<body>
<table border="1px">
<caption>一份表格</caption>
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>小明</td>
<td>男</td>
<td>18</td>
</tr>
<tr>
<td>小红</td>
<td>女</td>
<td>17</td>
</tr>
<tr>
<td>小花儿</td>
<td>女</td>
<td>13</td>
</tr>
<tr>
<td>小癞子</td>
<td>男</td>
<td>15</td>
</tr>
</tbody>
</table>
</body>
</html>

颜色设置

边框间距


  我们可以使用border-spacing来设置边框的间距。两个值,一个对应上下,一个对应左右,单位可以是pxemrem%等等。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style> table{
border-spacing: 5px 10px;
}

table>caption:first-child{
caption-side: bottom;
border: solid 1px #ddd;
}
table tr td{
/* 垂直与水平居中 */
vertical-align: middle;
text-align: center;
}
table tbody tr:nth-child(odd){ } </style>
</head>
<body>
<table border="1px">
<caption>一份表格</caption>
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>小明</td>
<td>男</td>
<td>18</td>
</tr>
<tr>
<td>小红</td>
<td>女</td>
<td>17</td>
</tr>
<tr>
<td>小花儿</td>
<td>女</td>
<td>13</td>
</tr>
<tr>
<td>小癞子</td>
<td>男</td>
<td>15</td>
</tr>
</tbody>
</table>
</body>
</html>

边框间距

边框合并


  我们可以看一下上面图的表格,他们的表格边框都是由间距的。如果我们想把它设置为单线的可以使用border-collapse: collapse;进行设置。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>

table{
border-spacing: 5px 10px;
border-collapse: collapse;
}

table>caption:first-child{
caption-side: bottom;
border: solid 1px #ddd;
}
table tr td{
/* 垂直与水平居中 */
vertical-align: middle;
text-align: center;
}
table tbody tr:nth-child(odd){ } </style>
</head>
<body>
<table border="1px">
<caption>一份表格</caption>
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>小明</td>
<td>男</td>
<td>18</td>
</tr>
<tr>
<td>小红</td>
<td>女</td>
<td>17</td>
</tr>
<tr>
<td>小花儿</td>
<td>女</td>
<td>13</td>
</tr>
<tr>
<td>小癞子</td>
<td>男</td>
<td>15</td>
</tr>
</tbody>
</table>
</body>
</html>

边框合并

隐藏单元格


  如果想隐藏没有内容的单元格,可使用empty-cells: hide;进行设置。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>

table{
border-spacing: 5px 10px;
border-collapse: collapse;
empty-cells: hide;
}

table>caption:first-child{
caption-side: bottom;
border: solid 1px #ddd;
}
table tr td{
/* 垂直与水平居中 */
vertical-align: middle;
text-align: center;
}
table tbody tr:nth-child(odd){ } </style>
</head>
<body>
<table border="1px">
<caption>一份表格</caption>
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>小明</td>
<td>男</td>
<td>18</td>
</tr>
<tr>
<td>小红</td>
<td>女</td>
<td>17</td>
</tr>
<tr>
<td>小花儿</td>
<td>女</td>
<td>13</td>
</tr>
<tr>
<td>小癞子</td>
<td>男</td>
<td>15</td>
</tr>
<tr>
<td>未知</td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</body>
</html>

隐藏单元格

无边框表格


  无边框表格需要用到之前结合的知识,使用很多选择器进行设置。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style> table{
border-spacing: 5px 10px;
border-collapse: collapse;
empty-cells: hide;
} table>caption:first-child{
caption-side: top;
border: solid 1px #ddd;
border-left: unset;
border-right: unset;
} table tr td{
/* 垂直与水平居中 */
vertical-align: middle;
text-align: center;
vertical-align: middle;
text-align: center;
} table tbody tr:nth-child(odd){
background-color: #ddd;
} table,table tr th,table tr td:last-child,table tr td:first-child{
border-left: unset;
border-right: unset;
} </style>
</head>
<body>
<table border="1px">
<caption>一份表格</caption>
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>小明</td>
<td>男</td>
<td>18</td>
</tr>
<tr>
<td>小红</td>
<td>女</td>
<td>17</td>
</tr>
<tr>
<td>小花儿</td>
<td>女</td>
<td>13</td>
</tr>
<tr>
<td>小癞子</td>
<td>男</td>
<td>15</td>
</tr>
<tr>
<td>未知</td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</body>
</html>

无边框表格

数据表格


  我们可以利用hover<tr>进行一些样式上的调整。比如变色,鼠标变小手等等,让用户知道自己目前鼠标所在的表格区域。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style> table{
border-spacing: 5px 10px;
border-collapse: collapse;
empty-cells: hide;
} table>caption:first-child{
caption-side: top;
border: solid 1px #ddd;
} table tr td{
/* 垂直与水平居中 */
vertical-align: middle;
text-align: center;
vertical-align: middle;
text-align: center;
} tr:hover{
/* 鼠标停留留变色 */
background-color: #ddd;
/* 小手 */
cursor: pointer;
} </style>
</head>
<body>
<table border="1px">
<caption>一份表格</caption>
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>小明</td>
<td>男</td>
<td>18</td>
</tr>
<tr>
<td>小红</td>
<td>女</td>
<td>17</td>
</tr>
<tr>
<td>小花儿</td>
<td>女</td>
<td>13</td>
</tr>
<tr>
<td>小癞子</td>
<td>男</td>
<td>15</td>
</tr>
<tr>
<td>未知</td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</body>
</html>

数据表格

列表

列表符号


  默认的<ul>标签都有一个小黑点,我们可以对<ul>进行list-style-type的设置,让每个<li>都取消掉(继承性)。也可以自定义我们的列表符号。

描述
none 无标记。
disc 默认。标记是实心圆。
circle 标记是空心圆。
square 标记是实心方块。
decimal 标记是数字。
decimal-leading-zero 0开头的数字标记。(01, 02, 03, 等。)
lower-roman 小写罗马数字(i, ii, iii, iv, v, 等。)
upper-roman 大写罗马数字(I, II, III, IV, V, 等。)
lower-alpha 小写英文字母The marker is lower-alpha (a, b, c, d, e, 等。)
upper-alpha 大写英文字母The marker is upper-alpha (A, B, C, D, E, 等。)
lower-greek 小写希腊字母(alpha, beta, gamma, 等。)
lower-latin 小写拉丁字母(a, b, c, d, e, 等。)
upper-latin 大写拉丁字母(A, B, C, D, E, 等。)
hebrew 传统的希伯来编号方式
armenian 传统的亚美尼亚编号方式
georgian 传统的乔治亚编号方式(an, ban, gan, 等。)
cjk-ideographic 简单的表意数字
hiragana 标记是:a, i, u, e, o, ka, ki, 等。(日文片假名)
katakana 标记是:A, I, U, E, O, KA, KI, 等。(日文片假名)
hiragana-iroha 标记是:i, ro, ha, ni, ho, he, to, 等。(日文片假名)
katakana-iroha 标记是:I, RO, HA, NI, HO, HE, TO, 等。(日文片假名)

ul{
list-style-type: none;
}

  自定义列表符号可以使用list-style-image。可以是图片,或者渐变色等等。

ul{
/* 线性渐变 */
list-style-image:linear-gradient(45deg, red, black);
}

符号位置


  我们可以使用list-style-position来定义列表符号的位置。

选项 说明
inside 内部
outside 外部

ul{
list-style-position: inside;
}

ul{
list-style-position: outside;
}

组合定义


  我们可以使用list-style来一次性指定list-style-tpyelist-style-position

ul{
list-style:decimal outside;
}

背景符号


  我们可以为<li>来增加一个背景,然后将它调小作为列表样式符号。

ul li{
background: url(huaji.png) no-repeat 0 6px;
background-size: 10px 10px;
list-style-position: inside;
list-style: none;
/* 文本缩进 */
text-indent: 1em; }

  我们可以为<li>增加多背景,一个背景做列表样式符号,一个背景做标签背景。

ul li{

    background: url(./huaji.png) no-repeat 0 6px,url(./bj.jpg) no-repeat;
background-size: 10px 10px,100%;
list-style-position: inside;
list-style: none;
/* 文本缩进 */
text-indent: 1em;
margin-bottom: 10px; }

追加内容

基本使用


  我们可以使用伪元素选择器::after向后追加内容,以及::before向前追加内容。

  内容放在content中,我们可以将content增加的内容当做一个元素去看待。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
a{
text-decoration: none;
} a::after{
content: "<--你就知道";
color: blue;
}
a::before{
content: "请点击-->";
color: blue;
} </style>
</head>
<body>
<a href="http://www.baidu.com/">百度一下</a>
</body>
</html>

基本使用

提取属性


  我们可以使用attr()将属性提取出来。当鼠标放到连接上时,给予用户一些提示信息,如下:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
a{
text-decoration: none;
} a:hover::before{
content: "您将访问:"attr(href);
background-color: #555;
color: white;
position: absolute;
top: 30px;
padding: 5px 2px;
border-radius: 10px;
} </style>
</head>
<body>
<a href="http://www.baidu.com/">百度一下</a>
</body>
</html>

提取属性

自定义输入框


  原本的表单输入框实在太丑了,我们可以给他做一些改变。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
padding: 80px;
} .field {
position: relative;
} input {
border: none;
/* 去除轮廓线 */
outline: none;
text-align: center;
vertical-align: middle;
} .field::after {
content: '';
/* content的背景为渐变,高度为1px */
background: linear-gradient(to right, white, red, green, blue, white);
height: 30px;
position: relative;
/* 与输入框的大小相同 */
width: 171px;
height: 1px;
display: block;
left: 0px;
right: 0px;
} .field:hover::before {
/* data开头的属性都是让我们提取用的....这是一种规范。 */
content: attr(data-placeholder);
position: absolute;
top: -20px;
left: 0px;
color: #555;
font-size: 12px;
}
</style>
</head>
<body>
<div class="field" data-placeholder="请输入少于100字的标题">
<input type="text" id="name">
</div>
</body>
</html>

自定义输入框

CSS数据样式的更多相关文章

  1. 纯CSS菜单样式,及其Shadow DOM,Json接口 实现

    先声明,要看懂这篇博客要求你具备少量基础CSS知识, 当然如果你只是要用的话就随便了,不用了解任何知识 完整项目github链接:https://github.com/git-Code-Shelf/M ...

  2. 精简的网站reset 和 css通用样式库

    参考链接:http://www.zhangxinxu.com/wordpress/2010/07/我是如何对网站css进行架构的/ reset.css body{ line-height:1.4; c ...

  3. css初始化样式代码

    为什么要初始化CSS? CSS初始化是指重设浏览器的样式.不同的浏览器默认的样式可能不尽相同,所以开发时的第一件事可能就是如何把它们统一.如果没对CSS初始化往往会出现浏览器之间的页面差异.每次新开发 ...

  4. 漂亮的CSS按钮样式集以及在线生成工具

    以前我们制作一样带带阴影.圆角或3D感的按钮都需要用图片来制作,但CSS3出来后就可以不用图片了,由于是代码写的按钮样式,在Retina上浏览依然清晰美观.虽然不错,但我们写一个阴影+质感的按钮还是挺 ...

  5. WEB前端开发CSS基础样式全面总结

    Web前端开发css基础样式全面总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-2 ...

  6. html / css打印样式

    最近做公司后台系统,需要打印贴箱标签,按照正常打印A4纸的标准,测试的效果不是自己想要的,文字排版布局都乱了,查了一些资料,需要设置的东西我总结了一下: 显示器(screen)和打印机(printer ...

  7. CSS常用样式及示例

    CSS常用样式及示例 一.简介      层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集) ...

  8. 第 15 章 CSS 文本样式[下]

    学习要点: 1.文本总汇 2.文本样式 3.文本控制 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 文本样式,通过文本样式的设置,更改字体的大小.样式以及文本的方位. 一.文本总汇 本节课, ...

  9. 第 15 章 CSS 文本样式[上]

    学习要点: 1.字体总汇 2.字体设置 3.Web 字体 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 文本样式,通过文本样式的设置,更改字体的大小.样式以及文本的方位. 一.字体总汇 本节 ...

随机推荐

  1. 2019-01-31 Python学习之BFS与DFS实现爬取邮箱

    今天学习了python网络爬虫的简单知识 首先是一个爬取百度的按行读取和一次性爬取 逐行爬取 for line in urllib.request.urlopen("http://www.b ...

  2. C#数据结构与算法系列(五):常见单链表笔试

    1.求单链表中有效节点个数 public static int GetLength(HeroNode headNode) { int length = ; var cur = headNode.Nex ...

  3. @font-face规则指定字体

    兼容性写法: @font-face { font-family: '字体名'; src: url('字体名.eot'); /* IE9 兼容模式 */ src: url('字体名.eot?#iefix ...

  4. 使用LaTeX输入矩阵

    当前各种文本编辑器支持的LaTeX数学公式库大多基于KaTeX,或者在Web中用MathJax的比较多,下面给出一种在Web中输入矩阵的例子 $$\left[ \begin{array}{cccc}a ...

  5. Jupyter notebook常用命令合计

    shift + cr #运行该行并转入下一行 control + cr #运行该行 option + cr #运行该行并插入新行

  6. MFC时间简单比较方法

    MFC//时间简单比较方法 void CMFCsaveListTofileDlg::OnBnClickedButton6()//时间简单比较方法 { // TODO: 在此添加控件通知处理程序代码 C ...

  7. C# WPF - MVVM实现OPC Client管理系统

    前言 本文主要讲解采用WPF MVVM模式设计OPC Client的过程,算作对于WPF MVVM架构的学习记录吧!不足之处请不吝赐教,感谢! 涉及知识点 C#基础 Xaml基础 命令.通知和数据绑定 ...

  8. webpack简单笔记

    本文简单记录学习webpack3.0的笔记,已备日后查阅.节省查阅文档时间 安装 可以使用npm安装 //全局安装 npm install -g webpack //安装到项目目录 npm insta ...

  9. django 报错处理汇总

    运行 manage.py task时 ,makemigrations抛出以下错误, django.db.utils.OperationalError: (1045, "Access deni ...

  10. hello python week one

    python的注释 好的pytho程序员不一定非要追求 代码的简短,代码的可读性也是至关重要的 与用户交互 输入 input 会将输入内容转化为字符串 输出 print 格式化输出 %d %s 占位符 ...