CSS基础

Q：CSS的全称是什么?

csacading style sheet (层叠样式表)

Q：CSS有几种引入方式?

• 嵌入式   在head标签中通过style标签写入css样式
• 内嵌式   在html标签中写入css样式
• 外联式   在head标签中通过link标签引入css文件
  优先级：内联式 > 嵌入式 > 外联式

Q：link 和@import 有什么区别?

link标签是外部样式引入页面，而@import是在css样式里面规定引入优先样式表；
link引入的css文件可以和页面一起加载，而@import等到页面加载完成才加载；
link标签属于html标签，没有兼容性，而@import在IE5以上才会被识别；

Q：以下这几种文件路径分别代表什么意思?

css/a.css
./css/a.css
b.css
../imgs/a.png
/Users/hunger/project/css/a.css
/static/css/a.css

（1）在当前目录下css文件夹里面的名为a的css文件，
（2）在当前目录下的css文件夹里面的名为a的css文件，
（3）在当前目录下名为b的css文件，
（4）在当前目录下返回上级目录下的imgs文件夹里面的名为a的png图片，
（5）在项目根目录下Users文件里的hunger文件里的project文件里的css文件里的名为a的css文件，
（6）在项目根目录下static文件里的css文件里的名为a的css文件。

html 书写规范

• 标签闭合
• 语义化
• 文档声明
• 代码缩进
• 属性和标签名都小写
• 合理嵌套标签

css 书写规范

• 正确使用css缩写属性 例如：只设置margin-left:5px; 就不要margin: 0 0 5px 0;
• 小数点前面的0 ,建议去掉 例如：.8px。
• 简写大部分我们认识的命名，例如：.navigation ==> .nav ;button ==> btn
• 16进制颜色简写
• 很多说的不加中线和下划线，用驼峰命名

书写顺序

1.位置属性(position, top, right, z-index, display, float等)
2.大小(width, height, padding, margin)
3.文字系列(font, line-height, letter-spacing, color- text-align等)
4.背景(background, border等)
5.其他(animation, transition等)

常用的CSS命名规则

(1)页面结构
容器: container
页头：header
内容：content/container
页面主体：main
页尾：footer
导航：nav
侧栏：sidebar
栏目：column
页面外围控制整体佈局宽度：wrapper

左右中：left right center

(2)导航
导航：nav
主导航：mainnav

子导航：subnav
顶导航：topnav
边导航：sidebar
左导航：leftsidebar
右导航：rightsidebar
菜单：menu
子菜单：submenu
标题: title
摘要: summary

(3)功能
标志：logo
广告：banner
登陆：login
登录条：loginbar
注册：register

搜索：search
功能区：shop
标题：title
加入：joinus
状态：status
按钮：btn
滚动：scroll
标籤页：tab
文章列表：list
提示信息：msg
当前的: current
小技巧：tips
图标: icon
注释：note
指南：guild
服务：service
热点：hot
新闻：news
下载：download
投票：vote
合作伙伴：partner
友情链接：link