table边框 | 易学教程

css排版常用样式、三种不同html类型、css布局盒模型介绍

阅读更多关于 css排版常用样式、三种不同html类型、css布局盒模型介绍

把CSS样式与网页编排通过网页排版中主要格式化要素实现网页实用性与欣赏性相结合，实现出设计效果。字体：div{font-family: "Microsoft Yahei";}为网页中的文字设置字体为微软雅黑,这里注意不要设置不常用的字体，因为如果用户本地电脑上如果没有安装你设置的字体，就会显示浏览器默认的字体。（因为用户是否可以看到你设置的字体样式取决于用户本地电脑上是否安装你设置的字体。）现在一般网页喜欢设置“微软雅黑”，如下代码：body{font-family:"Microsoft Yahei";}或body{font-family:"微软雅黑";}注意：第一种方法比第二种方法兼容性更好一些。当然了如果你想用特殊字体怎么办了？通过css3的自定义字体实现@font-face{ font-family:dhnblog;src:url('images/fzm.ttf');}/*自定义字体类型*/ 字号、颜色：div.box{font-size: 14px;color: #f90;} 设置网页中文字的字号为14像素，并把字体颜色设置为#f90；此外颜色分为3种表现形式：a.rgb（255,255,255）b.英文单词c.16进制，如#f90，具体参考 css基本概念与css核心语法介绍中有关颜色介绍粗体：如果想为文字设置粗体除了使用h1-h6或strong标签

CSS——05-核心：盒子模型1

阅读更多关于 CSS——05-核心：盒子模型1

人生苦短，要学就只学有用的【前端教学-CSS-5】 CSS核心-盒子模型盒子模型（CSS重点） css学习三大重点： css 盒子模型、浮动、定位目标：理解：能说出盒子模型有那四部分组成能说出内边距的作用以及对盒子的影响能说出padding设置不同数值个数分别代表的意思能说出块级盒子居中对齐需要的2个条件能说出外边距合并的解决方法应用：能利用边框复合写法给元素添加边框能计算盒子的实际大小能利用盒子模型布局模块案例 1.看透网页布局的本质网页布局中，我们是如何把里面的文字，图片，按照美工给我们的效果图排列的整齐有序呢？看透网页布局的本质：首先利用CSS设置好盒子的大小，然后摆放盒子的位置。最后把网页元素比如文字图片等等，放入盒子里面。以上两步就是网页布局的本质我们明白了，盒子是网页布局的关键点，所以我们更应该弄明白这个盒子有什么特点。 2. 盒子模型（Box Model）所谓盒子模型：就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。总结：盒子模型有元素的内容、边框（border）、内边距（padding）、和外边距（margin）组成。盒子里面的文字和图片等元素是内容区域盒子的厚度我们成为盒子的边框盒子内容与边框的距离是内边距（类似单元格的 cellpadding)

2.5、CSS盒子模型

阅读更多关于 2.5、CSS盒子模型

