web前端：CSS

大纲

如图

CSS 指层叠样式表

• 样式定义如何显示HTML元素
• 样式通常存储在样式表中
• 为了解决内容和表现分离的问题
• 外部样式表通常存储在CSS文件中
• 多个样式定义可层叠为一个

代码写在哪？

• 通过style属性

  如图

• 通过style标签
  放head里面 对整体div进行修饰

  
  如图

• 通过link标签外链
  <link>标签定义文档与外部资源的关系，最常见用途是链接样式表

  如图 如图

CSS包含

* 选择器

1. 元素选择器
标签的名字

如图

2. ID选择器

如图

<u>注意：在css表里要添加#a1, 符号#为id选择器</u>

如图

3.类选择器
.a1为类(class)选择器

如图

注意：在CSS表里添加 .a1

如图

4.父子选择器（又称层级选择器）

如图

让两个a1选择器里的a11不同，就需要在选定选择器之后再进行分块
如 #a1 a11 指的是id选择器里的a11
.a1 a11 指的是类选择器里的a11

如图

* 样式（CSS样式手册）

常用样式

* 布局

1. 宽高 width，height
2. 内外间距 margin，padding
3. 浮动 float
4. 清除浮动 clear
5. 处理溢出 overflow

* 效果

1. 文字颜色 color

2. 背景颜色 background

3. 文字大小 font-size
   布局效果图

   如图 如图

* 布局

• 单位
  1.颜色

  • 16进制
  • RGB

  • 英文单词

    
    如图

  2.尺寸

  • px
  • em
  • mm
  如图

• 使用float控制标签的位置

  如图

• 使用clear overflow清楚浮动影响

  1. clear

     如图

  2. overflow 属性规定当内容溢出元素框时发生的事情,如果元素中的内容超出了给定的宽度和高度属性，overflow 属性可以确定是否显示滚动条等行为.

     
     如图

实战

如图

如图

---

附源码图

如图 如图

CSS源码

---

如图
如图