前端基础(2)：CSS

（一）CSS

（1）基本用法

• CSS(Cascading Style Sheets)层叠样式表
  
  • 作用：渲染页面；使页面的内容和表现分离
• 基本格式
  
  • 选择器{属性1:值1;属性2：值2;} （某些值不能加上引号）
  • 比如#id{样式}
• CSS和HTML的整合方式
  
  • 内联样式表：通过HTML标签的style属性
  • 内部样式表：通过head标签的style子标签导入
  • 外部样式表： 有独立的CSS文件(通过link标签< link rel=”stylesheet” href=”” type=”text/css” >)，通过head标签内的link子标签导入

（2）选择器

• 选择器
  
  • id选择器：HTML元素需要有id属性并且有值——“#id1{样式}”
  • class选择器：HTML元素需要有class属性并且有值——“.class1{样式}”
  • 元素选择器 ：直接使用标签（需要是HTML固有的标签）——p{样式}
  • 属性选择器： 看成元素选择器的变种，首先筛选元素， 然后是特定的标签（可以使用自定义的标签）——标签[属性名称=”值”]{样式}
  • 后代选择器：选择E元素后代的所有F元素—— 标签E 标签F{样式}
  • 锚伪类选择器（了解）：改变鼠标移动到链接、打开链接时的颜色
• 对于Cascading层叠的理解
  
  • 多个样式作用于一个元素时：不同的样式会叠加；相同的样式时会依照就近原则（选择离元素最近的样式）

（3）属性

• 字体
  
  • font-family 设置字体
  • font-size
  • font-style
• 文本
  
  • text-decoration（设置none让超链接不带下划线）
  • color
  • text-align 对齐方式
• 列表
  
  • list-style-type
• 浮动
  
  • float （可以让多个div放在同一行 ：left、right属性）
  • clear (both属性：左右两边不能有元素)
• 尺寸
  
  • width
  • height
• 分类
  
  • display（none会让元素不显示；block会让元素单独成块；inline会取消元素的换行）
• 背景
  
  • background-color
  • background-image（使用url设置图像背景）
• 元素框
  
  • padding 内边距（设置多个值时按照 上右下左顺时针赋值，如果缺省则按照对称方向）
  • border 边框的厚度（border-width border-style（dashed|solid…） border-color）
  • margin 元素之间的距离