【前端】HTML+CSS复习记录【4】

前言

长时间未使用HTML编程，前端知识感觉忘得差不多了。通过梳理知识点，重新学习和巩固前段相关知识。
学习位置：W3CSchool：HTML + CSS 基础实战

一、CSS-width、height（调整宽高）

绝对尺寸
有px（像素）、pt（点，1pt 相当于 1/72in）、in（英寸）、cm（厘米）、mm（毫米）等。
相对尺寸
有 em、%、rem，它们都是相对于某个参考基准的大小，来计算当前的大小，只是参考基准不同而已。

二、CSS-borde（调整边框样式,颜色,和宽度）

顺序：大小->宽度->颜色   用空格分隔 border可单边定义如-border-right-coler

 p {
    border:5px solid red;
    ​border-radius:10px; /*也可用百分比设置，如  border-radius:50%->圆形; */
  }
  /*等同于*/
   p {
    border-width:5px;
    border-style:solid;
    border-coler:red;
  }
  /*单边定义*/
  p{
    border-top-style:dotted;
    border-right-style:solid;
    border-bottom-style:dotted;
    border-left-style:solid;
}

宽度种类如下

<style>
p.none {border-style:none;}
p.dotted {border-style:dotted;}
p.dashed {border-style:dashed;}
p.solid {border-style:solid;}
p.double {border-style:double;}
p.groove {border-style:groove;}
p.ridge {border-style:ridge;}
p.inset {border-style:inset;}
p.outset {border-style:outset;}
p.hidden {border-style:hidden;}
</style>

<p class="none">无边框。</p>
<p class="dotted">虚线边框。</p>
<p class="dashed">虚线边框。</p>
<p class="solid">实线边框。</p>
<p class="double">双边框。</p>
<p class="groove"> 凹槽边框。</p>
<p class="ridge">垄状边框。</p>
<p class="inset">嵌入边框。</p>
<p class="outset">外凸边框。</p>
<p class="hidden">隐藏边框。</p>

三、CSS-background-color（调整背景颜色）

CSS 颜色可以通过多种方式指定，包括：
预定义的颜色名称，如 red、blue、green 等。
十六进制值，如 #FF0000 代表红色。
RGB 值，如 rgb(255, 0, 0) 代表红色。
RGBA 值，如 rgba(255, 0, 0,1)，最后一个值代表不透明度。
HSL 值，如 hsl(0, 100%, 50%)，色相、饱和度、亮度。
HSLA 值，如hsla(0, 100%, 50%, 1)，加上不透明度。

四、id与class

class可复用，id不可重用，只可应用于一个元素上
在声明 id 的时候，必须在名字前插入#符号

在 CSS 里，id的优先级要高于class，如果一个元素同时应用了class和id，并设置样式有冲突，会优先应用id的样式

系列文章目录

【前端】HTML+CSS复习记录【1】
【前端】HTML+CSS复习记录【2】
【前端】HTML+CSS复习记录【3】
【前端】HTML+CSS复习记录【4】（本章）