Css02
１ 复习昨天知识
概念：层叠样式表或者叫级联样式表
内嵌式写法：
<head> <style type=”text/css”>...
</style> </head>
语法：
选择器{属性:值; }
|
属性 |
赋值 |
描述 |
|
Color |
Color:red; |
文字颜色 |
|
Font-size |
Font-size:20px; |
文字大小 |
|
Font-family |
Font-family:宋体; |
文字字体 |
|
Font-weight |
Font-weight:bold(700) | normal |
文字加粗 |
|
Font-style |
Font-style:italic | normal |
文字斜体（italic） |
|
Background-color |
背景颜色 |
|
|
Width| height |
Width: 12px; |
宽度和高度 |
|
Text-align |
Text-align:center; |
文字居中 |
|
Text-indent |
Text-indent:2em; |
首行缩进 |
|
Margin |
Margin: 0 auto; |
盒子居中显示 |
基础选择器
◆标签选择器
P{属性:值;}
◆类选择器
定义：
.fontcolor{color: red;}
调用：
<p class=”fontcolor”>文字</p>
特点：
◆谁调用谁改变
◆一个标签可以同时调用多个类样式
◆多个标签可以同时调用一个类样式
命名：
◆不推荐使用汉字定义类名
◆不推荐使用标签名或者属性名定义类名
◆不能使用纯数字或者特殊字符（“_”除外）定义类名
◆id选择器
定义：
#自定义名称{属性:值;}
标签通过 id=”自定义名称”
注意：
页面中的表id名称不能重复。
同一个标签不能调用多个id样式
◆通配符选择器
*{属性:值;}
１.1 复合选择器
◆标签指定式选择器
P.类选择器{属性:值;}
既。。。又。。。。
◆后代选择器
选择器 选择器{属性:值;}
标签之间的关系属于嵌套关系。
◆并集选择器
选择器,选择器,选择器{属性:值;}
注意：
标签之间不一定是并列关系！！！！！
Css书写位置介绍
１.1 内嵌式写法
１.2 外联式写法
<link rel=”stylesheet” href=””>
☞新建一个文件，后缀名以.css命名（css文件）
☞在html页面中通过
<link rel=”stylesheet” href=””> 标签将css文件引入
行内式写法
☞通过给标签设置style属性来设置样式
Css书写方式之间的区别
☞内嵌式写法：
◆代码可维护性较差，没有实现css代码与html结构的完全分离
◆影响的范围只有当前页面
☞行内是写法：
◆代码可维护性极差，css代码和html结构没有实现分离
◆影响的范围只有当前标签
☞外联式写法：
◆代码可维护性高，css与html结构完全分离
◆影响范围广，当前整个网页站点。
Html标签的分类
显示方式不同进行的分类
块级元素
典型代表：
div,p,li,h1...
特点：
☞元素自己独占一行显示（与宽度无关）
☞可以设置宽度和高度
☞当嵌套一个块级元素，子元素如果不设置宽度，那么该子元素的宽度为父元素的宽度。
行内元素
典型代表:
Span， a, font, strong...
特点：
☞元素在一行上显示
☞不能直接设置宽度和高度
行内块元素
典型代表:
Image, input(表单控件)
特点：
☞ 元素在一行上显示
☞ 可以设置宽度和高度
元素之间的转换
Display: inline 将元素转化为行内元素
Display：inline-block 将元素转化行内块元素
Display: block 将元素转化为块元素
Css特性
层叠性
样式的覆盖。 样式的层叠性与样式的调用顺序没有关系，与样式的定义顺序有关。
层叠性发生的前提： 样式冲突
继承性
继承性发生的前提是标签之间属于一种嵌套关系
☞文字颜色可以实现继承
☞文字大小可以实现继承
☞字体可以实现继承
☞行高可以实现继承
与文字有关的属性都可以 实现继承
特殊性：
<a href=”#”></a> 不能继承父元素中的文字颜色（层叠掉了）
<h1></h1> 标题标签不能继承父元素中的文字大小
优先级
默认样式<标签选择器<类选择器<id选择器<行内样式<!important
0 1 10 100 1000 1000以上
优先级的特点
继承的权重为0
伪类介绍
超链接默认状态下的样式
a{}与a:link{}实现的效果是一样的
a:link{
属性:值;
}
超链接访问过后的样式
a:visited{
属性:值;
}
鼠标放到超链接上的样式
a:hover{
}
超链接激活状态下的样式
a:active{
}
获取焦点（光标）的时候的样式
:focus{
}
|
text-decoration |
None|underline|line-through |
背景（background）
Background-color
背景颜色
background-image （背景图片）
注意：设置背景图片的时候一定要设置宽度和高度
background-repeat （设置背景平铺）
repeat （默认值）|
no-repeat （不平铺）|
repeat-x | （横向平铺）
repeat-y （纵向平铺）
background-position （设置背景位置）
设置具体值： left| right| top| bottom| cneter
设置具体值的时候不区分先后顺序
设置具体数字的时候，第一个值代表水平方向，第二个值代表垂直方向
background-attachment （设置背景是否固定）
Scroll（默认值）滚动
fixed （图片固定）
属性联写：
没有数量限制和先后顺序限制
去掉列表前面的显示方式：
