css篇 -- 前篇

最新推荐文章于 2024-10-07 21:54:14 发布

原创最新推荐文章于 2024-10-07 21:54:14 发布 · 194 阅读

CC 4.0 BY-SA版权

文章标签：

css即层叠样式表（Cascading Style Sheets），所谓样式，即是定义如何显示 HTML 元素，建议采用引入外联样式的方法，这样实现了内容与样式的分离，结构明晰，极大的提高了工作效率，单个html文件可引入多个css样式文件；

1、css样式的三种引入方式：

（1） 行内样式：

代码中行为是：
<h1 style="color:#efefef;"></h1>

（2）内联样式

书写与HTML文档的head标签内
<head>
	<script>
		h1{
			color:#ffffff;
		}
	</script>
</head>

（3）外联样式：

引入外部的css文件：
<link href="./style.css" rel="stylesheet" type="style/css"/>

href中的路径涉及绝对路径和相对路径，这一部分知识请自行查阅相关资料（直接百度绝对路径和相对
路径即可），style.css  即为引入的css样式文件的名字，是自己要引入的文件为准；后面的rel指的是关联
(relation)，type指的是文件类型为css文件；

2、css属性和值

这一部分为基础知识，相关的属性和值请到x鸟教程或者x3c查阅学习；

3、选择器

关于选择器：这一部分csdn中有大量的文章描绘，包括选择器的种类、作用和对应情况下的选择器种类的选择

关于层叠：那么，层叠是什么呢？层叠就是多个样式的进行叠加显示，涉及到一个优先级的问题，首先是引入方式不同时的优先级：行内 > 内联 > 外联，再者是选择器的优先级：id选择器 > 类选择器 > 元素（标签）选择器 > 通配选择器；具体的选择器部分的知识请查阅相关资料学习；另外还涉及一个样式的来源问题：所谓的样式来源，除了上述三种程序开发者开发的代码来源之外，还有两种开发者无法涉及到层面，即系统层面和用户层面，系统层面并非指的是操作系统层面，而是指浏览器，浏览器这方面指的是浏览器的默认样式，不同的浏览器有不同的默认样式；若果说非要归纳操作系统层面，则为归类为用户层面，用户自身设定操作系统的显示样式，例如字体，会在不同的电脑上有不同的显示，另外还有一些给专门的残障人士设计的样式，例如视觉障碍人士，具体的情况，我本人也没有见过

之后会分享一些css中的重点难点，请持续关注；