css
Css概念
CSS 指层叠样式表 (Cascading Style Sheets)级联样式表
Css与html的关系
Css以html为基础的。
Css主要设置的就是html标签中的属性样式，css进行网页布局。
Css语法
选择器{属性:值; 属性:值;.... }
选择器：就是一个选择谁的过程。
|
属性 |
赋值 |
介绍 |
|
color |
color: red; |
前景色（文字颜色） |
|
font-size |
font-size: 20px; |
设置文字大小 |
|
width |
width: 30px; |
设置宽度 |
|
Height |
height:30px; |
设置高度 |
|
Background-color |
background-color:red; |
设置背景颜色 |
|
Text-align |
text-align:center; left|right; |
文字居中 |
|
Text-indent |
text-indent: 2em； |
首行缩进 |
|
opacity |
0-1 |
透明度(正常浏览器) |
|
filter |
alpha(opacity = 0-100) |
透明度(IE678) |
注意：Text-align:center; 在块级元素中可以让文字居中
Css书写位置介绍：
内嵌式写法
外联式写法
<link rel=”stylesheet” href=””>
1.新建一个文件，后缀名以.css命名（css文件）
2.在html页面中通过<link rel=”stylesheet” href=””> 标签将css文件引入
行内式写法
通过给标签设置style属性来设置样式。
Css书写方式之间的区别
内嵌式写法：
◆代码可维护性较差，没有实现css代码与html结构的完全分离
◆影响的范围只有当前页面
行内是写法：
◆代码可维护性极差，css代码和html结构没有实现分离
◆影响的范围只有当前标签
外联式写法：
◆代码可维护性高，css与html结构完全分离
◆影响范围广，当前整个网页站点。
选择器的分类
基础选择器
1.标签选择器
标签：就是html中的标签。
用法：标签名{属性:值; 属性:值;}
2.类选择器
用法： .自定名称{属性:值;}
调用： 标签通过class属性调用类样式
特点：
◆谁调用谁改变，多个标签可以同时调用一个类样式
◆一个标签可以调用多个类样式（相当于人的名字）
3.id选择器
用法：#id名称{属性:值;}
调用：通过id属性调用样式
特点：
◆不建议多个标签使用同一id选择器的样式（id和js配合使用）
◆一个标签只能调用一个id样式
4.通配符选择器
用法：*{属性:值;}
特点：
◆将页面中所有的标签都选中，设置样式
◆进行页面样式的初始化
补充：在写样式的时候（类选择器），如果有样式代码重复使用的时候，我们要提取公共类。
复合选择器
1.标签指定式选择器
用法：标签名.选择器名{属性:值; 属性:值;}
特点关系：既。。。又。。。。
或者 
2.后代选择器
特点：标签之间必须属于嵌套关系。
用法：选择器 +空格+ 选择器{属性:值; 属性:值;...}
特点：选择器之间必须有空格
关系：父与子的关系
3.并集选择器
用法：选择器,选择器,选择器{属性:值;}
作用：将样式集体声明，css样式初始化。
特点：并集选择器之间必须用逗号隔开！
Css特性
层叠性
样式的覆盖。 样式的层叠性与样式的调用顺序没有关系，与样式的定义顺序有关。
层叠性发生的前提： 样式冲突
继承性
继承性发生的前提是标签之间属于一种嵌套关系
文字颜色可以实现继承
文字大小可以实现继承
字体可以实现继承
行高可以实现继承
与文字有关的属性都可以 实现继承
特殊性：
<a href=”#”></a> 不能继承父元素中的文字颜色（层叠掉了）
<h1></h1> 标题标签不能继承父元素中的文字大小
优先级
默认样式<标签选择器<类选择器<id选择器<行内样式<!important
0 1 10 100 1000 1000以上
优先级的特点
继承的权重为0
权重会叠加
伪类介绍
a:link{属性:值;}
超链接默认状态下的样式 ( a:link{}与a{}实现的效果是一样的 )
个别浏览器不支持a:link{}的写法，设置默认样式用a{}就可以
a:visited{属性:值;}
超链接访问过后的样式
a:hover{属性:值;}
鼠标放到超链接上的样式
a:focus{属性:值;}
获取焦点（光标）的时候的样式
补充：
◆在设置超链接样式属性时，要按照link,visited,hover,active,focus的顺序进行设置
◆text-decoration: 超链接文字下划线属性
常用值: None没有下划线 underline有下划线
背景（background）
Background-color 背景颜色
background-image 背景图片
注意：设置背景图片的时候一定要设置宽度和高度
background-repeat 设置背景平铺
repeat 默认值
no-repeat 不平铺
repeat-x 横向平铺
repeat-y 纵向平铺
background-position 设置背景位置
设置具体值： left | right | top | bottom | center
设置具体值的时候不区分先后顺序
设置具体数字的时候，第一个值代表水平方向，第二个值代表垂直方向
background-attachment 设置背景是否固定
Scroll （默认值）滚动
fixed 图片固定
属性联写：
没有数量限制和先后顺序限制
字体相关属性
Font-size: 设置文字大小
Font-family: 设置文字字体
◆直接设置汉字
◆设置对应字体的英文
◆可以设置unicode编码
注意：font-family可以设置多个字体
Font-weight: 设置文字加粗
◆直接设置数字 100-900
◆bold (字体加粗) 效果与 700-900
◆normal(文字字体正常显示)
注意：文字加粗显示，推荐使用 font-weight:700;
Font-style: 设置文字斜体
◆italic 文字斜体显示
◆normal 文字正常显示
Line-height: 行高
Font属性联写
用法：
font: font-style font-weight font-size/line-height font-family
注意：
◆font属性联写必须有 font-size 和font-family(其他属性可以不写)
◆font-size 和font-family的顺序不能换
样式类的命名规范
头：header
内容：content/container
页脚：footer
导航：nav
子导航：subnav
侧栏：sidebar
栏目：column
页面外围控制整体布局宽度：wrapper
左右中：left right center
登录条：loginbar
标志：logo
广告：banner
页面主题：main
热点：hot
新闻：news
下载：download
菜单：menu
子菜单：submenu
搜索：search
友情链接：friendlink
版权：copyright
滚动：scroll
图片之间缝隙处理
设置img的样式vertical-align为top就可以了
