Vue - CSS基础学习

news2025/1/12 23:00:19

一、元素及属性

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.盒子组成

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

2.外边距 margin

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

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

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

3.外边距折叠

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

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.背景图片

  1. background-image: url(1.jpg);

  2. background-repeat 属性用于控制图像的平铺行为。可用的值是：

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

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

  1. 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; /*将溢出隐藏，以便可以看到阴影*/
}

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1959400.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Windows执行jar包

Windows执行jar包

配置环境变量&#xff1a; 命令行测试&#xff1a; java -version 将jar包上传至指定目录&#xff0c;在该目录下创建运行脚本&#xff1a; chcp 65001 java -Dfile.encodingutf-8 -jar jxpaddle-admin.jar chcp 65001&#xff1a;将当前cmd编码改为UTF-8&#xff0c;仅对当…
阅读更多...
单片机芯片程序读取方法和工具

单片机芯片程序读取方法和工具

如何把单片机芯片程序读取出来 读取芯片中的程序可以通过多种方法实现&#xff0c;具体方法取决于芯片的类型和可用的工具。 一、使用‌Keil软件&#xff1a; 如果芯片是Flash类型的&#xff0c;可以使用Keil软件配合硬件调试工具进行读取。首先&#xff0c;需要配置Keil工程&…
阅读更多...
【Unity源码】多人FPS游戏

【Unity源码】多人FPS游戏

项目概述 《多人FPS游戏》(Multiplayer-FPS) 是一个基于Unity3D引擎开发的多人第一人称射击游戏。该项目支持多种输入设备&#xff0c;包括Kinect、Xbox控制器、Leap Motion手势控制、VR眼镜等&#xff0c;提供了丰富的交互体验。 项目特点 多种输入设备支持&#xff1a;除了…
阅读更多...
基于北京市空气质量影响因素研究系统【城市可换爬虫获取、LSTM、Flask、Echarts、MySQL、TensorFlow】

基于北京市空气质量影响因素研究系统【城市可换爬虫获取、LSTM、Flask、Echarts、MySQL、TensorFlow】

文章目录 有需要本项目的代码或文档以及全部资源&#xff0c;或者部署调试可以私信博主研究背景国内外研究现状研究目的研究意义关键技术理论介绍数据采集数据分析与大屏设计大屏相关性分析LSTM模型训练系统集成展示总结每文一语 有需要本项目的代码或文档以及全部资源&#xf…
阅读更多...
springboot高校实验室安全管理系统-计算机毕业设计源码73839

springboot高校实验室安全管理系统-计算机毕业设计源码73839

目 录 摘要 1 绪论 1.1 研究背景 1.2 选题意义 1.3研究方案 1.4论文章节安排 2相关技术介绍 2.1 B/S结构 2.2 Spring Boot框架 2.3 Java语言 2.4 MySQL数据库 3系统分析 3.1 可行性分析 3.2 系统功能性分析 3.3.非功能性分析 3.4 系统用例分析 3.5系统流程分析…
阅读更多...
双指针专题

双指针专题

前言(回顾一下)&#xff1a; Leetcode 283.移动零 思路&#xff1a; 使用双指针&#xff0c;左指针指向当前已经处理好的序列的尾部&#xff0c;右指针指向待处理序列的头部。右指针不断向右移动&#xff0c;每次右指针指向非零数&#xff0c;则将左右指针对应的数交换&#xf…
阅读更多...
C语言 -- 动态内存管理

C语言 -- 动态内存管理

C语言 -- 动态内存管理 1. 为什么要有动态内存分配2. malloc 和 free2.1 malloc2.2 free 3. calloc 和 realloc3.1 calloc3.2 realloc 4. 常见的动态内存的错误4.1 对NULL指针的解引用操作4.2 对动态开辟空间的越界访问4.3 对非动态开辟内存使用free释放4.4 使用free释放一块动…
阅读更多...
嵌入式学习——C语言指针（一）

嵌入式学习——C语言指针（一）

一、地址和指针的概念 地址&#xff1a;内存单元的编号。 指针&#xff1a;一个变量的首地址就叫做该变量的指针。 1、内存中存取数据的方式 1&#xff09;直接存取 直接用变量名存取变量所占内存单元的内容 例&#xff1a; int y,x 3; y 3*x2; 2&#…
阅读更多...
【日记】今天又是哪朵小云不开心了呀（1886 字）

【日记】今天又是哪朵小云不开心了呀（1886 字）

正文 上午上班没多久&#xff0c;天就特别阴&#xff0c;感觉像是要下暴雨的样子。前台接了一个电话&#xff0c;家里人打来的&#xff0c;她妈妈叮嘱她&#xff0c;要注意一点。他们那边已经开始下了。她转过头对我笑笑说&#xff0c;原来下雨在一个城里也能不同步。 当时我笑…
阅读更多...
AttributeError: ‘NoneType‘ object has no attribute ‘shape‘

AttributeError: ‘NoneType‘ object has no attribute ‘shape‘

