css3笔记

CSS
一、CSS的作用
1、CSS的作用：统一的方式为页面元素定义样式外观，实现页面内容（数据）和表现（样式）的分离，
提高代码的可维护度和可重用性
编程语言在发展过程中：定义样式的方式不统一
有写html的属性来定义：align="center"bgcolor=""
---不统一、杂乱


CSS的方式
<h1 style=""color:red;background-color:blue;">aaa</h1>
---所有的定义方式对于所有的html元素而言，统一
2、如何使用CSS
a、内联方式：将CSS代码写在元素的style属性里
---仅限于当前某个元素使用
b、将CSS代码写在单独的.CSS文件里
  在html页面的head里使用link引入
3、具体的语法
在单独的CSS文件中
选择器 ----谁选择使用后续的样式
{
样式声明；      ----样式的名称：值；
}
添加注释
/*注释内容*/
4、细节
区分中英文字符
大小写：代码本身不区分大小写
某些选择器区分
二、选择器---决定了谁使用样式
1、元素选择器
以html标签的名称作为选择器
---可以为某类标签定义统一的样式
---范围太大
2、ID选择器
<h2 id="t1">1111</h2>-----html编辑
#t1{.......}-----CSS编辑
CSS文件中：#t1{}
html文件中：<元素 id="t1">
----可以单独为某一个标签定义样式
----范围太小
3、类选择器
CSS文件中：.s1{}
HTML文件中：<元素 class="s1">
---为某些元素定义样式
4、后代选择器：以元素的层次包含的关系
CSS文件中：以各种选择器，空格隔开
div span{}----被div包含的span
#t1 span {}----被id为t1的元素包含的span


5、伪类选择器：选择元素的某种状态
在CSS中
:link----从未访问过的链接（a）
:hover----鼠标悬停（所有元素）
:active----激活（a、按钮）
:visited----访问过的链接（a）
:focus----获得焦点（文本框）
----如何使用
需要结合其他选择器一起使用
p:hover{}
t1:hover{}
.s1:hover{}


6、选择器分组：可以为多种选择器同时定义样式
p,h1,div{}-----为他们定义那些相同的样式

7、样式优先级：
a、多种方式定义样式：不冲突的一起作用；冲突的，按优先级作用
b、就近优先：范围小的优先
c、优先级相同时：以后定义的为准
d、内联样式>内部样式表和外部样式表


三、和样式相关的单位
颜色的单位：
color:red;
color:#afafaf----使用6位的16进制的数字
尺寸的单位
绝对单位
pt(榜)、cm、mm、in
相对单位
px(像素)、%
四、尺寸和边框
1、尺寸
width:;
height:;
2、边框
border:大小 样式 颜色;
-------四个边
样式：solid-实线  dotted  点虚线  dashed 线虚线
border-left/right/top/bottom;
border-width:
border-left/right/top/bottom-width
border-color:
border-left/right/top/bottom-color
颜色取值刻意为transparent，用于创建有宽度的不可见边框
边框是由等腰三角形或等腰梯形组成，可以做出网页中的小三角形
3、边框圆角
border-radius:5px;
4、尺寸和边框属性
块级元素：OK
行内元素：边框有效。尺寸无效（边框大小由内容决定）
行内块级：可以有尺寸
5、边框阴影
   属性：
      box-shadow
   取值：由多个属性值组成的值列表
      h-shadow : 必须，阴影的水平位置,值为正，向右偏移，值为负，向左偏移
      v-shadow : 必须，阴影的垂直位置,值为正，向下偏移，值为负，向上偏移
      blur : 可选 ，模糊距离
      spread : 可选，阴影的尺寸
      color : 可选，颜色
      inset : 可选，将默认的外部阴影，改为内阴影
   常用操作：
      box-shadow:h-shadow v-shadow blur color;


      box-shadow:0px 0px 1px #ddd;
      模拟边框发光的效果
6、轮廓
   绘制于元素周围的一条线，位于边框之外
   语法：outline:width style color;


         outline-width:
outline-style:
outline-color:
五、框模型（盒子模型/box model）-----解决元素的边距
-----内容、内边距、边框、外边距
1、外边距：元素和临近元素之间的距离k
临近：自己和左右元素、上下元素，不包括子元素
  a、margin:10px;------四个方向的外边距
  b、margin-left/right/to/bottom:;----单方向边距
  c、margin:..px ..px ..px ..px;-----分别定义四个方向
    上   右   下   左
  d、margin:..px ..px;----分别定义两个方向
            上下  左右
  e、margin:0px auto;--左右边距相同
