小白学习CSS基础应用(一)——CSS样式规则与 CSS基础选择器

一、CSS样式规则

如果你希望网页美观、大方,并且升级轻松、维护方便,这个时候就需要使用CSS,实现结构与表现的分离。

 

                      网上购物                                                   热点新闻                                                             热门游戏

                                                   CSS样式 修饰的网页大家随处可见

                                                                                               

                                                         CSS样式的书写规则是什么?

1、CSS样式规则

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

在上面的样式规则中,选择器用于指定CSS样式作用的HTML对象,花括号内是对该对象设置的具体样式。其中,属性和属性值以“键值对”的形式出现,用英文“:”连接,多个“键值对”之间用英文“;”进行区分。

2、引入CSS样式表

那引入CSS样式表的方式有哪些呢?

(1)行内式

行内式也称为内联样式,是通过标记的style属性来设置元素的样式。  

语法格式

<标记名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标记名>

(2)内嵌式

内嵌式是将CSS代码集中写在HTML文档的<head>头部标记中,并且用<style>标记定义。

语法格式

<head>
<style type="text/css">
选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
</style>
</head>

(3)链入式

链入式是将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中,通过<link />标记将外部样式表文件链接到HTML文档中。

<head>
<link href="CSS文件的路径" type="text/css" rel="stylesheet" />
</head>

二、 CSS基础选择器

要想将CSS样式应用于特定的HTML元素,首先需要找到该目标元素。在CSS中,执行这一任务的样式规则部分被称为选择器。

1、标记选择器

标记选择器是指用HTML标记名称作为选择器,按标记名称分类,为页面中某一类标记指定统一的CSS样式。

语法格式

标记名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

2、类选择器

类选择器使用“.”(英文点号)进行标识,后面紧跟类名。

语法格式

.类名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

3、id选择器

id选择器使用“#”号进行标识,后面紧跟id名,其基本语法格式如下:

语法格式

#id名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

4、通配符选择器

通配符选择器使用“*”号表示,它是所有选择器中作用范围最广的,能匹配页面中所有的元素。

语法格式

*{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

以上就是关于CSS基础应用的部分内容,谢谢大家的观看!

©️2020 CSDN 皮肤主题: 1024 设计师:上身试试 返回首页