- 1、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。。
- 2、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 3、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
查看更多
轻松搞定Div+Css
第 1 章 div+css的开山篇 1
1.1 什么是div+css 1
1.2 div+css的快速入门案例 1
第 2 章 div+css的必要性 3
2.1 css可以统一我们的网站风格 3
2.2 css可以通过滤镜来控制图片的显示风格 3
第 3 章 css的选择器 5
3.1 选择器的分类 5
3.2 类选择器 5
3.3 id选择器 6
3.4 html标签选择器 7
3.5 伪类选择器 11
3.6 通配符选择器 15
3.7 组合选择器 16
3.7.1 多元素选择器 16
3.7.2 后代选择器 18
3.7.3 子元素选择器 19
第 4 章 css选择器的深入讨论 21
4.1 后代选择器再说明 21
4.2 id选择器的优先级高于类选择器 22
4.3 多个类选择器修饰同一个html元素 22
4.4 所有选择器的优先级大比武 23
第 5 章 css的使用方式 25
5.1 内联样式表 25
5.2 嵌入样式表 25
5.3 外部样式表 26
5.4 引入样式表 27
第 6 章 css的属性详解 29
6.1 css字体的属性 29
6.2 css文本属性 29
6.3 css背景属性 29
6.4 边框属性 30
6.5 列表属性 31
6.6 table属性的讲解 32
6.7 浏览器的兼容性处理建议 34
第 7 章 行内元素和块元素 36
7.1 介绍 36
7.2 行内元素和块元素的区别 37
7.3 行内元素和块元素相互转换 37
7.4 标准流和非标准流 38
第 8 章 盒子模型 39
8.1 盒子模型的基本概念 39
8.2 快速入门案例 39
8.3 盒子的模型的经典案例 41
8.4 在看一个非常经典实用案例 div - ul -li 42
第 9 章 浮动 45
9.1 快速入门 45
9.2 深入理解浮动 46
9.3 右浮动 48
9.4 浮动的理解补充 50
9.5 清除浮动 52
div+css的开山篇
什么是div+css
div是区块,在网页开发中,用来存放内容(文字,图片,表格等等)
css 是层叠样式表,它的作用是用来规定div和div中的内容的位置和样式(颜色,大小,背景,列表的样式)
div+css 结合就可以做到把内容和样式分离,好处是1. 代码简洁,便于维护 2. 理由seo[搜索引擎优化]
div+css的快速入门案例
代码:
div+css的必要性
css可以统一我们的网站风格
代码:
css可以通过滤镜来控制图片的显示风格
把网站的图片全部变成黑白的,或者模糊的.
代码:
css的选择器
选择器的分类
类选择器(class选择器)
id选择器
html元素选择器(标签选择器)
通配符选择器
伪类选择器
组合选择器(多元素选择器,子元素选择器,后代选择器)
类选择器
基本语法:
.类选择器名称{
css属性:属性值;
css属性:属性值;
}
案例:
补充:
选择器的名称命名规范 .小写字母-小写字母
一般说,类选择器是提供给多个html元素来使用
id选择器
基本语法:
#id选择器名称{
css属性:属性值;
css属性:属性值;
}
案例:
细节:
一般来说id选择器是提供给某一个html元素来使用
当我们不确定,有多个html元素来使用该样式时,请使用类选择器
html标签选择器
基本用法:
html标签名称{
属性名:属性值;
属性名:属性值;
}
案例:
代码:
细节:
类选择器的优先级标签选择器
父元素的样式,会被子元素继承
提出一个问题,如何分别指定同一个标签(p)的不同样式
代码:
伪类选择器
伪类选择器,主要是用来控制超链接的相关样式.
案例:
代码:
案例2:
代码:
相关的css指定:
作业题 :
代码:
通配符选择器
案例:
代码:
组合选择器
多元素选择器
案例:
代码:
后代选择器
案例:
代码:
结论:
1. 如果我们的后代选择器的某个元素需要特别的样式,则可以 以下面形式来完
2. 标签选择器优先级 类选择器
子元素选择器
基本的语法是
选择器 选择器{
}
案例:
代码:
css选择器的深入讨论
后代选择器再说明
代码:
小结: 我们使用后代选择器,尽量使用标签选择器 , 或者 类选择器 和 标签选择器组合.
id选择器的优先级高于类选择器
多个类选择器修饰同一个html元素
代码:
细节:
当优先级相同的情况下,在发生冲突时,以写在style内容中的后面那个为准
当一个元素被多个类选
文档评论(0)