【HTML＋CSS网页设计与布局 从入门到精通】第8章-CSS
2024-06-14 06:38:37
目录
无格式
图文并茂
标题h1格式
图片img格式
正文p格式
body格式
ID选择器的优先级低于标记选择器
无格式
<html>
<head>
<title>体验CSS</title>
</head><body>
<h1>互联网发展的起源</h1><p>1969年，为了保障通信联络，美国国防部高级研究计划署ARPA资助建立了世界上第一个分组交换试验网ARPANET，连接美国四个大学。ARPANET的建成和不断发展标志着计算机网络发展的新纪元。</p>
<p> 20世纪70年代末到80年代初，计算机网络蓬勃发展，各种各样的计算机网络应运而生，如MILNET、USENET、BITNET、CSNET等，在网络的规模和数量上都得到了很大的发展。一系列网络的建设，产生了不同网络之间互联的需求，并最终导致了TCP/IP协议的诞生。 </p>
</body>
</html>图文并茂
<html>
<head>
<title>体验CSS</title></head><body>
<h1>互联网发展的起源</h1>
<img src="cup.gif" width="128" height="128"/>
<p>1969年，为了保障通信联络，美国国防部高级研究计划署ARPA资助建立了世界上第一个分组交换试验网ARPANET，连接美国四个大学。ARPANET的建成和不断发展标志着计算机网络发展的新纪元。</p>
<p> 20世纪70年代末到80年代初，计算机网络蓬勃发展，各种各样的计算机网络应运而生，如MILNET、USENET、BITNET、CSNET等，在网络的规模和数量上都得到了很大的发展。一系列网络的建设，产生了不同网络之间互联的需求，并最终导致了TCP/IP协议的诞生。 </p>
</body>
</html>标题h1格式
<html>
<head>
<title>体验CSS</title>
<style>
h1{color:white; /* 文字颜色*/background-color:#0000FF; /* 背景色 */text-align:center; /* 居中 */padding:15px; /* 边距 */
}
</style>
</head><body>
<h1>互联网发展的起源</h1>
<img src="cup.gif" width="128" height="128"/>
<p>1969年，为了保障通信联络，美国国防部高级研究计划署ARPA资助建立了世界上第一个分组交换试验网ARPANET，连接美国四个大学。ARPANET的建成和不断发展标志着计算机网络发展的新纪元。</p>
<p> 20世纪70年代末到80年代初，计算机网络蓬勃发展，各种各样的计算机网络应运而生，如MILNET、USENET、BITNET、CSNET等，在网络的规模和数量上都得到了很大的发展。一系列网络的建设，产生了不同网络之间互联的需求，并最终导致了TCP/IP协议的诞生。 </p>
</body>
</html>图片img格式
<html>
<head>
<title>体验CSS</title>
<style>
h1{color:white; /* 文字颜色*/background-color:#0000FF; /* 背景色 */font-size:25px; /* 字号 */font-weight:bold; /* 粗体 */text-align:center; /* 居中 */padding:15px; /* 间距 */
}img{float:left;
border:1px #9999CC dashed;
margin:5px;
}
</style>
</head><body>
<h1>互联网发展的起源</h1>
<img src="cup.gif" width="128" height="128"/>
<p>1969年，为了保障通信联络，美国国防部高级研究计划署ARPA资助建立了世界上第一个分组交换试验网ARPANET，连接美国四个大学。ARPANET的建成和不断发展标志着计算机网络发展的新纪元。</p>
<p> 20世纪70年代末到80年代初，计算机网络蓬勃发展，各种各样的计算机网络应运而生，如MILNET、USENET、BITNET、CSNET等，在网络的规模和数量上都得到了很大的发展。一系列网络的建设，产生了不同网络之间互联的需求，并最终导致了TCP/IP协议的诞生。 </p>
</body>
</html>正文p格式
<html>
<head>
<title>体验CSS</title>
<style>
h1{color:white; /* 文字颜色*/background-color:#0000FF; /* 背景色 */font-size:25px; /* 字号 */font-weight:bold; /* 粗体 */text-align:center; /* 居中 */padding:15px; /* 间距 */
}img{float:left;
border:1px #9999CC dashed;
margin:5px;
}p{
font-size:12px;
text-indent:2em;
line-height:1.5;
padding:5px;
}
</style>
</head><body>
<h1>互联网发展的起源</h1><img src="cup.gif" width="128" height="128"/><p>1969年，为了保障通信联络，美国国防部高级研究计划署ARPA资助建立了世界上第一个分组交换试验网ARPANET，连接美国四个大学。ARPANET的建成和不断发展标志着计算机网络发展的新纪元。</p>
<p> 20世纪70年代末到80年代初，计算机网络蓬勃发展，各种各样的计算机网络应运而生，如MILNET、USENET、BITNET、CSNET等，在网络的规模和数量上都得到了很大的发展。一系列网络的建设，产生了不同网络之间互联的需求，并最终导致了TCP/IP协议的诞生。 </p>
</body>
</html>body格式
<html>
<head>
<title>体验CSS</title>
<style>
body{margin:0px;
background-color:#CCCCFF;
}
h1{color:white; /* 文字颜色*/background-color:#0000FF; /* 背景色 */font-size:25px; /* 字号 */font-weight:bold; /* 粗体 */text-align:center; /* 居中 */padding:15px; /* 间距 */
}img{float:left;
border:1px #9999CC dashed;
margin:5px;
}p{
font-size:12px;
text-indent:2em;
line-height:1.5;
padding:5px;
}
</style>
</head><body>
<h1>互联网发展的起源</h1><img src="cup.gif" width="128" height="128"/><p>1969年，为了保障通信联络，美国国防部高级研究计划署ARPA资助建立了世界上第一个分组交换试验网ARPANET，连接美国四个大学。ARPANET的建成和不断发展标志着计算机网络发展的新纪元。</p>
<p> 20世纪70年代末到80年代初，计算机网络蓬勃发展，各种各样的计算机网络应运而生，如MILNET、USENET、BITNET、CSNET等，在网络的规模和数量上都得到了很大的发展。一系列网络的建设，产生了不同网络之间互联的需求，并最终导致了TCP/IP协议的诞生。 </p>
</body>
</html>ID选择器的优先级低于标记选择器
<html>
<head>
<title>体验CSS</title>
<style>
body{margin:0px;
background-color:#CCCCFF;
}
h1{color:white; /* 文字颜色*/background-color:#0000FF; /* 背景色 */font-size:25px; /* 字号 */font-weight:bold; /* 粗体 */text-align:center; /* 居中 */padding:15px; /* 间距 */
}img{float:left;
border:1px #9999CC dashed;
margin:5px;
}p{
font-size:14px;
text-indent:2em;
line-height:1.5;
padding:5px;
}#p1{
border-right:4px red double ;
}#p2{
border-right:4px orange double ;
}
</style>
</head><body>
<h1>互联网发展的起源</h1><img src="cup.gif" width="128" height="128"/><p id="p1">1969年，为了保障通信联络，美国国防部高级研究计划署ARPA资助建立了世界上第一个分组交换试验网ARPANET，连接美国四个大学。ARPANET的建成和不断发展标志着计算机网络发展的新纪元。</p>
<p id="p2"> 20世纪70年代末到80年代初，计算机网络蓬勃发展，各种各样的计算机网络应运而生，如MILNET、USENET、BITNET、CSNET等，在网络的规模和数量上都得到了很大的发展。一系列网络的建设，产生了不同网络之间互联的需求，并最终导致了TCP/IP协议的诞生。 </p>
</body>
</html>【HTML＋CSS网页设计与布局 从入门到精通】第8章-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网页设计与布局 从入门到精通】第10章-CSS
目录 开始 新增设置 英文字母全部小写 字号设置 首字母"大"写-大一点显示 上划线,下划线text-decoration:underline overline; 缩进text-i ...
- 【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 ...
最新文章
- [SDOI2015]权值
- WebApi捕捉异常的一套方案
- 爬虫苦训第一天，我的第一个爬虫！！！
- 微软职位内部推荐-Software Engineer II-Web app
- JS动态加载JSON文件并读取数据
- LeaRun.Java可视化流程简单配置过程
- 关于腾讯云搭建Socks5多IP代理服务器实现游戏单窗口单IP完美搭建教程附带工具
- Linux版本加载过程异响,完美解决Ubuntu Linux关机异响[SATA硬盘]
- 【信号与系统】指数信号与正弦信号
- studio无法重命名（can not rename root module）
- MiKTeX安装及添加到环境变量
- Linux设备模型剖析系列一（基本概念、kobject、kset、kobj_type）
- 看互联网将如何颠覆这17个传统行业
- 战争与征服服务器维护,战争与征服8月29日停机维护 火力压制主题周第一周开启...
- openssl之EVP系列之5---EVP_Encrypt系列函数具体解释(二)
- 四级，四级，四级！！！！
- 虚拟串口与串口调试助手的使用
- HTML5期末大作业：计算机社团设计--可随意更改名称，各个社团协会
- 中软实训-day1 Maven的基本知识
- 李宏毅课程：SELU 激活函数