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- position : absolute
- 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%;
}
网友评论