CSS基础学习笔记（一）

一、CSS简介

• Cascading Style Sheet（层叠样式表）
• 用来控制网页的外观的一门技术。//规定html标签在网页上的显示样式。
• html4时，w3c组织将html的结构和样式做了分离
• HTML、CSS和JavaScript是前端技术中最核心的三个元素。HTML控制网页的结构，CSS控制网页的外观，而JavaScript控制网页的行为。
• HTML、CSS和JavaScript的关系如下：
  • “HTML是网页的结构，CSS是网页的外观，而JavaScript是页面的行为。”
    • html：结构层，搭建网页的整体架构。
    • css：   样式层，装饰页面。
    • JavaScript:  行为层，一些页面交互效果。
• 这三层标准都是由w3c组织来维护。

• 最新css3 常用css2.1

二、CSS作用

• 层叠式，样式
• 样式：html标签在页面的显示效果。

• 某一个标签由什么样式，直接将对应的属性及属性值罗列出来。
• CSS样式设置的关键：选择器和样式表。
• CSS作用细化
  • 给文字添加文字显示样式。
  • 给盒子添加属性进行结构布局。

三、CSS几个小属性

• 文本样式
  • 字体：font-family。复合属性的一个单一属性。
    • 英文字体（前）
      • Arial（微软雅黑）Consolas
    • 中文字体（后）
      • 默认字体为宋体
      • 常用字体：宋体和微软雅黑。
      • 所有电脑都有宋体，写字体时标注好备选字体。
      • font-family:“Arial”，“微软雅黑”，“宋体”；
      • 字体用引号包裹，字体之间用逗号隔开，表示或。
      • 为了追求加载速度，将一些中文字体名字写成英文表示法。
        • 微软雅黑：Microsoft Yahei。
        • 宋体：SimSun
  • 颜色：color。文字颜色。
    • 属性值有几种选择方案
      • 十六进制 #0000ff 蓝色
      • RGB
      • rgba
      • 颜色名（英文） red orange yellow green cyan(青) blue purple blank white pink gold lightblue 黄绿色yellowgreen 天蓝色 sky-blue
      • 白色: #ffffff,RGB(255,255,255),RGBA，white
  • 大小：font-size。本身是一个复合属性font，里面的单一属性，需要用font-单一属性名。属性值，以像素为单位。font-size : 30px;
• 盒子实体化基本属性
  • 实体化：将盒子给宽、高、背景色、边框。
  • 宽度：width。属性值是像素为单位。
  • 高度：height。属性值也是像素为单位。
  • 背景色：background-color。属性值就是颜色色值。
  • 边框：border。复合属性，有多个属性值，属性值之间用空格隔开。
    • 边框的宽度、颜色、线的类型。
      • 实线边框：solid。
        • border：5px solid red;
• css的书写位置
  • 行内式
    • css属性写在一个style属性里，可以书写他的所有css样式
      • <div style=“；”></div>
  • 内嵌式
    • 写在html文件里的，head标签内有一对style标签，是一个双标签，我们所有的css样式属性都写在双标签内部。
    • style标签有一个属性type，属性值“text/css",表示我们内部写的是纯文本类型的css类型代码。
    • <style type=”text/css“>div{}</style>
    • 学习过程中，常用内嵌式。
    • 行内式一般留给后台添加。
    • 外链式
      • 将css单独写在另一个css文件里。
    • css的注意事项
      • html的属性和属性值，键值对：k="v"
      • css,k:v;
      • 多个属性之间必须用分号分割，不写会出错。
      • 所有的样式必须写在一堆大括号里。
      • css样式，对于换行、空格、缩进不敏感。

    • 合理换行+缩进

    • 将代码上传到网上：为了提高加载速度，将无用的空格、缩进、换行等删除，压缩代码。
    • css在线压缩/解压缩

个人学习备份用，有错误请海涵2333。

学习课程为尚硅谷视频~