当前位置：首页 > news >正文

Vue - CSS基础学习

news 2026/2/11 0:24:05

一、元素及属性

CSS 是为 web 内容添加样式的代码。 style标签

1.语法

1.除了选择器部分，每个规则集都应该包含在成对的大括号里（{}）。
2.在每个声明里要用冒号（:）将属性与属性值分隔开。
3.在每个规则集里要用分号（;）将各个声明分隔开。
4.选择多个元素,将不同的选择器用逗号分开。

p1,
p2,
p3 {color: red;width: 500px;border: 1px solid black;
}

二、CSS组成

1.外部样式表

使用 HTML 元素来链接外部样式表文件，元素的 href 属性需要引用你文件系统中的一个文件。

 <head><meta charset="utf-8" /><title>CSS外部样式</title><link rel="stylesheet" href="xxx/xxx/styles.css" /></head>

外部styles.css如下

h1 {color: blue;background-color: yellow;border: 1px solid black;
}p {color: red;
}

2.内部样式表

把 CSS 放置在包含在 HTML 元素中的

  <head><meta charset="utf-8" /><title>CSS内部样式</title><style>h1 {color: blue;background-color: yellow;border: 1px solid black;}p {color: red;}</style></head>

3.内联样式(不推荐)

内联样式是影响单个 HTML 元素的 CSS 声明，包含在元素的 style 属性中。

    <h1 style="color: blue;background-color: yellow;border: 1px solid black;">Hello World!</h1><p style="color:red;">>CSS内联样式</p>

二、CSS优先级

  <p>我是什么颜色</p>

p {color: yellow;
}
.test-color {color: red;
}

优先展示 .xxx , 这里文字为红色

  <p>我是什么颜色</p>

p {color: blue;
}
p {color: yellow;
}

优先展示最后申明 , 这里文字为黄色

三、CSS选择器

1.类型选择器（h1/span/p）

类型选择器有时也叫做标签名选择器或者是元素选择器。

2.全局选择器 ( * )

全局选择器，是由一个星号（*）代指的

3.类选择器 ( . )

类选择器以一个句点（.）开头
可继承

  <p class="notebox">我的网页</p><p class="notebox warning">我的网页</p><p class="notebox danger">我的网页</p>

.notebox {width: 100px;border: 4px solid #666;padding: 5px;
}.notebox.warning {border-color: orange;font-weight: bold;
}.notebox.danger {border-color: red;font-weight: bold;
}

在这里插入图片描述

4.ID 选择器 ( # )

ID 选择器开头为#而非句点

  <p id="one">我的网页</p><p id="two">我的网页</p><p id="three">我的网页</p>

#one {color: blue;
}
#two {color: green;
}
#three {color: red;
}

在这里插入图片描述

  <li class>我的网页</li> <li class="one">我的网页</li><li class="two">我的网页</li>

li[class] {color: blue;
}li[class="one"] {color: yellow;
}li[class="two"] {color: red;
}

四、盒子

1.盒子组成

内容盒子：显示内容的区域；使用 inline-size 和 block-size 或 width 和 height 等属性确定其大小。
内边距盒子：填充位于内容周围的空白处；使用 padding 和相关属性确定其大小。
边框盒子：边框盒子包住内容和任何填充；使用 border 和相关属性确定其大小。
外边距盒子：外边距是最外层，其包裹内容、内边距和边框，作为该盒子与其他元素之间的空白；使用 margin 和相关属性确定其大小。

2.外边距 margin

我们可以使用 margin 属性一次性控制一个元素的所有外边距，或者每边单独使用等价的普通属性控制：

margin-top
margin-right
margin-bottom
margin-left

根据外边距相接触的两个元素是正边距还是负边距，结果会有所不同：

3.外边距折叠

相邻兄弟元素：当两个块级元素上下相邻，且没有边框、内边距或内容分隔它们时，它们的垂直外边距会发生折叠，合并为一个较大的外边距。
父元素与子元素：当一个块级元素包含另一个块级元素作为其直接子元素时，如果父元素没有边框、内边距或内容，则父元素的底部外边距和子元素的顶部外边距可能会发生折叠。
负外边距：当一个元素的外边距是负值时，它会尝试与其他元素重叠。在这种情况下，外边距折叠的结果可能是零或者更小的正值，取决于其他元素的外边距大小。
清除浮动：使用 clear 属性可以阻止外边距折叠，因为这会在元素周围创建一个新的块格式化上下文。
表格单元格：表格单元格的外边距不会折叠。
行内元素：行内元素的外边距不会与其他元素的外边距折叠

4.内边距 padding

每个边框都有样式、宽度和颜色
我们可以使用 padding 简写属性一次性控制元素所有边，或者每边单独使用等价的普通属性：

padding-top
padding-right
padding-bottom
padding-left

5.边框 border

可以使用 border 属性一次性设置所有四个边框的宽度、颜色和样式。

欲分别设置每边的属性，可以使用：

border-top
border-right
border-bottom
border-left

欲设置所有边的宽度、样式或颜色，可以使用：

border-width
border-style
border-color

