岛屿尽

dyingjin

CSS简单速成

发表于 分类于

w3school教程

概要

简单来说就是独立的

什么是 CSS？

  • CSS 指的是层叠样式表 (Cascading Style Sheets)
  • CSS 描述了如何在屏幕、纸张或其他媒体上显示 HTML 元素
  • CSS 节省了大量工作。它可以同时控制多张网页的布局
  • 外部样式表存储在 CSS 文件 中

    CSS 解决了一个大问题

    HTML 从未打算包含用于格式化网页的标签！
    创建 HTML 的目的是_描述网页_的内容
    将 <font> 之类的标签和 color 属性添加到 HTML 3.2 规范后，Web 开发人员的噩梦开始了。大型网站的开发将字体和颜色信息添加到每个页面中，这演变为一个漫长而昂贵的过程。
    为了解决这个问题，万维网联盟（W3C）创建了 CSS。
    CSS 从 HTML 页面中删除了样式格式！

    CSS 节省了大量工作！

    样式定义通常保存在外部 .css 文件中。
    通过使用外部样式表文件，您只需更改一个文件即可更改整个网站的外观！

语法

CSS 规则集（rule-set）由选择器和声明块组成：
CSS 选择器
选择器指向您需要设置样式的 HTML 元素。
每条声明都包含一个 CSS 属性名称和一个值，以:冒号分隔。
多条 CSS 声明用;分号分隔，声明块用{}花括号括起来。
例：(在此例中，所有 <p> 元素都将居中对齐，并带有红色文本颜色：)

1
2
3
4
p {
  color: red;
  text-align: center;
}
  • p 是 CSS 中的_选择器_（它指向要设置样式的 HTML 元素：<p>）。
  • color 是属性，red 是属性值
  • text-align 是属性，center 是属性值

    注释

    位于 <style> 元素内的 CSS 注释，以 /* 开始，以 */ 结束

    在HTML中使用

    选择器

    选择器用于“查找”（或选取）要设置样式的 HTML 元素。
    选择器 例子 例子描述 概述
    .class .intro 选取所有 class=”intro” 的元素。 类选择器选择有特定 class 属性的 HTML 元素。
    #id #firstname 选取 id=”firstname” 的那个元素。 id 选择器使用 HTML 元素的 id 属性来选择特定元素。
    * * 选取所有元素。 通用选择器（*）选择页面上的所有的 HTML 元素。
    element p 选取所有 <p> 元素。 元素选择器根据元素名称来选择 HTML 元素。
    element,element,.. div, p 选取所有 <div> 元素和所有 <p> 元素。

    外部样式表

    当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。
    1
    2
    3
    <head>
    <link rel="stylesheet" type="text/css" href="style.css">
    </head>

    内部样式表

    当单个文件需要特别样式时，就可以使用内部样式表。你可以在 head 部分通过 <style> 标签定义内部样式表。
    1
    2
    3
    4
    5
    6
    <head>
    <style type="text/css">
    body {background-color: red}
    p {margin-left: 20px}
    </style>
    </head>

    内联样式

    当特殊的样式需要应用到个别元素时，就可以使用内联样式。 使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。
    1
    2
    3
    <p style="color: red; margin-left: 20px">
    This is a paragraph
    </p>
---------------THEEND---------------