CSS语法

最新推荐文章于 2024-09-04 18:25:18 发布

「已注销」

最新推荐文章于 2024-09-04 18:25:18 发布

阅读量542

点赞数 2

分类专栏：前端开发入门文章标签： CSS语法

本文链接：https://blog.csdn.net/MoDuRooKie/article/details/81356832

版权

前端开发入门专栏收录该内容

39 篇文章 0 订阅

订阅专栏

CSS 简介

CSS 即层叠样式表，是一种标记语言，用来描述网站上各种元素的外观。CSS 的精髓就在于样式，它给了一个网站开发者可以改变网页上各种元素外观的能力。它的另一个好处是把样式和内容分开了，我们想要的页面内容就用 HTML 来写，想要页面内容呈现的样式，就用 CSS 来写。

CSS 参考网站：

W3C - CSS 教程
Mozilla 开发者社区 - CSS 参考
css-tricks.com - CSS Almanac

规则集（rule set）

理解一个简单 CSS 语句中的基本构件模块，所有的 CSS 都是以所谓的规则集（rule set）开始的。

规则集由两部分组成

这里写图片描述

一个是选择器，就是一些用来筛选出你想要添加样式的 HTML 元素的代码。

这里写图片描述

还有声明块，用来描述你想要为指定 HTML 添加的样式代码。

<style> 标签在 <head> 标签內，所有在这个 <style> 标签内部的代码都是 CSS。

代码注释

CSS 注释

p {
    color: blue;
}
/* 在此处添加 css */
h1 {
    color: red;
}

行 /* add CSS here */ 便是一条注释。CSS 注释的首尾各有 /* 和 */。

HTML 注释

<!-- 这是一条注释 -->
<div class="example">Words, words, words.</div>

HTML 注释的两侧必须有 。

属性和选择器

我们可以使用标签来设置样式，但该设置会应用于 HTML 中所有该标签的内容。有时候我们想要为特定的标签内容设置样式。所以除了标签，我们还可以使用属性（attributes）。

我们可以使用 id 和 class 两个属性。需要注意的是，因为 HTML 元素只能拥有一个 ID，并且这个 ID 只能在网页中使用一次，所以我们需要保守的使用 ID 属性。但实际中一般都会给一组元素添加样式，而不是单个的元素。如果要给多个 HTML元素添加同样的样式，我们就要用到类（class），类可以应用在多个 HTML 元素中，一个 HTML 元素也可以拥有多个类，这就是类的强大与灵活之处。许多网站开发者都会认为 class 属性比 id 属性好用。

除了组织元素，这些属性还可以作为 CSS 的选择器。

标签选择器

h1 {
  color: green;
}

class 属性选择器

.book-summary {
  color: blue;
}

id 属性选择器

#site-description {
  color: red;
}

CSS 参考

CSS 单位

这里写图片描述

CSS 的单位可以分为两类，绝对单位和相对单位。绝对单位是指测量的固定单位，相对单位指的是相对于另外一个物体的单位长度。我们可以使用像素来定义长度，绝对单位中像素是最常见的，对于相对单位中百分比是最常见的。

CSS 长度

CSS 颜色

颜色的编码方式，

颜色由光组成，所有的光都由红、绿、蓝三个部分组成，三个部分的不同组合形成了不同的颜色。在写 CSS 代码的时候，就是用红、绿、蓝三种光的不同值来表示特定的颜色，有下面两种方式。
这里写图片描述

第一种方式，通常被称为 RGB，把每种颜色的值用十进制中 0 到 255 的整数表示。0 表示最弱光值，也就是没有这种光。255 表示最强光值，也就是这种光有 100% 的强度值。
这里写图片描述

第二种方式，被称为十六进制，或简称为 hex。将红绿蓝三种光的光值用十六进制数字 00 到 FF 来表示。00 也就是十进制中的 0，FF 也就是十进制中的 255。

十六进制到 RGB 转换应用

RGB与16进制色在线互转

颜色的 css 样式也是可以缩写的，当你设置的颜色是16进制的色彩值时，如果每两位的值相同，可以缩写一半。例如：

title {
   color: #000; /* #000000 */
}

p {
   color: #abc; /* #aabbcc */
}

CSS 简写属性 (CSS Shorthand Properties)

样式表

当多个网页需要使用到同一个 CSS 时该怎么办？

命名样式表的文件中写入你的 CSS，然后在 HTML 中链接到该文件。样式表是一个文件，它包含描述元素如何在网页上呈现的代码。

这里写图片描述

创建样式表

这和之前的操作没有区别，除了 CSS 存在于不同文件中，而你不必再使用 <style> 标签。。要创建样式表，只需将新文件添加到项目，写入某些 CSS，然后将其另存为 name-of-stylesheet.css。

如何链接一个样式表

在你的网页能够使用样式表之前，你需要先链接它。要执行此操作，需要在 HTML 中创建一个指向样式表的 <link>。要创建链接，只需在 HTML 的 <head> 中键入以下内容。

<link href="path-to-stylesheet/stylesheet.css" rel="stylesheet">

href 属性指定所链接资源的路径 （可以链接除了样式表以外的其他资源，稍后会详细介绍），rel 属性指定资源和文档之间的关系。这里的关系 stylesheet 是样式表。

扩展 Sublime

在 Sublime 中，可以使用“Package Control”来安装包。Package Control 是管理 Sublime 中包的开源工具。

安装 Package Control

在安装包之前，我们需要先安装 Package Control ,通过 Package Control 我们可以更加简单快速的找到和安装插件/包。

CSS语法

CSS 简介

规则集（rule set）

代码注释

CSS 注释

HTML 注释

属性和选择器

CSS 单位

CSS 颜色

样式表

创建样式表

如何链接一个样式表

扩展 Sublime

安装 Package Control

推荐的包

工具类

语言类

MarkDown

主题列表