盒子模型解释元素在页面中显示成一个方块，类似一个盒子，CSS盒子模型就是使用现实中盒子来做比喻，帮助我们设置元素对应的样式。盒子模型示意图如下：把元素叫做盒子，设置对应的样式分别为：盒子的边框(border)、盒子内的内容和边框之间的间距(padding)、盒子与盒子之间的间距(margin)。设置边框设置一边的边框，比如顶部边框，可以按如下设置： border-top-color:red; /* 设置顶部边框颜色为红色 */ border-top-width:10px; /* 设置顶部边框粗细为10px */ border-top-style:solid; /* 设置顶部边框的线性为实线，常用的有：solid(实线) dashed(虚线) dotted(点线); */ 上面三句可以简写成一句： border-top:10px solid red; 设置其它三个边的方法和上面一样，把上面的'top'换成'left'就是设置左边，换成'right'就是设置右边，换成'bottom'就是设置底边。四个边如果设置一样，可以将四个边的设置合并成一句： border:10px solid red; 设置内间距padding 设置盒子四边的内间距，可设置如下： padding-top：20px; /* 设置顶部内间距20px */ padding-left:30px; /*

CSS之盒模型边框，内边距，外边距，阴影，圆角

阅读更多关于 CSS之盒模型边框，内边距，外边距，阴影，圆角

盒子模型盒子模型盒子模型有元素内容、边框（border）、内边距（padding）、外边距（margin）组成；盒子里面的文字和图片等元素是内容区域；盒子的厚度我们称为盒子的边框；盒子内容与盒子之间的距离是内边距；盒子与盒子之间的距离是外边距；标准盒子模型盒子边框（border） border: border-width || border-style || border-color 属性作用 border-width 定义边框粗细，单位是 px border-style 边框的样式 border-color 边框颜色 border-style ： none：没有边框即忽略所有边框的宽度（默认值） solid：边框为单实线； dashed：边框为虚线； dotted：边框为点线；表格细线边框通过表格的 cellspacing="0" ，将单元格与单元格之间的距离设为 0 但是两个单元格之间的边框会出现边框，从而使边框变粗；通过设置 css 属性 table {border-collapse: collapse;} 表示相邻边框合并在一起； <style> table, th, td { border: 1px dashed #ccc; border-collapse: collspase; } </style> 内边距（padding）属性作用

CSS 表格的细线边框

阅读更多关于 CSS 表格的细线边框

表格的细线边框以前学过的html表格边框很粗，这里只需要CSS一句话就可以美观起来。让我们真的相信，CSS就是我们的白马王子（白雪公主）。 table{ border-collapse:collapse; } collapse 单词是合并的意思 border-collapse:collapse; 表示相邻边框合并在一起。来源： CSDN 作者：快乐de馒头链接： https://blog.csdn.net/chunxiaqiudong5/article/details/104038331

##HTML基础

阅读更多关于 ##HTML基础

HTML基础一：基础　　HTML （ Hyper Text Markup Language ）：超文本标记语言　　目前学习最新的版本： HTML5. 　　优点： 1 ，智能代码补全 2 ，代码提示 3 ，自动保存 4 ，多个浏览器支持　　用来表达网页而用来编辑的程序： nootpad ，写字板，记事本， webstrom 　　　　W3C：外围网联盟　　　　W3C 标准：　　　　　　 HTML 标签是由尖括号包围的关键词，比如 <html> 　　　　　　HTML 标签通常是成对出现的，比如 <b> 和 </b> 　　　　　　标签对中的第一个标签是开始标签，第二个标签是结束标签　　　　　　开始和结束标签也被称为开放标签和闭合标签开始工作：　　File----new---HTML file （建立一个 html 文件）　　File----new---direction （建立一个文件夹）　　<html> 与 </html> 之间的文本描述网页　　<body> 与 </body> 之间的文本是可见的页面内容　　<h1> 与 </h1> 之间的文本被显示为标题（ h1-h6 都是标题标签， h1 字体最大， h6 字体最小）　　<p> 与 </p> 之间的文本被显示为段落　　Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。　　文本样式：

w3c搬运CSS念念碎

阅读更多关于 w3c搬运CSS念念碎

w3c搬运CSS念念碎基本使用当使用 RGB 百分比时，即使当值为 0 时也要写百分比符号。但是在其他的情况下就不需要这么做了。比如说，当尺寸为 0 像素时，0 之后不需要使用 px 单位，因为 0 就是 0，无论单位是什么。如果值为若干单词，则要给值加引号 p { font-family: "sans serif"; } 是否包含空格不会影响 CSS 在浏览器的工作效果,不过存在一个例外：如果涉及到与 HTML 文档一起工作的话，class 和 id 名称对大小写是敏感的。选择器你可以对选择器进行分组，这样，被分组的选择器就可以分享相同的声明。用逗号将需要分组的选择器分开。在下面的例子中，我们对所有的标题元素进行了分组。所有的标题元素都是绿色的。 h1,h2,h3,h4,h5,h6 { color: green; } body { font-family: Verdana, sans-serif; } 通过 CSS 继承，子元素将继承最高级元素（在本例中是 body）所拥有的属性（这些子元素诸如 p, td, ul, ol, ul, li, dl, dt,和 dd）。不需要另外的规则，所有 body 的子元素都应该显示 Verdana 字体，子元素的子元素也一样。并且在大部分的现代浏览器中，也确实是这样的。 id选择器：#id名在现代布局中，id

初学Css笔记

阅读更多关于初学Css笔记

Css介绍层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。 Css笔记字体相关属性： font (字体) color (颜色) font- (字体-加粗) font-size (字体-大小) font-weight (字体-类型) text-shadow (文本的阴影效果) line-height (行间的距离,行高) letter-spacing (字体间的距离) text-align (文本-水平对齐) direction (内容显示方向) 背景相关属性： Background (背景) background-attachment (固定到背景) background-color (背景-颜色) background-image (背景-图片) background-position (背景-图片-位置) background-repeat (背景-是否及如何重复背景图像) background-size (背景-大小) 边框相关属性： border (边框) border-color (边框-颜色) border-style (边框-样式) border

HTML基础2(表格)

阅读更多关于 HTML基础2(表格)

HTML 表格 HTML 图像 HTML 列表你可以使用 HTML 创建表格。实例表格这个例子演示如何在 HTML 文档中创建表格。表格边框本例演示各种类型的表格边框。（可以在本页底端找到更多实例。）表格表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。 <table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table> 在浏览器显示如下： row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2 表格和边框属性如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框。使用边框属性来显示一个带有边框的表格： <table border="1"> <tr> <td>Row 1, cell 1</td> <td>Row 1, cell 2</td> <

table中tr间距的设定table合并单元格 colspan（跨列）和rowspan（跨行）

阅读更多关于 table中tr间距的设定table合并单元格 colspan（跨列）和rowspan（跨行）

table中的tr的默认display:table-row，虽然可以修改为display：block但是就失去了tr特有的显示效果，如(td自动对齐)；并且在tr中对起设定padding是有用的，可以增加内边距，但是设定margin是没有用的，tr的外间距依然是0；解决方案： css的两个属性：border-collapse:collapse / separate & border-spacing:10px 10px；需要用border-collapse & border-spacing联合控制tr的间距；如： 123 < table style = "border-collapse:separate; border-spacing:10px;" > < tr ></ tr > </ table > table中设置tr行间距 CSS border-collapse 属性设置表格的边框是否被合并为一个单一的边框值描述 separate 默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性。 collapse 如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。 inherit 规定应该从父元素继承 border-collapse 属性的值。 border

订阅 table边框