CSS笔记
1、为什么使用CSS(级联样式表)——HTML的不足(**)
维护困难
标记不足
页面过胖
定位困难
CSS的作用：为页面设置外观,相当与华丽的衣服
2、CSS的一般使用方式(***)
一般页面有固定的模块:Logo、导航、正文、链接、角标等
使用分区标签将模块分开，设定id、类等
用CSS为每一个模块设定不同的或指定的样式(行内样式、内嵌、导入样式等)
3、CSS基本的语法和用法(***)
在HTML中所有的标签又可以有style属性，专门用来设置CSS样式
设置样式的基本语法：
样式属性 : 值;
样式设置属性-方向属性-特点属性 : 值;
文本颜色 color : red; 或 color : #ff0000; 或 color : #f00;
字体 font-family : 字体;
设置大小 font-size : 30px;
设置边框 border-top-width
border-top-color
border-top-style
border:1px solid red;
4、CSS样式的基本用法(****)
四种方法：
1、行内样式：直接在标签中写上style="写入样式，每一个样式要以分号隔开"
ps：<p style="
border:1px solid red;
font-size:30px;
font-family:仿宋;
color:blue;
background-color:green;
">文本</p>
2、 内嵌样式：写在标签中,每一个样式要以分号隔开
ps:
#paragraph {
border:1px solid red;
font-size:30px;
font-family:仿宋;
color:blue;
background-color:green;
}
3、 外部导入：已经有了一个css文件，直接用标签导入即可
ps：
4、 导入样式：
有多个css文件，而后通过一个total文件来总和它们(用@import url(css文件))
最后用导入样式的来导入total文件，从而实现多个CSS文件的简单运用
样式的优先级：
行内>外部>内嵌>导入 (就近原则)
5、盒子模型(*****)
作用：解决页面的布局问题
ps：网页中任何东西都是盒子，网页布局就是堆砌盒子
从左往右，从上至下具体看图(浏览器的盒子堆砌 .bmp)
盒子模型图：浏览器的盒子模型图.bmp
注意：盒子模型的width会根据浏览器的不同而不同，这是要考虑浏览器兼容性问题
6、 常用样式(分类说明)(****)
文本text:
color
font-size 大小
font-family 字体
font-weight 粗细
text-align 对齐(right\\\\left\\\\center\\\\buttom)
text-decoration 下划线(underline)、上划线(overline)、删除线(line-through)等
边框border:
border:颜色color 样式style 粗细width 方向 ps：border:1px solid red;
边框类型：solid(实线上边框) dotted(点线右边框) dashed(虚线下边框) double(一个双线左边框)
margin ps：margin:0px auto;居中
padding
设置margin与padding的时候，都是设置填充的尺寸
一个数字 margin:10px; 上下左右均是10像素
两个数字 margin:10px 20px; 上下为10，左右为20
一般使用 margin:0px auto; 表示居中(要设定宽度)
三个数字 margin:10px 20px 30px; 上 左右 下
四个数字 上右下左
背景background:
背景色 background-color
背景图 background-image:url(...);
背景位置 background-position: x坐标 y坐标;
背景重复 background-repeat: repeat-x repeat-y no-repeat
图片img标签的样式：
宽度 width
高度 height
缩放 一起用
对齐 text-align vertical-align 一定是放在一个容器中
光标与列表cursor、list：
cursor 光标 pointer(小手)等
list-style-type:none;
做目录时使用float:left让每一个li飘起来时它们在同一水平线上
浮动:float与clear(重要)
作用：设置元素的浮动可以实现并排
float表示让元素脱离文档流，并向一个方向停靠
left与right
浮动左与右是根据容器决定的
当设置浮动的时候，后面的元素会依着停靠，设置clear以后则不受前面浮动的影响
clear: left;right;both;
位置:position(重要)
static 默认
absolute 绝对定位(脱离文档流)，一般用left与top规定元素位置
设定absolute后，脱离文档流，默认放置在文档流的位置，
可以通过left top right bottom设定坐标
relative 相关定位(一般做布局的时候，先用相关，在转成绝对会容易一点)
不脱离文档流，占着原来的位置，并且设定left top等值的 时候，用原来位置的原点作为原点
fixed 固定
ps:文档流
按照原来HTML解释盒子排放的规则称为文档流
(每一个元素都按顺序排列,一旦脱离文档流就不再后排列的约束,会浮到原排列上面从新开始浮动排列)
7、选择器(*****)
基本选择器:
ID #id {样式}
类 .className {样式}
标签 tagName {样式}
通用选择器
* {样式}
* {margin:0;padding:0;}
body,div,span {margin:0;padding:0;}
复合选择器(重要)
组合选择器
多个选择器用逗号分隔，表示这些选择器都具有的样式
子选择器 父>子 {样式}
后代选择器 祖宗 后代 {样式}
父与子的关系
<div id="father">
<div id="son1">
<div id="subson1">
</div>
</div>
<div id="son2">
<div id="subson1">
</div>
</div>
<div id="son3">
<div id="subson1">
</div>
</div>
</div>
案例：
#father * {color:red;}
标签类选择器
标签.类名 {
样式;
}
具有"类名"的"标签"才有的样式
兄弟选择器
prev+next {
样式
}
8、伪选择器
语法：
a:行为 {
样式;
}
a标签，触发行为的时候，呈现的样式效果
link 默认时的样子
hover 鼠标放上去
active 鼠标点击
visited 点击过以后
ps；/*默认时的样子*/
a:link {
color:#000000;
text-decoration:none;
}
/*鼠标放上去hover*/
a:hover {
color:#ff0000;
}
/*鼠标点击active*/
a:active {
color:#0000ff;
}
/*点击过以后，使用visited*/
a:visited {
color:#00ff00;
}
对于其他的元素(列表，或表格)
设置元素或ID或类等，表示正常使用
通过添加active与hover来实现效果
9、布局案例
->居中布局
-> 两列布局
-> 三列布局
看C:\\\\Users\\\\apple\\\\Desktop\\\\web\\\\第三天\\\\css中的案例
*10、z-index:用来描述层的级别 个人感觉不太好用(不推荐使用)*
ps；实际做开发，设计页面的步骤参考
1. 模块(页面中有哪些东西：一般logo、导航、内容、链接、脚标)
每一个模块就是一个div，为每一个模块设计id属性
-> 设计界面(photoshop+dw)、切图+加样式
-> CSS布局(居中、分块、浮动、定位)
-> 细化样式
---------------------------------------
-> 作为开发者，知道的就是页面中有些什么模块(id)，放置什么内容(字符串)
