1、 高级软件人才实作培训专家!北京传智播客教育 CSS王友军 高级软件人才实作培训专家!主要内容l CSS概述l CSS和 HTML结合的四种方式l CSS样式优先级和代码规范l CSS三种常用选择器l CSS三种扩展选择器l CSS的常见操作北京传智播客教育 高级软件人才实作培训专家!北京传智播客教育 CSS概述l CSS （ Cascading Style Sheet）是层叠样式表 .作 用来定义网页的 显示 效果。简单一句话： CSS将网页内容和显示样式进行分离，提高了显示功能。 高级软件人才实作培训专家!北京传智播客教育 CSS和 HTML结合的方式l sytle属性方式 (行内样式
2、)l style标签方式 (内嵌样式 )l 导入方式l 链接方式 高级软件人才实作培训专家!style属性方式 (行内方式 )l 利用标签中 style属性来改变每个标签的显示样式。例：p标签段落内容。l 该方式比较灵活，但是对于多个相同标签的同一样式定义比较麻烦，适合局部修改 。北京传智播客教育 高级软件人才实作培训专家!style标签方式：（内嵌方式）l 在 head标签中加入 style标签，对多个标签进行统一修改。 p color:#FF0000; l 该方式可以对单个页面的样式进行统一设置，但对于局部不够灵活。北京传智播客教育 高级软件人才实作培训专家!链接方式l 通过 head
3、标签中 link标签来实现，前提也是先要有一个已定好的 CSS文件。例：注：可以通过多个 link标签链接进来多个 CSS文件。重复样式以最后链接进来的 CSS样式为准。北京传智播客教育 高级软件人才实作培训专家!导入方式l 前提是已经存在一个定义好的 CSS文件。网页的一部分样式需要用到，那么就用到这种方式。l 例：l import url(css_3.css);l div color:#FF0000;l l 注： url括号后面必须要用分号结束。如果导入进来的样式与本页面定义的样式重复，以本页定义样式为准。北京传智播客教育 高级软件人才实作培训专家!北京传智播客教育 CSS样式优先级和
4、代码规范l 样式优先级由上到下，由外到内。优先级由低到高。l 代码规范选择器名称 属性名：属性值；属性名：属性值； .属性与属性之间用 分号 隔开属性与属性值直接按用 冒号 连接如果一个属性有多个值的话，那么多个值用 空格 隔开。 高级软件人才实作培训专家!北京传智播客教育 CSS选择器l 就是指定 CSS要作用的标签，那个标签的名称就是选择器。意为：选择哪个容器。l CSS选择器的类型html标签名选择器。使用的就是 html的 标签名class选择器。其实使用的标签中的 class属性id选择器。其实使用的是标签的中的 id属性。 高级软件人才实作培训专家!北京传智播客教育 CSS扩展选择
5、器l 关联选择器l 组合选择器l 伪元素选择器 高级软件人才实作培训专家!关联选择器l 标签是可以嵌套的，要让相同标签中的不同标签显示不同样式，就可以用此选择例：p color:#00FF00;p b color:#FF000;P标签 刘德华 段落样式 P标签段落 北京传智播客教育 高级软件人才实作培训专家!组合选择器l 对多个不同选择器进行相同样式设置的时候应用此选择器。p,div color:#FF0000;P标签显示段落。 DIV标签显示段落 注：多个不同选择器要用逗号分隔开。北京传智播客教育 高级软件人才实作培训专家!伪元素选择器l 其实就在 html中预先定义好的一些选择器。称为
6、伪元素。是因为 CSS的术语。l 格式：标签名：伪元素。a:link 超链接未点击状态。a:visited 被访问后的状态。a:hover 光标移到超链接上的状态（未点击）a:active 点击超链接时的状态。北京传智播客教育 高级软件人才实作培训专家!北京传智播客教育 CSS的常见操作CSS中尺度单位的介绍字体设置文本设置背景设置列表设置盒子模型 (border margin padding)定位设置 (position,float,clear,z-index)鼠标样式设置 (cursor) 高级软件人才实作培训专家!北京传智播客教育 CSS滤镜效果l 滤镜一词是从摄影方面引过来的，就是滤光镜，滤色片的意思，它对图片的颜色进行一定的处理，以达到不同的效果。如颜色渐变效果，底片曝光效果和透明色效果等 高级软件人才实作培训专家!北京传智播客教育 CSS王友军结束 ,谢谢各位同学 !
