【HTML＋CSS网页设计与布局 从入门到精通】第10章-CSS
2024-06-01 23:29:33
目录
开始
新增设置
英文字母全部小写
字号设置
首字母“大”写-大一点显示
上划线，下划线text-decoration:underline overline;
缩进text-indent:2em;
缩进为负数text-indent:-2em;
字母间距letter-spacing:-1px; ，单词间距word-spacing:10px;
行高line-height:2;
边框border:1px red solid; ，行间距margin:5px 0px;
文本布局：居中text-align:center;，恰当text-align:justify;
背景颜色background:#678; ，字体颜色color:white;
开始
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>体验CSS</title>
<style type="text/css">
<!--
h1{font-family:黑体}
p{font-family: Arial, "Times New Roman"}
-->
</style>
</head><body>
<h1>互联网发展的起源</h1><p id="p1">A very simple ascii map of the first network link on ARPANET between UCLA and SRI taken from RFC-4 Network Timetable, by Elmer B. Shapiro, March 1969.</p>
<p id="p2">1969年，为了保障通信联络，美国国防部高级研究计划署ARPA资助建立了世界上第一个分组交换试验网ARPANET，连接美国四个大学。ARPANET的建成和不断发展标志着计算机网络发展的新纪元。</p>
</body>
</html>新增设置
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>体验CSS</title>
<style type="text/css">
<!--
h1{font-family:黑体;}
p{font-family: Arial, "Times New Roman"}
#p1{font-style:italic; /*新增的设置*/}
-->
</style>
</head><body>
<h1>互联网发展的起源</h1><p id="p1">A very simple ascii map of the first network link on ARPANET between UCLA and SRI taken from RFC-4 Network Timetable, by Elmer B. Shapiro, March 1969.</p>
<p id="p2">1969年，为了保障通信联络，美国国防部高级研究计划署ARPA资助建立了世界上第一个分组交换试验网ARPANET，连接美国四个大学。ARPANET的建成和不断发展标志着计算机网络发展的新纪元。</p>
</body>
</html>英文字母全部小写
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>体验CSS</title>
<style type="text/css">
<!--
h1{font-family:黑体;}
p{font-family: Arial, "Times New Roman"}
#p1{font-style:italic;
text-transform:capitalize;}
#p2{
text-transform:lowercase;}
-->
</style>
</head><body>
<h1>互联网发展的起源</h1><p id="p1">A very simple ascii map of the first network link on ARPANET between UCLA and SRI taken from RFC-4 Network Timetable, by Elmer B. Shapiro, March 1969.</p>
<p id="p2">1969年，为了保障通信联络，美国国防部高级研究计划署ARPA资助建立了世界上第一个分组交换试验网ARPANET，连接美国四个大学。ARPANET的建成和不断发展标志着计算机网络发展的新纪元。</p>
</body>
</html>字号设置
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>体验CSS</title>
<style type="text/css">
<!--
h1{font-family:黑体;}
p{ font-family: Arial, "Times New Roman";font-size:12px;}
#p1{font-style:italic;text-transform:capitalize;}
#p2{text-transform:lowercase;}-->
</style>
</head><body>
<h1>互联网发展的起源</h1><p id="p1">A very simple ascii map of the first network link on ARPANET between UCLA and SRI taken from RFC-4 Network Timetable, by Elmer B. Shapiro, March 1969.</p>
<p id="p2">1969年，为了保障通信联络，美国国防部高级研究计划署ARPA资助建立了世界上第一个分组交换试验网ARPANET，连接美国四个大学。ARPANET的建成和不断发展标志着计算机网络发展的新纪元。</p>
</body>
</html>首字母“大”写-大一点显示
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>体验CSS</title>
<style type="text/css">
<!--
h1{font-family:黑体;}
p{ font-family: Arial, "Times New Roman";font-size:12px;}
#p1{font-style:italic;text-transform:capitalize;}
#p2{text-transform:lowercase;}
#firstLetter{font-size:3em;float:left;}
-->
</style>
</head><body>
<h1>互联网发展的起源</h1><p id="p1"><span id="firstLetter">A</span> very simple ascii map of the first network link on ARPANET between UCLA and SRI taken from RFC-4 Network Timetable, by Elmer B. Shapiro, March 1969.</p>
<p id="p2">1969年，为了保障通信联络，美国国防部高级研究计划署ARPA资助建立了世界上第一个分组交换试验网ARPANET，连接美国四个大学。ARPANET的建成和不断发展标志着计算机网络发展的新纪元。</p>
</body>
</html>上划线，下划线text-decoration:underline overline;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>体验CSS</title>
<style type="text/css">
<!--
h1{font-family:黑体;
text-decoration:underline overline;}
p{ font-family: Arial, "Times New Roman";font-size:12px;}
#p1{font-style:italic;text-transform:capitalize;}
#p2{text-transform:lowercase;}
#firstLetter{font-size:3em;float:left;}
-->
</style>
</head><body>
<h1>互联网发展的起源</h1><p id="p1"><span id="firstLetter">A</span> very simple ascii map of the first network link on ARPANET between UCLA and SRI taken from RFC-4 Network Timetable, by Elmer B. Shapiro, March 1969.</p>
<p id="p2">1969年，为了保障通信联络，美国国防部高级研究计划署ARPA资助建立了世界上第一个分组交换试验网ARPANET，连接美国四个大学。ARPANET的建成和不断发展标志着计算机网络发展的新纪元。</p>
</body>
</html>缩进text-indent:2em;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>体验CSS</title>
<style type="text/css">
<!--
h1{font-family:黑体;
text-decoration:underline overline;}
p{ font-family: Arial, "Times New Roman";font-size:12px;}
#p1{font-style:italic;text-transform:capitalize;}
#p2{text-transform:lowercase;text-indent:2em;}
#firstLetter{font-size:3em;float:left;}
-->
</style>
</head><body>
<h1>互联网发展的起源</h1><p id="p1"><span id="firstLetter">A</span> very simple ascii map of the first network link on ARPANET between UCLA and SRI taken from RFC-4 Network Timetable, by Elmer B. Shapiro, March 1969.</p>
<p id="p2">1969年，为了保障通信联络，美国国防部高级研究计划署ARPA资助建立了世界上第一个分组交换试验网ARPANET，连接美国四个大学。ARPANET的建成和不断发展标志着计算机网络发展的新纪元。</p>
</body>
</html>缩进为负数text-indent:-2em;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>体验CSS</title>
<style type="text/css">
<!--
h1{font-family:黑体;
text-decoration:underline overline;}
p{ font-family: Arial, "Times New Roman";font-size:12px;}
#p1{font-style:italic;text-transform:capitalize;}
#p2{text-transform:lowercase;text-indent:-2em;padding-left:2em;}
#firstLetter{font-size:3em;float:left;}
-->
</style>
</head><body>
<h1>互联网发展的起源</h1><p id="p1"><span id="firstLetter">A</span> very simple ascii map of the first network link on ARPANET between UCLA and SRI taken from RFC-4 Network Timetable, by Elmer B. Shapiro, March 1969.</p>
<p id="p2">1969年，为了保障通信联络，美国国防部高级研究计划署ARPA资助建立了世界上第一个分组交换试验网ARPANET，连接美国四个大学。ARPANET的建成和不断发展标志着计算机网络发展的新纪元。</p>
</body>
</html>字母间距letter-spacing:-1px; ，单词间距word-spacing:10px;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>体验CSS</title>
<style type="text/css">
<!--
h1{font-family:黑体;
text-decoration:underline overline;}
p{ font-family: Arial, "Times New Roman";font-size:12px;}
#p1{font-style:italic;text-transform:capitalize;word-spacing:10px;letter-spacing:-1px;}
#p2{text-transform:lowercase;text-indent:2em;}
#firstLetter{font-size:3em;float:left;}
-->
</style>
</head><body>
<h1>互联网发展的起源</h1><p id="p1"><span id="firstLetter">A</span> very simple ascii map of the first network link on ARPANET between UCLA and SRI taken from RFC-4 Network Timetable, by Elmer B. Shapiro, March 1969.</p>
<p id="p2">1969年，为了保障通信联络，美国国防部高级研究计划署ARPA资助建立了世界上第一个分组交换试验网ARPANET，连接美国四个大学。ARPANET的建成和不断发展标志着计算机网络发展的新纪元。</p>
</body>
</html>行高line-height:2;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>体验CSS</title>
<style type="text/css">
<!--
h1{font-family:黑体;
text-decoration:underline overline;}
p{ font-family: Arial, "Times New Roman";font-size:12px;}
#p1{font-style:italic;text-transform:capitalize;word-spacing:10px;letter-spacing:-1px;}
#p2{text-transform:lowercase;text-indent:2em;line-height:2;}
#firstLetter{font-size:3em;float:left;}
-->
</style>
</head><body>
<h1>互联网发展的起源</h1><p id="p1"><span id="firstLetter">A</span> very simple ascii map of the first network link on ARPANET between UCLA and SRI taken from RFC-4 Network Timetable, by Elmer B. Shapiro, March 1969.</p>
<p id="p2">1969年，为了保障通信联络，美国国防部高级研究计划署ARPA资助建立了世界上第一个分组交换试验网ARPANET，连接美国四个大学。ARPANET的建成和不断发展标志着计算机网络发展的新纪元。</p>
</body>
</html>边框border:1px red solid; ，行间距margin:5px 0px;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>体验CSS</title>
<style type="text/css">
<!--
h1{font-family:黑体;
text-decoration:underline overline;}
p{ font-family: Arial, "Times New Roman";font-size:12px;border:1px red solid;margin:5px 0px;}
#p1{font-style:italic;text-transform:capitalize;word-spacing:10px;letter-spacing:-1px;}
#p2{text-transform:lowercase;text-indent:2em;line-height:2;}
#firstLetter{font-size:3em;float:left;}
-->
</style>
</head><body>
<h1>互联网发展的起源</h1><p id="p1"><span id="firstLetter">A</span> very simple ascii map of the first network link on ARPANET between UCLA and SRI taken from RFC-4 Network Timetable, by Elmer B. Shapiro, March 1969.</p>
<p id="p2">1969年，为了保障通信联络，美国国防部高级研究计划署ARPA资助建立了世界上第一个分组交换试验网ARPANET，连接美国四个大学。ARPANET的建成和不断发展标志着计算机网络发展的新纪元。</p>
</body>
</html>文本布局：居中text-align:center;，恰当text-align:justify;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>体验CSS</title>
<style type="text/css">
<!--
h1{font-family:黑体;
text-decoration:underline overline;
text-align:center;}
p{ font-family: Arial, "Times New Roman";font-size:12px;margin:5px 0px;text-align:justify;}
#p1{font-style:italic;text-transform:capitalize;word-spacing:10px;letter-spacing:-1px;}
#p2{text-transform:lowercase;text-indent:2em;line-height:2;}
#firstLetter{font-size:3em;float:left;}
-->
</style>
</head><body>
<h1>互联网发展的起源</h1><p id="p1"><span id="firstLetter">A</span> very simple ascii map of the first network link on ARPANET between UCLA and SRI taken from RFC-4 Network Timetable, by Elmer B. Shapiro, March 1969.</p>
<p id="p2">1969年，为了保障通信联络，美国国防部高级研究计划署ARPA资助建立了世界上第一个分组交换试验网ARPANET，连接美国四个大学。ARPANET的建成和不断发展标志着计算机网络发展的新纪元。</p>
</body>
</html>背景颜色background:#678; ，字体颜色color:white;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>体验CSS</title>
<style type="text/css">
<!--
h1{font-family:黑体;
text-decoration:underline overline;
text-align:center;}
p{ font-family: Arial, "Times New Roman";font-size:12px;margin:5px 0px;text-align:justify;}
#p1{font-style:italic;text-transform:capitalize;word-spacing:10px;letter-spacing:-1px;}
#p2{text-transform:lowercase;text-indent:2em;line-height:2;}
#firstLetter{font-size:3em;float:left;}
h1{background:#678;color:white;}
-->
</style>
</head><body>
<h1>互联网发展的起源</h1><p id="p1"><span id="firstLetter">A</span> very simple ascii map of the first network link on ARPANET between UCLA and SRI taken from RFC-4 Network Timetable, by Elmer B. Shapiro, March 1969.</p>
<p id="p2">1969年，为了保障通信联络，美国国防部高级研究计划署ARPA资助建立了世界上第一个分组交换试验网ARPANET，连接美国四个大学。ARPANET的建成和不断发展标志着计算机网络发展的新纪元。</p>
</body>
</html>【HTML＋CSS网页设计与布局 从入门到精通】第10章-CSS相关推荐
- 【HTML＋CSS网页设计与布局 从入门到精通】第4章
目录 超链接 h1,h2,h3... 图片超链接 邮件超链接 图像热区超链接 图像热区超链接-自己作图 图像热区超链接-多热区 插入一个框架-frame(将一个html文件当做一个frame) 插入一 ...
- 【HTML＋CSS网页设计与布局 从入门到精通】第7章-class、ID选择器，CSS格式
目录 class选择器 class选择器-例外 class选择器-同时使用两种class ID选择器不支持两种同时使用 正文字体格式 正文字体格式-另一种"宏"的使用方式 使用CS ...
- 【HTML＋CSS网页设计与布局 从入门到精通】第13章-块元素div和内联元素span格式布局
目录 块元素背景,边框,颜色等布局 块元素ID选择器 另一个例子 块元素中的图片 盒子模型的演示 块级元素中的文本格式 块级元素div与内联元素span的对比 两个行内元素的margin 两个块级元素 ...
- 【HTML＋CSS网页设计与布局 从入门到精通】第9章-选择器
目录 标记选择器+类别选择器 并集选择器+集体声明 后代(嵌套)选择器 继承关系演示 前沿Web开发教室 继承关系演示-选择器1 继承关系演示-选择器2 还可以写成这样批量的整 或者 再或者 or 层 ...
- 【HTML＋CSS网页设计与布局 从入门到精通】第15章-表格格式：边距/居中/边框/折叠
目录 初始表格 边距.居中.边框 单元格边距cellspacing 边距折叠(两个叠加不会变粗)border-collapse:collapse; 单元格边距border-spacing 初始表格 & ...
- 【HTML＋CSS网页设计与布局 从入门到精通】第14章-float/position/display属性
目录 float属性 float:left float:left-例2 float:left-例3 float:right; 对比father p{clear:right;} 例1 例2 .fathe ...
- 【HTML＋CSS网页设计与布局 从入门到精通】第12章-CSS
目录 开始 背景+颜色 将图片当做背景background-image:url(bg-h.gif); x方向(横向)重复显示图片: y方向(纵向) 不重复显示图片background-repeat:n ...
- 【HTML＋CSS网页设计与布局 从入门到精通】第11章-CSS
目录 图像class选择器 设置图片每个边框的格式:颜色,线型 另一个例子 图文混排 图片左对齐,居中,右对齐 竖直对齐 竖直对齐:具体数值-负数 八大行星:图文混排 图像class选择器 <h ...
- 【HTML＋CSS网页设计与布局 从入门到精通】第8章-CSS
目录 无格式 图文并茂 标题h1格式 图片img格式 正文p格式 body格式 ID选择器的优先级低于标记选择器 无格式 <html> <head> <title> ...
最新文章
- jq父级绑定事件的意义_jq——事件
- 使用jquery.qrcode生成二维码（转）
- /etc/ld.so.conf.d/目录下文件的作用
- Docker Toolbox在window 10 home 下挂载宿主机目录到容器的正确操作
- generator 和 yield的使用
- php 怎么防止提交空记录,为什么空提交什么都不提示？
- Android源码和内核源码的下载，编译和执行
- 比特币可视化工具_这个比特币交易“可视化”网站，用一辆公交车带你“上车”...
- 为什么计算机控制系统采用软,微型计算机控制技术一二章复习资料及部分答案...
- Panorama是什么意思
- 《TensorFlow 2.0深度学习算法实战教材》学习笔记（六、反向传播算法）
- phabricator安装配置和使用（docker安装和独立部署）
- 有一种爱情，叫沉、重！
- C++表达式语句实训 对 26 个大写英文字母进行循环加密，输入一个大写英文字母（明文）和一个整数秘钥，输出用秘钥对该大写英文字母加密后的结果（密文）。
- 工欲善其事，必先利其器 - 修炼Android Studio操作技巧
- 无法启动此程序，因为计算机中丢失MSVCP120.dll文件、应用程序无法正常启动0xc000007b
- “一对一直播软件”的开发，离不开直播源码开发+系统搭建
- Deep Supervision：深度监督（2014）+DHM
- 读写shp等空间数据，进行geometry、SimpleFeature等转换的工具类
- jQuery---仿芒果网机票预定智能输入提示