0
点赞
收藏
分享

微信扫一扫

前端第三次培训(css选择器)

仲秋花似锦 2022-02-06 阅读 30

内部样式表

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

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

语法中,style标签一般位于head标签中title标签之后,也可以把他放在HTML文档的任何地方。

type="text/CSS" 在html5中可以省略, 写上也比较符合规范, 所以这个地方可以写也可以省略。

行内式(内联样式)

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

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

语法中style是标签的属性,实际上任何HTML标签都拥有style属性,用来设置行内式。其中属性和值的书写规范与CSS样式规则相同,行内式只对其所在的标签及嵌套在其中的子标签起作用。

外部样式表(外链式)

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

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

注意: link 是个单标签哦!!!

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

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

类选择器

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

法格式如下:

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

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

类选择器最大的优势是可以为元素对象定义单独或相同的样式。 可以选择一个或者多个标签

小技巧:

1.长名称或词组可以使用中横线来为选择器命名。
2.不建议使用“_”下划线来命名CSS选择器。

​ 输入的时候少按一个shift键; 浏览器兼容问题 (比如使用_tips的选择器命名,在IE6是无效的) 能良好区分JavaScript变量命名(JS变量命名是用“_”)

3.不要纯数字、中文等命名, 尽量使用英文字母来表示。

命名规范: 见附件(Web前端开发规范手册.doc)

命名是我们通俗约定的,但是没有规定必须用这些常用的命名。

id选择器

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


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

该语法中,id名即为HTML元素的id属性值,大多数HTML元素都可以定义id属性,元素的id值是唯一的,只能对应于文档中某一个具体的元素。

用法基本和类选择器相同。

id选择器和类选择器区别

W3C标准规定,在同一个页面内,不允许有相同名字的id对象出现,但是允许相同名字的class。

类选择器(class) 好比人的名字, 是可以多次重复使用的, 比如 张伟 王伟 李伟 李娜

id选择器 好比人的身份证号码, 全中国是唯一的, 不得重复。 只能使用一次。

id选择器和类选择器最大的不同在于 使用次数上。

举报

相关推荐

0 条评论