CSS基础

CSS定义

• CSS：指层叠样式表（Cascadeing Style Sheets）

  • 简称：样式表
  • 用途：定义如何显示HTML元素、美化页面、控制页面布局的一种语言。

• 详解CSS层叠样式表：

  • 样式：对网页元素(网页内容)显示形式的描述
  • 层叠：当HTML文件引用多个css文件时，若css文件之间所定义的样式发生冲突，将依据层次的先后来处理其样式对内容的控制。

• CSS作用：

  • 结构(HTML)与样式(CSS)分离，使网页设计更加简洁明了、美化界面。
    • 使HTML从样式中分离，专注于结构的呈现，而样式采用css即可。
    • 即HTML主要做结构(显示元素内容)，CSS美化HTML(布局网页)
  • 精确控制页面布局
    • 如行间距，字间距，段落缩进和图像定位等。
  • 提高网页效率
    • 例如：多个网页可以同时应用一个css样式，既可减少代码的下载量，也可提高浏览器速度和网页更新速度。
  • 等等

CSS语法

• 语法：
  • 选择器{
    • 属性名x：属性值y；
    • 属性名a：属性值b；
    • ……}
  • 可总结为：
    • 选择器{ 样式规则 }
    • 样式规则：
      • 属性名x：属性值y；
      • 属性名a：属性值b；

CSS选择器

• 定义：

  • CSS选择器用于选择HTML标签，并给选定的标签添加样式

• 分类：

  • 标签选择器

    • 选择器以HTML标签名开头。根据不同的HTML标签名来指定选择HTML文件中的标签，并为其添加样式
    • 【根据标签名来选择HTML标签】
    • 语法：
      • 标签名{
        • 属性1: 属性值1;
        • 属性2: 属性值2;
        • ...
        • }

  • 类选择器(常用)

    • 选择器以.类名开头。
    • 一个类选择器可应用于多个标签上；一个标签上也可以使用多个类选择器(但多个类选择器之间需用空格分割)。
    • 【根据类名来选择HTML标签】
    • 语法：
      • .类名{
        • 属性1: 属性值1;
        • 属性2: 属性值2;
        • ...
        • }
    • 注意：类名使用class属性的值来命名

  • id选择器(不推荐)

    • 选择器以#id名开头。
    • 【根据id名来选择HTML标签】
    • 语法：
      • #id名{
        • 属性1: 属性值1;
        • 属性2: 属性值2;
        • ...
        • }
    • 注意：id名使用id属性的值来命名
    • 注意：不推荐使用id作为选择器来设置样式，因为后面学习JavaScript时要用到
      • 每个标签的id是唯一的(id选择器只能在文档中使用一次)

  • 层级选择器 (此处以'后代选择器'为例)

    • 选择器以HTML元素的层级关系开头。
    • 语法：
      • 选择器1 选择器2 选择器x{
        • 属性1: 属性值1;
        • 属性2: 属性值2;
        • ...
        • }
      • 其中选择器1与选择器2与选择器x之间满足HTML的层级关系
    • 补充：HTML元素之间的关系(即树结构)：
      • 如下图所示
  • 

  • 组合选择器

    • 选择器以多个标签选择器或.类选择器，并以 , 分割
    • 作用：为多个标签元素设置同一样式
    • 语法：
      • .类名1，标签名1, .类名x，标签名y{
        • 属性1: 属性值1;
        • 属性2: 属性值2;
        • ...
        • }

  • 伪类选择器

    • 选择器以选择器名称：伪类名称开头
    • 语法：
      • (1个或多个)标签选择器或类选择器：伪类名称{
        • 属性1: 属性值1;
        • 属性2: 属性值2;
        • ...}
    • 注意：
      • 选择器可为1个或多个标签名或.类名y
      • 伪类：由CSS自带提供

CSS引入HTML文件的方式

• 行内式(不常用)

  • 在body中：直接在HTML标签的style属性中添加css的样式
  • 优点：方便、直观
  • 缺点：缺乏可重用性

• 内嵌式

  • 在head头部内：加入style标签，并在style标签中添加css

  • 优点：若仅有一个HTML页面(推荐使用)

  • 缺点：在多个页面之间的可重用性不高。

• 外链式(企业中常用)

  • 将css代码写在单独的一个css文件中
  • 在head头部内：使用link标签直接引入该文件到页面中。
    • 注意：(在head头部中，不需要添加style标签。link标签可直接书写在head头部中)
    • link标签：
      • rel属性：指定当前文档和被链接文档/资源之间的关系
      • type属性：指定被链接文档为一个外部的样式表
      • href属性：指定外部资源的路径
  • 优点：使css样式与html页面分离，便于页面的规划和维护，可重用性高。
  • 缺点：css代码由于分离在单独的css文件中，容易出现的css代码过于集中，若维护不当则容易造成混乱。

CSS属性

1、布局常用样式属性

• width：设置标签的宽度，
  • 例如：设置宽为100像素
    • width：100px；
