CSS（菜鸡视角）

最新推荐文章于 2023-03-27 20:16:26 发布

欲扬yyds01

最新推荐文章于 2023-03-27 20:16:26 发布

阅读量171

点赞数

分类专栏： css 文章标签： css html

本文链接：https://blog.csdn.net/qq_53169429/article/details/119902936

版权

css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文详细介绍了CSS中用于颜色、字体、边框、背景、样式选择器、优先级、变量、媒体查询、弹性盒子等核心概念。通过实例演示了如何修改元素样式，包括颜色、字体大小、边距、边框样式以及如何使用类和ID来定位元素。此外，还讨论了flexbox布局的使用，如主轴和交叉轴对齐、换行和项目缩放。最后，提到了CSS变量和媒体查询在响应式设计中的作用。

摘要由CSDN通过智能技术生成

color

要修改颜色，需要在style选项里更改=“color：你要的颜色；”

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

🐖：颜色后别忘了加冒号；

更清晰的方法可以像label一样把所需的style声明单独提出，创建一个 CSS selector

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

还可以用十六进制hex表示：#000000，可简写为三位的数字

🐖： 0表示暗，F表示亮

RGB 值与我们之前学到的十六进制编码不同。RGB 值不需要用到 6 位十六进制数字，而只需要指定每种颜色的亮度大小，数值范围从 0 到 255。

body {
  background-color: rgb(255, 165, 0);
}

🐖：你需要确保所有样式规则位于{花括号}之间，并且每条样式规则都以分号；结束。

class

在style样式声明中，可以创建class类，🐖：名称以句点 . 开始

在HTML元素中调用时 ,名称不用句点.

  <h2 class = "class1 class2 class3">

font

font-size

同样在style中设置字体大小

h1 {
  font-size: 30px;
}

font_family

族名同理可设置

🐖：字体名区分大小写，并且如果字体名含有空格，则在声明时需要用引号包起来

🐖：可以排列多个字体，用”，“隔开，以便作为没字体的备选方案

border

CSS 边框具有 style、color、width 、radius（圆角）属性。

<style>
  .thin-red-border {
    border-color: red;
    border-width: 5px;
    border-style: solid;
    border-radius:10px <!--50%代表是圆形-->;
  }
</style>

backgroud

.green-background {
  background-color: green;
}

创建背景颜色的类

about id

除了 class 属性，每一个 HTML 元素都有一个 id 属性。

使用 id 有几个好处：你可以通过 id 选择器来改变单个元素的样式。

🐖：如果一个元素同时应用了 class 和 id，且两者设置的样式有冲突，会优先应用 id 中所设置的样式。

#cat-photo-element {
  background-color: green;
}

注意在 style 标签里，声明 class 的时候必须在名字前插入 . 符号。同样，在声明 id 的时候，也必须在名字前插入 # 符号。

rectangle

所有的 HTML 元素都是以矩形为基础。

由这三个重要的属性来控制：内边距 padding、外边距 margin 、边框 border。

`padding`

用来控制着元素内容与 border 之间的空隙大小。

padding-top、padding-right、padding-bottom、padding-left 属性来设置四个不同方向的 padding 值。偷懒可以直接按顺时针方向声明

padding: 10px 20px 10px 20px;

`margin`

用来控制元素的边框与其他元素之间的 border 距离。

如果你把元素的 margin 设置为负值，元素会变得占用更多空间。

margin也有四向值，也可简写

属性选择器

[attr=value] 属性选择器来修改 CatPhotoApp 中复选框的样式。

下面的代码会改变所有 type 为 radio 的元素的外边距。

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

size

单位长度的类型可以分成 2 种：相对和绝对。绝对单位与长度的物理单位相关。例如，in 和 mm 分别代表着英寸和毫米。绝对长度单位会接近屏幕上的实际测量值，不过不同屏幕的分辨率会存在差异，这就可能会造成误差。

相对单位长度，比如 em 和 rem，它们的实际值会依赖其他长度的值而决定。比如 em 的大小基于元素字体的字体大小。如果使用它来设置 font-size 值，它的值会跟随父元素的 font-size 值来改变。

优先级

Important 的优先级最高,

color: red !important;

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

<h1 style="color: green;">

,ID 选择器优先级高于 Class 选择器，

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

多个class则查看声明顺序

!important > 行内style > ID > class后声明 > class前声明

css变量

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

--penguin-skin: gray;

创建变量后，CSS 属性可以通过调用变量名来使用它对应的值。

background: var(--penguin-skin，备用值);

🐖：为了防止使用的浏览器不支持css，最好添加一个普通的方法

CSS 变量经常会定义在 :root 元素内，这样就可被所有选择器继承,作用于所有部分。:root 是一个伪类选择器，它是一个能够匹配文档根元素的选择器，通常指的是 html 元素。

media query

媒体查询）声明的 :root 选择器里，当屏幕小于或大于媒体查询所设置的值，只要我们更新变量的值，那么使用了此变量的元素样式就都会更改。

flex弹性盒子

只要在一个元素的 CSS 中添加 display: flex;，就可以使用其它 flex 属性来构建响应式页

只要给父元素添加 flex-direction 属性，并把属性值设置为 row 或 column，即可横向排列或纵向排列它的所有子元素。创建一行将使子项水平对齐，创建一列将使子项垂直对齐。其他可选值还有 row-reverse 和 column-reverse

justify-content

flex-start：从 flex 容器的起始位置开始排列项目。对行来说是把项目移至左边，对于列是把项目移至顶部。如未设置 justify-content 的值，那么这就是默认值。
flex-end：从 flex 容器的终止位置开始排列项目。对行来说是把项目移至右边，对于列是把项目移至底部。
space-between：项目间保留一定间距地沿主轴居中排列。第一个和最后一个项目被放置在容器边沿。例如，在行中第一个项目会紧贴着容器左边，最后一个项目会紧贴着容器右边，然后其他项目均匀排布。
space-around：与space-between相似，但头尾两个项目不会紧贴容器边缘，所有项目之间的空间均匀排布。
space-evenly：头尾两个项目不会紧贴容器边缘，所有项目之间的空间均匀排布。
justify-content: center;：即 flex 子元素在 flex 容器中居中排列