韩顺平div+css教程笔记：完整版

3星 · 超过75%的资源需积分: 10 50 浏览量更新于2024-07-26 2 收藏 982KB DOCX 举报

"这是一份关于韩顺平的div+css笔记，包含了div与css的基础概念、使用方法以及快速入门案例。笔记详细介绍了如何通过div布局网页内容，并使用css进行样式设计，旨在帮助读者掌握这一重要的前端技术。" 在Web开发中，`div+css`是一种常见的布局和样式控制方式，它将内容结构（HTML）与表现样式（CSS）分离，提高了网页的可维护性和可读性。`div`是HTML中的一个通用容器元素，主要用于组织页面内容，而`css`则是层叠样式表，用于定义这些元素的外观和布局。 1. **div元素**：`div`（division）是HTML中的一个块级元素，它可以包含其他HTML元素，如文本、图片、表格等。`div`通常用作页面布局的容器，通过设置`div`的样式，可以实现复杂的页面布局。在示例中，`<div class="style1">`就是一个带有特定类名的`div`元素，用于包裹一个表格。 2. **CSS（层叠样式表）**：CSS允许开发者定义HTML元素的样式，包括颜色、字体、大小、位置等。在示例中，`.style1`是一个选择器，用于选取具有`style1`类的所有元素，并为其设定宽度、高度、边框和外边距等样式。`.style1table`和`.style1tabletd`则分别定义了`div`内的表格及其单元格的样式。 3. **CSS的快速体验案例**：在`test.html`中，`link`标签引入了一个外部样式表`my.css`，这样所有的样式定义都集中在这个单独的文件中，便于管理和更新。`my.css`中定义了`.style1`及其子元素的样式，使得表格被红色边框包围，且每个单元格都有黑色边框，并居中对齐。 4. **CSS语法**：CSS的语法是通过`<元素名 style="属性名：属性值；属性名2：属性值2；">`来设置元素的样式。例如，`<span style="font-size:30px;color:blue;">栏目一</span>`就设置了`span`元素的文字大小为30像素，颜色为蓝色。 5. **CSS的分类**：CSS分为外部样式（外部CSS）、内部样式（内部CSS）和内联样式。外部样式是将样式写在独立的`.css`文件中，通过`link`标签引入；内部样式是在`<head>`部分的`<style>`标签内定义；内联样式是直接在HTML元素的`style`属性中设置。 6. **DOCTYPE**：`<!DOCTYPE>`声明是告诉浏览器文档遵循的HTML或XHTML规范的类型，如`<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN">`声明了这是一个HTML4.01过渡型文档。通过这份笔记，读者可以学习到`div+css`的基础知识，包括它们的作用、语法以及如何应用于实际的网页开发中。这不仅有助于理解Web页面的结构和样式设计，也为后续的前端开发学习打下基础。

2．类选择器的基本语法5

类选择器名4

属性名5属性值6

. 文件

.style1{

font-size: 20px;

font-weight: bold;

background-color: purple;

}

select1.html 文件

&+$-.$,-../-0*&+*

%*

1(.*

/%&%-.2*栏目一/%&*

/%&%-.2*栏目二/%&*

/%&%-.2*栏目三/%&*

/%&%-.2*栏目四/%&*1(.*

3． 选择器

基本语法：

F 选择器名4

属性名：属性值；

案例：

F.34

,(&;530px6

1%+7$(<&(($5skyblue6

剩余21页未读，继续阅读

a920907jiang

粉丝: 0
资源: 8

韩顺平div+css教程笔记：完整版

韩顺平html+css+javascript笔记完整版

韩顺平 html+css+javascript

韩顺平 DIV+CSS 超级详细笔记

韩顺平html+css+javascript-----div+css笔记

韩顺平html+css笔记

韩顺平html+div+css+js全部笔记及w3c帮助文档

韩顺平 html+css+js笔记(全)

韩顺平html，div+css视频听讲笔记

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

韩顺平《轻松搞定网页设计HTML+CSS+JAVASCRIPT》之DIV+CSS学习笔记

最新资源