欢迎来到天天文库
浏览记录
ID:13496023
大小:3.24 MB
页数:76页
时间:2018-07-22
《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选择器{属性名:属性值;属性
此文档下载收益归作者所有