CSS

最新推荐文章于 2024-06-16 09:46:44 发布
最新推荐文章于 2024-06-16 09:46:44 发布
阅读量95 收藏
点赞数
分类专栏： 第三阶段 文章标签： java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46337171/article/details/112211748
版权

目录

前言

文章内容输出来源：拉勾教育JAVA就业训练营

1.css介绍

  • CSS是指层叠样式表 cascading style sheets
  • 通过CSS可以让我们定义HTML元素如何显示。
  • CSS可以让我们原本HTML不能描述的效果，通过CSS描述出来。
  • 通过CSS描述我们的html页面，可以让我们的页面更加漂亮，可以提高工作效率。

2.CSS与HTML结合方式

2.1 第一种方式 内联/行内样式

  • 就是在我们的HTML标签上通过style属性来引用CSS代码。
  • 优点:简单方便 ；
  • 缺点:只能对一个标签进行修饰。

2.2 第二种方式 内部样式表

  • 我们通过

2.3 第三种方式 外部样式表

我们需要单独定义一个CSS文件,注意CSS文件的后缀名就是.css在项目根目录下，创建css目录，在css目录中创建css文件 css01.css在中使用标签引用外部的css文件

关于外部导入css使用与@import的区别?

  1. 加载顺序不同
    @import方式导入会先加载html，然后才导入css样式，那么如果网络条件不好，就会先看到没有
    修饰的页面，然后才看到修饰后的页面。
    如果使用link方式，它会先加载样式表，也就是说，我们看到的直接就是修饰的页面；
  2. @import方式导入css样式，它是不支持javascript的动态修改的。而link支持。
    三种样式表的优先级：满足就近原则
    内联 > 内部 > 外部

3.CSS的使用

3.1 css中选择器

3.1.1 元素(标签)选择器
  • 它可以对页面上相同的标签进行统一的设置，它描述的就是标签的名称.

3.1.2 类选择器

类选择器在使用时使用"."来描述，它描述的是元素上的class属性值

3.1.3 id选择器

它只能选择一个元素，使用 “#” 引入，引用的是元素的id属性值。
id选择器，比类选择器更具有唯一性

3.1.4 选择器组

逗号表示，谁和谁。
例如，我有手机，你有手机，他也有手机，一条一条写太麻烦，就可以合并编写
在这里插入图片描述

3.1.5 派生选择器

子代：父子关系（隔代不管）
后代：父子孙，曾孙，从孙…
在这里插入图片描述

3.1.6 CSS伪类

  • CSS伪类可对css的选择器添加一些特殊效果
  • 伪类属性列表：
    • :active 向被激活的元素添加样式。
    • :hover 当鼠标悬浮在元素上方时，向元素添加样式。
    • :link 向未被访问的链接添加样式。
    • :visited 向已被访问的链接添加样式。
    • :first-child 向元素的第一个子元素添加样式。
  • 超链接的伪类：要遵守使用顺序，爱恨原则 LoVeHAte，lvha

3.2 CSS基本属性

3.2.1 文本属性
  • 指定字体：font-family : value;
  • 字体大小：font-size : value;
    • px：像素
    • em：倍数
  • 字体加粗：font-weight : normal/bold;
  • 文本颜色：color : value;
  • 文本排列：text-align : left/right/center;
  • 文字修饰：text-decoration : none/underline;
  • 行高：line-height : value;
  • 首行文本缩进：text-indent : value （2em）;

3.2.2 背景属性

  • CSS 允许应用纯色作为背景，也允许使用背景图像创建相当复杂的效果。
  • background-color 设置元素的背景颜色。
  • background-image 把图像设置为背景。
  • background-repeat 设置背景图像的墙纸效果，是否及如何重复
  • repeat：在垂直方向和水平方向重复，为重复值
  • repeat-x：仅在水平方向重复
  • repeat-y：仅在垂直方向重复
  • no-repeat：仅显示一次
  • background-position 设置背景图像的起始位置
    1：控制水平方向 x轴： 正值，向右移动； 负值，向左移动
    2：控制垂直方向 y轴： 正值，向下移动； 负值，向上移动
  • background-attachment 背景图像是否固定或者随着页面的其余部分滚动
    • 默认值是 scroll：默认情况下，背景会随文档滚动
    • 可取值为 fixed：背景图像固定，并不会随着页面的其余部分滚动，常用于实现称为水印的图像

