css笔记整理

软件
DW
编译代码的软件
PS
切图 修图
浏览器
chrome 谷歌
firefox 火狐 FF
IE

设计
出设计图的
前端
还原设计图
后台
内容 数据

DW的操作
新建 ctrl + n
保存 ctrl + s
查看 F12/Fn + F12
浏览器的操作
刷新
F5/Fn + F5

在页面中 多个换行或者空格都当做一个空格来处理

标签
标题标签
h1
段落标签
P 有默认间距
换行标签
br
链接标签
a
<a href="网址"></a>
<a href="#"></a>
提示文字
title="我想提示的文字"
图片标签
img

当宽高给一个值的时候 等比缩放
title
无论图片是否路径正确 都会显示
alt
只有当图片路径错误的时候才会显示
width
宽度
height
高度
border
边框
空标签
div
双标签
<h1></h1>
<p></p>
<a href="#"></a>
单标签
<br />

属性
公有属性
title
私有属性
border alt width height src
href
css
使样式更丰富
style="样式名：样式值;"
; 代表结束
px 单位
color 颜色
英文
yellow
十六进制
#ccff34(推荐使用)
简写
#00 99 cc 09c
#32bf5p
#ff0000 f00 红色
#666666 666
#000000 000 黑色
#ffffff fff 白色
rgb
rgb(0-255,0-255,0-255)
边框
border
width style color
2px solid(实线) red
dashed（虚线）
dotted（点划线）
border-left 左边框
border-right 右边框
border-top 上边框
border-bottom 下边框

文本水平对齐方式
text-align
left 左
right 右
center 中
line-height
当它的值等于高度的值得时候 垂直居中

