codecamp

CSS编程快速入门教程

一、什么是CSS?


  • CSS 指层叠样式表 (Cascading Style Sheets)

  • 样式定义如何显示 HTML 元素

  • 样式通常存储在样式表

  • 把样式添加到 HTML 4.0 中,是为了解决内容与表现分离的问题

  • 外部样式表可以极大提高工作效率

  • 外部样式表通常存储在 CSS 文件

  • 多个样式定义可层叠为一

开始学习什么是CSS

二、基本语法规范

分析一个典型CSS的语句:

p {COLOR:#FF0000;BACKGROUND:#FFFFFF}
  • 其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式;
  • 样式声明写在一对大括号"{}"中;
  • COLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔;
  • "#FF0000"和"#FFFFFF"是属性的值(value)。
开始学习CSS语法规范

三、颜色值

颜色是由红(RED),绿(GREEN),蓝(BLUE )光线的显示结合简称“RGB”,例如:color : rgb(255,0,0)也可以用十六进制写,就象上面例子color:#FF0000如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。

查看更多CSS颜色值


四、定义字体

CSS字体属性定义字体,加粗,大小,文字样式。

web标准推荐如下字体定义方法:

body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
尝试一下 »

  • 字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,;
  • Lucida Grande字体适合Mac OS X;
  • Verdana字体适合所有的Windows系统;
  • Lucida适合UNIX用户
  • "宋体"适合中文简体用户;
  • 如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;
学习更多CSS字体

五、CSS 属性


CSS的属性都定义在CSS的声明块中,每个CSS属性都定义了一系列的关键信息


查看全部CSS属


六、CSS 实战闯关

我们为学习者准备了大量的CSS编程实战练习,供大家通过亲自编程实验来熟练编程操作

开始CSS编程闯关



七、CSS 实例

css 在线150个实例,通过本站编辑器,你可以学习在线查看修改后css的运行效果。

尝试一下!


八、CSS 问答


自学自怕的就是遇到问题无人解答,为此W3Cschool开设了CSS问答专区,方便新手们学习交流。

去CSS问答提问


九、CSS 相关工具

W3CSchool中你可以找到更完整的CSS教程、资料,工具等。

CSS 速查词典

CSS 教程

CSS3 教程

CSS 参考手册

前端开发学习资源汇总

HTML编程快速入门教程
javascript快速入门教程
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }