博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
css的工作原理及使用规则
阅读量:7209 次
发布时间:2019-06-29

本文共 1763 字,大约阅读时间需要 5 分钟。

1. css定义

层叠样式表(英语:Cascading Style Sheets,简写CSS),又称串样式列表、级联样式表、串接样式表、层叠样式表、阶层式樣式表,一种用来为结构化文档(如HTML文档或XML应用)添加样式(字体、间距和颜色等)的计算机语言,由W3C定义和维护。目前最新版本是CSS2.1,为W3C的推荐标准。CSS3现在已被大部分现代浏览器支持,而下一版的CSS4仍在开发中。

2. css的工作原理

当浏览器显示文档时,它必须将文档的内容与其样式信息结合。它分两个阶段处理文档:

  • (1)浏览器将 HTML 和 CSS 转化成 DOM (文档对象模型)。DOM在计算机内存中表示文档。它把文档内容和其样式结合在一起。
  • (2)浏览器显示 DOM 的内容。

3. css的引用

a. 外部样式表

在HTML的<head>标签中,使用<link>元素中引用

b. 内部样式表

将 CSS 放置在<style>元素中,该元素包含在 HTML head 内。

c. 内联样式

内联样式是仅影响一个元素的CSS声明,被 style 属性包括着。

4. css的语法

a. 最常用的形式

选择器 {    属性名:属性值;    属性名:属性值;    ……}复制代码

b. 一些概念

css声明:一个属性名就是一个声明

css声明块:每一组声明都用一对大括号包裹,一个{声明组}就是一个css声明块
css选择器:如上所示位置,用来匹配对应元素
css选择器组:多个选择器用逗号隔开
规则(规则集: 选择器加上声明块

c. css语句(CSS statements)

CSS 规则是样式表的主要组成块 —— 是 CSS 中最常见的块。但还有一些其它类型的块 —— CSS 规则只是被称为 CSS 语句中的一种。

其它类型如下:
@-规则 (At-rules): 在CSS中被用来传递元数据、条件信息或其它描述性信息。
它由(@)符号开始,紧跟着一个表明它是哪种规则的描述符,之后是这种规则的语法块,并最终由一个半角分号(;)结束。每种由描述符定义的@-规则,都有其特有的内部语法和语义。一些例子如下:

@charset 和 @import (元数据)@media 或 @document (条件信息,又被称为嵌套语句,见下方。)@font-face (描述性信息)复制代码

具体语法示例: @import 'custom.css'; 该@-规则向当前 CSS 导入其它 CSS 文件

嵌套语句:是@-规则中的一种,它的语法是 CSS 规则的嵌套块,只有在特定条件匹配时才会应用到文档上。特定条件如下:

@media 只有在运行浏览器的设备匹配其表达条件时才会应用该@-规则的内容;@supports 只有浏览器确实支持被测功能时才会应用该@-规则的内容;@document 只有当前页面匹配一些条件时才会应用该@-规则的内容。复制代码

具体语法示例 下述的嵌套语句只有在页面宽度超过801像素时才会应用。

@media (min-width: 801px) {  body {    margin: 0 auto;    width: 800px;  }}复制代码

5. 语法之外:使 CSS 更具可读性

空格:例如,属性和属性值边上的空格,margin: 0 auto;

注释: /* 注释内容 */ , 利用注释是代码更容易理解
简写: 一些属性比如 font,background,padding,border,和 margin 被称为简写属性 —— 这是由于它们允许你在一行设置多个属性,从而节省时间并使代码更整洁。

6. 参考链接

  • https://zh.wikipedia.org/wiki/%E5%B1%82%E5%8F%A0%E6%A0%B7%E5%BC%8F%E8%A1%A8
  • http://www.runoob.com/css/css-syntax.html
  • https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Introduction_to_CSS

转载于:https://juejin.im/post/5ae6d8fa6fb9a07a9c03fe94

你可能感兴趣的文章
Asp.net MVC中提交集合对象,实现Model绑定
查看>>
谁说码农不懂浪漫?(js写的'老婆生日快乐'特效)
查看>>
构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(16)-权限管理系统-漂亮的验证码...
查看>>
学习VI的强文,新工作需要呀
查看>>
使用html和css的一些经验
查看>>
GNU的ar,ranlib和nm
查看>>
《Linux内核设计与实现》读书笔记(十九)- 可移植性
查看>>
如何查看ubuntu下显卡驱动是否已经成功安装
查看>>
都是假期惹的祸,该如何安慰自己?
查看>>
ImageTag小案例
查看>>
BIND9源码分析之UDP数据处理
查看>>
php 验证类
查看>>
AndroidManifest.xml配置文件
查看>>
PHP文件包含漏洞剖析
查看>>
用户反馈:对 Rafy 开发框架的一些个人建议
查看>>
C# ASP.NET B/S模式下,采用lock语法 实现多用户并发产生不重复递增单号的一种解决方法技术参考...
查看>>
android中ListView点击和里边按钮点击不能同时生效问题解决
查看>>
.tar.bz2文件解压命令
查看>>
算法思想
查看>>
【jquery】hover方法
查看>>