CSS基础

CSS基础

更改文本的颜色
将 h2 元素设置为蓝色

<h2 style="color: blue;">CatPhotoApp</h2>

使用元素选择器来设置元素的样式

<style>
</style>

使用class选择器设置元素的样式
使用 class 选择器设置单个元素的样式

<style>
  .blue-text {
    color: blue;
  }
</style>
<p class="blue-text"></p>

使用 class 选择器设置多个元素的样式

<style>
  .red-text {
    color: red;
  }
</style>
<h1 class="red-text"></h1>
<p class="red-text"></p>
.......

更改元素的字体大小

  font-size: 0px;

调整图片的大小
创建一个叫 larger-image 的 CSS class，来控制 HTML 元素的宽度为 500px.

<style>
  .larger-image {
    width: 500px;
  }
</style>

在元素周围添加边框
CSS 边框具有 style、color、width 属性。
将一个 HTML 元素边框设置为 5px 的红色实线边框.

<style>
  .thin-red-border {
    border-color: red;
    border-width: 5px;
    border-style: solid;
  }
</style>

添加圆角边框

可以使用 border-radius 属性使边框变为圆形。
border-radius:50%;

元素的内边距、外边距
每个 HTML 元素所占有的矩形空间由这三个重要的属性来控制：内边距 padding、外边距 margin 、边框 border。

给元素的每一侧添加不同的内边距

 padding-top:;
 padding-right:;
 padding-bottom:;
 padding-left:;

给元素的每一侧添加不同的外边距

margin-top:;
margin-right:
margin-bottom:;
margin-left:;

使用顺时针标记指定元素的内边距
如果不想每次都要分别声明 padding-top、padding-right、padding-bottom、padding-left 属性，可以把它们汇总在一行里面一并声明，像是这样

padding: 10px 20px 10px 20px;
外边距
margin: 10px 20px 10px 20px;

继承 CSS 变量

当创建一个变量时，变量会在创建变量的选择器里可用。 同时，在这个选择器的后代选择器里也是可用的。 这是因为 CSS 变量是可继承的，和普通的属性一样。

CSS 变量经常会定义在 :root 元素内，这样就可被所有选择器继承。

:root 是一个伪类选择器，它是一个能够匹配文档根元素的选择器，通常指的是 html 元素。 我们在 :root 里创建变量在全局都可用，即在任何选择器里都生效。