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