编程笔记 html5&css&js 036 CSS概述

CSS (Cascading Style Sheets,层叠样式表),是一种用来为结构化文档(如 HTML 文档或 XML 应用)添加样式(字体、间距和颜色等)的计算机语言,CSS 文件扩展名为 .css。通过使用 CSS 我们可以大大提升网页开发的工作效率!在我们的 CSS 教程中,您会学到如何使用 CSS 同时控制多重网页的样式和布局。CSS3 现在已被大部分现代浏览器支持,而下一版的 CSS4 仍在开发中。

一、什么是 CSS?

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

二、样式非常重要

HTML 标签原本被设计为用于定义文档内容,如下实例:

<h1>这是一个标题</h1>
<p>这是一个段落。</p>

样式表定义如何显示 HTML 元素,就像 HTML 中的字体标签和颜色属性所起的作用那样。样式通常保存在外部的 .css 文件中。我们只需要编辑一个简单的 CSS 文档就可以改变所有页面的布局和外观。

三、CSS 语法

CSS 规则集(rule-set)由选择器和声明块组成:
CSS 选择器
选择器指向您需要设置样式的 HTML 元素。
声明块包含一条或多条用分号分隔的声明。
每条声明都包含一个 CSS 属性名称和一个值,以冒号分隔。
多条 CSS 声明用分号分隔,声明块用花括号括起来。
在此例中,所有

元素都将居中对齐,并带有红色文本颜色:

p {
  color: red;
  text-align: center;
}

例子解释
p 是 CSS 中的选择器(它指向要设置样式的 HTML 元素:

)。
color 是属性,red 是属性值
text-align 是属性,center 是属性值

四、CSS 注释

注释是用来解释你的代码,并且可以随意编辑它,浏览器会忽略它。
CSS注释以 /* 开始, 以 */ 结束, 实例如下:

/*这是个注释*/
p
{
    text-align:center;
    /*这是另一个注释*/
    color:black;
    font-family:arial;
}

五、示例

前面内容已经开始使用。

相关推荐

  1. 编程笔记 html5&css&js 036 CSS概述

    2024-01-13 06:24:04       27 阅读
  2. 编程笔记 html5&css&js 036 CSS应用方式

    2024-01-13 06:24:04       34 阅读
  3. 编程笔记 html5&css&js 037 CSS选择器

    2024-01-13 06:24:04       28 阅读
  4. 编程笔记 html5&css&js 039 CSS背景示例

    2024-01-13 06:24:04       31 阅读
  5. 编程笔记 html5&css&js 038 CSS背景

    2024-01-13 06:24:04       35 阅读
  6. 编程笔记 html5&css&js 016 HTML表格

    2024-01-13 06:24:04       34 阅读
  7. 编程笔记 html5&css&js 030 HTML音频

    2024-01-13 06:24:04       27 阅读
  8. 编程笔记 html5&css&js 032 HTML Canvas

    2024-01-13 06:24:04       35 阅读
  9. 编程笔记 html5&css&js 033 HTML SVG

    2024-01-13 06:24:04       27 阅读

最近更新

  1. TCP协议是安全的吗?

    2024-01-13 06:24:04       18 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-01-13 06:24:04       19 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-01-13 06:24:04       18 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-01-13 06:24:04       20 阅读

热门阅读

  1. 【Elasticsearch】Elasticsearch集群搭建详细手册

    2024-01-13 06:24:04       39 阅读
  2. 给el-select的change事件传自己想要的参数

    2024-01-13 06:24:04       30 阅读
  3. Ubuntu按转发HDF5

    2024-01-13 06:24:04       35 阅读
  4. python类装饰器编写单体类

    2024-01-13 06:24:04       34 阅读
  5. 第一天业务题

    2024-01-13 06:24:04       35 阅读
  6. pytest框架

    2024-01-13 06:24:04       30 阅读
  7. 《设计模式的艺术》笔记 - 工厂方法模式

    2024-01-13 06:24:04       32 阅读
  8. Python pytest入门教程

    2024-01-13 06:24:04       34 阅读
  9. 怎么节约cdn流量- 速盾网络(Sudun)

    2024-01-13 06:24:04       36 阅读
  10. 人机协同中的偏序关系

    2024-01-13 06:24:04       38 阅读
  11. linux防火墙查看状态firewall、iptable

    2024-01-13 06:24:04       36 阅读
  12. 【mybatisplus使用示例】

    2024-01-13 06:24:04       38 阅读