元素在当前范围（父元素）居中显示
----auto可以实现水平居中，不能实现垂直居中
对于行内元素而言：margin
没有上下外边距，有左右外边距
auto无效
2、内边距：元素和其子元素之间的距离
padding:10px;------四个方向的外边距
padding-left/right/to/bottom:;----单方向边距
padding:..px ..px ..px ..px;-----分别定义四个方向
    上   右   下   左
padding:..px ..px;----分别定义两个方向
            上下  左右


a、width和height:内容区域大小
b、设置padding：导致框撑开
-----框和内容之间的距离（内边距）
c、auto对于padding而言，无效
d、padding对于行内元素：
有效，框撑开-----可能导致和周围元素的重叠
常用与实现让行内元素有一定的大小
----无法精确尺寸
3、元素占地总面积
width/height+padding+border+margin
有些元素默认自带外边距、内边距
这些距离的大小：由浏览器默认设置
解决：使用CSS代码改写默认的距离
css reset


六、浮动
1、默认布局：流模式布局
块级元素从上向下
行内元素在当前行从左向右
-----所有元素位于同一层
2、特殊情况下，需要其他的布局方式
浮动、相对定位、绝对定位、固定定位
3、浮动
float:left/right;
---元素脱离原有的层，停靠在左侧或者右侧
包含框的左侧或者右侧
其他浮动元素的左侧或者右侧
该元素原有的位置不在保留
后续元素占用
---浮动会影响周围的元素的位置，尤其是影响后续元素
浮动在包含框内
4、清楚浮动元素带来的影响
clear:left/right/both;
5、浮动的应用
----常用于将多个块级元素位于同一行显示
6、浮动所带来的问题
  包含狂内的元素应用了float后，包含框的高度会发生变化
解决方案1.overflow：hidden
作用：
1、移除后隐藏
2、设置在包含框元素上，让其高度去适应浮动的子元素
解决方案2：在包含框内设置个不浮动的元素，并且清楚浮动对他所带来的影响
解决方案3：设置包含框的高度
解决方案4：后续内容......
7、注意问题
1、元素一旦浮动之后，那么宽度就会变得自适应，不在是100%
2、行内元素一旦浮动的话，就会变成块级元素
七、背景
（一）
1、背景色：
background-color:;---纯色
2、背景图片
background-image:url("");
3、当背景图比元素框小
background-repeat:repeat/repeat-x/repeat-y/no-repeat
--默认情况下，背景图的位置图的左上角和元素框的左上角重合
4、背景图片尺寸
属性：background-size
取值：
宽度 高度；
%    %；
cover：覆盖，将背景图像扩大，直到背景图完全覆盖到元素上，则停止
contain：包含，将背景图像扩大，使背景图的宽度或高度适应元素位置
5、背景图片固定
让背景图不会随着滚动条而发生改变
属性：background-attachment
取值：scroll 默认值
     fixed 背景图像固定，不会滚动
6、修改背景图片的位置
background-position:x y;
   left center
---如果图比框大
默认情况下：只显示左上角一部分
如果希望显示背景图的其他部分
----设置背景图的位置
希望将大图全部显示在小框里
background-size:;---会让背景图的比例失调（不建议这么使用）
---什么情况下，背景图比框大
可以将多个小图标作为一个大图片
元素框使用背景图像的位置，显示某个图标
background:color url() repeat attachment position
（二）渐变
background-image:(repeating-)linear-gradient(angle,color-point1,color-point2,...)
background-image:(repeating-)radial-gradient([size at position],color-point1,color-point2,...)
浏览器兼容性
firefox:添加前缀 -moz-
Chrome、Safari:添加前缀 -webkit-
Opera:添加前缀 -o-
IE:添加前缀 -ms-
八、文本
font-size:;-----大小
font-family:"new times";----字型，设置备用，大小接近
常用字型："microsoft yahei"
font-weight:normal/bold;-----加粗
text-align:left/center/right;----文本在水平方向上的对齐
margin:0px auto;---元素本身在父框范围里
text-align:center;---元素里的内容在元素自己的范围里
text-decoration:none/underline;---下划线 overline 上划线  line-through 删除线
color:;-----颜色
line-height:;----行高，如果行高高于字体高度的话，那么内容就会在这段行高的高度范围内垂直居中显示
font:font-style(字体样式，如斜体) font-variant(小型大写字母显示) font-weight font-size font-family；
text-indent:首行文本缩进
text-shadow:


