韩顺平讲解的Div+CSS基础教程笔记
需积分: 9 76 浏览量
更新于2024-07-22
收藏 551KB DOC 举报
"韩顺平的div+css教学笔记，主要介绍了div和css的基本概念、原理及应用案例，包括HTML结构与CSS样式的结合以及CSS的分类和基本语法。"
在网页设计中，`div+css`是一种常用的技术，用于实现页面布局和样式控制。`div`是HTML中的一个通用容器元素，它没有特定的语义，主要用于组织和分组其他HTML元素，以实现更灵活的页面结构。而`css`（层叠样式表）则用于定义这些元素的外观和布局，包括颜色、字体、大小、位置等样式属性。
在提供的部分笔记中，通过一个简单的`test.html`案例展示了如何使用`div`和`css`。在这个例子中，`div`被赋予了类样式`.style1`，并且设置了一个300像素宽、200像素高的红色边框，以及100像素的上外边距和200像素的左外边距。内部的表格`table`也通过`.style1table`类设置了黑色边框，并调整了宽度和高度。每个表格单元格`td`则进一步设置了边框和居中对齐的文本。
此外，笔记还提到了`span`元素的使用，它通常用于在行内元素中插入样式。这里使用`span`展示了如何直接在HTML中内联设置CSS样式，例如改变字体大小和颜色。`<span style="font-size:30px;color:blue;">栏目一</span>`就是一个例子，它将文本“栏目一”设置为30像素的蓝色字体。
关于CSS的分类，笔记提到了两种主要形式：外部CSS（通过链接外部`.css`文件）和内部CSS（将样式代码写入HTML的`<head>`标签内的`<style>`标签）。外部CSS允许样式独立于内容，便于管理和维护；内部CSS则适用于小型项目或样式需求较少的情况。
最后，笔记提醒我们，属性名和属性值应参照W3C（万维网联盟）提供的HTML和CSS规范文档，以确保兼容性和标准性。DOCTYPE声明用于指定文档类型和版本，这对于浏览器正确解析HTML至关重要。
这个笔记涵盖了`div+css`的基础知识，包括HTML结构、CSS样式定义、元素选择器和CSS的分类，对于初学者来说是一份很好的学习资料。通过理解和实践这些基础知识，开发者可以创建出结构清晰、样式一致的网页。
<!--<linkrel="stylesheet"type="text/css"href="./styles.css">-->
</head>
<body>
<a href="#"><img src="images/1.jpg"width=170px border=1/></a>
<a href="#"><img src="images/2.jpg"width=170px border=1/></a>
</body>
二.css 的4 种选择器
类选择器 id 选择器 html 元素选择器 通配符选择器
1．类选择器的基本语法:
.类选择器名{
属性名:属性值;
…
}
my.css 文件
.style1{
font-size: 20px;
font-weight: bold;
background-color: purple;
}
select1.html 文件
<linkrel="stylesheet"href="my.css"type="text/css"></link>
</head>
<body>
<spanclass="style1">栏目一</span>
<spanclass="style1">栏目二</span>
<spanclass="style1">栏目三</span>
<spanclass="style1">栏目四</span></body>
2．id 选择器
基本语法：
#id 选择器名{
属性名：属性值；
}
案例：
#style2{
font-size:30px;
background-color:skyblue;
}
在html 文件中如果要引用id 选择器，则
<元素 id=”id 选择器的名称”></元素>
剩余19页未读，继续阅读
2015-05-18 上传
2012-10-27 上传
2015-06-06 上传
2018-04-09 上传
2016-02-25 上传
2012-08-18 上传
2014-04-08 上传
2015-05-22 上传
点击了解资源详情
w1464525673
- 粉丝: 2
- 资源: 63
我的内容管理
展开
最新资源
- C语言快速排序算法的实现与应用
- KityFormula 编辑器压缩包功能解析
- 离线搭建Kubernetes 1.17.0集群教程与资源包分享
- Java毕业设计教学平台完整教程与源码
- 综合数据集汇总：浏览记录与市场研究分析
- STM32智能家居控制系统：创新设计与无线通讯
- 深入浅出C++20标准：四大新特性解析
- Real-ESRGAN: 开源项目提升图像超分辨率技术
- 植物大战僵尸杂交版v2.0.88：新元素新挑战
- 掌握数据分析核心模型，预测未来不是梦
- Android平台蓝牙HC-06/08模块数据交互技巧
- Python源码分享：计算100至200之间的所有素数
- 免费视频修复利器：Digital Video Repair
- Chrome浏览器新版本Adblock Plus插件发布
- GifSplitter：Linux下GIF转BMP的核心工具
- Vue.js开发教程：全面学习资源指南
