CSS（一）

css概念

层叠样式表，是一个用于修饰文档的语言，可以将文档以更优雅的形式呈现给用户。

css在html中使用的三种方式

1. 外部样式表：将CSS文件写到一个 .css 为后缀的文件中，然后使用html中的link标签将css文件应用到html文档中。
2. 内部样式表：将css规则写到style标签中，即将样式添加到head标签中的style标签中。
3. 行内样式表：将css的规则写到元素的style属性中，只能作用于该元素，一般不推荐使用。

css语法

1.注释：/* */

2.选择器

2.1 核心选择器

    标签选择器 	
		eg:div {}
	id选择器（#）
		eg:#one {}
	class选择器（.）
		eg:.second {}
	逗号选择器
		eg:div,#one {}
	组合选择器
		eg:div#one {}
	普遍选择器（*）
		eg:*	一般不单独使用

2.2 层次选择器

	子元素选择器
		eg:.nav > ul > li {}
	后代选择器
		eg:.nav li {}
	下一个兄弟选择器
		eg:.products > li.ios + *{}
	之后所有兄弟选择器
		eg:.products > li.ios ~ *{}

2.3属性选择器,过滤（表单元素）

	selector[]
	input[placeholder]       选中input中有提示语的
	input[type=text]         选中input中的type属性值为text的
	input[type^=t]           选中input中的type属性值以t为开头的
	input[type$=t]           选中input中的type属性值以t为结束的
	input[type*=t]           选中input中的type属性值中包含t的

2.4 伪类选择器,过滤器

	与状态相关
		:link  		a标签还未被访问
		:hover 		光标悬浮到元素上
		:active 	a标签激活
		:visited 	a标签访问过
	与子元素相关
		:first-child      第一个孩子
		:last-child
		:nth-child(v)
			v 为数字，公式，关键字
		:first-of-type    每个类型里面的第一个孩子
		:last-of-type
		:nth-of-type

2.5 伪元素选择器

	::after
	::before
	会产生副作用：在dom节点中产生一个新节点

2.6选择器优先级

1. 是否具有!important声明
2. 选择器权重
   1000 定义在标签style属性中
   100 id选择器
   10 类选择器，伪类选择器，属性选择器
   1 元素选择器,伪元素选择器
3. 选择器权重相同时，后者覆盖前者（就近原则，哪一个样式离标签近，哪一个就生效）
   eg:
   #one >input[type=‘text’] {
   color:red;
   }
   <input type=“text” style=“color:blue”
   权重为：100 + 1 +10 = 111
   顺序：
   !important > id选择器 > 类选择器=伪类选择器=属性选择器 > 元素选择器=伪元素选择器

3.规则

3.1 字体样式(可以被继承)

  font-family:"微软雅黑","Microsoft YaHei","宋体",serif;
  font-size:12px;		字体大小  (浏览器默认字体为16px)
  font-weight:bold;	字体粗细 取值如下：
		normal
		bolder
		100~900
  font-style:normal;	是否开启斜体   （默认不开启）
		      italic
  line-height:2em; 行高【文本垂直居中】
  速写  font:style weight size/line-height family;
		eg：italic bold 12px/2em 'Microsoft YaHei',serif

• 网络字体
  主要用于字体图标库（iconfont/fontawesome）
  使用步骤：
  1) 在iconfont网站中选择图标，加入项目，产生代码
  2) 将产生的代码在html中通过link引用 http://at.alicdn.com/t/font_1328534_f3dyyeuoew.css
  3) 应用css中定义好的类，来使用对应的图标

3.2文本样式(可以被继承)

 color:#333; 		字体颜色
 text-align:center	【文本水平居中】
 text-decoration-line  文本装饰线 取值如下：
		underline
		line-through
		overline
		none
 text-decoration-style  文本装饰类型
		solid
		dotted
		double
		dashed
		wavy
 text-decoration-color  文本装饰颜色
 text-decoration:none;	字体装饰速写：无
 text-indent:2em; 			文本缩进
 text-shadow:12px 2px 3px #ccc;     文本缩进

3.3 列表样式（不会被继承）

 list-style-type
		circle
		square
		...
 list-style-image
		url('')
 list-style-position
		outside
		inside
   list-style:none;     速写

3.4盒子样式(用于修饰盒子，块元素，不会被继承)

• 盒子计算方式
  1.box-sizing:content-box;内容盒子（传统盒子）
  width = 内容宽
  height = 内容高
  所占的宽 = border + padding + width
  所占的高 = border + padding + height
  2.box-sizing:border-box;边框盒子（怪异盒子）
  width = 边框以内所有的和
  width = border + padding + 内容宽

• 一个盒子的组成：
  外边距 margin
  边框 border
  内边距 padding
  内容 存放子元素或者内容的区域

   margin   外边距
    	margin:10px;		上右下左	
    	margin:0 10px; 	上下为0，左右10px
    	margin:0 5px 10px; 	上0，左右5px，下10px
    	margin:0 5px 10px 15px; 	上右下左	
   border:1px solid #ededed;  边框速写
   padding   内边距
   box-shadow: 5px 5px 10px #ccc;   边框阴影速写
   border-radius 	圆角半径
   background-origin 	背景铺设的起点
    	border-box 		边框下
    	padding-box 	内边距下
    	content-box 	内容下
   background-image 		背景图片
    	url
   background-repeat 	背景重复方式
    	repeat-x
    	repeat-y
    	no-repeat
   background-color 		背景颜色
    	颜色
   background-position 背景位置
    	center
    	top left
    	10px 20px
   background-clip 		背景裁切方式
    	border-box 		边框下
    	padding-box 	内边距下
    	content-box 	内容下     
   background 					背景速写
    	background:url('') no-repeat center;
    	background-size:cover;
    	或
      background:center/cover padding-box url('') no-repeat ;
  

未完待续~~~