初识css样式 您所在的位置:网站首页 初识css丰富多彩的网页样式有哪些 初识css样式

初识css样式

2024-07-08 07:39| 来源: 网络整理| 查看: 265

css通常称为css样式表或层叠样式表,作用是页面美化。

引入CSS样式表(书写位置)

1.行内式(内联样式)

内联样式,又有人称行内样式、行间样式、内嵌样式。是通过标签的style属性来设置元素的样式,其基本语法格式如下:

内容

2.内部样式表:

内嵌式是将CSS代码集中写在HTML文档的head头部标签中,并且用style标签定义,其基本语法格式如下:

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

3.外部样式表(外链式)

链入式是将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中,通过link标签将外部样式表文件链接到HTML文档中,其基本语法格式如下:  

注意: link 是个单标签。

该语法中,link标签需要放在head头部标签中,并且必须指定link标签的三个属性,具体如下:

href:定义所链接外部样式表文件的URL,可以是相对路径,也可以是绝对路径。 type:定义所链接文档的类型,在这里需要指定为“text/CSS”,表示链接的外部文件为CSS样式表。 rel:定义当前文档与被链接文档之间的关系,在这里需要指定为“stylesheet”,表示被链接的文档是一个样式表文件。

选择器

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

css基础选择器如下:

1.标签选择器(元素选择器)

标签选择器是指用HTML标签名称作为选择器,按标签名称分类,为页面中某一类标签指定统一的CSS样式。其语法格式如下:

标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }  或者 元素名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

2.类选择器

类选择器使用“.”(英文点号)进行标识,后面紧跟类名,其基本语法格式如下:

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

 标签调用的时候用 class=“类名”  即可。

3.id选择器

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

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

4.通配符选择器

通配符选择器用“*”号表示,他是所有选择器中作用范围最广的,能匹配页面中所有的元素。其基本语法格式如下:

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



【本文地址】

公司简介

联系我们

今日新闻

    推荐新闻

    专题文章
      CopyRight 2018-2019 实验室设备网 版权所有