CSS入门

css：层叠样式表
css简介
1、全程：Cascading style sheets
层叠 样式 列表

css作用：
1、结构和样式分离的方式，便于维护与后期的修改
2、可以使用多套样式，使网页有任意样式切换的效果
3、使页面载入的更快，降低服务器的成本

课程目标
1、css在html页面设计的必要作用
2、语法格式、选择器以及分类
3、设置字体、文本、背景、链接等
4、伪类的学习

工具：sublime
样式表的分类：外部、内部、行内样式
创建内部样式表
例子：
p{//样式选择器
//属性 //分隔符
background-color:red;//属性值
font-size:20px;
}

什么是选择器;
能够选择定位到需要改变的标签元素
作用：用来选择或者找到需要添加样式的位置
常用选择器：标签选择器、类选择器

类选择器：
.p1{
font-family: 黑体;
background-color: yellow;
}

使用内部样式完成背景设置：
1、background-color 颜色值 颜色作为背景颜色
2、background-image 图片位置 图片作为背景图片
3、background-repeat repeat repeat-x repeat-y no-repeat 背景图片的重复方向
4、backgorund-attachment scroll fixed 背景是否随着滚动条进行滚动
5、backgorund-position 背景图片的起始位置
6、backgorund 背景样式属性的组合

backgorund-position
一、
1、top left
2、center center
3、bottom right
二、
第一个是水平位置的百分比
第二个值垂直位置的百分比
x% y%
三、
第一个是水平位置
第二个值垂直位置
xpx ypx

创建并使用外部样式表
外部样式表就是新建一个文档，后缀是.css，里面全是css
通过link插入到html标签中
作用：使得网页的表示层和结构层彻底分离
//用于定义文档和外部资源的关系

//关系 //定义文件样式的类型 引用具体的文件

文本类的样式
1、对齐方式、文本修饰、文本转换缩进
color 表示颜色内容 设置文本颜色
direction ltr rtl 文本的方向/书写的方向
letter-spacing npx(n可以是负数) 字符的间距
line-height npx 行高
text-align left/right/center/justify(两端对其) 文本对齐方式

direction：ltr;
text-align:justify;
1、如果是字母和汉字的话，两者效果一样。
2、对于阿拉伯语来说，不一样。

text-decoration none,underline,overline,line-through 文本修饰下划线
text-shadow h-shadow，v-shadow,blur,color 文本设置阴影
text-transform none，capitalize,uppercase,lowercase 改变字母大小写
text-indent npx,xem 首行缩进

小结：
1、文本的间距、位置、对齐方式设置
2、用于对文本修饰下划线、阴影的效果

字体类样式：
font系列：font-style font-family

属性如下：
font-family 隶书、仿宋、楷体 设置字体
font-style normal、italic、oblique 设置斜体效果
font-weight normal、blod、100-900 文本的粗细设置
font-size npx 字体大小

列表
1、list-style-type none,disc,circle,square… 设置列表项目外观
2、list-style-position inside,outside 列表符号的位置
3、list-style-image url,none 把图片设置为列表项目的标记
4、list-style

无序列表：
none disc circle square decimal
有序
lower-roman upper-roman lower-latin upper-latin

小结：
1、列表样式使用频率很高，用于菜单、商场品类这些规律性的应用场景
2、样式属性不用去背，记住他的效果。

伪类样式
伪类：通常情况下，超级链接的样式，称为伪类。
作用：设置超级链接的4种状态
注意：1、伪类是用在超级链接上的额效果比较多，但是超级链接不是伪类
2、伪类是选择器

伪类选择器 状态伪类
1、a:link 未访问的链接
2、a:visited 已访问的链接
3、a:hover 鼠标移动到链接上（浮动、悬停）
4、a:active 向被激活的元素添加样式
5、：focus 选择拥有键盘输入焦点的元素

伪类分类 分为2类
1、状态伪类
2、结构性伪类
（结构性）伪类选择器
1、：first-child 选择元素的第一个子元素
2、：last-child …最后一个子元素
3、：nth-child() 选择某个元素的一个或多个特定的 子元素
4、：nth-last-child() 选择某个元素的一个或多个特定的 子元素,从最后一个开始算。
5、：first-of-type 选择一个上级元素下的第一个同类子元素

伪元素选择器
伪类选择器：选择一整段内容进行设置
伪元素选择器：选择其中的额一段或者一行进行设置
::selection 选择指定元素中被用户选中的额内容
::before 可以在内容之前插入新内容
::after 可以在内容之后插入新内容
::first-line 选择指定选择器的首行
::first-letter 选择文本的第一个字符

总结：
1、记住效果
2、伪类和伪元素概念

css其他选择器：
id，* 选择指定元素被用户选中的内容
逗号选择器 联合选择器
空格选择器 子孙（后代）选择器

选择器 子选择器（不是子孙后代）
+选择器 相邻兄弟选择器
[] 属性选择器

div是一个容器，后面画页面的重点

css的优先级 优先级只针对同一个对象而言
1、！important
2、行内样式
3、ID选择器
4、类（class）选择器
5、标签选择器
6、通配符*
7、浏览器的默认属性