HTML CSS应用——格式化网页、文字、表格

依然饭特稀a

已于 2023-11-14 23:38:06 修改

阅读量3.6k

点赞数 4

分类专栏： Web学习文章标签： HTML CSS应用格式化网页格式化文字格式化表格

于 2018-10-07 16:50:54 首次发布

本文链接：https://blog.csdn.net/cwyp18809/article/details/82959303

版权

Web学习专栏收录该内容

7 篇文章 1 订阅

订阅专栏

目录：
一、格式化网页
-----------1、添加滚动条“CSS布局- Overflow”
-------------------①两种滚动条的添加方式
-------------------②CSS布局- Overflow的注意要点
二、格式化文字
三、格式化表格
-----------1、将边框合并为单一边框
-------------------①CSS 的border-collapse 属性
-----------2、更改边框样式
-------------------①CSS border-style 属性

一、格式化网页

1、添加滚动条：CSS布局- Overflow
CSS overflow 属性用于控制内容溢出元素框时显示的方式
我们通过样例来讲解：
添加滚动条有两种写法：①新建属性类；②直接在<div style="">里写
先着重讲一下第①种在简要讲第②种：

第①种应用实例：

在这里插入图片描述

<html>
<head>
<meta charset="utf-8">
<title>CSS应用</title>
<style>
#overflowTest {
    background: #4CAF50;
    color: white;
    padding: 15px;
    width: 80%;
    height: 100px;
    overflow: scroll;
    border: 1px solid #ccc;
}
</style>
</head>
<body>

<div id="overflowTest">
<p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
<p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
<p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
<p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
<p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
<p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
</div>

</body>
</html>

①先在<style>在此添加各类属性</style>里新建一个滚动条属性类：

#overflowTest {
    background: #4CAF50;
    color: white;
    padding: 15px;
    width: 80%;
    height: 100px;
    overflow: scroll;
    border: 1px solid #ccc;
}

#overflowTest： 自己定义的属性名
background: 背景颜色
color:：字体颜色
padding: 背景填充大小
width: 滚动条框的宽
height: 滚动条框的高
overflow: 控制内容溢出元素框时显示的方式，更改其后面的值即可更改滚动条的显示方式；
border: 1px solid #ccc 边框属性：粗细1px、实心、白色

注：更改Overflow的值即可即可更改滚动条样式
在这里插入图片描述

②<div id="overflowTest">调用上一步建好的属性类

<div id="overflowTest">
<p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
<p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
<p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
<p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
<p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
<p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
</div>

第②种示例：

<div style="height:300px;width:70px;overflow:auto;background:#EEEEEE;">
菜鸟教程 -- 学的不仅是技术，更是梦想！！！
菜鸟教程 -- 学的不仅是技术，更是梦想！！！
菜鸟教程 -- 学的不仅是技术，更是梦想！！！
菜鸟教程 -- 学的不仅是技术，更是梦想！！！
</div>

2、注意要点：
CSS Overflow
CSS overflow 属性可以控制内容溢出元素框时在对应的元素区间内添加滚动条。

overflow属性有以下值：

值	描述
visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会自动显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值。

注意:overflow 属性只工作于指定高度的块元素上。

以上5种值的运行结果：
visible：
在这里插入图片描述
hidden：

scroll：

auto它和scroll相比，当不需要下边框的滚动栏时，隐藏滚动栏
在这里插入图片描述
inherit

二、格式化文字：
如何在DWcc2018中添加自己想要字体：https://blog.csdn.net/cwyp18809/article/details/82959229

①先在<style>在此添加各类属性</style>里新建一个文字属性类

.type{
	font-family: "楷体"；
	front-size: 12pt;
	color: #0011aa;
	text-align: left;
	text-indent: 2em;
	line-height: 1.6;
}

属性	描述
font-family	字体样式
front-size	字体大小
color:	字体颜色
text-align	左对齐
text-indent	首行缩进
line-height	行高

②通过class="type"调用之前新建好的文字类属性

 <p class="type">&nbsp;
	格式化本段文字、字体：宋体、大小：12pt、颜色：#0011aa、左对齐、首行缩进2em、行高1.6倍。设置其中一部分为斜体、粗体、下划线
	</p>

