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

AirJD

没有录音文件

00:00/00:00

加收藏

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

发布者 csser

发布于 1440756168743 浏览 7151 关键词 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 参考资料