1.初识css
2.块级元素和行内元素
3.css核心内容
3.1 标准流
3.2 盒子模型
3.3 浮动
3.4 定位
4.css综合案例
4.1 盒子模型经典案例
4.2 仿sohu首页面布局
4.3 可爱屋网站首页面
掌握css的基本用法
掌握css的四种选择器用法
请看一个问题
案例[HtmlPage1.htm]
这是一个栏目风格不同的页面,
如果,我希望统一设置它们的样式
该怎么办?
解决之道-css
对案例[HtmlPage1.htm],进行
改造,使用css来统一设置所有栏目
的样式。
请再思考一个问题
汶川大地震时,所有的网站的图片,都变成黑白的了,这个是怎么实
现的呢?
案例[HTMLPage2.htm]这里用到了滤镜技术.
选择器
选择器是css中非常重要的概念.css中有四种不同的选择器
①类选择器,又叫class选择器
②id选择器
③html元素选择器
④通配符选择器
简单的说,选择器就是在css中创建,而在网页页面(html,jsp,php
,asp.net)中使用。
类选择器
我们在HtmlPage1.html就使用到了类选择器,这里再给大家举一
个例子: [HTMLPage.htm]
通配符选择器
如果希望所有的元素都符合某一种样式,可以使用通配符选择器。
选择器深入探讨
我前面讲的都非常简单,实际上css的选择器使用还有很多您需要注意的
地方,如果不注意根本就不能驾驭css
①父子选择器
请大家看一个图: [HTMLPage.htm]
如果希望特别强调非常两个字,该
如何处理?方案:
a.id选择器
b.class选择器
c.父子选择器
选择器深入探讨
①父子选择器
类选择器和id选择器都可以有父子选择器.
选择器深入探讨
②一个元素可以同时有id选择器和类选择器
请看一个案例:
要实现新闻1 和其它的新闻
样式不 一样,这怎么实现
选择器深入探讨
③一个元素可以同时有id选择器和类选择器
当id选择器和类选择器发生冲突时,id选择器优先级 高于类选择
器.
优先级: id选择器 > 类选择器
比如: id选择器指定字体为红色,而类选择器指定字体和蓝色,则
页面显示红色.
选择器深入探讨
④一个元素最多有一个id选择器,但是可以有多个类选择器
请看一个案例:
要实现新闻3 有下划线并是斜体该
怎么实现?
方案: a.id选择器 b.类选择器
☞ 当一个元素被多个类选择器修饰时,它们用空格隔开..
选择器深入探讨
⑤一个元素最多有一个id选择器,但是可以有多个类选择器,当类
选择器发生冲突的时候,又以哪个为准呢? 我们用一个案例来说明.
选择器深入探讨
⑥当一个元素被id选择器,类选择器,html选择器同时限定时,优先
级是: id选择器>类选择器>html选择器>通配符选择器.
选择器深入探讨
⑦在css文件中,如果有多个类/id选择器它们都有相同的部分,我
们可以把相同的css样式放在一起,见案例。
教程需要搭配视频观看,请下载
php教程。
分享到:
相关推荐
城市选择器模块城市选择器模块城市选择器模块城市选择器模块城市选择器模块城市选择器模块城市选择器模块城市选择器模块城市选择器模块城市选择器模块城市选择器模块城市选择器模块城市选择器模块城市选择器模块城市...
年份、月份、日份、日期范围选择器,9种类型
用VHDL语言实现数据选择器,包含源码和pof文件。
非常不错的图片选择器,功能完善,动画超赞Louvre非常不错的图片选择器,功能完善,动画超赞Louvre非常不错的图片选择器,功能完善,动画超赞Louvre非常不错的图片选择器,功能完善,动画超赞Louvre非常不错的图片...
颜色选择器颜色选择器颜色选择器
简版h5时间选择器,兼容各种手机尺寸,简单,快捷, 简版h5时间选择器,兼容各种手机尺寸,简单,快捷, 简版h5时间选择器,兼容各种手机尺寸,简单,快捷, 简版h5时间选择器,兼容各种手机尺寸,简单,快捷, 简版...
untiy颜色选择器,像自带的颜色选择器一样选择颜色
2选1多路选择器的VerilogHDL设计.docx2选1多路选择器的VerilogHDL设计.docx2选1多路选择器的VerilogHDL设计.docx2选1多路选择器的VerilogHDL设计.docx2选1多路选择器的VerilogHDL设计.docx2选1多路选择器的Verilog...
关于译码器和数据选择器的实验课程 着重三八译码器和四选一、双四选一的数据选择器实际应用
Jquery选择器; 基本选择器;jQuery选择器;jQuery选择器; 层级选择器;jQuery选择器;;; 筛选选择器;jQuery选择器;jQuery选择器;jQuery选择器;jQuery选择器;jQuery选择器;jQuery选择器; 排他思想;jQuery选择器;jQuery...
DatePicker 日期选择器,日期时间选择,时间选择器
安卓选择器类库,包括日期及时间选择器(可用于出生日期、营业时间等)、单项选择器(可用于性别、民族、职业、学历、星座等)、二三级联动选择器(可用于车牌号、基金定投日期等)、城市地址选择器(分省级、地市级...
选择器
表盘时间选择器,高仿ios就寝时间选择器,
layPicker移动端选择器 基于jquery实现,可设置微信版和旧版、及自定义html 默认支持日期选择器 可自定义级联选择器 示例充足
实现了Android开发自定义年月日日期选择器,时分时间选择器
安卓选择器类库,包括日期及时间选择器(可设置范围)、单项选择器(可用于性别、职业、学历、星座等)、城市地址选择器(分省级、地级及县级)、数字选择器(可用于年龄、身高、体重、温度等)、双项选择器、颜色...
这是一个仿苹果的时间选择器,可自己修改背景,字体,代码内有注释很清楚了
利用jquery实现周历选择器,适用于混合app开发。 功能:展示本周日期;根据点击不同日期进行操作;切换前后周周历。
uniapp地区选择器