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。
- 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标准中文版