AirJD 焦点
AirJD

没有录音文件
00:00/00:00
加收藏

要漂亮很容易-超简单CSS速成教程 by 沉鱼

发布者 csser
发布于 1440756168743  浏览 2804 关键词 CSS, 前端 
分享到

第1页

要漂亮很容易!
超简单CSS速成教程
#沉鱼{
department: UED;
post: fed;
blog: “http://fool2fish.cn”;
}
学员调查:
1、对html和css有着最基础的了解,知道它们的语法
2、能看懂大部分的css代码
3、能手写css,解决大部分的样式问题
4、几乎能搞定所有的样式问题

你觉得写css最难的是?

第2页

1990~1993年,HTML
<font size=“+3” color=“red”>text</font>
1995年,CSS草案
1996年,CSS1
1998年5月,CSS2
2001年5月,CSS3草案
1 CSS简史
1、1990~1993年,HTML最初被设计成一种结构化标记语言,用于描述文档内容,没有太多考虑文档的展现形式。
2、随着网站的大量涌现,用户对网页外观的需求迅速提升,之类的标签开始加入HTML。
HTML3.2时代:结构和样式混杂的时期,Text

人们需要这样一种页面:结构化的内容和灵活的页面展现。很快,W3C组织开始寻求解决方案。
3、1995年,公布CSS草案。
4、1996年,形成完整的CSS1标准,并逐渐成为和HTML重量相当的语言。
5、1998年5月,W3C组织推出了CSS2,使得这项技术在世界范围内得到广泛的支持。CSS2成为了W3C的新标准。同时,W3C CoreStyle和CSS2 Validation Service 以及CSS Test Suite宣布成立。它是一组样式,样式中的属性在HTML元素中依次出现,并显示在浏览器中。样式可以定义在HTML文件的标志(TAG)里,也可以在外部附件文件做为外加文件。此时,一个样式表可以用于多个页面,甚至整个站点,因此具有更好的易用性和扩展性。
6、2001年5月,CSS3草案

第3页

2 CSS是什么
表现力丰富的
描述的
Cascading style sheet
易于使用的
可复用的
层叠的

第4页

h1  {
color : #444 ;
font-size : 18px ;
font-family : ”微软雅黑”;
}

第5页

选择器位于CSS语句块的左侧,用于定义语句块将影响到的DOM节点
选择器的类型
选择器的组合
选择器的层叠
选择器的优先级
3 选择器

第6页

普通选择器:#id ,  .class ,  tag 
伪类: a:link,  a:visited{}a:hover,  a:active{}
属性选择器:  input [ type = “radio” ]
高级伪类:  .box : first-child {}
3.1  选择器的类型

第7页

div.box
a.hot-news:hover, a.hot-news:active{}
.box.latest-news
input#user-name
3.2  选择器的组合

第8页

请确保页面内id唯一
!

第9页

body .hd h3.title{…}
.box .hd h3{…}
.box .title{…}
.box .hd .title{…}
h3{color:#f60}
3.3  选择器的层叠
<div class=“box”>
    <div class=“hd”>
        <h3 class=“title”>
             Title
        </h3>
    </div>
</div>

第10页

[ 0 , 0 , 0 , 0 ]
3.4  选择器的优先级
#id
tag
.class , 伪类,属性选择器 
  层叠选择器中,每个单选择器都可以在对应的位上+1
  优先级比较由左至右进行

第11页

简单来说:
#id > .class > tag
层叠层级多的优先级高
同样的选择器,位于后面的优先级高
3.4  选择器的优先级

第12页

常用CSS属性
CSS属性的简写
CSS属性的继承
4 CSS属性

第13页

display 
position , left , right , top , bottom , z-index
float , width , height , overflow
margin , padding
font , line-height , color
border , background
4.1  常用CSS属性

第14页

margin-left:10px ; margin-right:10pxmargin: 0 10px;
border-color:#ccc ; border-style:solidborder:1px solid #ccc;
background-color:#f2f2f2 ; background-image: url()background:#f2f2f2 url() no-repeat 0 0;
4.2  CSS属性的简写

第15页

父节点中定义的某些属性,将遗传给子节点,除非子节点本身有定义该属性(包括浏览器定义的默认样式)。
这些可被继承的属性定义几乎都是文本相关,比如:color, font之类。
4.3  CSS属性的继承

第16页

Id和class的命名
模块化
属性声明顺序
其他事项
5 推荐书写习惯

第17页

用于CSS的id和class首字母小写,中划线链接,例:latest-news
用于js的id和classS_前缀,首字母大写,驼峰,例:S_LatestNews
CSS尽量不占用id
5.1 id和class的命名

第18页

.news{}
.news .hd{}
.news .title{}
5.2  模块化
<div class=“box news”>
    <div class=“hd”>
        <h3 class=“title”>
             Title
        </h3>
    </div>
</div>

第19页

display 
position , left , right , top , bottom , z-index
float , width , height , overflow
margin , padding
font , line-height , color
border , background
5.3 属性声明顺序

第20页

不使用通配符*
不定义全局样式,如直接给tag指定样式
注意继承的影响
使用.class来选择要定义样式的DOM节点
5.4 其他事项

第21页

浏览器默认样式
浏览器兼容性
慎用hack
6 浏览器相关

第22页

每个浏览器会根据自己对HTML标签的理解,默认给某些标签设置CSS样式
通常我们并不需要使用这些默认样式,所以会引入重置样式,将所有的与设定样式换成我们需要的
6.1  浏览器默认样式

第23页

浏览器面世的时候,支持的CSS版本不同
浏览器开发商对同一个属性值的理解不同
6.2  浏览器兼容性
淘宝前台页面兼容:ie6+,firefox,chrome
如果是后台页面,可酌情考虑不支持ie6

第24页

.box{
width:100px; /* for all */
*width:120px; /* for ie7 */
_width:140px; /* for ie6 */
}
尽量遵循标准书写CSS,避免无谓的hack
6.3  慎用hack

第25页

  IE8 – F12
  Firefox – F12 (需安装Firebug插件)
  Chrome – Ctrl+Shift+I
  ietester
7 调试工具

第26页

CSS速查手册http://www.52css.com/css/
淘宝网后台页面模块范例http://fed.ued.taobao.net/2010/shine/components/index.html
淘宝网后台页面模块APIhttp://fed.ued.taobao.net/2010/shine/docs/api/index.html
CSS权威指南


8 参考资料
支持文件格式:*.ppt, *.pptx, *.pdf
上传最后阶段需要进行在线转换,可能需要1~2分钟,请耐心等待。