文章导航

CSS 基础语法

2019-1-11 19:25| 作者: admin| 查看: 765| 评论: 0|来自: 蚂蚁部落

任何复杂的程序都是由小的元素构成,对于CSS代码也是如此。

所以,良好的基础知识掌握是进阶的必由之路,不可能有其他捷径。

本文将结合代码实例介绍一下CSS最基础知识,读完本文您会掌握如下内容:

(1).CSS语法结构。

(2).CSS大小写选择。

(3).CSS常见选择器示例。

(4).CSS选择器优先级:

(5).CSS应用方式。

一.CSS语法结构:

CSS语法构成比较简单,主要有如下两个部分组成:

(1).选择器。

(2).主体部分。

语法结构如下:

[CSS] 纯文本查看 复制代码
selector {
  Rules 
}

语法结构解析如下:

(1).selector :它是一个元素选择器,可以匹配所有的div元素,选择器种类众多,且可以组合使用。

(2).Rules :CSS规则主体部分,具体定义匹配元素的表现形式,由具体的声明构成,可以有多条声明,声明与声明之间用分号分隔,最后一个声明后的分号可以省略;每一条声明由CSS属性和对应的属性值构成,中间由冒号分隔。

[CSS] 纯文本查看 复制代码
div {
  width:100px;
  height:50px;
  border:1px dotted red;
}

上面是一个简单的代码演示,div是一个元素选择器,主题部分由三个CSS声明构成,分别定义div的宽度、高度和边框样式,声明之间用分号分隔,最后一个分号是可以省略的。为了代码更为易读,会对CSS代码格式进行一定的缩进或者换行。

二.大小写选择器:

规范中没有强制规定CSS代码的大小写,但是建议统一使用小写形式。

无论是选择器,还是主题部分的具体代码都建议使用小写,这是业界编写代码的惯例。

[CSS] 纯文本查看 复制代码
DIV{COLOR:RED}

上面的代码是非推荐形式,正确方式如下:

[CSS] 纯文本查看 复制代码
div{color:red}

三.常见选择器:

CSS选择器种类众多,这里只会简单介绍几个常见的选择器,且不会进行过多深入介绍。

目的是让学习者能够写一些简单的CSS代码,以便对CSS作用与使用有一个初步的掌握,以便继续深入学习。

(1).元素选择器:元素选择器极为简单,标签的名称就是元素选择器,比如div、p或者span等。

(2).id选择器:id选择器由井号(#)+元素的id属性值构成,例如#ant,ant是元素的id属性值。

(3).class选择器:class选择器有点(.)+元素的class属性值构成,例如.ant,ant是元素的class属性值。

仅介绍上面三个最为简单的选择器,更多的内容可以参阅CSS教程版块其他内容。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
span{color:red}
#ant{color:blue}
.ant{color:green}
</style>
</head>
<body>
<span>蚂蚁部落一</span>
<div id="ant">蚂蚁部落二</div>
<div class="ant">蚂蚁部落三</div>
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201901/11/192735jcpxse8yeezpmpc8.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

四.选择器优先级:

CSS选择器是具有优先级的,id选择器>class选择器>元素选择器。

当然优先级原则并不会这么简单,更多内容参阅CSS 选择器优先级规则一章节。

如果选择器优先级相同,那么后面的CSS属性值会覆盖前面的值,代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
div{color:red}
#ant{color:green}
.cl{color:blue}
</style>
</head>
<body>
<div class="cl" id="ant">蚂蚁部落</div>
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201901/11/192818ohstbwh5aytthtbc.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

可以看到id选择器设置的设置的字体颜色会生效。

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
div{color:red}
div{color:blue}
</style>
</head>
<body>
<div class="cl" id="ant">蚂蚁部落</div>
</body>
</html>

字体颜色呈现蓝色,如果选择器优先级相同,那么后面选择器中css属性设置的值会覆盖前面设置的值。

五.CSS应用方式:

使用css的方式主要以下三种:

(1).行内样式。

(2).内嵌样式。

(3).外联样式。

特别说明:不同教程对三种应用方式的称呼可能不同,但这并不是教程的关键。

行内样式是通过html元素的style属性直接定义在便签内的CSS代码:

[HTML] 纯文本查看 复制代码
<div style="color:blue">蚂蚁部落</div>

优点是应用简单,但是缺点也非常明显,会让代码非常臃肿,且不容易维护。

简短的CSS应用尚可,如果CSS代码较为复杂,不推荐使用。

内嵌样式是通过<style>标签定义,代码如下:

[HTML] 纯文本查看 复制代码
<style type="text/css">
div{
  font-size:12px;
  color:green;
}
</style>

此标签通常置于<head>标签之内,应用同样非常的简单。

简短的CSS代码可以使用此方法,如果较大规模的CSS代码不推荐使用。

外联样式就是将一个css文件引入当前页面,代码如下:

[HTML] 纯文本查看 复制代码
<link rel="stylesheet" type="text/css" href="style.css" />

当css代码较多的时候,推荐使用此方式。


鲜花

握手

雷人

路过

鸡蛋
上一篇:CSS E:nth-last-of-type(n)下一篇:CSS @import

最新评论

返回顶部