CSS
简介
1、 什么是css
大名：Cascading层叠 style样式 sheets表
Css的作用
1、 结构和样式 — css分离的方式，便于后期的维护和改版
2、 可以用多套样式，使得网页有任意样式切换的效果
3、 使得页面载入更快，降低服务器的成本
课表目标
1、 css页面在HTML页面设计的必要作用
2、 css的语法格式，选择器和分类
3、 使用css设置字体，文本，背景和链接等
4、 使用css列表，显示隐藏的方法，使用各种伪类用法
课程安排
1、 css语法：css语法，注释，与行标签对比，选择器分类，样式表，引用方式
2、 基础样式：字体样式，文本样式，背景样式，链接样式
3、 列表样式：有序列表，无序列表，列表项设置位图片
4、 伪类：各种伪类的作用，用法和使用场合
Css基础
样式表分类：外部、内部、行内样式
创建内部样式表
P{
background-color: red;
font-size: 20px;
}
1、P:样式的选择器
2、background-color: red;
属性 ：属性值；
3、： ；
什么是选择器：
1、 用来选择（找到）需要添加的样式的位置
2、 常用选择器：标签选择器、类选择器、id选择器。。。。
背景样式 background
1、background-color 颜色值 颜色作为背景颜色
2、background-image 图片位置 图片作为背景图片
3、background-repeat repeat repeat-x repeat-y no-repeat 背景图片的重复方向
4、background-attachment scroll fixed 背景是否随着滚动条滚动
Fixed 文字滚动，背景图片不随着滚动
scroll 背景图片随着文字一起滚动
5、background-position 背景图像的起始位置
6、background 背景样式的值是复合了属性值的组合 1 2 3 4 5
background-position属性列表
1、 top left ,top center ,top right ,center left,center center,center right,bottom left,bottom center,bottom right
如果只定义了一个值，那么第二个值将是center
默认值 0% 0%
2、x% y% 第一个值是水平 第二个值是垂直
左上角：0% 0% 右下角：100% 100%
如果规定了一个值另一个值就是50%
3、 apx bpx
左上角：0px 0px 右下角
如果规定了一个值另一个值就是50%
创建并使用外部样式表
外部样式：外部样式就是新建一个文档，里面全写css，然后通过link 插入到html代码中
作用：使得网页的表示层和结构层能够进行彻底分离
例子：
1、 link 用于定义文档和外部资源的关系
2、 rel=”stylesheet” relationship 关系
3、 type=”text/css” 定义css样式文件的类型
4、 href=”index.css” 引用的具体文件
颜色表示
1、 lightgreen lightpink 英文单词
2、 #000000 红绿蓝 #ff0000 #00ff00 #0000ff
3、 rgb(255,0,0) 红绿蓝 rgb(0,255,0) rgb(0,0,255)
文本样式讲解
文本样式：对齐方式，文本修饰，文本转换，文本缩进
作用：美化 修饰页面的文字部分下相关内容
文本样式的属性：
Color 表示颜色的内容 设置文本颜色
Direction ltr rtl 文本的方向/书写的方向
Letter-spacing npx(注意：n可以是负数) 字符间距
Line-height npx 行高（行间距）
Text-align left,right ,center, justify（两端对齐）
Direction ltr rtl
Text-align
1、 如果是字母和汉字的话，两者的效果是一摸一样的
2、 是否针对阿拉伯数字
Direction ltr rtl
改变的不是顺序，而是书写的顺序，从右往左写的
文本修饰：
1、text-decoration none,underline,overline,line-through 文本的修饰：下划线
2、text-shadow h-shadow v-shadow blur color 文本设置阴影
3、text-transform none,capitalize,uppercase,lowercase 改变字母大小写
4、text-indent npx,nem（em表示字符单位） ~~ ~~首行缩进
文本样式小结：
1、用于对间距，位置，对齐方式等设置
2、用于对文本进行修饰：阴影、下划线等
字体样式：
1、 font系列
1、font-family ；隶书、宋体、楷体等字体 设置字体
2、font-style normal italic oblique 规定斜体的文本
3、Font-weight normal bold 100-900 文本加粗
4、font-size npx 字体大小
列表样式
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
列表样式小结
1、 列表使用频率很高，经常用于菜单，规律性展示等的引用场景。
2、 下一次课会讲利用列表进行特效制作。
伪类样式：
伪类：通常情况下超级链接上设置的样式称为伪类
设置超级链接的几种状态
注意点：
1、 伪类是用在超级链接上的效果比较多
2、 但是超级链接不是伪类
3、 伪类是选择器
伪类选择器
1、a:link 未访问的链接
2、a:visited 已经访问过的链接
3、a:hover 鼠标移动到连接上（浮动，悬停）
4、a:active 向被激活的元素添加样式
5、:focus 选择拥有键盘输入焦点的元素
伪类包含两种：1、状态伪类 2、结构性伪类
结构性伪类
1、:first-child 选择元素的第一个子元素
2、:last-child 选择某个元素的最后一个子元素
3、:nth-child(n) 选择某个元素的一个或者多个特定的子元素
4、:nth-last-child(n) 选择某个元素的一个或者多个特定的子元素 从这个元素的最后一个子元素开始
5、:first-of-type 选择一个上级元素下的第一个同类子元素
伪元素选择器：
1、::selection 选择指定元素中被用户选中的内容
2、::before 可以在内容之前插入新的内容
3、::after 可以在内容之后插入新的内容
4、::first-line 选择指定选择器的首行
5、::first-letter 选择文本的第一个字符
伪类/伪元素总结
1、 不论做什么样式设计，不仅要了解语法，也要了解效果
2、 伪类和伪元素概念要分清
Css其他选择器
1、id 选择指定元素中被用户选中的内容
2、逗号选择器 , 联合选择器
3、空格选择器 ~~ ~~ ~~ ~~子孙（后代）选择器
4、> 选择器 ~~ ~~子选择器（不是子孙后代）
5、+ 选择器 ~~ ~~同辈，兄弟选择器
6、[] 属性选择器
选择器的优先级
1、！important
2、行内样式
3、ID
4、类 class
5、标签
6、通配符
7、浏览器默认属性
若有收获，就点个赞吧
0 人点赞
