CSS--学习笔记

初识CSS
1、了解什么是网页样式
2、掌握CSS的基本语法
3、熟练掌握CSS的基本属性
4、会使用DIV + CSS进行网页布局
5、熟练使用CSS来装饰页面

块元素和内联元素
块元素
独占一行
可以定义宽度和高度
常用块元素
div p ul li

  内联元素
    一行排列显示
    不能定义宽度和高度
    常用内联元素
       span a  label

和 标签可以相互转换（display） 规范角度而言，标签不内嵌

标签

和 标签 最大优点： 没有任何的默认样式渲染 最大区别：

标签是块元素， 标签是内联元素 作用：1、结构化HTML元素 2、DIV + CSS网页布局 3、提高网页加载速度 什么是CSS ？ CSS 的概念 Cascading Style Sheet 级联样式表 表现HTML或XHTML文件样式的计算机语言 包括对字体、颜色、边距、高度、宽度、背景图片、网页定位等设定 CSS的作用： -能控制页面的样式和布局 -网页文件与样式文件相分离，提高开发效率 2.2CSS基本语法 选择器{ 声明1； 声明2； 声明n;

}
eg:
h1{
font-size:12px;
color:red;
}
经验：CSS的最后一条声明后的；可写可不写，建议都写上CSS多条声明可写在同一行，但开发时便于阅读建议分行写并缩进
基本选择器
标签选择器：
-HTML标签作为标签选择器的名称

p{
font-size:16px;
}

类选择器 <标签名 class=“类名”>标签内容</标签名> 可以给不同的标签相同的class
.class{
font-size:12px;
}

ID选择器 <标签名 ID=“id名称”>标签内容</标签名> 网页中标签的ID不能重复，唯一存在
#id{
font-size:16px;
}
复合选择器
并集选择器
p,#id,.class{
font-size:14px;
color:green;
}
经验：多个选择器之间可以是多个不同或相同类型；多个选择器之间必须用英文半角输入逗号","隔开
交集选择器（指定标签选择器）
h3.second{
font-size:14px;
color:green;
}

格式为：标签 + 类选择器 或者 标签 + ID选择器
选择器之间不能用偶空格
后代选择器
p a {
font-size:14px;
color:green;
}
经验：选择器之间可以是多个不同或相同类型并有层级关系的；选择器之间用空格隔开
通配选择器
*{
font-size:25px;
color:red;
}
基本上不使用：
总结：
-标签选择器直接用于HTML标签
-类选择器可以再页面中多次使用
-ID选择器可以再同一个页面中只能使用一次
-灵活运用并集，交集，后代选择器
2.5CSS的引入样式
-行内样式
–使用style属性引入CSS样式
eg：

style属性的应用

直接在HTML标签中设置的样式

-内部样式
-外部样式

CSS 的引入方式
外部样式表
-CSS代码保存在扩展名为.css的样式表中
-HTML文件引用扩展名为.css的样式表，有两种方式
–链接式

–导入式

：属于XHTML ；优先加载CSS文件到页面 @import：属于css2.1 ;先加载HTML结构再加载css文件

CSS样式优先级：
行内样式>内部样式表>外部样式表(后两者是就近原则)
id选择器>类选择器>标签选择器

总结：
-CSS选择器分为标签选择器、类选择器和ID选择器
-CSS复合选择器
-交集选择器 、并集选择器 、 后代选择器
-在HTML中引入css样式的三种方式
-行内样式、内部样式和外部样式
-注意CSS的优先级
CSS字体属性

字体属性：
属性 描述
font -style 设置字体风格
font-weight 设置字体粗细
font-size 设置字体尺寸
font-family 设置字体系列
font 简写属性，作用是把所有针对字体的属性设置在一个声明中（注意顺序）
font:font-style || font -variant ||font-weight ||font-size/line-height||font-family
font-variant:small-caps; 显示小型的大写字母的字体

文本属性
属性 描述
color 设置文本的颜色 ，如red ,#FF0000
line-height 文本的行高
text-align 设置文本的对齐方式，如left,center,right
text-decoration 设置文本装修，如underline none line-through
CSS背景属性：

设置页面元素的背景样式
属性 描述
background-color 背景色，取值如，red ,#FF00
background-image 背景图片，如：background-image:url("./images/bg.png");
background-position 背景开始位置，包括水平方向（X轴）和竖直方向（y轴）的设置；
X轴取值：left ，center ，right Y轴取值 top center bottom 或像素值，或百分比
background-repeat 背景填充方式，取值，repeat -x |repeat -y|no-repeat
background 合写方式，如，background :#fff url(bg.png) left top no -repeat;
背景属性基本应用
2.12列表属性及伪类

• 列表属性
  属性 描述 举例
  list-style-image 将列表设置为列表标志 list-style-image:url("…/arrow.gif");
  list-style-type 设置列表标志的类型：disc(实心圆) |circle(空心圆)|square(正方形) list-style-type:circle;
  list-style 以上属性合并简写，或none去掉默认属性设置 list-style：square url("…/i/arrow.gif");