ps的操作
放大 ctrl +++++
缩小 ctrl —————
放大/缩小 alt + 滚轮
拖动图片 空格+鼠标
修改选区 空格+鼠标
选区快捷键 m
查看信息 F8
复制 ctrl + c
新建 ctrl + n
粘贴 ctrl + v
保存成jpg
ctrl+t 把图片上面的东西抹掉
用移动工具选择图 用选框工具选中在复制；
透明的图{新建的时候背景选透明} PNG 不透明的 JPG
ctrl+h 把所有的线去掉
路径
相对路径
background-image:url(images/xue.jpg)；
绝对路径
background-image:url(file:///E|/2016-9-26%20%E5%85%A8%E6%97%A5%E5%88%B6%20css/2016-9-27/images/xue.jpg);

windows
    /\
linux
    /
    都要用/

background-color 背景颜色
background-image 背景图片
background-repeat 背景重复
background-position 背景定位
background-position:
数字(x y)
英文
只给一个值的时候 第二个值默认居中
标签
span空标签 没有样式
i，em 倾斜标签
i
倾斜标签
em
倾斜标签
b
加粗标签
strong
加粗标签
span
正常标签

xhtml规范
必须有文档头
img标签必须有alt
双标签必须闭合
单标签必须合理闭合
标签名和标签属性必须小写
标点符号必须用英文 引号必须用双引号

charset
字符集
utf-8 国际编码
gb2312/gbk 中国编码
author 作者
copyright 版权
keywords 关键词
description 介绍

font-style:normal;
取消斜体
italic
斜体
font-weight:normal;
取消加粗
bold
加粗
font-size
字体大小
font-family
字体
中文
英文
unicode

background：url() repeat left center #00;
font:italic bold 24px '楷体';
font:italic bold 24px/200px '楷体';

块元素
div p h1-h6 ul li ol dl dt dd
支持宽高
独占一行
不受换行和空格的影响
当不给宽度的时候宽度参照父级
行内元素
span a i em strong b
不支持宽高
合并到一行
受换行和空格的影响
宽高由内容撑开
行内块
img
支持宽高
合并到一行
受换行和空格的影响
查看元素
F12
去除下划线
text-decoration:none;
增加下划线
text-decoration:underline;
增加上划线
text-decoration:overline;
增加中划线
text-decoration:line-through;

选择器
标签选择器
div{}
类选择器 class="baidu"
.baidu{}
id选择器 id="baidu"
#baidu{}
同样的ID在页面中只允许出现一次
群组选择器
div,p,span{}
嵌套选择器
div p span{}
通配符
*
给所有标签加样式

html注释

css注释
/* */
js注释
//

省略号
white-space:nowrap; 强制不换行
overflow:hidden; 溢出隐藏
text-overflow:ellipsis; 省略号
font-family:'微软雅黑'
必须给宽度
转化
display:block 把当前元素转化成块元素
display:inline 把当前元素转化成行内元素
display:inline-block 把当前元素转化成行内块元素
行内元素即使转化成块 也不能包块
嵌套规则
块元素能包所有标签
p标签只能包行内 不允许包块
行内元素只能包行内 不能包块
行内元素不能包自己
a能包所有的标签 但是不能包自己
img可以被所有标签包
（伪类）别的标签也能用；
a:link 未访问
a:visited 访问过后
a:hover 当鼠标放上去的时候
a:active 点鼠标点击的时候
顺序 l v h a
继承
只有和文字相关的样式才能继承
b strong h1-h6不能继承加粗
i em不能继承倾斜
a不能继承颜色

margin 外边距/外补白
四个方向
left 左边距
right 右边距
top 上边距
bottom 下边距
margin拖拽
.div1{margin-top:20px;}
<div class="box">
<div class="div1"></div>
</div>
解决
给父级box一个border
给父级box一个overflow:hidden
给父级用padding 同时父级减去高度的值
margin合并
上下取最大值 左右不合并，相加。
块元素支持四个方向
行内元素支持左右
给一个值的时候 上 右 下 左
两个值 上下 左右
三个值 上 左右 下
四个值 上 右 下 左

无序列表
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
有序列表
<ol>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
定义列表
<dl>
<dt></dt> 标题
<dd></dd> 内容
</dl>
语义化
h1-h6 标题
p 段落
a 链接
img 图片
ul 无序列表
ol 有序列表
dl 定义列表
strong 强调
em 强调
无语义化
div span i b

字体英文
宋体：SimSun
微软雅黑体：Microsoft YaHei
楷体：KaiTi
黑体：SimHei
padding
内边距/内补白
padding-top 上内边距
padding-left 左内边距
padding-right 右内边距
padding-bottom 下内边距
给一个值的时候 上 右 下 左
两个值 上下 左右
三个值 上 左右 下
四个值 上 右 下 左
块元素支持四个方向的padding
行内只支持左右 不支持上下

优先级/权重
id class 标签
1000 100 10

行间样式>id>class>标签>*

浮动
合并到一行 同级元素最好都浮动
脱离文档流
宽度尽可能的窄 窄到内容的宽度（不给宽度）
行内会变成块
文本环绕
宽度不够掉下来
尽可能的往上飘（高度和位置是根据前一个判定）
浮动有方向
float
left; 左浮动
right; 右浮动
none
清除浮动 overflow:hidden;

清浮动
overflow:hidden 加给父级
在同级元素下面加一个空的div 给div clear:both;

---

终极版清浮动：（必须都用这个）
.clearFix:after{ display:block; content:''; clear:both;}
.clearFix{ zoom:1;}

必须写的默认样式
*{ margin:0; padding:0;}
li{ list-style:none;}
a{ text-decoration:none;}
img{ display:block;}
.clearFix:after{ content:''; display:block; clear:both;}
.clearFix{ zoom:1;}
.fl{ float:left;}
.fr{ float:right;}

<link type=" text/css" href="" rel="stylesheet" />

index 首页
base 里面写清除默认样式的

text-indent 首行缩进
em 1em等于一个字符
px 正常的像素值
可以为负值
最好不要给超过7位数

a不回头部 a href="javascript:;"

cursor:pointer; 小手

定位
position:
relative; 相对定位
1.相对于自己定位
2.不脱离文档流
3.不改变元素的本质

    absolute;   绝对定位
        1.脱离文档流
        2.如果说父级有定位 它参照父级 否则参照body
        （逐层往上找）也就是（一层一层往上找）
        3.宽度尽可能尽可能的窄 窄到内容的宽度
        4.行内变成块
层级
    z-index：2的32次方
    z-index必须在有定位的时候才好使
    后写的层级比先写高
    子级在父级上面
局对居中
    div{ width:200px; height:200px; background:#f00;

position:absolute; left:50%; top:50%; margin-left:-100px; margin-top:-100px;}
position:absolut; left:50%; top:50%;
margin-left:-width/2; margin-top:-height/2;
display:none; 隐藏
display:block; 显示
透明度
opacity:(0-1)
filter:alpha(opacity:0-100)

固定定位
position:fixed;
脱离文档流
行内变成块
宽度尽可能的窄 窄到内容的宽度
根据可视区域定位
雪碧图
记得给负值
减少请求

表单提交
form
    action="网址"
method
    get     不安全
    post    相对安全

如果说你想提交 那么你就要加name

value   提示
input
    type
        text    文本框
        password    密码
        submit  提交（一般提交/保存 用）
        button  按钮（一般 取消/等 用）
        radio   单选框         label
            name（需要一样）  for=“id”
            id
            value
        checkbox

            {checked="false" 不选中 
                 "true" 选中 
                 "checked" 默认选中}    
            多选框 label
            name            for=“id”
            id
            value
        hidden  悄悄话
        image   图片
        file    上传
        
        value 提示
        placeholder 提示
    select
        option  加value  兼容
input
outline:none;   取消焦点
textarea
    resize:none;    不可拖拉




表格
    table
        thead   表头
            tr
                th
        tbody   表身
            tr
                td
        tfoot   表尾
            tr
                td
    cellspacing="0" cellpadding="0" 清除间距
    border-collapse:collapse;   合并单元格
    colspan 横向合并
    rowspan 纵向合并

    valign垂直对齐
        middle  居中
        top         上
        bottom      下

     align水平对齐
        center  中
        left    左
        right   右
默认左右居左 上下居中

框架
iframe
src="网址"
width
height
frameborder="0" 取消边框
scrolling="no" 取消滚动条
框架集
frameset
frame
src=""
有frameset就没body 他俩不能共存
frameborder加在frameset身上 取消边框
scrolling加在frame身上 取消滚动条
src后面的东西src="网址/本地"
src里面所引用的东西 必须是存在的

事件：
onclick 当点击的时候
on 当
click 点击
onmouseover 当鼠标移入的时候
onmouseout 当鼠标移出的时候
alert
弹警示框
.
的
document 文档
get Element By Id ('div1') 通过id来获取元素
获取 一个元素 通过 Id div1

document. get   Elements   By     Tag    Name
            获取 一组元素 通过   标签     名字

function(){}    匿名函数
var     变量
    var 隔壁老王  =  王明阳

=
    赋值
window.onload
        页面加载完成再加载
if(我有钱){
    我就吃两个馒头

}
else{
    不吃
}

循环
var
while(){

}
length  长度
this    当前的

sass
预解析处理器
用程序的写法来写css
变量
$r:red;
$w:200px;
$h:400px;
$ta:center;
嵌套
.box
{ width:$w;
p{ height:$h;
span{ color:$r;}
}
}
继承 @extend
.div1{ width:300px; height:$h; color:$r;}
.div2{ @extend .div1;}
混合宏

@mixin aaa($a,$b){
    width:$a;
    height:$b;
}
.nav{ @include aaa((20 - 6)px,500px);}

@media screen and (max-width:900px){}
媒体 屏幕 最大

<link href="css/bootstrap.min.css" rel="stylesheet" />
<script src="js/jquery-1.7.2.js"></script>
<script src="js/bootstrap.min.js"></script>

盒子模型
width height border padding
width:200px;
height:200px;
border:7px solid #f00;
padding:11px