浅谈css样式的基本语法结构

2020年12月29日11:11:24 评论 67

CSS样式是纯文本格式文件,在编辑CSS时,可以使用一些简单的纯文本编辑工具,如记事本,也可以使用专业的CSS编辑工具,如Dreamweaver。CSS样式是由若干条样式规则组成的,这些样式规则可以应用到不同的元素或文档中来定义它们所显示的外观。下面我们一起来看看浅谈css样式的基本语法结构吧。

浅谈css样式的基本语法结构

一、CSS样式基本语法

CSS样式由选择器和属性构成,CSS样式的基本语法如下。

CSS选择器 {
属性1: 属性值1;
属性2: 属性值2;
属性3: 属性值3;
……
}

下面是在HTML页面内直接引用CSS样式,这个方法必须把CSS样式信息放在<style>和</style>标签中,为了使样式在整个页面中产生作用,应把该组标签及内容放到<head>和</head>标签中去。
例如,将HTML页面中所有<p>标签中的文字都显示为红色,其代码如下。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS基本语法</title>
<style type="text/css">
p {color: red;}
</style>
</head>
<body>
<p>这里是页面的正文内容</p>
</body>
</html>

提示:
<style>标签中包括了type="text/css"属性设置代码,这是让浏览器知道<style>与</style>标签之间的内容为CSS样式代码。

在使用CSS样式的过程中,经常会遇到几个选择器用到同一个属性的情况,如规定页面中凡是粗体字、斜体字和1号标题字都显示为蓝色,按照上面介绍的写法应该将CSS样式写为如下形式。

B {color: blue;}
I {color: blue;}
H1{color: blue;}

这样书写十分麻烦,在CSS样式中引进了分组的概念,可以将相同属性的样式写在一起,这样CSS样式的代码就会简洁很多,其代码形式如下。

B,I,H1 {color: blue ;}

用逗号分隔各CSS样式选择器,将3行代码合并为1行。

二、CSS样式规则构成

CSS规则是所有CSS样式的基础,每一条规则都是一条单独的语句,确定应该如何设计样式,以及应该如何应用这些样式。因此,CSS样式由规则列表组成,浏览器用它来确定页面的显示效果。

CSS由两个部分组成:选择器和声明,其中声明由属性和属性值组成,所以简单的CSS规则形式如下。

浅谈css样式的基本语法结构

1.选择器

选择器用于指定对文档中的哪个对象进行定义,最简单的选择器类型是“标签选择器”,直接输入HTML标签的名称,便可以对其进行定义。如定义HTML中的<p>标签,只要给出< >尖括号内的标签名称,用户就可以编写标签选择器了。

2.声明

声明包含在大括号“{}”内,在大括号中首先给出属性名,接着是冒号“:”,然后是属性值,结尾分号是可选项,推荐使用结尾分号,整条规则以结尾大括号结束。

3.属性

属性由官方CSS规范定义。用户可以定义特有的样式效果,与CSS兼容的浏览器会支持这些效果,尽管有些浏览器识别不是正式语言规范部分的非标准属性,但是大多数浏览器很可能会忽略一些非CSS规范部分的属性,最好不要依赖这些专有的扩展属性,不识别它们的浏览器只是简单地忽略它们。

4.属性值

声明的值放置在属性名和冒号之后。它确切定义应该如何设置属性。每个属性值的范围也由CSS规范定义。

大发贱志
  • 本文由 发表于 2020年12月29日11:11:24
  • 转载请务必保留本文链接:https://bigfa.com/475.html
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: