web开发学习之旅---css第一天

1、css全称

• Cascade Style Sheet层叠样式表

2、css引入方式

• 行内样式：<h2 style="color:#0F0">Hello World</h2>
• 内部样式：

  <style type="text/css">

   h2{color:#F00;}

  </style>

• 外部样式：方式1：<link href=“a.css”  type=“text/css” rel=“stylesheet”/> （推荐）, 方式二：<style type="text/css">@import url("a.css");// @import “a.css”;</style>
• 优先级：行内样式  > 内部样式 > 外部样式   就近原则
• link和@import的区别：一、@import只能引入31次css文件 二、当页面被加载的时候，link引用的CSS会同时被加载，而@import引用的CSS 会等到页面所有被下载完再被加载。因此有时候浏览@import加载CSS的页面时开始会没有样式，而后忽然样式会出现，网速慢的时候还挺明显。三、因为@import是CSS2.1提出的，@import只有在IE5以上的才能识别，而link标签无此问题

3、css选择器

• 标记选择器，如：h2{color:red;}
• 类选择器，如：.a{color:red;}
• id选择器，如：#a{color:red;}
• 优先级：id选择器>类选择器>标记选择器

4、理解 !important

• 默认状况下,CSS规则按级层覆盖，例如在.CSS文件中的定义能够被style标签的定义覆盖，反之则不行。然而,对覆盖平衡而言,加上一个“!important”就优先于正常的CSS规则。例如：box{color:red !important;}
• ie7,ie8,firefox,chrome等高端浏览器下，已经能够识别 !important属性， 可是IE 6.0仍然不能彻底识别

5、盒子模型

• border
• padding
• margin

6、行内元素/块元素

• 行内元素：span等
• 块元素：div、h1~h六、p、ul、ol、table、hr等
• 二者之间转换:display

7、overflow属性

• 设置当对象的内容超过其指定高度及宽度时如何管理内容

8、visibility VS display属性

• visibility 该属性主要是为了隐藏和显示元素,<p style="visibility:hidden">第一段落</p> 隐藏p，占位置。
• display 该属性主要是为了隐藏和显示元素，<p style=" display:none;">第一段落</p> 隐藏p，不占位置。

9、css浮动

• 使块级元素并排，float:left; float:right；
• 清除浮动：clear:both;

10、绝对定位、相对定位

• 绝对定位：position:absolute; 相对于的是窗体的位置。
• 相对定位：position:relative;至关于的是其父元素的位置。

11、z-index

• CSS 中的 z-index 属性用于设置节点的堆叠顺序, 拥有更高堆叠顺序的节点将显示在堆叠顺序较低的节点前面, 这是咱们对z-index 属性广泛的认识.

12、滤镜

• css滤镜的标识符是“filter”，整体的应用上和其余的css语句相同
• 网站变灰：

       <style>html{filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);}</style>

       <style type="text/css">html {filter: gray}img{filter:gray;}</style>

 

十3、background

• background-image
• background- repeat
• background-position

软谋在线教育，最适合大学生、上班族的在线软件培训，主要教授asp.net动态网站制做，yy教育房间远程实时授课，每节课录制成高清视频课后分享，老师白天八小时全职在线辅导，不懂就问。加qq群：138800420 便可免费试听。