freeCodeCamp-CSS学习笔记
<p>最近工作任务需要自己写前端，作为一名后端程序员，表示之前没写过CSS。 之前看过一些也忘了，这次就好好的在<strong>freecodecamp</strong>学一下CSS基础把。顺便练习一下英语阅读。</p><h2 id="介绍">介绍</h2>
<p>如果说HTML是人的骨骼，那么CSS就像人的皮肤以及衣服,用来装饰人。它能帮助我们控制web的：</p>
<ul>
<li>color(颜色)</li>
<li>fonts(字体)</li>
<li>positioning(定位)</li>
<li>spacing(间距)</li>
<li>sizing(尺寸)</li>
<li>decorations()</li>
<li>transitions(过渡)</li>
</ul>
<h2 id="应用样式">应用样式</h2>
<p>我们有三种方式<strong>应用CSS</strong>:</p>
<p><strong>行内样式</strong></p>
<p>将CSS样式直接写在 HTML 标签的style属性内。</p>
<pre><code class="language-html"><h2 style="color: blue;">CatPhotoApp</h2>
</code></pre>
<p><strong>内页样式</strong></p>
<p>将CSS样式写在HTML文档的 <strong>style</strong> 标签内。</p>
<pre><code class="language-html"><style>
h2 {color: red;}
</style>
</code></pre>
<p><strong>外部样式</strong></p>
<p>将CSS样式写在单独的文件中，再使用link引用。</p>
<pre><code class="language-html"><link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
</code></pre>
<p>但是我们通常开发使用的是第三种引用外部的CSS样式，这样有助于 <strong>代码的可读性</strong> 和 <strong>代码的可重用性</strong>。</p>
<h2 id="选择器">选择器</h2>
<p><strong>元素选择器</strong><br>
使用元素选择器可以渲染一个页面中的一种标签。</p>
<pre><code class="language-html"><style>
h2 {color: red;}
</style>
<h2>CatPhotoApp</h2><!-- 变红 -->
<h2>DogPhotoApp</h2><!-- 变红 -->
<h1>test</h1>
</code></pre>
<p><strong>类选择器</strong><br>
HTML元素内有一个class的属性，元素可以有<strong>多种</strong>类别，每种类别使用<strong>空格</strong>分割。<br>
下面的例子是类选择器将含有 blue-text 的元素渲染成红色。</p>
<pre><code class="language-html"><style>
.red-text {
color: red;
}
</style>
<h2 class="red-text">CatPhotoApp</h2>
</code></pre>
<p>类选择器有助于样式的<strong>组合</strong>使用和<strong>复用性</strong>。在使用前端框架的时候，经常看到生成的代码中class含有多个<strong>类别</strong>。</p>
<p><strong>ID选择器</strong><br>
如果想修改特定的HTML元素，可以使用ID选择器指定。(一个标准的页面id是独一的)</p>
<pre><code class="language-html"><style>
#cat-photo-app {
color: red;
}
</style>
<h2 id="cat-photo-app">
</code></pre>
<p><strong>组合选择器</strong><br>
还可以通过元素和类组合来选择。</p>
<pre><code class="language-html"><style>
p.blue{
color:blue;
}
</style>
<p class="blue">p blue</p>
<span class="blue">span blue</span>
</code></pre>
<p>CSS的选择器还有更多的用法，我自己现在还用不了那么多，需要的时候可以看看 阮一峰-CSS选择器笔记</p>
<h2 id="优先级">优先级</h2>
<p>当同一HTML元素被<strong>不止一个样式定义</strong>时，三者是有<strong>优先级</strong>的。行内样式 > 内页样式 > 外部样式。</p>
<p>在<strong>内页样式</strong>和<strong>外部样式</strong>中也存在样式的优先级。如果使用的是<strong>类选择器</strong>，后面定义的优先级高于前面的。<br>
在下面这个例子中，<h1>含有2个类别，但是 blue-text 在后面定义的，所以<h1>的文字会显示蓝色。</p>
<pre><code class="language-html"><style>
body {
background-color: black;
font-family: monospace;
color: green;
}
.pink-text {
color: pink;
}
.blue-text {
color: blue;
}
</style>
<h1 class="pink-text blue-text">Hello World!</h1> <!-- 字体颜色为蓝色。 class中的pink-text和blue-text顺序无所谓-->
</code></pre>
<p>这种依靠顺序来控制优先级实在不方便。我们还可以使用 id 选择器，它的优先级<strong>大于</strong>类选择器的。</p>
<pre><code class="language-html"><style>
#orange-text{
color: orange;
}
.pink-text {
color: pink;
}
.blue-text {
color: blue;
}
</style>
<h1 id="orange-text"class="pink-text blue-text">Hello World!</h1><!-- 显示橙色 -->
</code></pre>
<p>行内样式的优先级是高于id选择器和类选择器的，但是它还不是最高的。 CSS中还有一个东西优先级更高，那就是 <strong>!important</strong>。</p>
<pre><code class="language-html"><style>
body {
background-color: black;
font-family: monospace;
color: green;
}
#orange-text {
color: orange;
}
.pink-text {
color: pink!important;
}
.blue-text {
color: blue;
}
</style>
<h1 id="orange-text" class="pink-text blue-text" style="color: white">Hello World!</h1><!-- 显示 粉色 pink -->
</code></pre>
<h2 id="变量">变量</h2>
<p>第一次知道CSS是有变量的(前端弱鸡)，不过也确实需要有，变量有利于CSS的<strong>可读性</strong>以及<strong>修改</strong>方便。<br>
例如：</p>
<pre><code class="language-html"><style>
:root{
--red: #ff6f69;
}
.title {
color: var(--red);
}
</style>
<h2 class="title">Test</h2>
</code></pre>
<p>比起下面个人认为可读性好些，看到 color:var(--red) 就可以猜到是红色。</p>
<pre><code class="language-html"><style>
.title {
color:#ff6f69;
}
</style>
<h2 class="title">Test</h2>
</code></pre>
<p><strong>定义变量</strong><br>
声明变量的时候，变量名前面加二根连词线 -- 。<br>
一般定义在 :root 伪类中。它会匹配文档的根元素(通常是标签)。由于变量是可继承的，所以你的整个 HTML 结构树都能使用这个变量，因为所有的 DOM 元素都是 <html> 节点的后代。<br>
下图是Bootstrap的片段。<br>
<img src="https://img2018.cnblogs.com/blog/1217585/201907/1217585-20190714072358215-1582100031.png"></p>
<p><strong>var()函数</strong><br>
var()函数用于读取变量。</p>
<h2 id="结语">结语</h2>
<p>过了一遍CSS基础感觉还挺有意思的，至于那些HTML元素和CSS属性以后要用的时候再看吧！(毕竟还是更喜欢服务端代码)。<br>
觉得如果要学习前端知识，freecodecamp是个不错的地方。</p>
<h2 id="参考链接">参考链接</h2>
<p>CSS 变量教程<br>
freecodecamp</p><br><br>
来源：https://www.cnblogs.com/yx996/p/11181743.html
頁:
[1]