文本属性

设置文本对齐方式

案例搭建：调整p标签中内容为“你好，前端人！”的文本对齐方式

代码：左、右、中

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.p1 {text-align: left;}.p2 {text-align: right;}.p3 {text-align: center;}</style>
</head>
<body><p class="p1">你好，前端人！</p><p class="p2">你好，前端人！</p><p class="p3">你好，前端人！</p>
</body></html>

效果：

设置文本的修饰方式

案例搭建：调整p标签中内容为“你好，前端人！”的文本修饰方式

代码：下划线、上划线、删除线

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.p1 {text-decoration: underline;}.p2 {text-decoration: overline;}.p3 {text-decoration: line-through;}</style>
</head>
<body><p class="p1">你好，前端人！</p><p class="p2">你好，前端人！</p><p class="p3">你好，前端人！</p>
</body></html>

效果：

设置文本大小写

案例搭建：调整p标签中内容为“hello wEB”的文本大小写

代码：每个单词开头大写，全部大写，全部小写

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.p1 {text-transform: capitalize;}.p2 {text-transform: uppercase;}.p3 {text-transform: lowercase;}</style>
</head>
<body><p class="p1">hello wEB</p><p class="p2">hello wEB</p><p class="p3">hello wEB</p>
</body></html>

效果：

设置文本的首行缩进

案例搭建：调整p标签中内容为““1. 人生最痛苦的是梦醒了无路可以走。做梦的人是幸福的；倘没有看出可走的路，最要紧的是不要去惊醒他。《娜拉走后怎样》一九二三年2. 我们目下的当务之急，是：一要生存，二要温饱，三要发展。苟有阻碍这前途者，无论是古是今，是人是鬼，是《三填五典》，百宋千元，天球河图，金人玉佛，祖传丸散，秘制膏丹，全都踏倒他。《忽然想到》一九二五年””的首行缩进。

代码：30px表示对首行缩进两个字符的设定

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.p1 {text-indent: 30px;}</style>
</head>
<body><p class="p1">“1. 人生最痛苦的是梦醒了无路可以走。做梦的人是幸福的；倘没有看出可走的路，最要紧的是不要去惊醒他。《娜拉走后怎样》一九二三年2. 我们目下的当务之急，是：一要生存，二要温饱，三要发展。苟有阻碍这前途者，无论是古是今，是人是鬼，是《三填五典》，百宋千元，天球河图，金人玉佛，祖传丸散，秘制膏丹，全都踏倒他。《忽然想到》一九二五年”</p>
</body></html>

效果：（负值是允许的。如果值是负数，将第一行左缩进）

表格属性

设置表格边框

代码：为table与td加边框

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>table,td {border: 1px solid black;}</style>
</head>
<body><table><tr><td>单元格</td><td>单元格</td><td>单元格</td></tr><tr><td>单元格</td><td>单元格</td><td>单元格</td></tr></tr></table>
</body></html>

效果：

设置表格折叠效果

代码：将以上的边线进行折叠

    <style>table,td {border: 1px solid black;}table{border-collapse: collapse;}</style>
</head>

效果：

设置表格宽度与高度

代码：为table设置高度为100ox，宽度为200px

    <style>table,td {border: 1px solid black;}table{border-collapse: collapse;width: 200px;height: 100px;}</style>
</head>
<body>

效果：

设置表格文字对齐方式（水平与垂直对齐方式可以同时设定）

代码：为td设置对齐方式——左（中）、右（中）、中（中）、（左）上、（左）下、（左）中、右上、右下、右中、中上、中下、中中。（括号内表示默认的对齐方式）

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>table,td {border: 1px solid black;}table{border-collapse: collapse;width: 500px;height: 300px;}.td1{text-align: left;}.td2{text-align: right;}.td3{text-align: center;}.td4{vertical-align: top;}.td5{vertical-align: bottom;}.td6{vertical-align: center;}.td7{text-align: right;vertical-align: top;}.td8{text-align: right;vertical-align: bottom;}.td9{text-align: right;vertical-align: center;}.td10{text-align: center;vertical-align: top;}.td11{text-align: center;vertical-align: bottom;}.td12{text-align: center;vertical-align: center;}</style>
</head>
<body><table><tr><!--默认垂直为居中--><td class="td1">单元格左（中）</td><td class="td2">单元格右（中）</td><td class="td3">单元格中（中）</td></tr><tr><!--默认水平为居左--><td class="td4">单元格（左）上</td><td class="td5">单元格（左）下</td><td class="td6">单元格（左）中</td></tr><tr><td class="td7">单元格右上</td><td class="td8">单元格右下</td><td class="td9">单元格右中</td></tr><tr><td class="td10">单元格中上</td><td class="td11">单元格中下</td><td class="td12">单元格中中</td></tr></table>
</body></html>

效果：

设置表格填充方式

如果在表的内容中控制空格之间的边框，应使用td和th元素的填充属性

代码：使得td的内容与table的每一个边线之间都有20px填充

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>table,td {border: 1px solid black;}table{border-collapse: collapse;}.td1{padding: 20px;}</style>
</head>
<body><table><tr><td class="td1">单元格有填充</td><td class="td1">单元格有填充</td><td class="td1">单元格有填充</td></tr><tr><td >单元格</td><td >单元格</td><td >单元格</td></tr></table>
</body></html>

效果：

设置表格颜色

代码：指定边框的颜色为绿色、3px细实线，和td元素的文本（白色）和背景颜色（黑色）

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>table,td {border: 3px solid green;}table{border-collapse: collapse;width: 300px;height: 200px;}td{background-color: black;color:white;}</style>
</head>
<body><table><tr><td >单元格</td><td >单元格</td><td >单元格</td></tr><tr><td >单元格</td><td >单元格</td><td >单元格</td></tr></table>
</body></html>

