更改文本颜色

修改h2元素的style属性来改变文本颜色，需要修改color属性值。需要在内联 style 声明末尾加上 ;

<h2 style=" color: red;"> 更改颜色 </h2>

元素选择器

在代码的顶部，创建一个 style 声明区域

<style> 
   h2 {
      color :blue;
    }
</style>

可以为所有的h2元素创建一个css selector

class选择器

CSS 的 class 具有可重用性，可应用于各种 HTML 元素，class选择器可设置单个元素的样式，以.为句首

<style>
   .red-text{
    color: red;
    }
</style>
<h2 class="red-txet"> 文本 </h2>

内外边距、边框

添加边框

CSS 边框具有 style、color、width 属性

<style>
   .border {
     border-color: red;
     border-width: 5px;
     border-style: solid;  <!--实线-->
     border-radius: 10px;  <!--边框圆角程度，也可以设置成50%-->
   }
</style>

记得在一个元素上可以同时应用多个 class，使用空格来分隔不同 class 即可

<img class=" class1 class2"

内边距

内边距padding，padding 用来控制着元素内容与 border 之间的空隙大小，还可以设置四个不同方向的 padding 值

padding-top: 10px;
padding-left: 10px;
padding-right: 20px;
padding-bottom: 20px;

内外边距

外边距

外边距 margin 用来控制元素的边框与其他元素之间的 border 距离，增加蓝色的 margin 值，它也会增加元素边框到其他周围元素的距离

在内外边距的设置里，可以按照顺时针顺序进行排序：上、右、下、左

padding: 10px 20px 10px 20px;

属性选择器

使用 [attr=value] 属性选择器

[type='radio'] {
   margin: 10px 0px 10px 0px;
}

继承样式

设置 body 元素样式的方法跟设置其他 HTML 元素样式的方式一样，并且其他元素也会继承 body 中所设置的样式

<style>
  body {
     color: green;
     background: black;
     font-family: monospace;
  }
</style>
<h1>
   Hello World
</h1>

  • Class 选择器的优先级高于继承样式

  • ID 选择器优先级高于 Class 选择器

  • 内联样式的优先级高于 ID 选择器

  • Important 的优先级最高(!important)

<h1 
    id="orange-text" 
    class="pink-text blue-text" 
    style="color: white"  <!--行内样式-->
>
    Hello World!
</h1>

自定义CSS变量

为创建一个 CSS 变量，只需要在变量名前添加两个连字符号，并为其赋值即可

--penguin-skin: gray;

使用自定义CSS变量

background: var(--penguin-skin);

除非变量名称完全匹配，否则将不会应用样式

CSS变量设置备用值

使用变量来作为 CSS 属性值的时候，可以设置一个备用值来防止由于某些原因导致变量不生效的情况

background: var(--penguin-skin, balck)

备用值不是用于增强浏览器的兼容性，它也不适用于 IE 浏览器。 相反，它是用来让浏览器在找不到你的变量时可以显示一种颜色

继承CSS变量

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

:root {
   --penguin-belly: pink;
}

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

如果在元素里创建相同的变量，会重写作用于整个页面的变量的值

媒体查询

当屏幕小于或大于媒体查询所设置的值，只要更新变量的值，那么使用了此变量的元素样式就都会更改

@media (max-width: 350px){
  :root {
     ****
  }
}

图片自适应设备尺寸

设置 max-width 值为 100% 可确保图片不超出父容器的范围；设置 height 属性为 auto 可以保持图片的原始宽高比

img{
  max-width:100%;
  height: auto;
}

排版随尺寸响应

可以用视窗单位来做响应式排版，视窗单位和百分比都是相对单位，但它们是基于不同的参照物

body { width: 30vw; }
  • vw：如 10vw 的意思是视窗宽度的 10%。
  • vh： 如 3vh 的意思是视窗高度的 3%。
  • vmin： 如 70vmin 的意思是视窗的高度和宽度中较小一个的 70%。
  • vmax： 如 100vmax 的意思是视窗的高度和宽度中较大一个的 100%。