3.2.3 列表属性

CSS列表属性作用如下：

  • 设置不同的列表项标记为有序列表
  • 设置不同的列表项标记为无序列表
  • 设置列表项标记为图像

有两种类型的列表：

  • 无序列表 - 列表项标记用特殊图形（如小黑点、小方框等）
  • 有序列表 - 列表项的标记有数字或字母

使用CSS，可以列出进一步的样式，并可用图像作列表项标记。
- none：无标记。（去除标记）
- disc：默认。标记是实心圆。
- circle：标记是空心圆。
- square：标记是实心方块。
- decimal：标记是数字。
- decimal-leading-zero：0开头的数字标记。(01, 02, 03, 等。)
- lower-roman：小写罗马数字(i, ii, iii, iv, v, 等。)
- upper-roman：大写罗马数字(I, II, III, IV, V, 等。)
- lower-alpha：小写英文字母The marker is lower-alpha (a, b, c, d, e,等。)
- upper-alpha：大写英文字母The marker is upper-alpha (A, B, C, D, E,等。)

3.2.4 边框属性

CSS边框属性允许你指定一个元素边框的样式和颜色。

<style>
  div{
   border-width: 20px;
   border-color: green;
   border-style: outset;
 }
 </style>
 <body>
  <div>hello</div>
 </body>

border-style取值：
在这里插入图片描述

3.2.5 轮廓属性

  • 轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
  • 轮廓和边框的区别：
    • 边框 (border) 可以是围绕元素内容和内边距的一条或多条线；
    • 轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
  • CSS outline 属性规定元素轮廓的样式、颜色和宽度。

3.2.6 盒子模型

  • 所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。
  • CSS盒子模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
  • 盒子模型允许我们在其它元素和周围元素边框之间的空间放置元素。
    下面的图片说明了盒子模型(Box Model)：
    在这里插入图片描述
  • margin(外边距) - 盒子与盒子之间的距离
  • border(边框) - 盒子的保护壳
  • padding(内边距/填充) - 内填充，盒子边与内容之间的距离
  • content(内容) - 盒子的内容，显示的文本或图像

3.3 CSS定位

3.3.1 默认定位
  • 块级元素：h1~h6，p, div 等，自上而下，垂直排列（自动换行）；可以改变宽高
  • 行内元素：a,b,span,等，从左向右，水平排列（不会换行）；不能改变宽高
  • 行内块元素：input,img等，从左向右，水平排列（自动换行）；可以改变宽高

3.3.2 浮动定位

  • 让元素“飞”起来。不仅可以靠着左边或右边。还可以消除“块级”的霸道特性（独自占一行）。
  • float取值：
    • none ：不浮动
    • left：贴着左边 浮动
    • right：贴着右边 浮动

3.3.3 相对定位

和原来的位置进行比较，进行移动定位（偏移)
在这里插入图片描述

3.3.4 绝对定位
  • 本元素与已定位的祖先元素的距离
  • 如果父级元素定位了，就以父级为参照物；
  • 如果父级没定位，找爷爷级，爷爷定位了，以爷爷为参照物。
  • 如果爷爷没定位，继续向上找，都没定位的话，body是最终选择。

3.3.5 固定定位

将元素的内容固定在页面的某个位置，当用户向下滚动页面时元素框并不随着移动

在这里插入图片描述

3.3.6 z-index

如果有重叠元素，使用z轴属性，定义上下层次。
在这里插入图片描述
注意：
z轴属性，要配合相对或绝对定位来使用。
z值没有额定数值（整型就可以，具体用数字几，悉听尊便）

