1、CSS样式及其基本语法

2024-06-01 17:48:48

CSS 语法

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。

selector {declaration1; declaration2; ... declarationN }

样式是 CSS 最小语法单元，每个样式包含两部分内容：选择器和声明（规则），如图 1 所示。

1) 选择器（Selector）

选择器告诉浏览器该样式将作用于页面中哪些对象，这些对象可以是某个标签、所有网页对象、指定 class 或 id 值等。浏览器在解析这个样式时，根据选择器来渲染对象的显示效果。

2) 声明（Declaration）

声明可以增加一个或者无数个，这些声明告诉浏览器如何去渲染选择器指定的对象。

声明必须包括两部分：属性和属性值，并用分号来标识一个声明的结束，在一个样式中最后一个声明可以省略分号。

所有声明被放置在一对大括号{ }内，然后整体紧邻选择器的后面。

3) 属性（Property）

属性是 CSS 提供的设置好的样式选项。属性名由一个单词或多个单词组成，多个单词之间通过连字符相连。这样能够很直观地表示属性所要设置样式的效果。

4) 属性值（Value）

属性值用来显示属性效果的参数。它包括数值和单位，或者关键字。

【示例1】定义网页字体大小为 12 像素，字体颜色为深灰色，则可以设置如下样式。

body{ font-size: 12px; color: #CCCCCC; }

多个样式可以并列在一起，不需要考虑如何进行分隔。

【示例2】定义段落文本的背景色为紫色，则可以在上面样式基础上定义如下样式。

body{ font-size: 12px; color: #CCCCCC;} p{ background-color: #FF00FF; }

由于 CSS 语言忽略空格（除了选择器内部的空格外），因此可以利用空格来格式化 CSS 源代码，则上面代码可以进行如下美化：

body {font-size: 12px;color: #CCCCCC;
}
p {background-color: #FF00FF;
}

这样在阅读css源代码时就一目了然了，既方便阅读，也更容易维护。

1、CSS样式及其基本语法相关推荐

JS控制CSS样式语法对照
CSS与JS紧密配合,为我们的页面增添了很多别致的效果.为了达到某种特殊的效果我们需要用Javascript动态的去更改某一个标签的CSS属性. 例如常用的关闭某个漂浮的广告显示:document.g ...
CSS样式规则-CSS结构的特点
要想熟练地使用CSS对网页进行修饰,首先要了解CSS样式规则.设置CSS样式的具体语法规则如下. 选择器{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; -} 在上面的样式规则中,选择器用 ...
前端JavaScript DOM BOM 自学复盘 D1（DOM-获取DOM元素、修改HTML标签/表单/css样式属性、定时器-间歇函数）
内容概要 1. Web API 基本认知 1.1. 作用和分类 1.2. 什么是DOM 1.3. DOM作用 1.4 DOM树 1.4.1. DOM树是什么? 1.4.2. DOM 树的作用 1.5 ...
vue css样式穿透
1. 关于常规css样式的穿透语法 >>> <style scoped>>>> .boxFather .boxChild{width: 200px !i ...
Emmet语法（快速生成HTML结构语法、快速生成CSS样式语法）
1. 快速生成HTML结构语法生成标签直接输入标签名按tab键即可比如div然后tab键,就可以生成<div></div> 如果想要生成多个相同标签加上*就可以了 ...
CSS样式的使用（CSS选择器、CSS语法、CSS常见样式）：
1.CSS样式的理解: Cascading Style Sheets(层叠样式表):修饰html标签样式的 2.使用(需要内嵌html中): 1.行内样式:(通过标签的style属性使用) 格式:样式 ...
CSS浏览器兼容性的4个解决方案：浏览器CSS样式初始化、浏览器私有属性，CSS hack语法和自动化插件...
前端是一个苦逼的职业,不仅因为技术更新快,而且要会的东西实在太多了(如果全写出来,那真是一箩筐),更让人头疼的是,还要面临各种适配.兼容性问题. 一直以来都是头痛医头脚痛医脚,没有进行系统的梳理,整个 ...
快速生成CSS样式语法（HTML、CSS）
快速生成CSS样式语法(HTML.CSS) <!DOCTYPE html> <html lang="en"><head><meta cha ...
CSS样式（一）- 基本语法
css样式 - 基本语法 css样式语法 - 基本语法格式 css又叫层叠样式表 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明选择器: 通常是您需要改变样式的HTML元素例如: ...

最新文章

热门文章