CSS+HTML入门基本常识

CSS+HTML入门基本常识

学习地址：http://www.imooc.com/learn/9

1.CSS引入
优先级内嵌式>嵌入式>外部式
内嵌式：写在html标签里，通常用style属性
嵌入式：写在同一个文件里，通常用text/css
外部式：将css独立写出.css文件，通常在head中用link标签引入

2.CSS选择器
ID选择器：#id{}
class选择器：.class属性{}
标签选择器：标签名{}
子选择器：父选择器+大于号>+子标签名{}
后代选择器：父选择器+空格>+子标签名{}
通用选择器：*{}
伪类选择器：比如a:hover{color:red;} 鼠标悬浮到A标签，样式变成红色
分组选择器：标签，标签，标签{}

3.CSS的继承，权值，层叠，重要性
1.样式覆盖，优先级，不是所有的样式都可以继承，比如border:1px
2.权值，ID选择器100，class选择器10，标签选择器1
3.层叠是根据权值来选择有效的CSS，权值一样选择后面的覆盖
4.重要性,在属性后面添加!important，比如：p{color:red!important;}
p{color:green;}这样选择加载red

4.CSS盒子模型
元素分为：块状，内联，内联块状
块状：比如div，table，h，form、ul，li，属性：display:block
内联：比如span，a，label，em，strong，属性：display:inline
内联块状：就是让一个标签同时拥有块状和内联的特性，属性：display:inline-block

margin：盒子与盒子之间距离叫做边界
div{margin:20px 10px 15px 30px;}和下面一样的，顺时针转，上右下左
div{
margin-top:20px;
margin-right:10px;
margin-bottom:15px;
margin-left:30px;
}
border：边框，盒子模型的边框就是围绕着内容及补白的线，这条线你可以设置它的粗细、样式和颜色(边框三个属性)。
div{
border-width:2px;
border-style:solid;
border-color:red;
}
dashed（虚线）| dotted（点线）| solid（实线）。

padding：填充，元素内容与边框之间的距离，与用法margin类似

CSS布局模型

1.流动模型

2.浮动模型

3.层模型
层模型分为：绝对定位，相对定位，固定定位

CSS代码简写

1.盒子代码简写
margin:10px;
padding、border的缩写方法和margin是一致的。

2.颜色值简写
p{color:#000000;}每2位一样可以简写到一位
p{color: #000;}

3.字体缩写
body{
font-style:italic;
font-variant:small-caps;
font-weight:bold;
font-size:12px;
line-height:1.5em;
font-family:”宋体”,sans-serif;
}缩写:
body{
font:italic small-caps bold 12px/1.5em “宋体”,sans-serif;
}
一般情况下因为对于中文网站，英文还是比较少的，所以下面缩写代码比较常用：
body{
font:12px/1.5em “宋体”,sans-serif;
}

CSS单位和值

颜色值

1.英文命令颜色
p{color:red;}

2.RGB颜色
p{color:rgb(133,45,200);}或者p{color:rgb(20%,33%,25%);}

3.十六进制颜色
p{color:#00ffff;}

长度值:目前比较常用到px（像素）、em、% 百分比，要注意其实这三种单位都是相对单位。

1.像素
像素为什么是相对单位呢？因为像素指的是显示器上的小点（CSS规范中假设“90像素=1英寸”）。实际情况是浏览器会使用显示器的实际像素值有关，在目前大多数的设计者都倾向于使用像素（px）作为单位。

2.em
就是本元素给定字体的 font-size 值，如果元素的 font-size 为 14px ，那么 1em = 14px；如果 font-size 为 18px，那么 1em = 18px。如下代码：
p{font-size:12px;text-indent:2em;}

3.百分比
p{font-size:12px;line-height:130%}
设置行高（行间距）为字体的130%（12 * 1.3 = 15.6px）

CSS小技巧—百度

1.水平居中设置(行内元素)
行内元素:通过在父容器上添加样式text-align:center;

2.水平居中设置(定宽块状元素和不定宽块状元素)
当被设置元素为块状元素时用text-align：center就不起作用了，这时也分两种情况：定宽块状元素和不定宽块状元素。

(定宽块状元素：块状元素的宽度width为固定值。)
满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的。我们来看个例子就是设置 div 这个块状元素水平居中：

<style>
div{
    border:1px solid red;/*为了显示居中效果明显为 div 设置了边框*/
    width:200px;/*定宽*/
    margin:20px auto;/* margin-left 与 margin-right 设置为 auto */
}
style>

(不定宽块状元素：块状元素的宽度width不固定。)
在实际工作中我们会遇到需要为“不定宽度的块状元素”设置居中，比如网页上的分页导航，因为分页的数量是不确定的，所以我们不能通过设置宽度来限制它的弹性。

不定宽度的块状元素有三种方法居中（这三种方法目前使用的都很多）：

1. 加入 table 标签
2. 设置 display: inline 方法：与第一种类似，显示类型设为 行内元素，进行不定宽元素的属性设置
3. 通过给父元素设置 float，然后给父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left: -50% 来实现水平居中。

.wrap{
    background:#ccc;
    /*display: table;
    margin: 0 auto;*/
    display: inline;

}
body{
    text-align:center;
}

3.垂直居中

隐性改变display类型

有一个有趣的现象就是当为元素（不论之前是什么类型元素，display:none 除外）设置以下 2 个句之一：
1. position : absolute
2. float : left 或 float:right
简单来说，只要html代码中出现以上两句之一，元素的display显示类型就会自动变为以 display:inline-block（块状元素）的方式显示，当然就可以设置元素的 width 和 height 了，且默认宽度不占满父元素。