div+css技术文档资源-CSDN文库

需积分: 10 30 浏览量 2013-01-07 16:23:20 上传评论收藏 174KB DOCX 举报

【div+css技术文档】是关于网页布局与样式设计的基础教程，主要涵盖了CSS的基本概念、应用方式以及常用选择符。CSS（Cascading Style Sheets）是一种用于定义HTML或XML（包括如SVG、MathML等各种XML方言）文档呈现的样式语言，它能够实现内容与表现的分离，提高网页设计的灵活性和可维护性。 1. CSS基础语法书写： CSS的书写格式通常由选择器和声明组成。选择器指向HTML元素，声明则包含属性和值，两者之间用冒号分隔。例如： ```css p { font-family: "sans serif"; } ``` 在这个例子中，`p`是选择器，`font-family`是属性，`"sans serif"`是值，整个规则用花括号包围。 2. 常用的四种将CSS引入网页的方法： - **链入外部样式表**：通过`<link>`标签将CSS文件链接到HTML文档中，通常放在`<head>`标签内，如： ```html <link href="mystyle.css" rel="stylesheet" type="text/css" media="all"> ``` - **内部样式表**：将CSS代码写在HTML文档的`<head>`标签内的`<style>`标签中，如： ```html <style type="text/css"> hr {color: sienna} p {margin-left: 20px} body {background-image: url("images/back40.gif")} </style> ``` - **导入外部样式表**：在内部样式表中使用`@import`语句引入外部CSS文件，例如： ```css @import "mystyle.css"; ``` - **内嵌样式**：直接在HTML元素中使用`style`属性定义样式，如： ```html <p style="color: sienna; margin-left: 20px;">这是一个段落</p> ``` 3. CSS常用选择符： - **通配选择符**：`*`选择符选择所有元素，如`* {property: value;}`。 - **标签选择符**：根据HTML元素名称选择，如`p {property: value;}`。 - **ID选择符**：使用`#`标识符选择具有特定ID的元素，如`#myid {property: value;}`。 - **类选择符**：使用`.`标识符选择具有特定类的元素，如`.myclass {property: value;}`。 - **后代选择符**：使用空格选择父元素内的子元素，如`div p {property: value;}`。 - **子元素选择符**：使用`>`选择父元素的直接子元素，如`div > p {property: value;}`。 - **相邻兄弟选择符**：使用`+`选择紧接在另一个元素后的元素，如`h1 + p {property: value;}`。 - **通用兄弟选择符**：使用`~`选择紧跟在另一元素之后的所有兄弟元素，如`h1 ~ p {property: value;}`。这些基本概念和方法构成了CSS的核心，通过它们可以实现复杂的网页布局和样式控制。理解并熟练运用这些知识，可以创建出美观且响应式的网页设计。

资源推荐

资源详情

资源评论