首页 » 软件开发 » 大数据开发基础之CSS创建(样式样式表内联选择器创建)

大数据开发基础之CSS创建(样式样式表内联选择器创建)

admin 2024-07-24 00:49:38 0

扫一扫用手机浏览

文章目录 [+]

1. 外部样式表External style sheet

这种主要适用于多页面的情况,外部样式表是可以通过改变一个文件,以此来改变整个站点的外观。
每个页面都需使用<link>标签来链接到样式表,注意<link>标签要在文档的头部。
这种做法能够节约大量的代码空间,提升网页打开速度,以此优化体验效果

例如

大数据开发基础之CSS创建(样式样式表内联选择器创建) 软件开发
(图片来自网络侵删)

<head>

<link rel="stylesheet" type="text/css" href="mystyle.css">

</head>

浏览器就会从文件mystyle.css中读到样式声明,并以此根据它来格式文档,外部样式表有三个要素:1.链接地址 2.type定义 3.样式表的名称并且它的标志就是.CSS的文件名。
外部样式表可以在文本文档进行任意的编辑,但文件不能有任何的HTML标签,应该以.CSS的扩展名进行保存

hr {color:sienna;}

p {margin-left:20px;}

body {background-image:url("/images/back40.gif");}

在上面这个例子中我们就定义了颜色、边距、背景图像等。

2. 内部样式表Internal style sheet

当单个文档需要特殊的样式时,仅仅在一个网页当中发生作用,我们在这个时候就应该使用内部样式表,对这个样式表进行一个单独的定义。
你可以使用 <style> 标签在文档头部定义内部样式表,就像这样:

<head>

<style type="text/css">

hr {color: sienna;}

p {margin-left: 20px;}

body {background-image: url("images/back40.gif");}

</style>

</head>

3. 内联样式Inline style

这是一种更为特殊的样式表达方式,由于要将表现和内容混杂在一起,内联样式会损失掉样式表的许多优势,例如当样式仅需要在一个元素上应用一次时,是一种劣大于优的方式,不是很建议使用,使用的话需要考虑再三。

要使用内联样式,你需要在相关的标签内使用样式(style)属性。
Style 属性可以包含任何 CSS 属性。

<p style="color: sienna; margin-left: 20px">

This is a paragraph

</p>

上例就展示了如何改变段落的颜色和左外边距。

除了上述3中样式外,还有一种多重样式,这种方式的使用主要是因为有的时候选择的样式表过多,这个元素的属性值就会进行一个均衡的赋予。

使用多重样式时会有一个优先级顺序

内联样式> 内部样式 >外部样式> 浏览器默认样式

例子

<head>

<!-- 外部样式 style.css -->

<link rel="stylesheet" type="text/css" href="style.css"/>

<!-- 设置:h3{color:blue;} -->

<style type="text/css">

/ 内部样式 /

h3{color:green;}

</style>

</head>

<body>

<h3>测试!
</h3>

</body>

CSS7 种选择器:

1. ID选择器 2.类选择器 3.伪类选择器 4.属性选择器 5.伪元素选择器 6.通配选择器 7.标签选择器

以上就是作为大数据开发基础的前端技术CSS创建的一些知识技巧,希望能够对大家有所帮助,我们在清楚和了解了知识过后,最重要的就是实操,所以希望大家能够多进行一些实际操作,自己敲代码,这样才能发现有不懂的地方也能够及时发现。

标签:

相关文章

C语言表白代码,编程之美,爱意绵绵

在这个科技飞速发展的时代,编程已经成为了我们生活中不可或缺的一部分。而C语言作为一门经典的编程语言,更是备受青睐。今天,就让我们用...

软件开发 2024-12-04 阅读8 评论0

16倍速生活方式,高效工作与生活的完美融合

随着科技的飞速发展,我们的生活节奏也在不断加快。在这个快节奏的时代,如何高效地平衡工作与生活,成为了许多人关注的焦点。本文将探讨1...

软件开发 2024-12-04 阅读7 评论0

C语言编程猜数游戏,编程与娱乐的完美融合

在科技日新月异的今天,编程已经成为一项重要的技能。作为计算机科学的基础,编程不仅可以锻炼我们的逻辑思维,还能提高我们的动手能力。而...

软件开发 2024-12-04 阅读7 评论0

C语言病毒代码介绍,技术与道德的双重挑战

随着信息技术的飞速发展,网络安全问题日益凸显。病毒作为一种恶意软件,严重威胁着计算机系统的稳定运行。C语言作为一种功能强大的编程语...

软件开发 2024-12-04 阅读5 评论0