CSS基础

林林亓

已于 2024-03-20 17:45:22 修改

阅读量951

点赞数 23

分类专栏： SpringBoot 文章标签： css css3 前端

于 2024-03-14 18:47:26 首次发布

本文链接：https://blog.csdn.net/mumuhaoshuai/article/details/136712772

版权

SpringBoot 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

CSS

1.样式定义方式

1.1 行内样式表

直接定义在标签的style属性中。

作用范围：仅对当前标签产生影响。

<img src="/images/mountain.jpg" alt="" style="width: 300px; height: 200px;">

1.2 内部样式表

定义在style标签中，通过选择器影响对应的标签。

作用范围：可以对同一个页面中的多个元素产生影响。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      p {
        height: 100px;
        width: 100px;
        background-color: rgb(25, 192, 128);
      }
      .blue {
        background-color: lightblue;
      }
      .big {
        background-color: brown;
      }
    </style>
  </head>
  <body>
    <div>
      <p class="blue big">1</p>
      <p>2</p>
      <p>3</p>
      <p class="blue">4</p>
    </div>
  </body>
</html>

1.3 外部样式表

定义在css样式文件中，通过选择器影响对应的标签。可以用link标签引入某些页面。

作用范围：可以对多个页面产生影响。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=
    , initial-scale=1.0"
    />
    <title>Document</title>
    <link rel="stylesheet" href="/static/CSS/P_style.css" />
    <link rel="stylesheet" href="/static/CSS/P_style.css" />
  </head>
  <body>
    <p class="big">1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
  </body>
</html>

在这里插入图片描述

2.选择器

2.1 标签选择器

选择所有div标签：

div {
    width: 200px;
    height: 200px;
    background-color: gray;
}

2.2 ID选择器

选择ID为rect-1的标签：

#rect-1 {
    width: 200px;
    height: 200px;
    background-color: gray;
}

2.3 类被选择器

calss="rectangle"
选择所有rectangle类的标签：

.rectangle {
    width: 200px;
    height: 200px;
    background-color: gray;
}

ID 一般是唯一的，类别别不一定唯一

2.4 伪类（状态）选择器

伪类选择器
伪类用于定义元素的特殊状态。

链接伪类选择器：
:link：链接访问前的样式
:visited：链接访问后的样式
:hover：鼠标悬停时的样式
:active：鼠标点击后长按时的样式
:focus：聚焦后的样式

位置伪类选择器：
:nth-child(n)：选择是其父标签第n个子元素的所有元素。
eg:
p:nth-child(2)
{
    background:#ff0000;
}
指定每个 p 元素匹配的父元素中第 2 个子元素的背景色：


目标伪类选择器：
:target：当url指向该元素时生效。

在这里插入图片描述

2.5复合选择器

复合选择器
由两个及以上基础选择器组合而成的选择器。
元素==class      

element1, element2：同时选择元素element1和元素element2。
element1,element2{
}
element.class：选则包含某类的element元素。
element1 + element2：选择紧跟element1的element2元素。
element1 element2：选择element1内的所有element2元素。
element1 > element2：选择父标签是element1的所有element2元素。

2.6 通配选择器

*：选择所有标签
[attribute]：选择具有某个属性的所有标签
eg  input[id]{选择有id的input的标签}

[attribute=value]：选择attribute值为value的所有标签

2.7 伪元素选择器

将特定内容当做一个元素，选择这些元素的选择器被称为伪元素选择器。

::first-letter：选择第一个字母
eg p::first-letter{
}

::first-line：选择第一行
::selection：选择已被选中的内容
::after：可以在元素后插入内容
::before：可以在元素前插入内容

2.8 样式渲染优先级

样式渲染优先级
权重大小，越具体的选择器权重越大：!important > 行内样式 > ID选择器 > 类与伪类选择器 > 标签选择器 > 通用选择器
权重相同时，后面的样式会覆盖前面的样式
继承自父元素的权重最低

