CSS学习资料PPT课件

1 css学习与讲解 CSS简介CSS语法CSS字体属性 Font CSS常用文本属性CSS背景属性CSS边框属性 Border CSS边距属性 Margin CSS间隙属性 Padding CSS盒子模式 BoxModel CSS列表属性 List style CSS伪类 Pseudo class 学习内容 CSS简介 样式表 英文名称叫做StyleSheet 也有的人称之CascadingStyleSheet 把这三个单词的首字母连起来 就是样式表的英文简称CSS 这正是本节名字中那三个大写字母的来历 在网页制作的时候采用CSS技术 可以有效地对网页的布局 字体 颜色 背景和其它效果实现更加精确的控制 我们知道 网页由内容本身以及内容的样式组成 对内容样式的设置可以在某一段内容前面进行 也可以是整个网页的开头部分 这样可以控制整个网页的样式 更可以是单独的一个样式表文件 这样可以控制很多网页的样式 当我们用浏览器打开这个网页的时候 浏览器负责把内容加上样式显示给我们的肉眼 在给内容应用样式的过程中 浏览器首先查看这段内容前面有没有样式的设置 如果没有就会查看网页的开头部分有否样式的设置 如果还没有就最后查看单独的样式表文件是否存在 这个过程好比一个流水线 也好像我们查找桌面上很多层叠窗口从而发现所需要的窗口的过程 因此 样式表也就叫做层叠样式表 HTML中的每个元素都具有某些属性可以来设置该元素的显示外观 我们把这些属性称作格式化信息 如果每个元素都大量地使用这些属性 那么网页代码会显得非常乱 维护很困难样式表的提出就是要解决格式化信息把网页弄乱这个问题 使用样式表 所有的格式化信息都从HTML文档中转移到一个样式表 一个以 css为扩展名的文本文件 中 任何想使用某种格式的网页只要链接到样式表就可以了 对样式表的任何修改都能自动反映到链接到样式表上的所有网页样式表能够改变网页上任何元素的外观显示效果 可以在样式表中逐个元素的定义它的显示方式 CSS的3个种类 CSS是3个字母 恰巧CSS的种类也有3种 分别是外部样式表 内部样式表和行内样式表 内嵌样式 实际上CSS就是以样式表的存在位置来分类的 外部样式表存在于HTML文件的外部 是另外的一个后缀名为 css的文件 内部样式表存在于HTML文件的内部 在标签内 有具体的样式定义 行内样式表也处于HTML文件的内部 但是在标签管辖范围内 以属性的形式设置某一个标签的样式 图描述了3种CSS和HTML文件的关系 3种CSS在HTML文件中的位置 InlineStyle是写在Tag里面的 内嵌样式只对所在的Tag有效 这个Style定义里面的文字是20pt字体 字体颜色是红色 内嵌样式 内部样式表 InternalSytleSheet 要用到Style这个Tag 写法如下 内部样式表 内部样式表是写在HTML的里面的 内部样式表只对所在的网页有效 H1 mylayout text align center color red 这个标题使用了Style 这个标题没有使用Style 外部样式表 如果很多网页需要用到同样的样式 Styles 用什么方法呢 将样式 Styles 写在一个以 css为后缀的CSS文件里 然后在每个需要用到这些样式 Styles 的网页里引用这个CSS文件 比如可以用文本编辑器 NotePad 建立一个叫home的文件 文件后缀不要用 txt 改成 css 文件内容如下 H1 mylayout border width 1 border solid text align center color red CSS按其位置可以分成三种 内部样式表是写在HTML的 然后你建立一个网页 代码如下 这个标题使用了Style 这个标题没有使用Style 使用外部 Extenal 样式表 相对于内嵌 Inline 和内部式 Internal 的 有以下优点 样式代码可以复用 一个外部CSS文件 可以被很多网页共用 便于修改 如果要修改样式 只需要修改CSS文件 而不需要修改每个网页 显示示例 有以下优点 提高网页显示的速度 如果样式写在网页里 提高网页显示的速度 如果样式写在网页里 会降低网页显示的速度 如果网页引用一个CSS文件 这个CSS文件多半已经在缓存区 其它网页早已经引用过它 网页显示的速度就比较快 CSS语法 基本语法一个样式 Style 的语法由三部分构成 Selector 中文叫选择器有点怪怪的 就用英文吧 属性 Property 属性值 Value selector property value 举个例子 下面的代码p就是selector color就是属性 blue就是属性值 p color blue HTML中所有的Tag都可以作为selector 注 如果你想为Style加多个属性 在两个属性之间要用分号加以分隔 下面的Style就包含2个属性 一个是对齐方式居中 一个字体颜色为红 当中用分号分隔开 我们在前面已经熟悉了一些HTML和CSS的基本知识 但是 如果面对更加复杂的需求 来实现一些功能 目前我们所了解的这些标签用法就有点捉襟见肘了 为了更扎实的学习CSS 有必要停下脚步 将前面的疑难解决之后再进行下一步的学习 接下来我们将讲解CSS的几个重要名词 熟悉CSS的写法 为今后学习更多的HTML标签和CSS技巧做准备 组成HTML页面的细胞 标签 再复杂的事情也是由相对简单的部分组合而成的 HTML也不例外 构成HTML页面的细胞 就是一个又一个的标签 我们在本节首先将截至目前学习过的HTML和CSS知识总结提炼一下 在前面的三章中 我们已经介绍了若干基本的标签 它们是 表示段落 表示正文表示字体的设置等 当然HTML的标签还有很多 在今后的章节中我们将陆续见到 不过 既然它们都被称作标签 肯定有一些共性 其中书写的语法都是类似的 即如下的样子 CSS规则的具体写法 具体而言 对某个标签应用CSS有如下两种方法 行内样式表 在标签定义中增加style CSS属性 这样的代码 外部样式表和内部样式表 首先在页面首部链接样式表文件或者直接编写样式表定义 然后在标签定义中增加class CSS选择器 来实现 CSS属性和CSS选择器就构成了一条CSS规则 那么 CSS属性和CSS选择器有什么区别呢 举个日常生活中的例子就比较好理解了 假设我们所在的单位要招聘员工 一名销售人员 一名网页设计师 其中网页设计师要求大学毕业 精通CSS HTML 熟练使用Dreamweaver软件等 销售人员则要求与人沟通能力强 有一定的客户群体 有销售经验等 这条广告放置在招聘网站之后 单位的人事部门就收到了不少人的简历 那么 如何从这些简历中找到符合条件的人呢 CSS选择器的种类 八种武器 我们知道 选择器就好比招聘工作职位时的条件一样 是为了从众多的HTML标签中挑选出我们所需要设置样式的标签 因此 CSS选择器的分类就是根据选择HTML标签方法的不同而区分的 CSS选择器共有如下两大类八种 简单选择器 包括 类型选择器 TypeSelectors 属性选择器 AttributeSeletors ID选择器 IDSelectors 类选择器 ClassSelectors 通配选择器 UniversalSelectors 组合选择器后代选择器 DescendantCombinators 子选择器 ChildCombinators 兄弟选择器 SiblingCombinators 我们最常用是ID与Class类 使用CLASS HTML中每个元素都有一个class属性class是在网页中自定义元素的方法 使用class 可以在样式表中为某个元素定义多种外观显示效果使用class 也可以在样式表中为多个不同的元素定义同一种外观显示效果 ID属性 HTML中每个元素都有一个ID属性ID与CLASS类似 但ID不必与元素相关联ID的定义示例 wide letter spacing 4em 它的使用方法如下 这是标题这是段落 建议最好使用class而不使用ID p text align center color red 为了提高Style代码的可读性 你也可以分行写 p text align center color black font family arial 代码的写法习惯 组合 Grouping 你也可以将相同的属性和属性值赋予多个Selector Selector之间用逗号分隔 h1 h2 h3 h4 h5 h6 color red 上面的例子是将所有正文标题 到 的字体颜色都变成红色 如果你想为Style加多个属性 在两个属性之间要用分号加以分隔 你也可以不用HTMLTag 直接用 加上Class名称作为一个Selector 示例代码如下 center text align center 可以用于不同的Tag 比如 HTML中所有的Tag都可以作为selector 这种通用的ClassSelector就没有Tag的局限性 可以用于不同的Tag 比如 这个标题居中显示 这个段落居中显示 一种是居右对齐 你就可以写如下样式 blue就是属性值 CSS注释 为了方便你自己或者他人日后更好地理解你的CSS代码 你可以写CSS代码注释 CSS代码注释以 开头 以 结束 段落样式 p text align center 居中显示 color black font family arial CSS字体属性 字体名称属性 font family 这个属性设定字体名称 如Arial Tahoma Courier等 例句如下 s1 font family Arial 字体大小属性 font size 这个属性可以设置字体的大小 字体大小的设置可以有多种方式 最常用的就是pt和px pixel 例句如下 s2 font size 16pt 演示示例字体颜色用CSS中的color属性来表示 字体风格属性 font style 这个属性有三个值可选 normal italic oblique normal是缺省值 italic oblique都是斜体显示 例句如下 s1 font sytle italic 字体浓淡属性 font weight 演示示例演示示例例句如下 演示示例 这个属性常用值是normal和bold normal是缺省值 例句如下 这段文字字体的浓淡属性 font weight 值是bold 字体变量属性 font variant 这个属性有两个值 normal和small caps normal是缺省值 small caps表示小的大写字体 例句如下 s1 font variant small caps 字体属性 font 字体颜色用CSS中的color属性来表示 这个属性是各种字体属性的一种快捷的综合写法 这个属性可以综合字体风格属性 font style 字体变量属性 font variant 字体浓淡属性 font weight 字体大小属性 font size 等属性 例句如下 s1 font italicnormalbold11ptarial normal是缺省值 small 字体颜色 color 字体大小的设置可以有多种方式 最常用的就是pt和px 字体颜色用CSS中的color属性来表示 CSS常用文本属性 文本对齐属性 text align 这个属性用来设定文本的对齐方式 有以下值 left 居左 缺省值 right 居右 center 居中 justify 两端对齐 示例代码如下 p2 text align right 文本修饰属性 text decoration 这个属性主要设定文本划线的属性 有以下值 none 无 缺省值 underline 下划线 overline 上划线 line through 当中划线 这个属性设定每行之间的距离 示例代码如下 p2 text decoration underline 文本缩进属性 text indent 这个属性设定文本首行缩进 其值有以下设定方法 length 长度 可以用绝对单位 cm mm in pt pc 或者相对单位 em ex px percentage 百分比 相当于父对象宽度的百分比 示例代码如下 p1 text indent 8mm 行高属性 line height 示例代码如下 示例代码如下 这个属性设定每行之间的距离 其值有以下设定方法 normal 缺省值 length 长度 可以用绝对单位 cm mm in pt pc 或者相对单位 em ex px percentage 百分比 相当于父对象高度的百分比 示例代码如下 p1 line height 1cm 这个属性用来设定字符之间的距离 字间距属性 letter spacing 演示示例示例代码如下 这个属性用来设定字符之间的距离 normal 缺省值 length 长度 可以用绝对单位 cm mm in pt pc 或者相对单位 em ex px 演示示例示例代码如下 示例代码如下 p1 letter spacing 3mm 颜色属性 color 用颜色属性 color 可以改变文本的字体颜色 示例代码如下 p1 color gray CSS背景属性 背景颜色属性 background color 这个属性为HTML元素设定背景颜色 相当于HTML中bgcolor属性 body background color 99FF00 上面的代码表示Body这个HTML元素的背景颜色是翠绿色的 背景图片属性 background image 这个属性为HTML元素设定背景图片 相当于HTML中background属性 上面的代码为Body这个HTML元素设定了一个背景图片 背景重复属性 background repeat 这个属性和background image属性连在一起使用 决定背景图片是否重复 如果只设置background image属性 没设置background repeat属性 在缺省状态下 图片既横向重复 又竖向重复 repeat x背景图片横向重复repeat y背景图片竖向重复no repeat背景图片不重复body background image url images css tutorials background jpg background repeat repeat y 相当于HTML中bgcolor属性 背景图片是background 上面的代码表示图片竖向重复 背景附着属性 background attachment 这个属性和background image属性连在一起使用 决定图片是跟随内容滚动 还是固定不动 这个属性有两个值 一个是scroll 一个是fixed 缺省值是scroll body background image url images css tutorials background jpg background repeat no repeat background attachment fixed 上面的代码表示图片固定不动 不随内容滚动而动 背景位置属性 background position 这个属性和background image属性连在一起使用 决定了背景图片的最初位置 body background image url images css tutorials background jpg background repeat no repeat background position 20px60px 不随内容滚动而动 上面的代码表示Body这个HTML元素的背景颜色是翠绿色的 上面的代码表示背景图片的初始位置距离网页最左面20px 距离网页最上面60px 背景属性 background 包括background 这个属性是设置背景相关属性的一种快捷的综合写法 包括background color background image background repeat backgroundattachment background position body background 99FF00url images css tutorials background jpg no repeatfixed40px100px 上面的代码表示 网页的背景颜色是翠绿色 背景图片是background jpg图片 背景图片不重复显示 背景图片不随内容滚动而动 背景图片距离网页最左面40px 距离网页最上面100px CSS边框属性 边框风格属性 border style 这个属性用来设定上下左右边框的风格 它的值如下 none 没有边框 无论边框宽度设为多大 dotted 点线式边框 dashed 破折线式边框 solid 直线式边框 double 双线式边框 groove 槽线式边框 ridge 脊线式边框 inset 内嵌效果的边框 outset 突起效果的边框 边框宽度属性 border width 这个属性用来设定上下左右边框的宽度 它的值如下 medium 是缺省值 thin 比medium细 thick 比medium粗 用长度单位定值 可以用绝对长度单位 cm mm in pt pc 或者用相对长度单位 em ex px 上下左右四个边框不但可以统一设定 也可以分开设定 边框颜色属性 border color 这个属性用来设定上下左右边框的颜色 例句如下 d5 border color gray border style solid 边框属性 border 这个属性是边框属性的一个快捷的综合写法 它包含border width border style和border color 例句如下 d1 border 5pxsolidgray 单边边框属性上下左右四个边框不但可以统一设定 也可以分开设定 top style border 设定上边框属性 你可以使用border top border top width border top style border top color 设定下边框属性 你可以使用border bottom border bottom width border bottom style border bottom color top width border top 设定左边框属性 你可以使用border left border left width border left style border left color 设定上边框属性 你可以使用border right border right width border right style border right color 边距属性是用来设置页面中一个元素所占空间的边缘到相邻元素之间的距离 左边距属性 margin left 这个属性用来设定左边距的宽度 示例如下 d1 margin left 1cm 右边距属性 margin right 这个属性用来设定右边距的宽度 示例如下 d1 margin right 1cm 上边距属性 margin top 这个属性用来设定上边距的宽度 示例如下 d1 margin top 1cm 下边距属性 margin bottom 这个属性用来设定下边距的宽度 示例如下 d1 margin bottom 1cm 边距属性 margin 边距属性是用来设置页面中一个元素所占空间的边缘到相邻元素之间的距离 这个属性是设定边距宽度的一个快捷的综合写法 用这个属性可以同时设定上下左右边距属性 你可以为上下左右边距设置相同的宽度 示例入下 d1 margin 1cm 这个属性用来设定下边距的宽度 示例如下 你也可以分别设置边距 顺序是上 右 下 左 示例如下 d1 margin 1cm2cm3cm4cm 你可以为上下左右边距设置相同的宽度 上面的代码表示 上边距为1cm 右边距为2cm 下边距为3cm 左边距为4cm CSS间隙属性 CSS间隙属性padding 1cm2cm 间隙属性 padding 是用来设置元素内容到元素边界的距离 左间隙属性 padding left 这个属性用来设定左间隙的宽度 示例如下 d1 padding left 1cm 右间隙属性 padding right 这个属性用来设定右间隙的宽度 示例如下 d1 padding right 1cm 上间隙属性 padding top 这个属性用来设定上间隙的宽度 示例如下 d1 padding top 1cm 下间隙属性 margin bottom 这个属性用来设定下间隙的宽度 示例如下 d1 padding bottom 1cm 间隙属性 padding 这个属性是设定间隙宽度的一个快捷的综合写法 用这个属性可以同时设定上下左右间隙属性 你可以为上下左右间隙设置相同的宽度 你可以为上下左右间隙设置相同的宽度 示例入下 d1 padding 1cm 你也可以分别设置间隙 顺序是上 右 下 左 示例如下 d1 padding 1cm2cm3cm4cm 上面的代码表示 上间隙为1cm 右间隙为2cm 下间隙为3cm 左间隙为4cm CSS盒子模式 BoxModel 是用来设置元素内容到元素边框的距离 CSS中有个重要的概念 就是盒子模式 Boxmodel 先看看下面这个图 黑框包围的一个方块 就是一个盒子 Box 盒子里由外至里依次是 margin边距border边框padding间隙 也有人称做补丁 content 内容 比如文本 图片等 CSS边距属性 margin 是用来设置一个元素所占空间的边缘到相邻元素之间的距离 width和height CSS边框属性 border 用来设定一个元素的边线 CSS间隙属性 padding 是用来设置元素内容到元素边框的距离 CSS背景属性指的是content和padding区域 CSS属性中的width和height指的是content区域的宽和高 CSS列表样式属性 列表样式类型属性 list style type 这个属性用来设定列表项标记 list itemmarker 的类型 有以下值 disc 缺省值 黑圆点 circle 空心圆点 square 小黑方块 decimal 数字排序 lower roman 小写罗马字排序 upper roman 大写罗马字排序 lower alpha 小写字母排序 upper alpha 大写字母排序 none 无列表项标记 列表样式位置属性 list style position 列表样式位置属性 list style position 有两个值 outside 以列表项内容为准对齐 inside 以列表项标记为准对齐 列表样式图片属性 list style image 列表项标记可以用图片来表示 用列表样式图片属性 list style image 来设定图片 示例代码如下 ul list style image url images css tutorials dot02 gif 列表样式属性 list style circle square none作为列表项