2016 泰牛程序员 韩顺平 php 大牛班 div css课程

《2016 泰牛程序员 韩顺平 php 大牛班 div css课程》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、轻松搞定Div+Css第1章DIV+CSS的开山篇11.1什么是div+css11.2div+css的快速入门案例1第2章DIV+CSS的必要性32.1css可以统一我们的网站风格32.2css可以通过滤镜来控制图片的显示风格3第3章CSS的选择器53.1选择器的分类53.2类选择器53.3id选择器63.4html标签选择器73.5伪类选择器113.6通配符选择器153.7组合选择器163.7.1多元素选择器163.7.2后代选择器183.7.3子元素选择器19第4章CSS选择器的深入讨论214.1后代选择器再说明214.2id选择器的优先级高于类选择

2、器224.3多个类选择器修饰同一个html元素224.4所有选择器的优先级大比武23第5章CSS的使用方式255.1内联样式表255.2嵌入样式表255.3外部样式表265.4引入样式表27第6章CSS的属性详解296.1css字体的属性296.2css文本属性296.3css背景属性296.4边框属性306.5列表属性316.6table属性的讲解326.7浏览器的兼容性处理建议34第7章行内元素和块元素367.1介绍367.2行内元素和块元素的区别377.3行内元素和块元素相互转换377.4标准流和非标准流38第8章盒子模型398.1盒子模型的基本概

3、念398.2快速入门案例398.3盒子的模型的经典案例418.4在看一个非常经典实用案例div-ul-li42第9章浮动459.1快速入门459.2深入理解浮动469.3右浮动489.4浮动的理解补充509.5清除浮动52第1章div+css的开山篇1.1什么是div+cssdiv是区块，在网页开发中，用来存放内容(文字，图片，表格等等)css是层叠样式表，它的作用是用来规定div和div中的内容的位置和样式（颜色，大小，背景，列表的样式）div+css结合就可以做到把内容和样式分离，好处是1.代码简洁，便于维护2.理由seo[搜索引擎优化]1.2div

4、+css的快速入门案例代码:div+css的必要性1.1css可以统一我们的网站风格代码:1.2css可以通过滤镜来控制图片的显示风格把网站的图片全部变成黑白的，或者模糊的.代码:css的选择器1.1选择器的分类类选择器(class选择器)id选择器html元素选择器(标签选择器)通配符选择器伪类选择器组合选择器(多元素选择器，子元素选择器，后代选择器)1.2类选择器基本语法:.类选择器名称{css属性:属性值；css属性:属性值；}案例:补充：1.选择器的名称命名规范.小写字母-小写字母2.一般说，类选择器是提供给多个html元素来使用1.1id选择器

5、基本语法:#id选择器名称{css属性:属性值；css属性:属性值；}案例:细节:1.一般来说id选择器是提供给某一个html元素来使用2.当我们不确定，有多个html元素来使用该样式时，请使用类选择器1.1html标签选择器基本用法:html标签名称{属性名:属性值;属性名:属性值;}案例:代码:细节:1.类选择器的优先级>标签选择器2.父元素的样式，会被子元素继承l提出一个问题，如何分别指定同一个标签(p)的不同样式l代码:1.1伪类选择器伪类选择器，主要是用来控制超链接的相关样式.案例:代码:案例2:代码:相关的css指定:作业题：代码:1.1通配

6、符选择器案例:代码:1.1组合选择器1.1.1多元素选择器案例:代码:1.1.1后代选择器案例:代码:结论:1.如果我们的后代选择器的某个元素需要特别的样式，则可以以下面形式来完2.标签选择器优先级<类选择器1.1.1子元素选择器基本的语法是选择器>选择器{}案例:代码:css选择器的深入讨论1.1后代选择器再说明代码:小结:我们使用后代选择器，尽量使用标签选择器，或者类选择器和标签选择器组合.1.1id选择器的优先级高于类选择器1.2多个类选择器修饰同一个html元素代码:细节:1.当优先级相同的情况下，在发生冲突时，以写在style内容中的后面那个为

7、准2.当一个元素被多个类选择器修饰时，它们用空格隔开.1.1所有选择器的优先级大比武案例:代码:小结:1.!important>行内样式>id选择器>类选择器>html标签选择器>通配符选择器>html属性的指定>继承的样式属性(层叠css,层叠的样式时文本,字体属性)2.后代元素，会继承他的上级元素的各文本和字体相关的属性css的使用方式说明:css的使用方式有四种:内联样式表，嵌入样式表,外部样式表，引入样式表1.1内联样式表基本语法:内容举例:1.2嵌入样式表基本语法

8、:CSS选择器{属性名:属性值;属性