CSS入门笔记1

165 阅读1分钟

CSS和HTML是独立的,最简单地可以理解为CSS就是加东西的。

语法一:样式语法

selector{
    attribute_name: attribute_value;
    /*annotation*/
}

示例

p{
    /*Selector p's color is red.*/
    color: red;
}

CSS脚本任何地方写错了,都不会报错,浏览器会直接忽略

语法二:at语法

@charset "UTF-8";  /*utf-8编码*/
@import url(2.css);  /*引入2.css的文件*/
@media (min-width: 100px) and (max-width: 200px){
    语法一
}

NOTE:

  • @charset必须放在第一行
  • @media 语法后面讲

如何调试?

1.推荐用webstorm, vscode次之,开发者工具last resort其次,w3c验证器作为last resort。

  1. Border调试大法(无IDE开发环境下强推!!)。在怀疑有问题的地方输入border: 1px solid red(或其他呈现明显效果的border语句),有点儿debug内味儿。

新人常见错误,基本都是低级错误。如下:

  • 选择器拼写错误
  • 属性名拼写错误
  • 属性值拼写错误
  • 大小写错误
  • 没写分号
  • 中文冒号
  • 没写反花括号
  • 没加单位

在哪儿查资料?

  • Google搜索关键词时加MDN
  • CSS tricks
  • 张鑫旭的博客

在哪儿搜练习素材

psd

  • 在freepik搜索PSD web
  • 365PSD里的UI套件还行 效果图
  • dribble.com顶级设计师社区
  • 可以用肉眼模仿它 商业网站:直接模仿你常去的网站

NOTE:不要沉迷临摹,大概学习下布局,风格就可以。每个类型临摹一两个即可:PC网站、手机网站、UI套件,再多无益。

Google搜索CSS spec可以找到CSS最新标准或者CSS 2.1查看CSS2.1标准中文版