JavaWeb《CSS》

news2024/10/7 16:15:17

本笔记学习于Acwing平台

目录

1. 样式定义方式

2.1 行内样式表(inline style sheet)

2.2 内部样式表(internal style sheet)

2.3 外部样式表(external style sheet)

2. 选择器

2.1 标签选择器

2.2 ID选择器

2.3 类选择器

2.4 伪类选择器

3. 颜色

4. 文本

5. 字体

6. 背景

7. 边框

8. 元素展示格式

9. 内边距和外边距

10. 盒子模型

11. 位置

12. 浮动

float

clear

13. flex布局

flex-direction

flex-wrap

flex-flow

justify-content

align-items

align-content

order

flex-grow

flex-shrink

flex-basis

flex

14. 响应式布局


MDN官方文档https://developer.mozilla.org/zh-CN/

1. 样式定义方式

2.1 行内样式表(inline style sheet)

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

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

例如: 

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

2.2 内部样式表(internal style sheet)

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

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

2.3 外部样式表(external style sheet)

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

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

注释
注意不能使用//。
只有:

/* 注释 */ 

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 类选择器

  • 选择所有rectangle类的标签:

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

2.4 伪类选择器

  • 伪类用于定义元素的特殊状态。

链接伪类选择器:

  1. :link:链接访问前的样式
  2. :visited:链接访问后的样式
  3. :hover:鼠标悬停时的样式
  4. :active:鼠标点击后长按时的样式
  5. :focus:聚焦后的样式

位置伪类选择器:

  • :nth-child(n):选择是其父标签第n个子元素的所有元素。

目标伪类选择器:

  • :target当url指向该元素时生效。

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

  1. element1, element2:同时选择元素element1和元素element2。
  2. element.class:选则包含某类的element元素。
  3. element1 + element2:选择紧跟element1的element2元素。
  4. element1 element2:选择element1内的所有element2元素。(祖先节点)
  5. element1 > element2:选择父标签是element1的所有element2元素。

通配符选择器

  • *:选择所有标签
  • [attribute]:选择具有某个属性的所有标签
  • [attribute=value]:选择attribute值为value的所有标签

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

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

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

3. 颜色

预定义的颜色值
black、white、red、green、blue、lightblue等。

16进制表示法
使用6位16进制数表示颜色,例如:#ADD8E6
其中第1-2位表示红色,第3-4位表示绿色,第5-6位表示蓝色。

简写方式:#ABC,等价于#AABBCC。

RGB表示法
rgb(173, 216, 230)。

其中第一个数表示红色,第二个数表示绿色,第三个数表示蓝色。

RGBA表示法
rgba(173, 216, 230, 0.5)。

前三个数同上,第四个数表示透明度。

取色方式
网页里的颜色,可以在chrome的调试模式下获取
其他颜色可以使用QQ的截图软件
直接按c键,可以复制rgb颜色值
按住ctrl再按c键,可以复制16进制颜色值

4. 文本

text-align
text-align CSS属性定义行内内容(例如文字)如何相对它的块父元素对齐。text-align 并不控制块元素自己的对齐,只控制它的行内内容的对齐。

line-height
line-height CSS 属性用于设置多行元素的空间量,如多行文本的间距。对于块级元素,它指定元素行盒(line boxes)的最小高度。对于非替代的 inline 元素,它用于计算行盒(line box)的高度。可以用来竖直居中

  • 补充知识点:长度单位

letter-spacing
CSS 的 letter-spacing 属性用于设置文本字符的间距。

text-indent
text-indent属性能定义一个块元素首行文本内容之前的缩进量。

text-decoration
text-decoration 这个 CSS 属性是用于设置文本的修饰线外观的(下划线、上划线、贯穿线/删除线 或 闪烁)它是 text-decoration-line, text-decoration-color, text-decoration-style, 和新出现的 text-decoration-thickness 属性的缩写。

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

5. 字体

font-size
font-size CSS 属性指定字体的大小。因为该属性的值会被用于计算em和ex长度单位,定义该值可能改变其他元素的大小。

font-style
font-style CSS 属性允许你选择 font-family 字体下的 italic 或 oblique 样式。

font-weight
font-weight CSS 属性指定了字体的粗细程度。 一些字体只提供 normal 和 bold 两种值。

font-family
CSS 属性 font-family 允许您通过给定一个有先后顺序的,由字体名或者字体族名组成的列表来为选定的元素设置字体。
属性值用逗号隔开。浏览器会选择列表中第一个该计算机上有安装的字体,或者是通过 @font-face 指定的可以直接下载的字体。