• height：设置标签的高度。
  • 例如：设置高为100像素
    • height：100px；
• background：设置标签背景色或背景图片。
  • 例如：设置标签元素的背景色为红色
    • background-color: red;
• border:设置标签四周的边框
  • 例如：设置标签元素的变宽为1像素、实线、黑色
    • border: 1px solid black;

2、文本常用样式属性

• color：设置文字的颜色
  • 例如：设置文字的颜色为红色
    • color: red;
• font-size 设置文字的大小
  • 例如：设置文字的大小为24像素
    • font-size: 24px;
• font-family：设置文字的字体样式
  • 例如:设置文字字体为'微软雅黑'
    • font-family: 'Microsoft Yahei';
  • 例如：设置文字字体为'仿宋'
    • font-family: '仿宋';
• font-weight：设置文字的粗细
  • 例如：设置文体加粗
    • font-weight: bold;
  • 例如：设置字体粗线为800
    • font-weight: 800;
  • 例如：设置文字不加粗
    • font-weight：normal;
• line-height：设置文字的行高
  • 例如：设置文字的行高为24px(即文件上下的间距为24px)
    • line-height: 24px;
• text-decoration：设置文字的下划线
  • 例如：设置文字下划线
    • text-decoration: underline;
  • 例如：设置文字上划线
    • text-decoration: overline;
  • 例如：设置文字划线
    • text-decoration: line-through;
  • 例如：删除文字下划线
    • text-decoration:none;
• text-align：设置文字水平对齐方式
  • 例如：设置文字水平居中
    • text-align: center;
• text-indent：设置文字首行缩进
  • 例如：设置文字首行缩进24像素
    • text-indent: 24px;

CSS元素溢出

• 定义：当子标签的尺寸超过父标签的尺寸时，发生CSS元素溢出
  • 此时需在父标签选择器中设置，子标签溢出的显示方式
    • 设置的方式通过overflow属性来完成的。
• overflow属性:
  • 属性值：
    • visible：显示子标签溢出部分。【默认】
      • overflow: visible;
    • hidden：隐藏子标签溢出部。
      • overflow: hidden;
    • auto：若子标签溢出，则可通过滑动方式查看其余溢出内容
      • overflow: auto;

CSS盒子模型

• 盒子模型：即把HTML页面的元素看做一个矩形盒子，
• 组成：
  • 内容(content)
    • width：内容宽度
    • height：内容高度
  • 内边距(padding)：内容content和边框border之间的间距
  • 边框(border)
  • 外边距(margin)：边框border和其他盒子之间的间距
• 盒子的真实尺寸
  • 盒子宽度= (内容)width + padding左右 + border左右
  • 盒子高度= (内容)height + padding上下 + border上下
• 如图所示：
• 
• 注意：盒子模型主要是设置四个部分
  • 1.内容大小（width，height）
  • 2.边框大小（border）
    • 例如：设置边框粗细为10px,样式为实心，颜色为黑色
      • border: 10px solid black;
  • 3.内边距大小（padding）
  • 4.外边距大小（margin）

CSS元素显示、定位模式

• 【注意：下述CSS元素属性书写在CSS选择器内部】

• display属性：设置元素在文档中的显示类型

  • 属性值：
    • none：使元素标签隐藏且不占位置
      • display: none;
    • inline：使元素标签以行内元素显示
      • display: inline;
    • block：使元素标签以块元素显示
      • display: block;

• position(定位)属性：设置元素在文档中的定位方式

  • 语法：(定位模式 + 边偏移)
    • position：定位模式；
    • 边偏移属性：边偏移值
  • 定位模式：
    • static：静态定位【默认定位方式】
      • 作用：无定位的含义。
      • 语法
        • 选择器 {position:static;}
    • relative：相对定位
      • 作用：元素在移动位置时，以相对于它原来的位置为参考点来移动。
      • 语法
        • position:relative;
    • absolute：绝对定位
      • 作用：元素在移动位置时，以相对于它最近一级的有定位祖先元素(父标签或祖先标签)为参考点来移动。
      • 语法
        • position: absolute；
    • fixed：使元素固定于浏览器可视区的位置
      • (即在浏览器页面滚动时元素位置不改变)
      • 特点：固定位置不占有原来的位置。
      • position: fixed；
  • 边偏移：
    • top：顶端偏移量。(即相对于上边线的距离)
    • bottom：底部偏移量。(即相对于下边线的距离)
    • left：左侧偏移量。(即相对于左边线的距离)
    • right：右侧偏移量。(即相对于右边线的距离)
  • 例如：相对定位：使盒子1以其自身原来位置为参照，向上距离100像素,向左距离100像素
    • position: relative;
    • top: 100px;
    • left: 100px;
  • 例如：绝对定位：使盒子2以以其最近一级的父盒子位置为参照，向上距离50像素、向左距离50像素
    • position: absolute;
    • top: 50px;
    • left: 50px;
  • 例如：固定定位：使标签元素固定于浏览器可视区的上方位置(且固定位置不占有原来的位置)
    • position: fixed;