Web百课斩10：css初级篇-css引入方式（1）

2022-03-21 11:00:44 阅读：133 来源： 互联网

从今天开始，我们就要“抛弃掉”html语言，开始学习快乐的css！

学习之前，我们来了解一个常识：

IE	trident
Firefox	Gecko
Google Chrome	webkit或blink
Safari	Webkit
Opera	presto

这个表格是关于主流浏览器及其内核。左边一栏是浏览器名称，右边是浏览器的内核名称。

如果可以的话，大家可以记下来，以便不时之需。

（阿里有一年的面试题就是关于这个的，就问你怕不怕？）

一、css是什么？

简单的来说，css相当于给html装修，让html变得更好看。比如说，我们以前讲的<strong>标签，它的底层就是css。

二、css的引入

我们在开发中，如何使用css呢？

我们一共有三种方法：

1.行级引入

2.液面级css

3.外部css文件

我们一个一个来看一看。

（1）行级引入

还记得我们之前写的标签了吗？在html的标签中，我们可以给它定义css。例如：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>css的引入</title>
</head>
<body>
	<div style="width: 100px;height: 100px;background-color: red;"></div>
</body>
</html>

这样，就在div标签中定义了一个style，并输出了一个100*100大小的红色正方形。

当然了，我们现在看的不是如何输出红色的正方形，而是如何引入css。

注意以下关键字：style。

我们需要写一个style=""就可以在标签中定义了。我们一般不常用这种方法。

（2）页面级css

顾名思义，这就是在原html文件中定义一个css。

<head>
<style type = “text/css”>
</style>
</head>

这就是一个基本框架。我们要将它写在head里面，并定义style。

这样，我们就可以在style里面开始写css了。

这种方法我们也不会非常常用。第三种方法才是我们开发的常用方法。

（3）外部css文件

首先，我们应该新建一个项目，后缀名改为.css。

接着，关键的就来了。

我们需要在html文件中的head里头写一行这样的代码：

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

当然了，href中的***代表文件名称，我们只需要把文件名称填进去就可以了。例如，我的文件名是demo.css,那么这行代码应该是这样的：

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

今天的内容就是这样，内容比较少，且容易理解，大家可以每一种引入方法都试一试。

还有，浏览器及其内核非常重要！

下期再见！

标签：Web,style,百课,标签,html,引入,我们,css
来源： https://blog.csdn.net/Wanghs0716/article/details/123629035

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。