6. 背景

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

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

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

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

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

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

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

7. 边框

border-style
border-style 是一个 CSS 简写属性,用来设定元素所有边框的样式。

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

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

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

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

8. 元素展示格式

display

  • block:
    • 独占一行
    • width、height、margin、padding均可控制
    • width默认100%。
  • inline:
    • 可以共占一行
    • width与height无效,水平方向的margin与padding有效,竖直方向的margin与padding无效
    • width默认为本身内容宽度
  • inline-block
    • 可以共占一行
    • width、height、margin、padding均可控制
    • width默认为本身内容宽度

white-space
white-space CSS 属性是用来设置如何处理元素中的 空白 (en-US)。pre就是在div的此属性基础上发展而来的。

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

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

9. 内边距和外边距

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

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

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

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

10. 盒子模型

box-sizing
CSS 中的 box-sizing 属性定义了 user agent 应该如何计算一个元素的总宽度和总高度。

  • content-box:是默认值,设置border和padding均会增加元素的宽高。
  • border-box:设置border和padding不会改变元素的宽高,而是挤占内容区域。

11. 位置

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 属性无效。
  • relative:该关键字下,元素先放置在未添加定位时的位置,再在不改变页面布局的前提下调整元素位置(因此会在此元素未添加定位时所在位置留下空白)。top, right, bottom, left等调整元素相对于初始位置的偏移量。
  • absolute:元素会被移出正常文档流,并不为元素预留空间,通过指定元素相对于最近的非 static 定位祖先元素的偏移,来确定元素位置。绝对定位的元素可以设置外边距(margins),且不会与其他边距合并。
  • fixed:元素会被移出正常文档流,并不为元素预留空间,而是通过指定元素相对于屏幕视口(viewport)的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。
  • sticky:元素根据正常文档流进行定位,然后相对它的最近滚动祖先(nearest scrolling ancestor)和 containing block (最近块级祖先 nearest block-level ancestor),包括table-related元素,基于top, right, bottom, 和 left的值进行偏移。偏移值不会影响任何其他元素的位置。

12. 浮动

float

float CSS属性指定一个元素应沿其容器的左侧或右侧放置,允许文本和内联元素环绕它。该元素从网页的正常流动(文档流)中移除,尽管仍然保持部分的流动性(与绝对定位相反)。

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

  • display为inline或inline-block时,使用float后会统一变成block。

float取值:

left:表明元素必须浮动在其所在的块容器左侧的关键字。

right:表明元素必须浮动在其所在的块容器右侧的关键字。

clear

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

clear取值:

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

13. flex布局

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

flex-direction

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

取值:

  • row:flex容器的主轴被定义为与文本方向相同。 主轴起点和主轴终点与内容方向相同。
  • row-reverse:表现和row相同,但是置换了主轴起点和主轴终点。
  • column:flex容器的主轴和块轴相同。主轴起点与主轴终点和书写模式的前后点相同
  • column-reverse:表现和column相同,但是置换了主轴起点和主轴终点

flex-wrap

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

取值:

  • nowrap:默认值。不换行。
  • wrap:换行,第一行在上方。
  • wrap-reverse:换行,第一行在下方。

flex-flow

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

justify-content

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

取值:

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

align-items

  • CSS align-items属性将所有直接子节点上的align-self值设置为一个组。 align-self属性设置项目在其包含块中在交叉轴方向上的对齐方式。

取值:

  • flex-start:元素向主轴起点对齐。
  • flex-end:元素向主轴终点对齐。
  • center:元素在侧轴居中。
  • stretch:弹性元素被在侧轴方向被拉伸到与容器相同的高度或宽度。

align-content

  • CSS 的 align-content 属性设置了浏览器如何沿着弹性盒子布局的纵轴和网格布局的主轴在内容项之间和周围分配空间。

取值:

  • flex-start:所有行从垂直轴起点开始填充。第一行的垂直轴起点边和容器的垂直轴起点边对齐。接下来的每一行紧跟前一行。
  • flex-end:所有行从垂直轴末尾开始填充。最后一行的垂直轴终点和容器的垂直轴终点对齐。同时所有后续行与前一个对齐。
  • center:所有行朝向容器的中心填充。每行互相紧挨,相对于容器居中对齐。容器的垂直轴起点边和第一行的距离相等于容器的垂直轴终点边和最后一行的距离。
  • stretch:拉伸所有行来填满剩余空间。剩余空间平均地分配给每一行。

order

  • 定义flex项目的顺序,值越小越靠前。

