大数据开发基础之CSS创建
作者：游老师 浏览次数： 2021-02-24 15:06
昨天提到了CSS的基础知识及语法，今天就带来CSS的创建，在大数据开发的基础之中，CSS和HTML都属于前端技术。当读到一个样式表时，浏览器会根据它来格式化 HTML 文档。插入样式表的方法有三种，这三种分别是外部样式表、内部样式表、内联样式。
1. 外部样式表External style sheet
这种主要适用于多页面的情况，外部样式表是可以通过改变一个文件，以此来改变整个站点的外观。每个页面都需使用<link>标签来链接到样式表，注意<link>标签要在文档的头部。这种做法能够节约大量的代码空间，提升网页打开速度，以此优化体验效果
例如
<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创建的一些知识技巧，希望能够对大家有所帮助，我们在清楚和了解了知识过后，最重要的就是实操，所以希望大家能够多进行一些实际操作，自己敲代码，这样才能发现有不懂的地方也能够及时发现。
