韩顺平讲解的Div+CSS基础教程笔记

需积分: 9 100 浏览量更新于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样式，例如改变字体大小和颜色。`栏目一`就是一个例子，它将文本“栏目一”设置为30像素的蓝色字体。关于CSS的分类，笔记提到了两种主要形式：外部CSS（通过链接外部`.css`文件）和内部CSS（将样式代码写入HTML的`<head>`标签内的`<style>`标签）。外部CSS允许样式独立于内容，便于管理和维护；内部CSS则适用于小型项目或样式需求较少的情况。最后，笔记提醒我们，属性名和属性值应参照W3C（万维网联盟）提供的HTML和CSS规范文档，以确保兼容性和标准性。DOCTYPE声明用于指定文档类型和版本，这对于浏览器正确解析HTML至关重要。这个笔记涵盖了`div+css`的基础知识，包括HTML结构、CSS样式定义、元素选择器和CSS的分类，对于初学者来说是一份很好的学习资料。通过理解和实践这些基础知识，开发者可以创建出结构清晰、样式一致的网页。





</head>



<body>

</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>

<spanclass="style1">栏目一

   <spanclass="style1">栏目二

   <spanclass="style1">栏目三

   <spanclass="style1">栏目四</body>

2．id 选择器

基本语法：

#id 选择器名{

属性名：属性值；

}

案例：

#style2{

font-size:30px;

background-color:skyblue;

}

在html 文件中如果要引用id 选择器，则

<元素 id=”id 选择器的名称”></元素>

剩余19页未读，继续阅读

w1464525673

粉丝: 2
资源: 63

韩顺平讲解的Div+CSS基础教程笔记

韩顺平html css js笔记.doc

《韩顺平轻松搞定网页设计》DIV CSS学习笔记.doc

韩顺平 html+css+javascript

在学习PHP开发前，我需要掌握哪些HTML和CSS的基础知识？请结合《韩顺平PHP全套笔记：从入门到精通》的内容进行解答。

韩顺平 html css js

韩顺平 golang 学习笔记

韩顺平111.wav

韩顺平一周mysql笔记

韩顺平mysql笔记

韩顺平go语言课程笔记

最新资源