flex-grow

  • CSS 属性 flex-grow CSS 设置 flex 项主尺寸 的 flex 增长系数。
  • 负值无效,默认为 0。

flex-shrink

  • CSS flex-shrink 属性指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩,其收缩的大小是依据 flex-shrink 的值。
  • 负值无效,默认为1。

flex-basis

  • CSS 属性 flex-basis 指定了 flex 元素在主轴方向上的初始大小。

取值:

  • width 值可以是 <length>; 该值也可以是一个相对于其父弹性盒容器主轴尺寸的百分数 。负值是不被允许的。默认为 auto。

flex

  • flex-grow、flex-shrink、flex-basis的缩写。

常用取值:

  • auto:flex: 1 1 auto
  • none:flex: 0 0 auto

14. 响应式布局

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

例如:

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

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

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

相关文章

ChatGPT服务器配置部署-chatGPT国内入口搭建

chatGPT国内入口 ChatGPT是由OpenAI公司开发的一种自然语言生成模型&#xff0c;国内入口一般是通过API接口或者SDK对接实现的。具体的对接方式可以参考以下步骤&#xff1a; 了解ChatGPT的API接口或者SDK: 首先需要了解ChatGPT提供的API接口或者SDK&#xff0c;包括使用方式、…

文件上传漏洞靶场

目录 第一关 源码 前端 后端 代码审计 前端 后端 绕过原理 抓包后未修改 抓包后修改且文件上传成功 第二关 源码 后端 代码审计 绕过原理 抓包后未修改 抓包后修改且文件上传成功 ​编辑 第三关 源码 后端 代码审计 绕过原理 第四关 源码 后端 代码审…

linux以太网(二)

内核版本&#xff1a;linux-3.14.16 基于imx6 一、文件fec_main.c分析 路径&#xff1a;drivers\net\ethernet\freescale\fec_main.c 1、platform总线 标准的平台总线使用方式 设备树匹配 设备树节点 2、平台总线probe 1&#xff09;分配net_device相关结构 分配 与平…

单源最短路问题

全部代码 全部代码在github acwing 上 正在更新 https://github.com/stolendance/acwing 图论 欢迎大家star与fork 单源最短路问题 先用spfa算法 不行再换其他的 spfa-超级万能 说不定比dijsktra还快 dis[] 代表第k到某一点的最短距离 queue 代表刚被更新的点 它有可能更…

【Java校招面试】基础知识(三)——多线程与并发

目录 前言一、基础概念二、互斥锁三、Java内存模型&#xff08;JMM&#xff09;四、线程池后记 前言 本篇主要介绍Java多线程与并发相关内容。 “基础知识”是本专栏的第一个部分&#xff0c;本篇博文是第三篇博文&#xff0c;如有需要&#xff0c;可&#xff1a; 点击这里&a…

每日一题——反转字符串—II

每日一题 反转字符串——II 题目链接 思路 我们先来举几个例子来理解题目意思 字符串“ abcdefgh ”&#xff0c;k 2&#xff0c;那么依据题目意思&#xff0c;反转后的字符串应该是“ bacdfegh ”&#xff08;即每2k个字符&#xff0c;就反转前k个字符&#xff0c;且无剩余…

基于 Python+Flask+SQLite 的网易云音乐评论情感分析系统

基于 PythonFlaskMySQL 的网易云音乐评论情感分析系统&#xff0c;采用Echart构建图表&#xff0c;支持一键切换颜色主题&#xff0c;通过连接数据库获取评论数据。对失效的爬虫代码进行了更新&#xff0c;可通过歌曲id_半_自动获取评论&#xff0c;具体可以看下方的过程展示。…

展望Flink各版本及新特性

展望Flink各版本及新特性 一 Flink 1.9 版本1.1 细粒度批作业恢复1.2 State Processor API1.3 Stop-with-Savepoint1.4 新 Blink SQL 查询处理器预览1.5 Table API / SQL 的其他改进 二 Flink 1.10 [重要版本 : Blink 整合完成]2.1 内存管理及配置优化2.2 统一的作业提交逻辑2.…

图像去噪简单介绍—并给出示例代码

文章目录 图像去噪简单介绍—并给出示例代码去噪的基本原理常见的噪声类型高斯噪声椒盐噪声马赛克噪声脉冲噪声 添加噪声的代码添加高斯噪声添加椒盐噪声 noise_pic常用的去噪方法均值滤波中值滤波高斯滤波双边滤波基于深度学习的图像去噪 总结图片来源 图像去噪简单介绍—并给…

