CSS语法

CSS 简介

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

CSS 参考网站:

规则集(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)。

我们可以使用 idclass 两个属性。需要注意的是,因为 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 我们可以更加简单快速的找到和安装插件/包。

推荐的包

工具类

  • Emmet – 非常实用的插件,提高编程效率。
  • AdvancedNewFile – 文件创建插件
  • Git – 整合 Git 功能插件。
  • ColorPicker – 取色器插件。
  • Sublime-HTMLPrettify – 集成了格式化(美化)html、css、js三种文件类型的插件。
  • csscomb-for-sublime – 按照一定的CSS属性排序规则,将杂乱无章的CSS属性进行重新排序。
  • DocBlockr – 可以轻松为文件生成描述。
  • Minify – 代码压缩和美化二合一。
  • AutoFileName – 自动补全路径插件。

语言类

MarkDown

主题列表

请查阅 https://colorsublime.github.io/ 来查找更多主题,让你的 Sublime text 大放异彩!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值