HTML + CSS 学习二： CSS 样式表

CSS全称为“层叠样式表 (Cascading Style Sheets)

主要用于定义样式，如要文字大小、颜色、字体加粗等。

/* 注释文字 */
p {
   font-size:12px !important; /* 最高权限 */
   color:red;
   font-weight:bold;
}

css 样式由选择符和声明组成，而声明又由属性和值组成，如下图所示：

CSS代码语法

selector : HTML 中的标签就是，如 *, head, body,h1,h2,p,a, table, image，或者ID 选择器 id # 和 类选择器class .
声明：在英文大括号{ }中的的就是声明，属性和值之间用英文冒号

CSS注释代码 `/* 注释文字 */`

插入外部css样式

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

直系子选择器 `>`，选择food中的li直系子元素

.food>li{border:1px solid red;}

包含(后代)选择器 `空格` 选择first类中所有的`span`

.first  span{color:red;}

Font 声明

font-family:"Microsoft Yahei"; / * 字体 */
font-size:16px/1em; /* 
字体大小, px 是像素，em是可缩放单位，
等同于当前文档申明的像素大小，
如果当前文档写了 font-size: 12px，
那么1em就是12px. 
然后文档内的子标签中所有的1em 都为12px
 */
color: "335566"/ "356"; / * 字体颜色 */
font-weight: bold/16px; /* 粗体 */
font-style:italic; /* 斜体 */
text-decoration:underline;  line-through;  /*下划线, 删除线*/
text-indent:2em; /* 缩进 */
line-height:1.5em; /*行间距（行高), 当此属性与Height相同时，文字垂直对齐*/ 
 letter-spacing:50px; /* 文字间隔或者字母间隔 */
 word-spacing:50px; /* 英文单词之间的间距*/
 text-align:left/center/right; /* **块状元素**中的文本、图片设置居中样式 */

元素分类

block 块状元素、内联元素(又叫inline 行内元素)和inline-block内联块状元素。

** block 块状元素**:
- display: block 将元素设置为块元素
- 每个块级元素都从新的一行开始 (占一行，在不设置flow的情况下)
- 高度、宽度（在不设置情况下为父无不100%）、行高以及顶和底边距都可设置
- 常用的块状元素有：
  <div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
inline 行内元素：

display: inline 将元素设置为内联元素
和其他元素都在一行
元素的高度、宽度及顶部和底部边距不可设置；
<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

inline-block 内联块状元素有：

display:inline-block 将元素设置为内联元素
和其他元素都在一行上
元素的高度、宽度、行高以及顶和底边距都可设置。
<img>、<input>
当元素设置任一以下属性时，display会自动变为inline-block
1. position : absolute
2. float : left 或 float:right

块元素的盒模型

div 盒模型

border: 1px solid red;
width:200px;
height: 200px
padding:20px; /* 内填充 上、右、下、左(顺时针) */
margin:10px;   /* 外边距 上、右、下、左(顺时针) */

css布局模型

流动模型（Flow）, 默认的网页布局模式

块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布
内联元素都会在所处的包含元素内从左到右水平分布显示

浮动模型 (Float)

块状元素这么霸道都是独占一行，如果现在我们想让两个块状元素并排显示, 设置元素浮动就可以实现这一愿望。

div{
    width:200px;
    height:200px;
    border:2px red solid;
    float:left; /*如果不设置此属性，div将占一行显示，而不能和其他元素并列*/
}
    ```
3. 层模型（Position: absolute, relative, fixed）
  * `position: absolute` 这条语句的作用将元素从文档流中拖出来，然后使用`left`、`right`、`top`、`bottom`属性相对于**其最接近的一个具有定位属性的父包含块**进行**绝对定位**。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口
  *`position: relative` 相对于移动以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定
    * 结合 `absolute` 来使用，如果把父元素设置为 `position: relative`，然后把子元素设置为 `position: absolute`, 就可以把子元素放在父元素内任何位置
  * `fixed`：表示固定定位，与absolute定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）,用来放头部菜单或者侧边广告栏
___
##### 水平居中设置
1. **inline 行内元素**, 如文字，通过给父元素加`text-align:center` 来设置水平居中
2. **block 定宽块状元素**, 必须要同时设置 `width` 和 `margin: auto` 来使块元素水平居中
3. **block 不定宽块状元素** 不定宽块状元素例如不确定的图像，导航菜单之类的块状元素如果需要居中的话
  * 加入 [table](http://www.imooc.com/code/292) 标签
  * 设置 [display: inline](http://www.imooc.com/code/2049) 方法：与第一种类似，显示类型设为 行内元素，进行不定宽元素的属性设置
``` html
<head>
<style>
 .container{text-align:center;}
 .container li{display:inline;}
</style>
</head>
<body>
<div class="container">
    <ul>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
    </ul>
</div>
</body>

通过给父元素设置 float，然后给父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left: -50% 来实现水平居中

.container{
    float:left;
    position:relative;
    left:50%
}
.container ul{
    list-style:none;
    margin:0;
    padding:0;
    
    position:relative;
    left:-50%;
}

HTML + CSS 学习二： CSS 样式表

CSS全称为“层叠样式表 (Cascading Style Sheets)

CSS注释代码 /* 注释文字 */

插入外部css样式

直系子选择器 >，选择food中的li直系子元素

包含(后代)选择器 空格 选择first类中所有的span

Font 声明

元素分类

块元素的盒模型

css布局模型

推荐阅读更多精彩内容

CSS注释代码 `/* 注释文字 */`

直系子选择器 `>`，选择food中的li直系子元素

包含(后代)选择器 `空格` 选择first类中所有的`span`