3.文本

3.1 text-align

text-align（对齐）的选项：center(居中), left, right, justify(左右对齐)

h4{
    text-align: center;
}

3.2 line-height

line-height （行高）可以用来竖直居中
在这里插入图片描述

.mydiv{
    text-align: center;
    line-height: 200px;
    height: 200px;
    background-color: aqua;
    行居中，字会放到行的中间
}

3.3 letter-spacing

字间距单位同行高

3.4 text-indent

（缩进）单位em

3.5 text-decoration

text-decoration 这个 CSS 属性是用于设置文本的修饰线外观的（下划线、上划线、贯穿线/删除线或闪烁）eg:
在这里插入图片描述

3.6 text-shadow

text-shadow为文字添加阴影。可以为文字与 text-decorations 添加多个阴影，阴影值之间用逗号隔开。每个阴影值由元素在X和Y方向的偏移量、模糊半径和颜色值组成。
在这里插入图片描述

4.字体

4.1font-size

font-size 字体的大小。。

4.2 font-style

font-style 表示字体是否是倾斜的 italic(斜体)

4.3 font-weight

font-weight 字体的粗细程度。500,600等等。一些字体只提供 normal 和 bold 两种值。
在这里插入图片描述

4.4 font-family

表示的是字体，例如英文里面的带衬线字体，中文里面的草书这些。
在这里插入图片描述

5.背景

5.1 background-color

CSS属性中的background-color会设置元素的背景色, 属性的值为颜色值或关键字”transparent”二者选其一。

5.1.1background-size:cover/contain

cover是一定用图片覆盖div
contain 是图片不能超div**

5.2 background-image: url(图片地址)

CSS background-image 属性用于为一个元素设置一个或者多个背景图像。

渐变色：linear-gradient(rgba(0, 0, 255, 0.5), rgba(255, 255, 0, 0.5))
background-size
background-size 设置背景图片大小。图片可以保有其原有的尺寸，或者拉伸到新的尺寸，或者在保持其原有比例的同时缩放到元素的可用空间的尺寸。

5.3 background-repeat

background-repeat CSS 属性定义背景图像的重复方式。背景图像可以沿着水平轴，垂直轴，两个轴重复，或者根本不重复。
background-repeat： no-reapeat 不重复

5.4 background-position:left/right top/bottom x/y ;

background-position 为背景图片设置初始位置。

5.5 background-attachment

background-attachment CSS 属性决定背景图像的位置是在视口内固定，或者随着包含它的区块滚动。

6.边框

6.1 border-style

是一个 CSS 简写属性，用来设定元素所有边框的样式。
在这里插入图片描述

6.2 border-width

border-width属性可以设置盒子模型的边框宽度。

6.3 border-color

CSS属性border-color 是一个用于设置元素四个边框颜色的快捷属性： border-top-color, border-right-color, border-bottom-color, border-left-color

6.4border-radius

CSS 属性 border-radius 允许你设置元素的外边框圆角。当使用一个半径时确定一个圆形，当使用两个半径时确定一个椭圆。这个(椭)圆与边框的交集形成圆角效果。

6.5 border-collapse

border-collapse CSS 属性是用来决定表格的边框是分开的还是合并的。在分隔模式下，相邻的单元格都拥有独立的边框。在合并模式下，相邻单元格共享边框。

在这里插入图片描述

7.元素展示格式

7.1 display

block：（div）
独占一行
width、height、margin（外边距）、padding（内边距）均可控制
width默认100%。
inline：(span)
可以共占一行
width与height无效，水平方向的margin与padding有效，竖直方向的margin与padding无效
width默认为本身内容宽度
inline-block (img)
可以共占一行
width、height、margin、padding均可控制
width默认为本身内容宽度

7.2 white-space

white-space CSS 属性是用来设置如何处理元素中的空白 (en-US)。

<p>和<pre>标签

7.3 text-overflow