4. CSS3

4.1 圆角

border-radius：左上 右上 右下 左下;
border-radius：四个角;
border-radius：50%; 圆形

4.2 盒子阴影

box-shadow：1 2 3 4 5;
1：水平偏移
2：垂直偏移
3：模糊半径
4：扩张半径
5：颜色

4.3 渐变

4.3.1 线性渐变

background:linear-gradient([方向/角度]，颜色列表)

4.3.2 径向渐变

以圆心向外发散
background: radial-gradient(颜色列表);

4.4 背景

4.4.1 背景位置

background-origin：指定了背景图像的位置区域
border-box : 背景贴边框的边
padding-box : 背景贴内边框的边
content-box : 背景贴内容的边

4.4.2 背景裁切

background-clip:
border-box 边框开切
padding-box 内边距开切
content-box 内容开切

4.4.3 背景大小

background-size:
cover 缩放成完全覆盖背景区域最小大小
contain 缩放成完全适应背景区域最大大小

4.5 过渡动画

4.5.1 过渡

从一个状态到另一个状态，中间的“缓慢”过程；
缺点是，控制不了中间某个时间点。
transition｛1 2 3 4｝
1：过渡或动画模拟的css属性
2：完成过渡所使用的时间（2s内完成）
3：过渡函数。。。
4：过渡开始出现的延迟时间

4.5.2 动画

从一个状态到另一个状态，过程中每个时间点都可以控制。

  • 关键帧：@keyframes 动画帧 { from{} to{} } 或者{ 0%{} 20%{}… }
  • 动画属性：animation{ 1 , 2 , 3 , 4 , 5 }
    1：动画帧
    2：执行时间
    3：过渡函数
    4：动画执行的延迟（可省略）
    5：动画执行的次数