注意：关于其中其他不太清楚的文本格式化标记可参考下面网址的文本格式化标记https://blog.csdn.net/cwyp18809/article/details/82826431

三、格式化表格：

完整样例：最终效果
在这里插入图片描述
普通的DWcc插入表格最小的1像素表格根本做不出粗虚线、细虚线、双线等效果，所以，我们需要新建一个表格类

这是普通DWcc常见的表格
在这里插入图片描述

先在<style>在此添加各类属性</style>里新建一个表格属性类

.tab{
	border-collapse:collapse;			
}
.tab, td1, th1 {
	border: 1px solid black;			
		}

建议不要将**.tab和.tab, td1, th1写成table和.table, td, th**因为后者是默认表格类属性的名称（HTML自带的表格类属性），使用该名称后就相当于把默认的表格类属性改为你定义的，然后所有的表格都会调用该类；
由于我们只需要做一个特定表格，其他表格不需要改变，所以不能用默认表格类的名称（出默认名称之外都可）

①将边框合并为单一边框

CSS 的border-collapse 属性
border-collapse 属性设置表格的边框是否被合并为一个单一的边框，还是象在标准的 HTML 中那样分开显示。

可能的值

值	描述
separate	默认值。边框会被分开（像上面普通DWcc常见的表格图）
collapse	如果可能，边框会合并为一个单一的边框（如图）

border: 1px solid black;为边框的各类属性

实例展示：
在这里插入图片描述

<html>
<head>
<meta charset="utf-8"> 
<title>CSS应用</title>
<style>
.tab {
    border-collapse: collapse;
}

.tab, td1, th1 {
    border: 1px solid black;
}
</style>
</head>
<body>

<table class="tab">
  <tr>
    <th  class="tab">Firstname</th>
    <th  class="tab">Lastname</th>
  </tr>
  <tr>
    <td  class="tab">Peter</td>
    <td  class="tab">Griffin</td>
  </tr>
  <tr>
    <td  class="tab">Lois</td>
    <td  class="tab">Griffin</td>
  </tr>
</table>


</body>
</html>

②更改边框样式

CSS border-style 属性
属性定义及使用说明： border-style属性设置一个元素的四个边框的样式。此属性可以有一到四个值。
实例:
border-style:dotted solid double dashed;

上边框是点状
右边框是实线
下边框是双线
左边框是虚线

border-style:dotted solid double;

上边框是点状
右边框和左边框是实线
下边框是双线

border-style:dotted solid;

上边框和下边框是点状
右边框和左边框是实线

border-style:dotted;

所有4个边框都是点状
属性值

值	描述
none	定义无边框
hidden	与 “none” 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。
dotted	定义点状边框。在大多数浏览器中呈现为实线。
dashed	定义虚线。在大多数浏览器中呈现为实线。
solid	定义实线。
double	定义双线。双线的宽度等于 border-width 的值。
groove	定义 3D 凹槽边框。其效果取决于 border-color 的值。
ridge	定义 3D 垄状边框。其效果取决于 border-color 的值。
inset	定义 3D inset 边框。其效果取决于 border-color 的值。
outsset	定义 3D outset 边框。其效果取决于 border-color 的值。
inherit	规定应该从父元素继承边框样式。

实例样式：
每边设置不同的边框
在这里插入图片描述

<html>
<head>
<meta charset="utf-8"> 
<title>CSS应用</title> 
<style>
p.one {border-style:dotted solid dashed double;}
p.two {border-style:dotted solid dashed;}
p.three {border-style:dotted solid;}
p.four {border-style:dotted;}
</style>
</head>

<body>
<p class="one">这是边框效果</p>
<p class="two">这是边框效果</p>
<p class="three">这是边框效果</p>
<p class="four">这是边框效果</p>
</body>
</html>

依然饭特稀a

关注

4
点赞
踩
18

收藏

觉得还不错? 一键收藏
1
评论
HTML CSS应用——格式化网页、文字、表格

目录：一、格式化网页-----------1、添加滚动条“CSS布局- Overflow”-------------------①两种滚动条的添加方式-------------------②CSS布局- Overflow的注意要点二、格式化文字三、格式化网页-----------1、将边框合并为单一边框-------------------①CSS 的border-collapse...
复制链接

扫一扫