01 css语法

style通常写在head中

1. 样式格式书写

• 紧凑模式
• 展开模式（常用）

2. 样式大小写风格

• 样式选择器，属性名，属性值关键字全部使用小写字母，特殊情况除外

3. 样式空格风格

h3 {
    color: pink;
}

• 属性值前面，冒号后面，保留一个空格
• 选择器（标签）和大括号中间保留空格

选择器

1. 基础选择器：

单个选择器，包括标签选择器、类选择器、id选择器和通配符选择器（*）

• 标签选择器
  • 优点：能快速为页面中同类型的标签统一设置样式
  • 缺点：不能设计差异化样式，只能选择全部的当前标签
• 类选择器
  • 差异化选择不同标签
  • 可以给一个标签指定多个类名
    注意：
    • 类选择器使用’.'进行标识，后面紧跟类名
    • 长名称或词组可以使用中横线-来为选择器命名
    • 尽量使用英文字母来表示
    • 命名一定要有意义
• id选择器
  • 与类选择器类似，但只能调用一次
• 通配符选择器
  - 使用*定义，表示选取页面中所有元素（标签）

基础选择器	作用	特点	使用情况	用法
标签选择器	可以选出所有相同的标签，比如p	不能差异化选择	较多	p {color： red;}
类选择器	可以选出1个或者多个标签	可以根据需求选择	非常多	.nav {color: red;}
id选择器	一次只能选择1个标签	ID属性只能在每个HTML文档中出现一次	一般和js搭配	#nav {color: red;}
通配符选择器	选择所有标签	选择的太多，有部分不需要	特殊情况使用	* {color: red;}

2. 复合选择器

复合选择器是建立在基础选择器之上，对基本选择器进行组合形成的

• 常用的复合选择器包括：
  • 后代选择器
  • 子选择器
  • 并集选择器
  • 伪类选择器等等

CSS属性书写顺序(重点)

建议遵循以下顺序:

• 布局定位属性: display/position/float/clear/visibility/overflow(建议display第一个写, 毕竟关系到模式)
• 自身属性: width/height/margin/padding/border/background
• 文本属性: color/font/text-decoration/text-align/white-space/break-word
• 其他属性(CSS3): content/cursor/norder-radius/box-shadow/text-shadow/background:linear-gradient…
  

页面布局整体思路

为了提高网页制作效率, 布局时通常有以下的整体思路:

1. 必须确定页面的版心(可视区), 我们测量可得知
2. 分析页面中的行模块, 以及每个行模块中的列模块. --> 页面布局第一准则
3. 一行中列模块经常浮动布局, 先确定每个列的大小, 之后确定列的位置. --> 页面布局第二准则
4. 制作HTML结构. 遵循先有结构, 后有样式的原则. 结构永远最重要
5. 综上, 先理清布局结构, 在写代码尤为重要, 这需要我们多写多积累

---

---

ps:

前端规范手册：

• 头：header
• 内容：content/contenter
• 尾：footer
• 导航：nav
• 侧栏：sidebar
• 栏目：column
• 页面外围控制整体布局宽度：wrapper
• 左右中：left right center
• 登录条：loginbar
• 标志：logo
• 广告：banner
• 页面主体：main
• 热点：hot
• 新闻：news
• 下载：download
• 子导航：subnav
• 菜单：menu
• 子菜单：submenu
• 搜索：search
• 友情链接：friendlink