CSS入门的正式版
CSS层叠样式表 CSS简介 什么是CSS 大名：Cascading Style Sheets 寓意： 层叠 样式 列表 CSS的作用 结构与样式分离的方式,便于后期维护与改版 可以用多套样式,使网页有任意样式切换的效果 使页面载入得更快、降低服务器的成本 CSS语法格式、选择器及分类 CSS在HTML页面设计的必要作用 课程目标 使用CSS设置字体、文本、背景、链接等 使用CSS列表，显示隐藏的方法、各种伪类用法 课程安排 CSS语法、注释、与行标签对比、选择器分类、样式表 引用方式、为什么样式表称为“层叠” CSS语法 字体样式、文本样式、背景样式、链接样式 基础样式 有序列表、无序列表、列表项设置为图片 列表样式 各种伪类的作用、用法、使用场合 伪类 用Sublime开发并使用第一个CSS 样式表分类：外部、内部、行内样式 创建内部样式表 打开Sublime进行CSS设计 CSS样式文件结构 样式的选择器 属性 属性值 ：是分隔符 CSS样式文件结构 编码实现效果 Next：什么是选择器 选择器 什么是选择器，有什么作用 作用 用来选择（找到）需要添加样式的位置 常用选择器 标签选择器、(归)类选择器 小贴士 还有其他的选择器会在以后学习到的哦 类选择器 标签选择器 编码实现效果 Next：使用内部样式表，完成背景设置 背景样式 属性 属性值 作用 1 background-color 颜色值 颜色作为背景颜色 2 background-image 图片位置 图片作为背景图片 3 background-repeat repeat、repeat-x repeat-y、no-repeat 背景图片的重复方向 4 background-attachment scroll、fixed 背景是否随滚动条滚动 5 background-position 见详细表格 背景图像的起始位置 6 background 背景样式的值是复合属性值组合 background-position属性列表 Next：创建并使用外部样式表 外部样式 外部样式表就是新建一个文档，里面全写css， 然后再通过 link 插入到html 代码中 使网页的表示层与结构层彻底分离 将背景设置，修改为外部样式表 除了link进行外部样式表的链接，还是其他方法哦 作用 示例 小贴士 用于定义文档与外部资源的关系 rel是 relationship的英 文缩写，也就是 “关系” 定义css样式文件的类型 引用的具体的文件 编码实现: 将内部样式表转换成外部样式表 Next：学习文本类样式 颜色表及html代码 对齐方式、文本修饰、文本转换、文本缩进 美化、修饰页面的文字部分相关内容 更重要的是要了解样式实现的效果 作用 示例 小贴士 文本样式 文本样式 属性 属性值 作用 1 color 表示颜色的内容 设置文本颜色 2 direction ltr、rtl 文本的方向 / 书写方向 3 letter-spacing npx(注：n可以是负数) 字符间距 4 line-height npx 行高 5 text-align left、right、center、justify 文本对齐方式 表:2-1 文本样式 属性 属性值 作用 6 text-decoration none、underline、overline line-through 文本的修饰： 例如：下划线 7 text-shadow h-shadow v-shadow blur color 文本设置阴影 8 text-transform none、capitalize、uppercase、 lowercase 改变字母大小写 9 text-indent npx、nem 首行缩进 表:2-2 文本类样式小结 Next：学习字体类样式 用于对于间距、位置、对齐方式等设置 用于对文本进行修饰例如：阴影、下划线等 font-系列：font-style、font-family等 定义文本的字体系列、大小、加粗、风格（ 如斜体）和变形（如小型大写字母） 更重要的是要了解样式实现的效果 作用 示例 小贴士 字体样式 字体样式 属性 属性值 作用 1 font-family 隶书、仿宋、楷体等字体 设置字体 2 font-style normal 、italic 、oblique 规定斜体文本 3 font-weight normal、bold、100-900 文本的粗细 4 font-size npx 字体大小 Next：列表的样式 字体类样式小结 列表样式 属性 属性值 作用 1 list-style-type none、disc、circle、 square、decimal 设置列表项目的外观 2 list-style-position inside、outside 列表符号的位置 3 list-style-image url、none 把图像设置为列表项目的 标记 4 list-style 同前面三个 简写属性，涵盖以上三个 列表样式属性 list-style-type Next：伪类的样式处理 列表样式小结 列表使用频率很高，经常用于菜单、规律性 展示等应用场景 本课程结束后，下一门课专门会讲解利用列 表进行特效制作的技术方法 Next：伪类的样式处理 通常情况，超级链接上设置的样式，称为伪类 设置超级链接的4种状态 1、伪类是用在超链接上的效果比较多，但超链接 不是伪类。2、伪类是选择器。 作用 示例 小贴士 伪类 伪类选择器 属性 作用 1 a:link 未访问的链接 2 a:visited 已访问的链接 3 a:hover 鼠标移动到链接上（浮动、悬停） 4 a:active 向被激活的元素添加样式 5 :focus 选择拥有键盘输入焦点的元素 表:2-1 伪类的分类 伪类包含两种：状态伪类和结构性伪类 （结构性）伪类选择器 属性 作用 1 :first-child 选择元素的第一个子元素 2 :last-child 选择某个元素的最后一个子元素 3 :nth-child() 选择某个元素的一个或多个特定的子元素 4 :nth-last-child() 选择某个元素的一个或多个特定的子元素， 从这个元素的最后一个子元素开始算 5 :first-of-type 选择一个上级元素下的第一个同类子元素 表:2-2 Next：伪元素选择器 伪元素选择器 属性 作用 1 :selection 选择指定元素中被用户选中的内容 2 :before 可以在内容之前插入新内容 3 :after 可以在内容之后插入新内容 4 :first-line 选择指定选择器的首行 5 :first-letter 选择文本的第一个字符 Next：还有那些选择器 伪类/ 伪元素选择器小结 不论做什么样式设计，除了语法，也要了解效果 伪类和伪元素的概念要分清 Next：还有哪些选择器 CSS其他选择器 选择器 作用 1 id，* 选择指定元素中被用户选中的内容 2 逗号选择器 联合选择器 3 空格选择器 子孙（后代）选择器 4 选择器 子选择器（不是子孙后代） 5 +选择器 相邻兄弟选择器相邻兄弟选择器 6 属性选择器 CSS学习结束 CSS浮动和定位即将开始
