前端学习（九）：CSS基础
<center><h3>进击のpython</h3></center>*****
<h1 id="前端学习css基础">前端学习——CSS基础</h1>
<hr>
<p>CSS的样式可以写在哪呢？其实CSS的样式插入式十分灵活的</p>
<p>按照插入的形势来看，可以分为三种情况</p>
<p>而接下来就对这三种情况进行简单的讨论</p>
<hr>
<h2 id="内嵌式">内嵌式</h2>
<p>CSS样式表是可以直接把代码放在现有的标签里面去的</p>
<p>这种方法就称为内嵌式：</p>
<pre><code><p style='color:red;'>文字颜色为红色</p>
</code></pre>
<p>把对应的style属性，写在p标签的开始标签中</p>
<p>CSS样式代码要写在style=“”双引号中，如果有多条CSS样式代码设置可以写在一起，中间用分号隔开</p>
<pre><code><p style='color:red;font-size:12px;'>文字颜色为红色</p>
</code></pre>
<hr>
<h2 id="嵌入式">嵌入式</h2>
<p>有个新的任务<code>百因必有果！你的报应就是我！</code>，我想把百因必有果，你，我这三个变成红色</p>
<p>要是用内嵌式的话，那可就太难了（每一个<code><span></code>标签加入style=”color:red;”语句，如果有多个span呢？）</p>
<p>那么嵌入式CSS样式的编写就能让我们很快的解决这个问题</p>
<p>嵌入式样式就是把CSS样式代码写在<code><style type='text/CSS'></style></code>标签之间</p>
<p>统一设置span标签的样式：</p>
<pre><code><style type='text/CSS'>
span{
color:red;
}
</style>
</code></pre>
<p>嵌入式的CSS样式必须写在<code><style></style></code>之间</p>
<p>并且一般情况下嵌入式CSS样式写在<code><head></head></code>之间</p>
<hr>
<h2 id="外部式">外部式</h2>
<p>大家试想一下，如果我们做一个类似淘宝那样的商城网站</p>
<p>那么随着项目需求的增多，我们的CSS代码量也会更庞大，越发到了后期</p>
<p>我们上述的内联式和嵌入式CSS样式的方式肯定是不行的，那我们应该怎么办?</p>
<p>这个时候，我们可以使用将我们的CSS代码编写到另一个单独的文件中，以为了后期方便维护我们的代码</p>
<p>那么这就是外部式CSS样式</p>
<p>外部式CSS样式(也可称为外链式)就是把CSS代码写一个单独的外部文件中，这个CSS样式文件以”.CSS”为扩展名</p>
<p>在<code><head></code>内（不是在style标签内）使用<code><link></code>标签将样式文件链接到HTML文件内，如下代码：</p>
<pre><code><link rel="stylesheet" href="index.CSS" type="text/CSS">
</code></pre>
<ul>
<li>CSS样式文件名称以有意义的英文字母命名，如main.css、index.css、base.css等</li>
<li>rel=”stylesheet”
<ul>
<li>rel:relationship的缩写，rel属性用于定义链接的文件和HTML文档之间的关系</li>
<li>stylesheet：文档的外部样式表</li>
</ul>
</li>
<li>href：是指定超链接(之前学习a标签的时候)目标的URL,href属性的值为样式表文件的地址</li>
<li><code><link></code>标签位置一般写在<code><head></code>标签之内</li>
</ul>
<hr>
<h2 id="优先级">优先级</h2>
<p>这么多方式，要是叠加使用，应该用谁的样式呢？？？这就是我们现在要考虑的问题</p>
<p>我们做个测试：</p>
<ol>
<li>使用<strong>内联css</strong>设置”百因必有果“文字为红色。</li>
<li>然后使用<strong>嵌入式css</strong>设置文字为绿色</li>
<li>最后使用<strong>外部式</strong>设置文字为蓝色(index.css文件中设置)</li>
</ol>
<pre><code><!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="index.css">
<style>
span {
color: green;
}
</style>
</head>
<body>
<p><span style="color: red">百因必有果！</span>你的报应就是我！</p>
</body>
</html>
</code></pre>
<pre><code>span{
color: pink;
}
</code></pre>
<p>我们发现，颜色是红色，为什么呢？因为这三种引入方式是优先级的，谁的优先级高浏览器就会显示谁的样式属性</p>
<p><code>内联式>嵌入式>外部式</code></p>
<p>重点来了！！<code>嵌入式>外部式</code>有一个前提：嵌入式css样式的位置一定在外部式的后面！</p>
<p>绿色：</p>
<pre><code><!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="index.css">
<style>
span {
color: green;
}
</style>
</head>
<body>
<p><span>百因必有果！</span>你的报应就是我！</p>
</body>
</html>
</code></pre>
<p>粉色：</p>
<pre><code><!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
span {
color: green;
}
</style>
<link rel="stylesheet" href="index.css">
</head>
<body>
<p><span>百因必有果！</span>你的报应就是我！</p>
</body>
</html>
</code></pre>
<p>所以根本的优先级其实是就近原则！，哪个离被修饰的元素近，用哪个样式！</p>
<p>这也就是为什么CSS叫层叠样式表！</p>
<hr>
<center>*****</center>
<center>*****</center><br><br>
来源：https://www.cnblogs.com/jevious/p/11504914.html
頁:
[1]