效果：

py系统学习笔记：第七阶段：网页编程基础：第二章：CSS3：23.文本、表格属性相关推荐

python获取网页元素坐标_Python实战爬虫系统学习笔记一：解析网页中的元素
学习python编写爬虫第一天,学会如何解析本地网页第1步:使用用Beautiful Soup解析网页 Soup = BeautifulSoup(wb_data,'lxml') 第2步:描述爬取信息 ...
【学习笔记】《网络安全态势感知》第二章：网络安全态势感知系统及案例
文章目录 2.1 网络安全态势感知系统的功能结构 2.1.1 特征信息提取 2.1.2 当前状态分析 2.1.3 发展趋势预测 2.1.4 风险评估 2.1.5 模型及管理 2.1.6 用户交互 2. ...
ABB机器人学习笔记（七）-机器人编程
机器人的应用程序是使用一种称为RAPID编程语言的特定词汇和语法编写而成的.它是一种英文编程语言,包含了一连串控制机器人的指令,执行这些指令可以实现对机器人的控制操作.创建程序模块步骤如下: 点击AB ...
【学习笔记】《卓有成效的管理者》第二章掌握自己的时间
相比<领导力>那本书,德鲁克这本书可操作性更强一些. 管理别人之前,先管理好自己:管理好自己,首先是管理好自己的时间.其实个人时间管理,有专门的书籍,在公司里,也有专门的课程--通常是给刚 ...
授权管理【学习笔记】《卓有成效的管理者》第二章掌握自己的时间
每日一贴,今天的内容关键字为授权管理比拟<领导力>那本书,德鲁克这本书可操作性更强一些. 管理别人之前,先管理好自己:管理好自己,首先是管理好自己的时光.其实个人时光管理,有专门的书籍, ...
客户端网页编程，第二章思维导图
转载于:https://www.cnblogs.com/hj13880741/p/5267811.html
Windows驱动开发学习笔记（七）—— 多核同步内核重载
Windows驱动开发学习笔记(七)-- 多核同步基础知识并发与同步分析 InterlockedIncrement 原子操作相关API 内核文件多核同步临界区示例一:错误的临界区示例二: ...
django系统学习笔记
转自:http://hi.baidu.com/derris/item/7ca6013e330563fede2221ab 2010-02-07 00:12 django系统学习笔记--(1)hello ...
嵌入式Linux系统开发笔记（七）
嵌入式Linux系统开发笔记(七) 七.U-Boot基础 1.概述在移植 Linux之前我们需要先移植一个 bootloader 代码,这个 bootloader 代码用于启动 Linux 内核, ...

py系统学习笔记：第七阶段：网页编程基础：第二章：CSS3：23.文本、表格属性

目录

文本属性

设置文本对齐方式

代码：左、右、中

效果：

设置文本的修饰方式

代码：下划线、上划线、删除线

效果：

设置文本大小写

代码：每个单词开头大写，全部大写，全部小写

效果：

设置文本的首行缩进

代码：30px表示对首行缩进两个字符的设定

效果：（负值是允许的。如果值是负数，将第一行左缩进）

表格属性

设置表格边框

代码：为table与td加边框

效果：

设置表格折叠效果

代码：将以上的边线进行折叠

效果：

设置表格宽度与高度

代码：为table设置高度为100ox，宽度为200px

效果：

设置表格文字对齐方式（水平与垂直对齐方式可以同时设定）

代码：为td设置对齐方式——左（中）、右（中）、中（中）、（左）上、（左）下、（左）中、右上、右下、右中、中上、中下、中中。（括号内表示默认的对齐方式）

效果：

设置表格填充方式

代码：使得td的内容与table的每一个边线之间都有20px填充

效果：

设置表格颜色

代码：指定边框的颜色为绿色、3px细实线，和td元素的文本（白色）和背景颜色（黑色）

效果：

py系统学习笔记：第七阶段：网页编程基础：第二章：CSS3：23.文本、表格属性相关推荐

最新文章

热门文章

py系统学习笔记：第七阶段：网页编程基础：第二章：CSS3：23.文本、表格属性

目录

文本属性

设置文本对齐方式

代码：左、右、中

效果：

设置文本的修饰方式

代码：下划线、上划线、删除线

效果：

设置文本大小写

代码：每个单词开头大写，全部大写，全部小写

效果：

设置文本的首行缩进

代码：30px表示对首行缩进两个字符的设定

效果：（负值是允许的。如果值是负数，将第一行左缩进）

表格属性

设置表格边框

代码​​​​​​​：为table与td加边框

效果：

设置表格折叠效果

代码：将以上的边线进行折叠

效果：

设置表格宽度与高度

代码：为table设置高度为100ox，宽度为200px

效果：

设置表格文字对齐方式（水平与垂直对齐方式可以同时设定）

代码：为td设置对齐方式——左（中）、右（中）、中（中）、（左）上、（左）下、（左）中、右上、右下、右中、中上、中下、中中。（括号内表示默认的对齐方式）

效果：

设置表格填充方式

代码：使得td的内容与table的每一个边线之间都有20px填充

效果：

设置表格颜色

代码：指定边框的颜色为绿色、3px细实线，和td元素的文本（白色）和背景颜色（黑色）

效果：

py系统学习笔记：第七阶段：网页编程基础：第二章：CSS3：23.文本、表格属性相关推荐

最新文章

热门文章

代码：为table与td加边框