文章: 阅读:

CSS 基础知识

CSSCSS

前言

  • CSS 用于控制网页的样式和布局。通过使用 CSS 我们可以大大提升网页开发的工作效率！

  • HTML 标签原本被设计为用于定义文档内容。

  • 样式表定义如何显示 HTML 元素，就像 HTML 中的字体标签和颜色属性所起的作用那样。

  • 样式通常保存在外部的 .css 文件中。我们只需要编辑一个简单的 CSS 文档就可以改变所有页面的布局和外观。

  • CSS 教程

  • CSS3 教程

  • CSS 参考手册

  • CSS 快速入门

  • HTML/CSS/JS 在线工具

  • Visual Studio 官网

1、CSS


      
  • CSS 指层叠样式表 (Cascading Style Sheets)。
  • 样式定义如何显示 HTML 元素。
  • 样式通常存储在样式表中。
  • 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题。
  • 外部样式表可以极大提高工作效率。
  • 外部样式表通常存储在 CSS 文件中。

  • 多个样式定义可层叠为一个。

  • CSS3 是最新的 CSS 标准。

  • CSS3 已完全向后兼容，所以不必改变现有的设计。

2、语法

  • CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:

  • 选择器通常是需要改变样式的 HTML 元素。

  • 每条声明由一个属性和一个值组成。

  • 属性（property）是希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。

  • CSS 声明总是以分号 ; 结束，声明总以大括号 { } 括起来。

3、模块

  • CSS3 被拆分为 “模块”。旧规范已拆分成小块，还增加了新的。

  • 一些最重要 CSS3 模块如下：

    • 选择器
    • 盒模型
    • 背景和边框
    • 文字特效
    • 2D/3D 转换
    • 动画
    • 多列布局
    • 用户界面

4、实例

4.1 实例 1

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    <!DOCTYPE html>

    <html>

    <head>
        <meta charset="utf-8" />
        <title>Qian Chia 工作室</title>

        <style>
            p {
                color: red;
                text-align: center;
            }
        </style>
    </head>

    <body>
        <p>Hello World!</p>
        <p>这个段落采用 CSS 样式化。</p>
    </body>

    </html>

  • 效果

4.2 实例 2

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    <style>
        div {
            width: 100px;
            height: 75px;
            background-color: red;
            border: 1px solid black;
        }

        div#div2 {
            transform: rotate(30deg);
            -ms-transform: rotate(30deg);      /* IE 9 */
            -webkit-transform: rotate(30deg);  /* Safari and Chrome */
        }
    </style>
    1
    2
    3
    <div>你好。这是一个 DIV 元素。</div>

    <div id="div2">你好。这是一个 DIV 元素。</div>

  • 效果


    你好。这是一个 DIV 元素。

    你好。这是一个 DIV 元素。

5、CSS 实例



如果您觉得阅读本文对您有帮助，请用微信、支付宝 or QQ 扫码赞助，您的支持是我写作最大的动力！欢迎各位转载，但是未经作者本人同意，转载文章之后必须在文章页面明显位置给出作者和原文链接，否则保留追究法律责任的权利。

Qian Chia

Posted @ 2019-11-05 20:01


评论


文章目录
  1. 1. 前言
  2. 2. 1、CSS
  3. 3. 2、语法
  4. 4. 3、模块
  5. 5. 4、实例
    1. 5.1. 4.1 实例 1
    2. 5.2. 4.2 实例 2
  6. 6. 5、CSS 实例
隐藏目录