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创建的一些知识技巧,希望能够对大家有所帮助,我们在清楚和了解了知识过后,最重要的就是实操,所以希望大家能够多进行一些实际操作,自己敲代码,这样才能发现有不懂的地方也能够及时发现。