By CaesarChang
~关注我 带你看更多精品技术和面试必备
什么是CSS?
CSS 指层叠样式表 (Cascading Style Sheets)
样式层叠次序
1. 浏览器缺省设置
2. 外部样式表
或者
3. 内部样式表（位于标签内部）
4. 内联样式（在 HTML 元素内部）
内联样式（在 HTML 元素内部）拥有最⾼的优先权
注释:
/* ... */
选择器:
1.标签选择器
语法：标签名{ }，
eg：h1{ }//为所有的h1元素设置样式。
2.ID选择器
语法：#id名{ } //id值唯一不能重复
,eg: #top{ }//为id为top的元素设置样式。
3.类选择器
语法：.class{ },
eg：.box{ }//为所有的class值为box的元素设置样式。
4.组选择器
语法：选择器1，选择器2，选择器N{ },
eg:#box1,.box2,p{ }//为id为box1，class为box2和p的元素共同设置样式。
5、通配符选择器
语法： * { }，
eg：*{font-size：16px}//将整个页面字体大小设为16px。
6.后代选择器
语法： 选择器1 选择器2{ }，
eg：p.aa{}//选中指定祖先元素p的指定后代.aa。
7.子元素选择器
语法：父元素>子元素{ },
eg：p>.box{ }//选中父元素p的指定子元素.box。注意与后代元素选择器的区别
8.伪类选择器
：link-未访问过的超链接。
：visited-已访问过的超链接。
：hover-鼠标经过的元素。
：active-正在点击的元素。
eg：a:hover{color:red}//鼠标经过a标签时，颜色变为红色。
9 CSS3中的选择器:
CSS选择器的优先级顺序
!important会覆盖页面内任何位置定义的元素样式。
2.内联的< 标签 style="属性: 值">样式
3.id选择器
4.类选择器
5.标签选择器
6.通配符选择器
7.浏览器自定义或继承的
CSS常⽤属性
1 尺寸 颜色
2 字体
3 文本
4 背景属性：background
5边框
6 * 内补⽩（内补丁）
.7 * 外补⽩（外补丁）
8 Position定位
9. Layout布局
.10 Flexible Box 弹性盒⼦(新版)
多栏
过度:
动画:
其他:
字体
阿里:
- 登录http://www.iconfont.cn/ 阿里巴巴矢量图标库，github或微博登录
- 选择喜欢的图标添加入库
- 然后点击右侧购物车，点击最下面的‘下载代码’按钮，下载保存到本地，解压即可得到需要的
- 拷贝项目下面生成的font-face（注意路径)
/* 声明字体 */
@font-face { /* 引用字体文件（注意路径）format告诉浏览器这些字体文件以什么格式解析 */ font-family: 'iconfont'; src: url('iconfont.eot');/* IE9*/ src: url('iconfont.eot?#iefix') format('embedded-opentype'),/* IE6-IE8 */ url('iconfont.woff') format('woff'),/* chrome, firefox */ url('iconfont.ttf') format('truetype'),/* chrome, firefox, opera, Safari, Android, iOS 4.2+*/ url('iconfont.svg#iconfont') format('svg');/* iOS 4.1- */ }
.iconfont{ font-family:"iconfont" !important; font-size:16px;font-style:normal; -webkit-font-smoothing: antialiased; -webkit-text-stroke-width: 0.2px; -moz-osx-font-smoothing: grayscale; }挑选相应图标并获取字体编码，应用于页面
<i class="iconfont">3</i>
接线来请移步 javaScirpt吧 点我进入
点个赞呗 么么哒 !
