CSS基础与布局要点详记

需积分: 1 71 浏览量更新于2024-09-11 收藏 4KB TXT 举报

本篇CSS课堂笔记主要介绍了HTML和CSS的基础知识，涵盖了样式表的结构、选择器类型、文本样式、布局控制以及边距和边框属性。以下将详细解读这些知识点： 1. **HTML文档结构**： - 使用`<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">`声明文档类型，指定了文档遵循的是HTML4.0的过渡版本规范。 - `<HTML>`标签定义了整个HTML文档的根元素。 - `<HEAD>`区域包含了文档的元信息，如标题 `<TITLE>`，以及 `<META>`标签用于描述搜索引擎优化（SEO）的关键词、作者和描述。 2. **CSS样式表**： - 部分CSS代码展示了如何通过`<style>`标签内嵌在HTML文档中定义样式。例如，`.H1`选择器设置了标题的字体大小为90像素，颜色为红色；`h2`和`h3`有不同的字号和颜色设置，分别使用`font-family: Symbol;`和`color: green;`。 - `moon`, `.sty1`, 和 `.sty2` 是类选择器，可以用来复用样式，提高代码的可维护性。 3. **布局控制**： - `position`属性是定位元素的重要属性，它可以帮助元素脱离文档流，实现相对或绝对定位。`top`, `right`, `bottom`, 和 `left` 属性用于指定元素相对于其父元素的位置。 4. **边距和边框**： - `margin`属性控制元素与周围元素的空白区域，包括`margin-bottom`, `margin-left`, `margin-right`, 和 `margin-top`，分别表示上下左右的外边距。 - `border-width` 属性用于设置边框的宽度，`border-top-color`, `border-bottom-color`, `border-left-color`, 和 `border-right-color` 分别定义了边框的上、下、左、右四个方向的颜色。 - 使用点号（.）表示边框宽度和颜色，如`border-top-width: 2px solid black;`设置上边框宽度为2像素，样式为实线，颜色为黑色。 5. **外部链接与@import**： - 文档中没有实际的外部链接样式表示例，但`<link>`标签通常用于引用外部CSS文件，如`<link type='text/css' rel='stylesheet' href='url'>`。 - `@import`规则允许在CSS内部引入其他CSS文件，例如`@import url('file.css');`，但现代浏览器推荐使用外部链接以提高性能。 6. **HTML注释**： - 文档中的HTML注释``用于临时或永久地注释代码片段，方便开发者查看和理解代码逻辑。这篇CSS课堂笔记提供了HTML和CSS基础的入门指导，从样式定义、元素定位到边距和边框控制等，对初学者理解和掌握CSS语言非常有帮助。通过学习和实践这些知识点，可以逐步提升网页设计和开发的能力。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">

<style type='text/css'>
H1 {font-size:90; color:red};
h2 {font-size:50;color:blue ; font-family:Symbol;}

h3 {color:green;font-size:40px};

.moon {color:#CCCCFF; font-size:9pt}
.sty1 {color:blue; font-size:9pt}
.sty2 {color:red; font-size:20}

</style>
</HEAD>

<BODY>
<!--
<link type='text/css' rel='stylesheet' href='url'>

<style></style> ------------<javascript> function(){ } </javascirpt>

剩余9页未读，继续阅读

lanyudanfei

粉丝: 0
资源: 1

CSS基础与布局要点详记

css课堂笔记前端css课堂笔记

Day05_CSS课堂笔记.md

Day04_HTML&CSS课堂笔记.md

Javaweb最新全套项目实战视频教程-CSS课堂笔记

Web前端CSS视频教程课堂笔记

CSS与CSS3美化页面课堂笔记.zip #资源分享达人#

01__html&CSS_王振国 - 课堂笔记.pdf

2011韩顺平html、css+div、javascript课堂笔记全

斑码教育大前端课堂笔记-css第一天

前端课堂笔记知识总结. html css的相关知识点

最新资源