• 超链接伪类
  a:link{color.red} 未访问的链接
  a:link{color.blue} 已访问链接
  a:link{color.green} 当鼠标悬停在链接上
  a:link{color.yellow} 被选择的链接
  经验：
  1 在CSS定义中，a:hover必须被置于 a:link 和 a:visit之后，才是有效的；
  2 在CSS定义中，a:active 必须被置于a：hover之后，才是有效的
  3 在CSS定义中，love hate 法则（爱恨法则）
  -鼠标形状控制
  cursor属性，其值
  值 说明 图例
  URL 需要使用自定义光标的URL
  default 默认光标

盒子模型

display属性：

浮动属性
float 属性：
取值：
-left 左浮动
-right 右浮动
-none 不浮动
作用：
-块元素同行排列显示，一般用于排版，分栏显示
-设置浮动属性后，脱离文档流向指定的左或右边对齐，直到父元素的边界或者浮动的元素
注意：
-使用浮动后要及时清除，以免影响其后的网页元素
清除浮动：
清除浮动的必要性
-浮动后，脱离了文档流不占网页空间
-浮动后的网页元素会影响同级元素
clear属性清除浮动
取值：
left
right
both
none
表名容器框的哪边不挨着浮动框
清除浮动的方法：
-几个并列的盒子同时加浮动，他们的父级盒子出现如下情况：
（1） 背景不能显示
（2） 边框不能撑开
方法一：添加新元素，应用 clear：both
方法二：父级添加overflow：auto；zoom：1；
//zoom: 1；是在处理兼容性问题
方法三：据说是最高大上的方法 ：after 方法
（注意：作用于浮动元素的父亲）
#box{zoom:1;} //for IE6/7 Maxthon==/
#box:after{clear:both;content:".";display:block;
width:0;height:0;visibility:hidden;
}
2.21清除浮动的方法：

定位属性
position属性：
-relative（相对定位）
-相对他原来的位置，通过指定偏移，到达新的位置。
-仍在标准流中，他对父级盒子和相邻盒子都没有任何影响
-absolute(绝对定位)
-相对已设定非static定位属性的父元素计算偏移量,脱离文档流；
-fixed(相对浏览器固定定位，IE6不支持)
-static(默认)
偏移量设置
-X轴（left、right属性）与Y轴（top，bottom属性）
可取值：像素或百分比

z-index:设置定位盒子的层级
-数字越大。层级越高，越在上层
z-index：2(数字之后没有单位，数字可以设置为负值)
2.26网页布局注意事项
如何进行网页布局：
TABLE表格布局：用于统计表格
优点：简单易懂、位置很规矩
缺点：加载速度慢，结构固定不灵活，不利于维护和SEO
框架布局：
多页面加载在同一页面，如标签
DIV+CSS方式布局（目前最流行，最合理的布局方式）
HTML结构：

标签
CSS样式：float浮动和盒子模型
为什么使用DIV+CSS

标签“干净”，网页更小，打开更快
结构清晰，便于维护，利于SEO

标签更灵活，更好控制页面元素
样式与结构相分离，更好的结构重组
表现与内容相分离，利于分工协作
总体把握 分块实现 完善细节 性能优化

网页布局命名规范：
   命名整体框架 用ID选择器
   命名小模块内容用类选择器

自动网页居中代码
语法： 选择器 {
width：
margin-left：auto；
margin-right：auto；

}
注意：
元素必须为块元素
元素必须设定其宽度
元素的上下边距可自定义

使块元素水平排列
语法：选择器-1{
width： 值;
float：left|right；
}
选择器-2{
width： 值;
float：left|right；
}

分区实现
分别实现每个区域的内容
重复对大区块下进行切分布局
浮动布局
自动居中布局
定位布局
相对定位属性合绝对定位属性相结合
确定采用适合的HTML标签
*遵循语义性标签优先原则
*结构性容器一般采用

标签
*小图标，小部件一般采用内联元素 标签
*列表形式的内容一般采用

• 1. 标签
     *表单，表格标签元素有针对性使用
     *合理运用 标签或背景图片
     完善细节
     对结构细节进行完善
     采用图片处理工具确定元素的大小和位置
     利用盒子模型调整元素之间的位置，精确到一个像素
     原则上是与UI效果图一致
     对内容有预判处理
     内容有超出范围的自动隐藏或换行
     图片大小或无图片处理
     尽量使用自动适应的方式处理
     性能优化
     对制作的网页进行优化处理
     多采用类选择器方式，减少CSS代码
     压缩CSS文件代码，减小CSS文件大小
     减少图片请求
     减少外部文件的引用

第三章： 倒三角和CSS.sprite制作使用及优缺点
3.1倒三角的实现方法（一）
–用图片背景
–用border制作倒三角
–用特殊符号构造倒三角
3.2倒三角的实现方法（二）
3.3CSS精灵（一）
3.4CSS精灵（二）
更新中。。。