text-overflow CSS 属性确定如何向用户发出未显示的溢出内容信号。它可以被剪切，显示一个省略号或显示一个自定义字符串。

7.4 overflow

CSS属性 overflow 定义当一个元素的内容太大而无法适应块级格式化上下文时候该做什么。它是 overflow-x 和overflow-y的简写属性。

8 内边距与外边距

8.1 margin

margin属性为给定元素设置所有四个（上下左右）方向的外边距属性。

可以接受1~4个值（上、右、下、左的顺序）
可以分别指明四个方向：margin-top、margin-right、margin-bottom、margin-left
可取值
length：固定值
percentage：相对于包含块的宽度，以百分比值为外边距。
auto：让浏览器自己选择一个合适的外边距。有时，在一些特殊情况下，该值可以使元素居中。
外边距重叠
块的上外边距(margin-top)和下外边距(margin-bottom)有时合并(折叠)为单个边距，其大小为单个边距的最大值(或如果它们相等，则仅为其中一个)，这种行为称为边距折叠。
父元素与后代元素：父元素没有上边框和padding时，后代元素的margin-top会溢出，溢出后父元素的margin-top会与后代元素取最大值。

.div-out{
    height: 300px;
    width: 300px;
    background-color: aqua;
    overflow: hidden; /* 防止父元素向下移动 */
    
}
.div-in{
    height:200px;
    width: 200px;
    background-color: violet;
    margin: 10px 50px;
}

8.2 padding

padding CSS 简写属性控制元素所有四条边的内边距区域。

可以接受1~4个值（上、右、下、左的顺序）
可以分别指明四个方向：padding-top、padding-right、padding-bottom、padding-left
可取值
length：固定值
percentage：相对于包含块的宽度，以百分比值为内边距。

.div-out {
    height: 300px;
    width: 300px;
    background-color: aqua;
    overflow: hidden;
    /* 防止父元素向下移动 */
    padding: 30px 40px 30px 30px;
}

.div-in {
    height: 200px;
    width: 200px;
    background-color: violet;
    padding: 50px;
    box-sizing: border-box; 
}

9.盒子模型

9.1 box-sizing

box-sizing: content-box; 边框和宽度都会使盒子变大
box-sizing: border-box; 不会影响盒子大小，但是会挤压内部空间

.div-in {
    height: 200px;
    width: 200px;
    background-color: violet;
    padding: 50px;
    box-sizing: border-box; 
}

10.位置

10.1 position

CSS position属性用于指定一个元素在文档中的定位方式。

定位类型：

定位元素（positioned element）是其计算后位置属性为 relative, absolute, fixed 或 sticky 的一个元素（换句话说，除static以外的任何东西）。
相对定位元素（relatively positioned element）是计算后位置属性为 relative 的元素。
绝对定位元素（absolutely positioned element）是计算后位置属性为 absolute 或 fixed 的元素。
粘性定位元素（stickily positioned element）是计算后位置属性为 sticky 的元素。
取值：
static：该关键字指定元素使用正常的布局行为，即元素在文档常规流中当前的布局位置。此时 top, right, bottom, left 和 z-index 属性无效。
默认static,也就说方格按照顺序正常排列
relative：该关键字下，元素先放置在未添加定位时的位置，再在不改变页面布局的前提下调整元素位置（因此会在此元素未添加定位时所在位置留下空白）。top, right, bottom, left等调整元素相对于初始位置的偏移量。

.div-in2 {
    height: 50px;
    width: 50px;
    background-color: green;
    margin: 10px;
    display: inline-block;
    position: relative;
    top: 30px;
}

可以将某一框相对于其原来的位置进行单独平移
在这里插入图片描述

absolute：元素会被移出正常文档流，并不为元素预留空间，通过指定元素相对于最近的非 static 定位祖先元素的偏移，来确定元素位置。绝对定位的元素可以设置外边距（margins），且不会与其他边距合并。