欲设置单条边的宽度、样式或颜色，可以使用最细粒度的普通属性之一：

border-top-width
border-top-style
border-top-color
border-right-width
border-right-style
border-right-color
border-bottom-width
border-bottom-style
border-bottom-color
border-left-width
border-left-style
border-left-color

6.背景与边框

1.背景颜色

background-color: #567895;
background-color: black;
background-color: rgb(255 255 255 / 50%);

2.背景图片

background-image: url(1.jpg);
background-repeat 属性用于控制图像的平铺行为。可用的值是：

no-repeat——阻止背景重复平铺。
repeat-x——仅水平方向上重复平铺。
repeat-y——仅垂直方向上重复平铺。
repeat——默认值，在水平和垂直两个方向重复平铺。

使用 background-size 属性，它可以设置长度或百分比值，来调整图像的大小以适应背景。
cover：浏览器将使图像足够大，使它完全覆盖了盒子区域，同时仍然保持其宽高比。在这种情况下，图像的部分区域可能会跳出盒子外。
contain：浏览器会将图像调整到适合框内的尺寸。在这种情况下，如果图像的长宽比与盒子的长宽比不同，你可能会在图像的两边或顶部和底部出现空隙。

background-position 属性允许你选择背景图片出现在它所应用的盒子上的位置。

 background-position: top center;background-position: 20px 10%;background-position: 20px top;background-position: top 20px right 10px;

3.多个背景图像

background-image: url(1.png), url(2.png);

4.边框

.box {border-width: 1px;border-style: solid;border-color: black;
}

简写

.box {border: 1px solid black;
}

.box {border-top-width: 1px;border-top-style: solid;border-top-color: black;
}

5.圆角

 .box {border-radius: 10px;
}

7.display 属性（布局）

在 css 中实现页面布局的主要方法是设定display属性的值。

display:block
display:inline
display: flex 
display: grid

1.横向布局（默认）

  <div><p class="border">box1</p><p class="border">box2</p><p class="border">box3</p></div>

.border {border: yellow 10px solid;background-color: yellow;border-radius: 10px;
}

在这里插入图片描述

2.竖向布局 display: flex

  <div class="wrapper"><p class="border">box1</p><p class="border">box2</p><p class="border">box3</p></div>

.border {border: yellow 10px solid;background-color: yellow;border-radius: 10px;
}.wrapper {display: flex;
}

在这里插入图片描述

3. 填充容器 flex: 1

们可以在我们的所有子元素上添加flex 属性，并赋值为1，这会使得所有的子元素都伸展并填充容器，而不是在尾部留下空白，如果有更多空间，那么子元素们就会变得更宽，反之，他们就会变得更窄。

  <div class="wrapper"><div class="border">box1</div><div class="border">box2</div><div class="border">box3</div></div>

.wrapper > div {flex: 1;
}
.wrapper {display: flex;width: 800px;
}

在这里插入图片描述

4. 网格布局 Grid

  <div class="wrapper"><div class="border">box1</div><div class="border">box2</div><div class="border">box3</div><div class="border">box4</div><div class="border">box5</div><div class="border">box5</div><div class="border">box5</div><div class="border">box5</div></div>

.wrapper {display: grid;grid-template-columns: 1fr 1fr 1fr; /*1fr等于自由空间的一份*/grid-template-rows: 50px 50px; /*指定每行的高度，这个设置的行数是2*/grid-gap: 10px; /*网格单元之间的间隙大小*/
}

在这里插入图片描述

  <div class="wrapper"><div class="border box1">box1</div><div class="border box2">box2</div><div class="border box3">box3</div></div>

.border {border: yellow 10px solid;background-color: yellow;border-radius: 10px;
}
.border.box1 {grid-column: 2 / 4;grid-row: 1;
}
.border.box2 {grid-column: 1;grid-row: 1 / 3;
}
.border.box3 {grid-row: 2;grid-column: 3;
}

在这里插入图片描述

5. 浮动 float

这一元素会浮动到左侧或右侧
在这里插入图片描述

  <div class="box">Float</div><p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>

.box {float: left;width: 200px;height: 200px;margin: 10px;background-color: #e99;overflow: auto; /*将溢出隐藏，以便可以看到阴影*/
}

在这里插入图片描述

.box {float: right;width: 200px;height: 200px;margin: 10px;background-color: #e99;overflow: auto; /*将溢出隐藏，以便可以看到阴影*/
}

在这里插入图片描述

一、元素及属性

1.语法

二、CSS组成

1.外部样式表

2.内部样式表

3.内联样式(不推荐)

二、CSS优先级

三、CSS选择器

1.类型选择器（h1/span/p）

2.全局选择器 ( * )

3.类选择器 ( . )

4.ID 选择器 ( # )

四、盒子

1.盒子组成

2.外边距 margin

3.外边距折叠

4.内边距 padding

5.边框 border

6.背景与边框

1.背景颜色

2.背景图片

3.多个背景图像

4.边框

5.圆角

7.display 属性（布局）

1.横向布局（默认）

2.竖向布局 display: flex

3. 填充容器 flex: 1

4. 网格布局 Grid

5. 浮动 float

相关文章：