Win11如何下载安装java?

一、问题描述 我在复现论文代码的时候&#xff0c;遇到了这样的问题&#xff1a; 我没有下载java&#xff0c;那么该如何解决呢&#xff1f; 下载 Java 的作用是为了能够在计算机上运行使用 Java 语言编写的应用程序。Java 是一种广泛使用的编程语言&#xff0c;可用于开发各…

【leetcode刷题总结】——代码随想录(数组总结)

代码随想录按照数组-> 链表-> 哈希表->字符串->栈与队列->树->回溯->贪心->动态规划->图论->高级数据结构&#xff0c;再从简单刷起&#xff0c;做了几个类型题目之后&#xff0c;再慢慢做中等题目、困难题目。 以下是个人刷题总结&#xff0c;…

多线程编程的安全问题和解决措施

线程不安全的概念 由于多线程并发执行&#xff0c;导致结果出错&#xff0c;我们称这种线程是不安全的。 多线程编程出错的原因 一&#xff1a;线程之间并发执行的随机性导致线程不安全 二&#xff1a;多个线程对同一个对象进行修改 三&#xff1a;线程的操作不是原子性的…

Vscode搭建ESP-IDF开发环境指南-Ubuntu ESP32-C3 合宙

文章目录 1.Ubuntu环境搭建2.vscode安装3.esp-idf插件如果到这里没出现问题的话&#xff0c;就能顺利安装了&#xff0c;如果出现问题会在输出那一栏里报错&#xff0c;根据错误去找原因就好&#xff0c;常见的错误就是网络原因以及之前的依赖包没有装好 ![](https://img-blog.…

优思学院|受控文件在质量管理体系中的作用?

在质量管理体系中&#xff0c;受控文件是指受到控制和管理的文件&#xff0c;包括政策、程序、指南、规程、说明书、作业指导书、记录等&#xff0c;它们记录了组织内各种活动的要求和实施方法&#xff0c;并规定了文件的创建、审批、发布、变更和废止等流程&#xff0c;以确保…

宝塔怎么安装青龙面板-跑京东豆脚本

一、搭建青龙面板 安装docker管理器 我们使用宝塔的Docker管理器来一键安装Docker 在软件商店内搜索Docker,直接安装第一个应用即可。 拉取镜像运行容器 在安装完docker之后我们就可以开始拉取docker镜像并运行容器了,ssh连接服务器命令行中输入下面的代码: docker run …

TOGAF架构内容—TOGAF 内容框架和企业元模型

一、概述 TOGAF ADM 提供了一个流程生命周期&#xff0c;用于在企业内创建和管理架构。在 ADM&#xff0c;对输入、输出和步骤的讨论&#xff0c;描述了许多架构工作产品或工件&#xff0c;例如过程和 应用。 此处提供的内容框架和企业元模型为这些术语定义了正式结构&#x…

【python】NameError: No such file or directory 问题解决

前言 大家早好、午好、晚好吖 ❤ ~欢迎光临本文章 1. 问题 最近有小伙伴经常问到这个报错&#xff0c;今天来分享一下具体怎么解决。 [Errno 2] No such file or directory: ./mnist_image_label/mnist_train_jpg_60000.txt这个没有查找到子文件或者子文件夹的问题 2. 解决…

WIZnet 的 TOE 设计大赛

链接: TOE Design Contest 介绍 欢迎来到 WIZnet 的年度物联网设计大赛&#xff01; TOE 竞赛是对您的 IoT 技能和创造力的终极考验。 借助强大的 W5300 网络控制器芯片&#xff0c;您将能够以前所未有的方式将您的物联网愿景变为现实。 无论您是经验丰富的专业人士还是刚刚起…

计算机提示vcruntime140.dll丢失是什么意思?vcruntime140.dll丢失的解决方法(详细方法)

计算机丢失vcruntime140.dll是什么意思&#xff1f;经常看到有小伙伴有在网上问这样的问题&#xff0c;电脑上这个vcruntime140.dll文件丢失的问题经常发生吧&#xff0c;那么就很有必要给大家详细的说说这一方面的问题了&#xff0c;下面我们来看看 第一&#xff1a;vcruntim…

RocketMQ的简单使用

大家好&#xff0c;我是Leo&#xff01;今天来和大家分享RocketMQ的一些用法。 领域模型介绍 Producer: 用于生产消息的运行实体。 Topic: 主题&#xff0c;用于消息传输和存储的分组容器。 MessageQueue: 消息传输和存储的实际单元容器。 Message: 消息传输的最小单元。 C…