100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > 【HTML+CSS网页设计与布局 从入门到精通】第10章-CSS

【HTML+CSS网页设计与布局 从入门到精通】第10章-CSS

时间:2020-12-07 21:12:44

相关推荐

【HTML+CSS网页设计与布局 从入门到精通】第10章-CSS

目录

开始

新增设置

英文字母全部小写

字号设置

首字母“大”写-大一点显示

上划线,下划线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" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/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" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/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" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/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" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/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" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/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" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/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" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/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" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/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" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/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" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/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" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/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" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/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" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/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>

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。