前端学习笔记速查-颜色篇

sqm，

已于 2024-02-20 17:50:44 修改

阅读量264

点赞数 4

文章标签：前端学习笔记

于 2024-02-11 12:14:36 首次发布

本文链接：https://blog.csdn.net/qq_58035376/article/details/136094990

版权

freecodecamp学习教程

HTML

结构

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>内容</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="styles.css">    
</head>
    <body>
    <div class="container">
        <div class="marker red"></div>
        <div class="marker green"></div>
        <div class="marker blue"></div>
    </div>
    </body>
</html>

div

div 元素的 display 属性默认是 block。因此，当两个 block 元素彼此相邻时，它们会像实际的块一样堆叠。

堆叠，不是覆盖，不是重叠。

如果想使两个div放在同一行，将其display设置为inline-block。

类选择器，同时选择多个类时：
.class1,.class2{
    dlsplay:inline-block;
}
css复杂选择器

class

一个元素的class可以有一个或者多个。
<div class="container">
        <div class="marker red"></div>
        <div class="marker green"></div>
        <div class="marker blue"></div>
</div>
如果给一个元素添加多个类，那么前面的类的样式会被后面的给覆盖。

比如marker定义颜色为黑色，red定义颜色为红色，最后显示出来是红色的。

可以这样记忆：我们做事情都是按照顺序做，先给他刷上黑色的漆，后面有涂红色的漆，理所应当最后显示的是红色。

link 自闭和

使用CSS设置页面样式，用<link>

rel

href

href值：CSS文件的名称。

meta 自闭和

<meta> 用来添加页面信息。

charset

utf-8 是一个通用字符集，几乎包括所有人类语言中的每个字符。<head>里面的<meta>设置charset值可以告诉浏览器怎样编码。

name content

name 和content 的如此设置，可以让页面在各种设备上看起来是一样的

CSS

段落

p {
  text-align: right;
}

段落元素，向右对齐。

只有一个。或者说是最后一个的时候，这一条后面的分号可以不写。

比如：
p {
  text-align: right
}
这样写也是对的。

注释

/*FOOTER*/

<a> 链接

链接在未点击状态下的默认颜色通常为蓝色。已经在页面上被访问过的链接的默认颜色通常是紫色。

鼠标悬停于链接上，链接颜色变为棕色：

a:hover{
    color:brown;
}

链接访问过，颜色变为灰色：

a:visited{
    color:gray;
}

链接被点击，颜色变为白色：(被点击的瞬间变为白色）

a:active{
    color:white;
}

<img> 图片

使用链接插入图片：

<img alt="信息" src="图片链接"/>

display设置为block，使其为块状元素。margin-left和margin-right设置为auto可使元素居中。

img{
  display:block;
  margin-left:auto;
  margin-right:auto;
}

标题

元素有默认的margin

结构 1

.marker {
  width: 200px;
  height: 25px;
  background-color: red;
  margin: auto;
  opacity:0.5;
}

opacity

透明度设置。

可以在类定义中直接使用opacity，也可以设置颜色时候使用rgba函数（参见color部分）。

color

显而易见，设置颜色。

这是最简单的一种形式，直接使用颜色的名词设置颜色。不过他可以设置的颜色是有限的。
.marker1{
    background-color:red;
}
使用rgb函数，三个值分别表示红绿蓝（red,green,blue)，255对应100%。

rgb 函数使用加成色模型。颜色起始为黑色，随红色、绿色和蓝色的值增加而变化。

也可以使用rgba，(red,green,blue,alpha)，其中的a是透明度（可以写成百分比形式或小数形式）。
.marker2{
    background-color:rgb(255,0,0);
}
.marker3{
    background-color:rgba(255,0,0,0.5);
}

其他配色参见博客：http://t.csdnimg.cn/U6sIO

颜色

主色

rgb(255,0,0); 红色
rgb(0,255,0); 绿色
rgb(0,0,255); 蓝色

间色

rgb(255,255,0); 黄色
rgb(255,0,255); 青色
rgb(0,255,255); 品红

复色

rgb(255, 127, 0);
rgb(0, 255, 127);
rgb(127, 0, 255);

rgb(127, 255, 0); 
rgb(0, 127,255);
rgb(255, 0, 127);

margin

边距

设置为auto可以使类居中。

margin只写margin，不写后面加上“-”和上下左右的部分，就是一种简写的形式，margin：auto就是说水平方向和垂直方向都是居中的。

当简写 margin 属性有两个值时，它将 margin-top 和 margin-bottom 设置为第一个值，并将 margin-left 和 margin-right 设置为第二个值。
.marker {
  margin: 30px 50px;
}
比如上面这样，就是把这个类的上边距和下边距设置为30px，左边距和右边距设置为50px。
.marker1 {
  margin:30px auto;
}
.marker2 {
  margin-top:30px;
  margin-left:40px;
}
.marker3 {
  margin:30px 40px 50px 40px;
}
还可以如上这样写，每一个方向的边距分开写。

padding

结构2

.sleeve {
  width: 110px;
  height: 25px;
  background-color: rgba(255, 255, 255, 0.5);

  border-left-width: 10px;
  border-left-style: solid;
  border-left-color: black;

  box-shadow:5px 5px red;
}

box-shadow

阴影。
box-shadow: offsetX offsetY color;

box-shadow: offsetX offsetY blurRadius color;

box-shadow: offsetX offsetY blurRadius spreadRadius color;
offsetX和offsetY都接受数字值，单位可以是px或者其他的CSS单位。

其值可以为正或负。移动方向，x 正为右负为左，y 正为下负为上。

如果值设置为0，则不需要加单位。但其实添加了也没什么关系。

blurRadius 模糊半径，默认为0。

可以使用spreadRadius扩大阴影范围。