九、列表 normal/italic normal/small-caps microsoft yahei
列表所特有的样式
list-style-type:none/disc/circle/square/number/...;




改变元素的外边距，会影响周围的元素


十、定位：修改元素默认的位置，常用于实现复杂的布局定位
1、布局：默认流布局（同一层）
2、可能需要修改布局方式
3、float：不能实现精确的定位
4、相对定位
a、position:relative;
b、偏移属性：top/left/right/bottom:;同时出现，已top和left为先
精确的控制元素的位置
相对于元素原有的位置进行偏移
c、堆叠属性：z-index（）:;整数，可以正负
d、特点
分层、原有的位置保留
优点：精确的修改元素的位置
缺点：在页面上留下大量的空白区域
e、适用于的情况
移动距离小
配合其他定位方式

5、绝对定位
元素脱离文档流，不占据页面空间
通过定位属性定位元素的位置
1、相对于最近的已定位的祖先元素的起始位置
2、如果祖先元素中没有已定位的元素，那么他的位置相对于最初的包含块body
注意：绝对定位脱离的文档流，是允许压在其他元素之上
设置绝对定位
position:absolut；top/left/right/bottom
使用场合：弹出菜单



6、固定定位
a、position:fixed;
b、偏移属性：top/left/right/bottom:;
精确的控制元素的位置
相对于窗口元素原有的位置进行偏移
7、堆叠属性：z-index:;整数，可以正负
d、特点
分层、原有的位置不保留
优点：精确的修改元素的位置
做出固定的定位效果

e、适用于的情况
需要让元素固定在页面的某个位置
十一、表格
1、表格常用样式属性
1、内边距 padding
2、尺寸属性 width、height
设置表格或单元格尺寸
3、文本格式 color text-align text-decoration ...
4、背景属性
background-color background-image
5、边框属性
border
表格、单元格
6、文本垂直对齐方式
vertical-align：设置内容的垂直对齐方式
top middle bottom baseline（基线对齐）
2、表格特有样式属性
只有在表格中有效
1、边框合并
即设置了表格边框
属性：border-collapse 合并相邻边框
取值：separate（默认值，即分离）
     collapse
注意：该属性只能给table
2、边框边距
属性：border-spacing   设置相邻单元格之间的距离
注意：仅限于分离边框时可用 border-collapse：separate；
取值：
border-spacing：xx  xx
水平 垂直
3、显示规则 
属性：table-layout
作用：帮助浏览器如何显示或布局一张表格。用来设置单元格宽和高的算法规则
取值：
    auto：列的宽度由内容决定，默认值，即自动表格布局
    fixed：列的宽度由列宽设定，即固定表格布局
自动表格布局
1、 单元格大小会适应内容
2、表格复杂时，会比较慢（因为每行都要计算）
3、适用于不知道每列大小的时候
固定表格布局
1、列宽度以设定值为准，不以内容为准
2、会加速显示表格（以后的所有行都不需要计算）
固定表格布局算法比较快，但不太灵活
自动表格布局比较慢，但是更能体现表格的特点
十二、显示
1、显示方式
display:
取值：none
让生成的元素没有框
生成的元素不显示，而且不占文档的空间   隐藏
     block
按块级元素显示
     inline
按行内元素显示
     inline-block
行内块
特点：一行内可以显示多个，并且允许修改元素的宽和高
注意：页面中，通常使用display：none；设置元素的隐藏。先显示的时候，再将display改成元素默认的显示方式。
2、显示效果
1.显示隐藏
属性： visibility 可见性
取值：visible：默认值，元素可见
     hidden：元素不可见，但是依然占据空间
     collapse：用在表格中。
2.透明度
  属性:opacity
取值：0-1之间的小数
3、垂直对齐方式
vertical-algin
注意：设置图片的vertical-align：非baseline以外的其他值，可以解决下边多3px的问题
3、光标
属性：cursor
取值：
default：默认
pointer：小手
crosshair：+
text：I
wait：浏览器版本决定。目前是光圈
help：？









编写顺序：结构、宽度、边框、边距、水平居中和背景色