CSS学习（第一天）

CSS重点

1.选择器

2.盒子模型

3.浮动

4.定位

5.动画、伸缩布局（C3部分）

一、CSS概念

1.1 作用：美化网页（通过css控制标签的样式）和网页布局（通过css控制标签的位置）

1.2 概念：层叠样式表 (Cascading Style Sheets)或者级联样式表

备注：CSS是以html为基础

1.3 书写方式

• 内嵌式写法
  先准备一个 htm l页面，在head 标签中添加一个 style 标签，在style标签中写css代码。

  
  内嵌式写法

• 外联式写法
  首先新建一个单独的 CSS 文件（在该文件中不需要写 style 标签，直接写 CSS代码就可以），通过link标签将该 CSS 文件引入到当前 html 页面中。

  
  外联式写法

注意：一个页面中可以同时引用多个css文件

• 行内式写法
  将 CSS 代码写入到 html 标签内部。

  
  行内式写法

二、CSS 语法

2.1 语法：选择器 { 属性: 值; ......}
2.2 选择器分类

• 基础选择器
  ✔标签选择器（掌握）
  ✔类选择器（掌握）
  ✔ID选择器
  ✔通配符选择器
• 复合选择器
  ✔标签指定式选择器
  ✔后代选择器
  ✔子代选择器
  ✔并集选择器
  ✔属性选择器
  ✔伪类选择器

三、标签选择器

3.1 语法：html 标签名 { 属性: 值; }
3.2 作用：通过html标签名选中需要设置样式的标签

注意：代码中遇到特殊符号，都必须是英文输入法下的符号。

四、类选择器（使用最多）

4.1 定义： .自定义类名 { 属性: 值; ....}
4.2 类样式的调用：
标签通过class属性去调用定义好的类样式。

类选择器

4.3 类样式的特点

1. 一个标签可以同时调用多个类样式

   
   

2. 一个类样式可以被多个标签同时调用

   
   

五、命名规范

• 自定义类名不能使用纯数字或以数字开头
• 不推荐使用汉字定义类名
• 不能使用特殊字符或者以特殊字符开头（$,#,@,%...）
• 建议不推荐使用标签名作为类名

• 一般我们用具有一定语义的单词或者汉语拼音去定义一个类名

  
  

六、ID选择器

6.1 定义
#自定义id名称 {属性: 值; ....}
6.2 调用
标签通过 id 属性调用 id 样式

#test {color: red; }
<p id=”test”></p>

6.3 ID选择器与类选择器的区别

• 语法定义有区别 ( . #)

• 在 id 选择器中，一个标签只能调用一个 id 样式。

  
  
• 一个类样式可以被多个标签调用，但是一个id样式最好只能被一个标签调用（否则，不符合编程规则）

七、通配符选择器

7.1 语法
* { 属性: 值; ... }
7.2 特点
将页面中所有的标签都选中