AttributeError: ‘NoneType‘ object has no attribute ‘shape‘ 目录 AttributeError: ‘NoneType‘ object has no attribute ‘shape‘ 【常见模块错误】 【解决方案】 欢迎来到英杰社区https://bbs.csdn.net/topics/617804998 欢迎来到我的主页&#xff0c;我是博主英杰…
阅读更多...
多家隧道代理价格：阿布云、快代理、小象代理、熊猫代理和亿牛云……

多家隧道代理价格：阿布云、快代理、小象代理、熊猫代理和亿牛云……

随着奥运的热度攀升&#xff0c;各大品牌也在抓紧时机赶上这波奥运热潮&#xff0c;随之而来的大量数据信息收集和分析工作也接踵而至&#xff0c;在这一数据采集过程中&#xff0c;HTTP代理的质量和价格对企业的效率和成本调控重要性不言而喻。我们大部分人在日常购买产品的时…
阅读更多...
2235234234

2235234234

作者主页&#xff1a; 作者主页 本篇博客专栏&#xff1a;C 创作时间 &#xff1a;2024年6月20日 最后&#xff1a; 十分感谢你可以耐着性子把它读完和我可以坚持写到这里&#xff0c;送几句话&#xff0c;对你&#xff0c;也对我&#xff1a; 1.一个冷知识&#xff1a; …
阅读更多...
细说MCU的DAC1实现两个通道同时输出的方法

细说MCU的DAC1实现两个通道同时输出的方法

目录 一、参考硬件 二、 建立新工程 1.配置DAC 2.配置DMA 3.配置定时器 4.配置时钟和Debug 三、修改代码 1.初始化定时器和DAC 2.定义波形数据 3.波形数据的产生方法 四、查看结果 一、参考硬件 本项目依赖的软件和硬件工程参考本文作者写的文章&#xff1a; 细说MC…
阅读更多...
手写RPC框架，与Spring整合,基于Netty作为网络框架,protobuf作为序列化协议。可以和实际项目相结合完美运行

手写RPC框架，与Spring整合,基于Netty作为网络框架,protobuf作为序列化协议。可以和实际项目相结合完美运行

注&#xff1a;由于RPC框架过于庞大所以本篇文章只是作为阅读RPC源码的一个指导&#xff0c;设计精巧之处还需要各位读者结合源码进行实践 RPC源码地址&#xff1a;https://github.com/xhpcd/rpc git clone: https://github.com/xhpcd/rpc.git 如果觉得有收获麻烦留下一颗st…
阅读更多...
使用 Easysearch 打造企业内部知识问答系统

使用 Easysearch 打造企业内部知识问答系统

大家可能都有这样的经历&#xff0c;刚入职一家企业时&#xff0c;同事往往会给你分享一些文档资料&#xff0c;有可能是产品信息、规章制度等等。这些文档有的过于冗长&#xff0c;很难第一时间找到想要的内容。有的已经有了新版本&#xff0c;但员工使用的还是老版本。 基于…
阅读更多...
centos7-8/redhat7-8一键安装配置vsftp服务

centos7-8/redhat7-8一键安装配置vsftp服务

1.脚本介绍 1.1.介绍&#xff1a; linux下一键安装及配置vsftpd服务 &#xff0c;通过执行install.sh脚本&#xff0c;脚本会根据参数区域的值执行安装和配置vsftp服务&#xff0c;安装后会创建一个默认ftp用户wangxf密码wangxf2023 1、支持自定义安装(更改脚本内参数值) 2、…
阅读更多...
javaweb_01：http

javaweb_01：http

一、什么是http HTTP 是一个简单的请求-响应协议&#xff0c;它通常运行在TCP之上&#xff0c;它指定了客户端可能发送给服务器什么样的消息&#xff0c;以及得到什么样的响应。请求和响应都是以ASCll码的形式给出&#xff1b;而消息内容则具有一个类似MIME的格式。这个简单模…
阅读更多...
面试Redis篇

面试Redis篇

本篇主要总结一下面试官可能会在Redis上询问的主要问题。 Redis的使用场景 问&#xff1a;你的项目中哪些场景中用到了Redis&#xff1f; 答&#xff1a;根据你的项目回答&#xff0c;一般会在一下几个部分缓存、分布式锁...... 缓存 缓存穿透 查询一个不存在的数据&#xff…
阅读更多...
黑马点评--给店铺类型查询添加缓存

黑马点评--给店铺类型查询添加缓存

controller/ShopTypeController.java /*** 店铺分类查询&#xff0c;用于展示首页头部店铺分类* return*/GetMapping("list")public Result queryTypeList() {return typeService.queryList();} service/IShopTypeService.java Result queryList(); service/impl/S…
阅读更多...
4234324

4234324

作者主页&#xff1a; 作者主页 本篇博客专栏&#xff1a;C 创作时间 &#xff1a;2024年6月20日 最后&#xff1a; 十分感谢你可以耐着性子把它读完和我可以坚持写到这里&#xff0c;送几句话&#xff0c;对你&#xff0c;也对我&#xff1a; 1.一个冷知识&#xff1a; …
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023