.div-in2 {
    height: 50px;
    width: 50px;
    background-color: green;
    margin: 10px;
    display: inline-block;
    position: absolute;
    top: 0px;
    left: 0px;
    
}

在这里插入图片描述

fixed：元素会被移出正常文档流，并不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。
相对于当前的视窗不变

.div-in2 {
    height: 100px;
    width: 20px;
    background-color: green;
    margin: 10px;
    display: inline-block;
    position: fixed;
    top: 100px;
    right: 0px;
}

在这里插入图片描述

sticky：元素根据正常文档流进行定位，然后相对它的最近滚动祖先（nearest scrolling ancestor）和 containing block (最近块级祖先 nearest block-level ancestor)，包括table-related元素，基于top, right, bottom, 和 left的值进行偏移。偏移值不会影响任何其他元素的位置。

大概就说B站视频固定住，可以往下刷评论但是不影响观看视频 在这里插入图片描述

.div-in1 {
    height: 50px;
    width: 50px;
    background-color: violet;
    margin: 10px;
    position: sticky;
    top: 10px;

}

11.浮动

11.1 float

div块可以随着浏览器的变化自动调节位置
float CSS属性指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。该元素从网页的正常流动(文档流)中移除，尽管仍然保持部分的流动性（与绝对定位相反）。

由于float意味着使用块布局，它在某些情况下修改display 值的计算值：

display为inline或inline-block时，使用float后会统一变成block。
取值：
left：表明元素必须浮动在其所在的块容器左侧的关键字。
right：表明元素必须浮动在其所在的块容器右侧的关键字。

11.2 clear

有时，你可能想要强制元素移至任何浮动元素下方。比如说，你可能希望某个段落与浮动元素保持相邻的位置，但又希望这个段落从头开始强制独占一行。此时可以使用clear。

取值：

left：清除左侧浮动。
right：清除右侧浮动。
both：清除左右两侧浮动

12.响应式布局

12.1media查询

当屏幕宽度满足特定条件时应用css。

@media(min-width: 768px) {
    .container {
        width: 960px;
        background-color: lightblue;
    }
}

13. flex布局

flex CSS简写属性设置了弹性项目如何增大或缩小以适应其弹性容器中可用的空间。

.div-flex {
    background-color: aliceblue;
    width: 50%;
    height: 500px;
    display: flex;
    flex-direction: row-reverse;
}

13.1 flex-direction

CSS flex-direction 属性指定了内部元素是如何在 flex 容器中布局的，定义了主轴的方向(正方向或反方向)。

取值：

row：按照行摆
row-reverse：表现和row相同，但是置换了主轴起点和主轴终点。
column：按照列摆
column-reverse：表现和column相同，但是置换了主轴起点和主轴终点
flex-direction: row-reverse;

13.2 flex-wrap

CSS 的 flex-wrap 属性指定 flex 元素单行显示还是多行显示。如果允许换行，这个属性允许你控制行的堆叠方向。

取值：

nowrap：默认值。不换行。
wrap：换行，第一行在上方。
wrap-reverse：换行，第一行在下方。

flex-wrap: wrap;

13.3 flex-flow

CSS flex-flow 属性是 flex-direction 和 flex-wrap 的简写。默认值为：row nowrap。

13.4 justify-content

CSS justify-content 属性定义了浏览器之间，如何分配顺着弹性容器主轴(或者网格行轴) 的元素之间及其周围的空间。

取值：

flex-start：默认值。左对齐。
flex-end：右对齐。
space-between：左右两段对齐。
space-around：在每行上均匀分配弹性元素。相邻元素间距离相同。每行第一个元素到行首的距离和每行最后一个元素到行尾的距离将会是相邻元素之间距离的一半。
space-evenly：flex项都沿着主轴均匀分布在指定的对齐容器中。相邻flex项之间的间距，主轴起始位置到第一个flex项的间距，主轴结束位置到最后一个flex项的间距，都完全一样。