• 下篇:CSS基础知识 [下]

CSS 学习

层叠样式表（Cascading Style Sheets，缩写为 CSS）是一种样式表语言，用来描述 HTML 或 XML（包括如 SVG、MathML 或 XHTML 之类的 XML 分支语言）文档的呈现。CSS 描述了在屏幕、纸质、音频等其他媒体上的元素应该如何被渲染的问题。文件后缀 .css

• CSS 规则: 选择器 + 一条或多条声明
  • 选择器: 需要改变样式的 HTML 元素
  • 声明: 由一个属性和一个值组成(属性和值用冒号分开)

CSS 引入方式

1. 内联样式(行内样式)

   • 直接在标签内设置(style="...;...;" 中间用 ; 分开)

     <p style="color: blue; font-size: 20px;">CSS</p>
     

2. 内部样式(不同页面需要重复写才能生效)

   • 在 .html 文件中的 <header></header> 里面添加 <style></style> 来设置样式.

     <!--给p标签设置样式,将这个放在<header>内-->
     
     <style>
         p{
             color:blue;
             font-size: 10px;
         }
     </style>
     

3. 外部样式(推荐使用)

   • 当样式需要应用于多个页面时,使用外部样式可以通过改变一个文件来改变整个站点的外观,每个页面使用 <link> 标签链接到样式表, 该标签写在文档的头部,即 <header></header> 里.

     <link rel="stylesheet" type="text/css" href="xxx.css">
     

     • rel="stylesheet" 是默认的不许修改
     • href="xxx.css" 引入 .css 文件
     • type="text/css" 指示了被链接的文档是一个外部的样式表

选择器

• 内部和外部样式中不同样式书写方法

全局选择器

• 可以和任何元素匹配,优先级最低,一般做样式初始化

  *{
      margin: 0;
  }
  

元素选择器

• HTML文档中使用的各个元素(img|p|div|body|b)
• 标签选择器: 选择页面上所有这类型的标签,设置样式

  img{
      width: 20px;
  }
  

类选择器

• 规定用 class="类名" + .类名{} 搭配使用, 针对你想要的所有标签使用

  <p class="title">你好</p>
  
  <!--设置样式-->
  <style>
      .title{
          color: yellow;
          font-size: 20px;
      }
  </style>
  

  • 注意:
    • 类名不可以用数字开头
    • 同一个标签可以使用多个类选择器,用空格分开, 例如 class="classone classtwo"
    • 类选择器可被多个标签使用

ID选择器

• 针对某一个特定的标签使用,只能使用一次(css中用 # 来定义)

  <h1 id="title">hello</h1>
  
  <style>
      #title{
      border: 3px dashed green;
      }   
  </style>
  

  • ID是唯一的
  • ID不能用数字开头
  • 测试提示:要把<style></style>放在 <header></header> 内运行或者在 .css 中写入然后在 .html 中引入.

合并选择器

• 语法: 选择器1, 选择器2 {...}
• 提取共同样式

,减少代码量
css p, div, h1 { font-size: 20px; color: blue; }

文字属性

• text-align: 水平方向对齐方式(left/center/right)
• line-height: 设置行高
• word-spacing: 设置字间距
• letter-spacing: 设置字间距
• text-indent: 设置首行缩进
• text-decoration: 设置文本装饰
• text-transform: 设置字母大小写

盒模型

盒模型：指的是页面上的每个元素都是一个矩形盒子,这个盒子由content、padding、border、margin四个部分组成.

• content: 内容区域,显示内容
• padding: 内边距,内边距是包围内容的透明区域,内边距的背景可以设置背景颜色或背景图片
• border: 边框,边框是围绕在内边距和外边距外的边界
• margin: 外边距,外边距是指元素边缘与外部元素边缘之间的距离

盒模型分类

1. 标准盒模型

   • box-sizing: content-box; (默认属性)
     • width 和 height 只包含内容(content)的宽度和高度，不包括内边距(padding)、边框(border)、外边距(margin)

2. IE 盒模型

   • box-sizing: border-box;
     • width 和 height 包含内容(content)、内边距(padding)和边框(border)，但不包括外边距(margin)

盒模型应用

div {
  width: 300px;
  height: 200px;
  padding: 20px;
  border: 10px solid black;
  margin: 20px;
  box-sizing: border-box; /* 或者 content-box */
}

• 在此例中,元素的总宽度为 300px + 2*20px + 2*10px = 360px, 总高度为 200px + 2*20px + 2*10px = 260px

盒模型单位

• px(像素): 绝对单位,设置的大小不会改变
• em: 相对单位,以父元素的 font-size 为基准进行计算,当一个元素没有设置 font-size 属性时,其计算值将继承父元素的 font-size 值
• rem: 相对单位,始终相对于根元素(html)的字体大小来计算