加入收藏 | 设为首页 | 会员中心 | 我要投稿 东莞站长网 (https://www.0769zz.com/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 编程要点 > 语言 > 正文

CSS引入方式有多少种,要如何实现?

发布时间:2022-04-11 17:17:33 所属栏目:语言 来源:互联网
导读:这篇文章主要给大家介绍的是CSS引入方式,在HTML中引入CSS样式的有内联样式表、内部样式表、外部样式表这三种,文中示例及代码介绍的非常详细,需要的朋友可以参考,接下来就跟随小编来一起学习一下吧! 1.CSS初始 概念:CSS称之为层叠样式表或级联样式表。
     这篇文章主要给大家介绍的是CSS引入方式,在HTML中引入CSS样式的有内联样式表、内部样式表、外部样式表这三种,文中示例及代码介绍的非常详细,需要的朋友可以参考,接下来就跟随小编来一起学习一下吧!
 
    1.CSS初始
 
    概念:CSS称之为层叠样式表或级联样式表。样式定义如何显示HTML元素。样式通常存储在样式表中。
 
    作用:CSS以HTML为基础,提供了丰富的功能,而且还可以针对不同的浏览器设置不同的样式。CSS主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边距等)以及版面的布局和外观显示样式。
 
    2.CSS语法
 
    CSS语法由两个主要的部分构成:选择器,以及一条或多条声明。每条声明由一个属性和一个属性值组成。
 
    简单来说一个样式的语法是由三部分构成:选择器、属性和属性值。
 
    例如:
 
    选择器:选择器会告诉浏览器该样式将作用于页面中哪些对象,而这些对象可以是某个标签、所有网页对象、指定Class或ID值等。浏览器在解析这个样式时,根据选择器来渲染对象的显示鲜果。也就是说选择器通常是你想要改变样式的HTML元素,选择器就是用一种方式把你想要设置样式的那一个标签选中。把这个标签选中了,你才能给这个标签设置CSS样式。
 
    声明:声明可以是一条或者多条,这些声明会告诉浏览器如何去渲染选择器指定的对象。声明由属性和属性值组成,并用分号来标识一个声明的结束,在一个样式中,最后一个声明可以省略分号,所有的声明被放置在一对大括号内,这个大括号跟在选择器的后面。
 
    知道了CSS是做什么的了,也知道了CSS的语法由几部分组成,那么问题来了,如何使用CSS呢,CSS样式书写在什么位置呢?接下来要说的就是CSS的书写位置。
 
    3.CSS的引入方式
 
    在HTML中引入CSS样式的方式有3种,分别为内联样式表、内部样式表、外部样式表。
 
    3.1内联样式表
 
    内联样式表也称之为行内样式表、行间样式表。内联样式表是把CSS代码和HTML代码放在同一个文件中。如果要使用内联样式,需要在相关的标签内使用样式(style)属性。Style属性可以包含任何CSS属性。
 
    语法:<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3; ">内容</标签名>
 

    从上面的代码可以看出,我们给<h1>标签添加了style属性,而给style属性设置的CSS属性是color属性,属性值是red,显示效果如下:
 
    内联样式表方便操作,也很容易理解。 实际上任何HTML标签都拥有style属性,用来设置内联式 。使用内联式需要注意的点如下:
 
    (1).style其实就是标签的一个属性;
 
    (2).样式属性和属性值中间使用";",也就是英文状态下的分号;
 
    (3).多组属性值之间用英文状态下的分号“;”隔开;
 
    (4).内联式只能控制当前的标签和以及嵌套在其中的子标签,容易造成代码冗余。
 
    内联式是在单个标签内定义的。对于网站来说,冗余代码很多,而且由于冗余代码多,每次改动CSS样式都要到具体的标签内修改,这样使得网站的维护性也非常差。而且,内联式没有实现样式和结构相分离。

(编辑:东莞站长网)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    热点阅读