Div+CSS基础用法整理.docx
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
【Div+CSS基础用法整理】 Div+CSS是网页布局的一种常见方式,它通过CSS(层叠样式表)控制HTML元素的样式,实现更灵活、更易于维护的页面设计。以下是一些关于Div+CSS的基础知识和技巧: 1. **CSS缩写规则**: - `margin: 0` 表示设置所有方向的外边距为0。 - `border` 缩写用于同时设置边框宽度、样式和颜色,例如 `border: 1px solid black;`。 - `font` 属性可以一次性设置字体大小、字体系列、字重等,如 `font: 12px Arial, sans-serif;`。 - `background` 缩写可以包含背景颜色、图片、重复方式和定位,例如 `background: #FFF url(log.gif) no-repeat fixed top left;`。 2. **引入CSS样式**: - 内联样式:直接在HTML元素的`style`属性中指定,如 `<p style="color:red;">`。 - 内部样式:在`<head>`标签内的`<style>`标签中定义。 - 外部样式:通过`<link>`标签引入外部CSS文件,如 `<link rel="stylesheet" type="text/css" href="styles.css">`。 - 候选样式:使用`alternate`属性来提供多个样式供用户选择。 3. **选择器**: - 元素选择器:如`<p>`选择所有的段落元素。 - 类选择器:使用`.`前缀,如`.myClass`选择所有class为`myClass`的元素。 - ID选择器:使用`#`前缀,如`#myID`选择id为`myID`的元素。 - 属性选择器:根据元素属性选择,如`[class^="a"]`选择class属性以"a"开头的所有元素。 4. **伪类和伪元素**: - 伪类如`:hover`, `:link`, `:visited`, `:active`用于链接的不同状态。 - 伪元素如`::before`和`::after`在元素内容前后插入内容。 5. **子选择器**: - 使用子选择器`>`来精确选择某个元素的直接子元素,例如`#menu > .menulist > .selectit`。 6. **链接样式**: - `:link`未访问链接的样式。 - `:visited`已访问链接的样式。 - `:hover`鼠标悬停时的样式。 - `:active`被点击时的样式。 7. **换行和布局**: - `white-space: nowrap`禁止内容换行。 - `white-space: pre-wrap`允许内容换行,并保留空白。 - 块级元素如`div`和`ul`占据整行,可以设置宽高。 - 内联元素如`span`和`a`不占据整行,只占据内容宽度。 8. **背景属性**: - `background-repeat`控制背景图像的重复方式。 - `background-attachment`设置背景图像是否随滚动而固定。 - `background-position`设置背景图像的位置,可以使用百分比或关键字。 9. **命名约定**: - 类名和ID名应小写,可以使用英文,避免使用中杠和下划线,组合词的第二个单词首字母大写也是一个常见实践。 10. **页面结构**: - 页面通常由`container`(容器)、`header`(页头)、`content`(主要内容)、`footer`(页脚)、`nav`(导航)、`title`(标题)、`logo`(标志)等元素组成。 理解并熟练运用这些Div+CSS基础知识,可以帮助我们创建响应式、易读且高效的网页设计。在实际应用中,还需要不断学习和适应新的CSS特性以及最佳实践。
剩余22页未读,继续阅读
- 粉丝: 8498
- 资源: 2万+
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助