m0_46337171
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS详解漫谈
hwinte的博客
11-12 327
1 CSS介绍 HTML与CSS就是装修前后的区别 CSS是指层叠样式表 cascading style sheets 通过CSS可以让我们定义HTML元素如何显示（如何美丽的显示） CSS可以让我们原本HTML不能描述的效果，通过CSS描述出来（通过div） 通过CSS描述我们的html页面，可以让我们的页面更加漂亮，可以提高工作效率 HTML是创造世界，CSS是在创造世界的基础上让世界更加美丽 2 CSS与HTML结合方式 2.1 第一种方式 内联/行内样式 就是在我们的HTML标签上通过style属性
web前端入门到实战：CSS动画@keyframes的用法
软件开发-前端开发-IT
09-09 1439
CSS动画 CSS动画允许大多数HTML元素的动画，而无需使用JavaScript或Flash！ 动画浏览器支持 IE10+支持该属性的。其他低浏览器版本数字后跟-ms-， -webkit-，-moz-或-o-指定使用前缀的第一个版本。 什么是CSS动画？ 动画允许元素从一种样式逐渐变为另一种样式。您可以根据需要多次更改所需的CSS属性。要使用CSS动画，必须首先为动画指定一些关键帧。关键帧保持元...
CSS原理，如何解析？
Elltor
08-26 2089
我们每天都在与CSS打交道，那么CSS的原理是什么呢？10个人里面9个人都不能准确地答出来吧！ 一、浏览器渲染 首先来回顾一下浏览器的渲染过程，先上图： 正如上图所展示的，我们浏览器渲染过程分为了两条主线： 其一，HTML Parser 生成的 DOM 树； 其二，CSS Parser 生成的 Style Rules ；
CSS基本解析
qq_54520302的博客
10-31 389
CSS基本构成
详解CSS伪元素::marker
qq_22146915的博客
12-23 5233
本文将介绍 CSS 中一个比较有意思的伪元素::marker，是从 CSS Pseudo-Elements Level 3 开始新增，CSS Pseudo-Elements Level 4 中完善的一个比较新的伪元素，从 Chrome 86+ 开始得到浏览器的支持。利用它，我们可以给元素添加一个伪元素，用于生成一个项目符号或者数字。
bootstrap.css
01-27
bootstrap的css文件
cssgrid
03-30
cssgrid
CSS钢琴
03-02
CSS钢琴
main.css:用于开发HTML5 Boilerplate CSS文件main.css的存储库
04-13
使用安装： npm install main.css并从生成的node_modules/main.css/dist文件夹中node_modules/main.css/dist所需的内容用安装： yarn add main.css并从生成的node_modules/main.css/dist文件夹中node
深入解析CSS （1）
q1ngqingsky的博客
08-09 669
对于想要精通CSS的人而言，这本书是一张宝贵的“地图”，覆盖了CSS世界的大部分“疆土”，从CSS基础知识开始（如层叠、优先级、继承、相对单位、盒模型等），到多种布局（如浮动布局、Flexbox、网格布局、响应式设计等），再到大型应用程序中的CSS（如模块化CSS和模式库），最后是关于CSS的高级话题（如背景、阴影和混合模式，对比、颜色和间距，以及排版、过渡、变换、动画等）。........................
css3动画@keyframes
qq_44988115的博客
03-25 160
animation:mymove 5s infinite; -moz-animation:mymove 5s infinite; /* Firefox */ -webkit-animation:mymove 5s infinite; /* Safari and Chrome */ -o-animation:mymove 5s infinite; /* Opera */ animation包含定义...
WEB菜鸟笔记(一)
weixin_44142443的博客
03-22 393
标签： h1–h6，1最大6最小，独占一行 p ： 独占一行* hr: 独占一行* 快捷键技巧： ctrl+f搜素关键词 ctrl+d复制一行 ctrl+x删除一行 选中文字ctrl+alt+t快速加标签 ...
浏览器工作原理（五）：CSS解析（CSS parsing）
雄领IT的专栏
10-19 6696
还记得简介中提到的解析的概念吗，不同于html，css属于上下文无关文法，可以用前面所描述的解析器来解析。Css规范定义了css的词法及语法文法。 看一些例子： 每个符号都由正则表达式定义了词法文法（词汇表）： comment///*[^*]*/*+([^/*][^*]*/*+)*// num[0-9]+|[0-9]*"."[0-9]+ nonascii[/200-/377] nmstart
「三」浏览器中CSS 语法解析过程
weixin_45821809的博客
01-04 1006
CSS 语法解析过程 1.在浏览器系列文章中，今天终点讲下CSS解析这块内容.我们已知浏览器的渲染流程中HTML Parser会生成 DOM树，而 CSS Parser会将解析结果附加到 DOM 树上，如下图： 解析分为词法分析 和 语法分析。 词法分析，也是编译原理中的术语，从左到右一个字符一个字符的读入源程序，对字符流进行扫描，根据构词规则识别单词。这一过程可以使用lex等工具自动生成。 语法分析，主要任务是在词法分析的基础上，将单词序列组合成各类语法短语，如“程序”， “语句”，“表达式” 解析工作通
CSS选择器解析（一文了解）
qq_62977276的博客
04-02 337
一文了解CSS3 选择器，适用新手小白！
基于springboot的青年公寓服务平台源码数据库
最新发布
s123456sj的博客
06-16 1185
本青年公寓服务平台分为管理员还有用户两个权限，管理员可以管理用户的基本信息内容，可以管理房屋投诉信息以及房屋投诉的租赁信息，能够与用户进行相互交流等操作，用户可以查看房屋信息，可以查看房屋投诉以及查看管理员回复信息等操作。
css
06-02
CSS（Cascading Style Sheets）是一种用于描述网页样式和排版的语言。通过 CSS，我们可以将网页内容和样式分离开来，从而使得网页的结构和样式更加清晰易于维护。 CSS 由三个部分组成： 1. 选择器（Selector）：...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值