CSS快速掌握学习笔记

于 2024-10-07 19:49:13 发布
阅读量401 收藏 12
点赞数 10
分类专栏： cs基础 文章标签： css 学习 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_52964132/article/details/142745195
版权

文章目录

UP主:
黑马

链接:
CSS 快速掌握_学习资源库_阿里云培训中心-阿里云 (aliyun.com)

- CSS 的style的使用方式

  1. 嵌入式

  2. 外链式

  3. 行内式

- 文本属性

image.png

- 字体属性

image.png

.example{
	font-style: italic; /* 设置斜体 */
}
  • 一般比较特殊的字体，会使用图片进行展示。如果用户的系统中没有该字体，字体会被设置为宋体。
  • font 中的参数顺序必须严格

- 复合元素选择器

image.png

eg.

<!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>

        div,h2{

            color: red;

        }

    </style>

</head>

<body>

    <h2>abc</h2>

    <div><h2>b</h2></div>

    <h2>c</h2>

</body>

</html>
  • 多元素选择器：多个元素同样的设置
  • E F ，属于E标签下的所有的F
  • E > F, 只有E的儿子，不包括孙子
  • E+F， 两者必须相邻紧挨，样式才能够生效

- 列表样式属性

image.png

  • 采用url可以在其中套用图片

- 伪类选择器

image.png

- 属性选择器

image.png

  • 针对属性值的种类，进行筛选设置样式

- 继承性

  • 内层元素样式与外层元素相同时，内层元素样式会覆盖外层元素。
  • 除了文本与字体的属性可以被继承，其余的样式都不能被继承。

- 优先级

行内样式 > ID选择器 > 类选择器 > 标签选择器

  • 一般来说，选择器指向越准确，其优先级越高
  • 无论多选择器还是单选择器，都满足上述的级别要求

- !important

属性： !important
作用： 提高所属标签的权重

image.png

注意：

  1. ！important提升的是属性的权重，不是选择器的权重
  2. !important 不能提升继承来的权重

- 单个标签可携带多个类名

优点：

  1. 减少代码量

image.png

  • class div3 用 class div1 div2来代替

  • 如果标签内多个类名的属性设置出现冲突，以CSS中最后出现的代码作为标准，与HTML中class的属性值的顺序无关

- 背景样式属性

image.png

  • background-color 设置背景颜色，需要：元素有内容 or 元素有宽度和高度

- 标准文档流

  • 空白折叠现象： 需要各个标签紧密相连，中间不留空白
  • 高矮不齐现象：

- 浮动

需求： 多个元素排在同一行【行内元素的特性】；能够给元素设置宽高 【块内元素的特性】

  • 利用 float 属性 【right】

    • 浮动元素脱离标准文档流，不占用空间
    • 通用选择清除所有的页边距，不会限制之后的排版 image.png

  • 清除浮动：浮动元素会影响下面元素的布局；布置了浮动元素不会被其父元素包裹

      1. 给浮动元素父元素设置固定的高度（不建议使用）【元素的高度一般不是手动设置的，需要根据自身的内容自定义】
    .fatherclass{
	height: 400px;
}
      1. 清除浮动属性样式 clear : [clear:left; clear:right; clear:both ]
      • 使用方法：在最后一个浮动元素下面新建div， 其主要功能是清除浮动 image.png
    • overflow：hidden 将列表的元素进行清除
      image.png

- 盒子模型

  • 参数解释：

    • width: “宽度”，盒子里面内容的宽度
    • height：“高度”，盒子里面内容的高度
    • padding：“内填充”，盒子里内容到边框的距离
    • border：“盒子的外边框”
    • margin：“外边距”，盒子与盒子之间的间距

  • 只有标准文档流中的margin使用{margin: auto}才会实现水平居中

  • text-align只能实现文本的对齐

  • margin竖直方向的外边距不会叠加，只会选择最大的部分

  • margin的作用主要是实现兄弟之间的间距，父子之间给父类使用padding-top等

- border 属性

– 线形

image.png

<!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>

        .box{

            width: 100px;

            height: 700px;

            border-top: 10px solid red ;

            border-bottom: 10px solid blue;

            border-right: 10px solid green;

            border-left: 10px solid yellow;

        }

    </style>

</head>

<body>

    <div class="box"></div>

</body>

</html>

- display

  • block: 块级元素 （将隐藏元素显示）
  • inline：行内元素
  • none: 将显示元素隐藏
– 综合案例
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Display综合案例展示</title>

    <style>

        *{

            margin: 0;

            padding: 0;

        }

        body{

            background: url(https://x0.ifengimg.com/res/2022/1D5560C2B4D662B165273C9F6E98834C7C2D3377_size163_w1080_h668.jpeg);

        }

        ul{

            list-style: none; /* 移除列表前面的特定标记 .*/

        }

        .nav{

            width: 960px;

            height: 40px;

            margin: 100px auto;

        }

        .nav ul li{

            float: left;

            width: 120px;

            height: 40px;

            line-height: 40px;

            text-align: center;

            background: url(https://img.tukuppt.com/bg_grid/00/06/69/fuBjXWNzvg.jpg!/fh/350) repeat-x;

  

        }

        .nav ul li a:link,.nav ul li a:visited{

            text-decoration: none;

            color: white;

        }

        .nav ul li a{

            width: 120px;

            height: 40px;

            display: block; /*将行内元素转化为块元素*/

        }

        .nav ul li a:hover{

            background: url(https://photo-static-api.fotomore.com/creative/vcg/veer/612/veer-158533090.jpg);

        }

    </style>    

</head>

<body>

    <div class="nav">

        <ul>

            <li><a href="#">网站栏目</a></li>

            <li><a href="#">网站栏目</a></li>

            <li><a href="#">网站栏目</a></li>

            <li><a href="#">网站栏目</a></li>

            <li><a href="#">网站栏目</a></li>

            <li><a href="#">网站栏目</a></li>

            <li><a href="#">网站栏目</a></li>

            <li><a href="#">网站栏目</a></li>

        </ul>

    </div>

</body>

</html>

image.png

- 定位：position

– 固定定位 position:fixed

image.png

  • 固定定位元素脱离了标准文档流
  • 固定定位元素高于标准文档流
  • 固定定位元素不再占用空间
  • 固定定位元素不会发生滚动

用法：

  1. 生成返回顶部状态栏
    参考代码：
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>固定定位返回顶部按钮</title>

    <style>

        *{

            margin: 0;

            padding: 0;

        }

        a{

            position: fixed;

            width: 80px;

            height: 60px;

            display: block;

            background-color: purple;

            text-decoration: none;

            color: white;

            text-align: center;

            line-height: 30px;

            font-weight: bold;

        }

    </style>

</head>

<body>

    <a href="#">返回<br/>顶部</a>

    <img src="https://ts1.cn.mm.bing.net/th/id/R-C.454adc7c22b464bca65a0ba2726fd3aa?rik=IiFCDoOAU181uQ&riu=http%3a%2f%2fpic.baike.soso.com%2fp%2f20131112%2f20131112161515-39763088.jpg&ehk=YhGJuIBQy4yp58Al%2bJQOMfNYfgG1Y0hhXCBHD4AQw78%3d&risl=&pid=ImgRaw&r=0&sres=1&sresct=1">

    <img src="https://ts1.cn.mm.bing.net/th/id/R-C.454adc7c22b464bca65a0ba2726fd3aa?rik=IiFCDoOAU181uQ&riu=http%3a%2f%2fpic.baike.soso.com%2fp%2f20131112%2f20131112161515-39763088.jpg&ehk=YhGJuIBQy4yp58Al%2bJQOMfNYfgG1Y0hhXCBHD4AQw78%3d&risl=&pid=ImgRaw&r=0&sres=1&sresct=1">

    <img src="https://ts1.cn.mm.bing.net/th/id/R-C.454adc7c22b464bca65a0ba2726fd3aa?rik=IiFCDoOAU181uQ&riu=http%3a%2f%2fpic.baike.soso.com%2fp%2f20131112%2f20131112161515-39763088.jpg&ehk=YhGJuIBQy4yp58Al%2bJQOMfNYfgG1Y0hhXCBHD4AQw78%3d&risl=&pid=ImgRaw&r=0&sres=1&sresct=1">

  

</body>

</html>

image.png

  1. 生成网站顶部导航栏
    参考代码：
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>固定定位实现顶部导航栏</title>

    <style>

        *{

            margin: 0;

            padding: 0;

        }

        .nav{

            width: 100%;

            height: 60px;

            background-color: #222222;

            position: fixed;

            top: 0;

            left: 0;

        }

        .nav .inner_c{

            width: 1000px;

            height: 60px;

            margin: 0px auto;

            background: #222222;

        }

        ul{

            list-style: none;

        }

        ul li{

            float: left;

            width: 150px;

            height: 60px;

            line-height: 60px;

            text-align: center;

        }

        ul li a{

            display: block;

            width: 150px;

            height: 60px;

            text-decoration: none;

            color: white;

            font-weight: bold;

        }

        ul li a:hover{

            background-color: gold;

        }

        body{

            padding: 60px;

        }

  

    </style>

</head>

<body>

    <div class="nav">

        <div class="inner_c">

            <ul>

                <li><a href="#">网站栏目1</a></li>

                <li><a href="#">网站栏目2</a></li>

                <li><a href="#">网站栏目3</a></li>

                <li><a href="#">网站栏目4</a></li>

                <li><a href="#">网站栏目5</a></li>

                <li><a href="#">网站栏目6</a></li>

            </ul>

        </div>

    </div>

    <img src="https://tse1-mm.cn.bing.net/th/id/OIP-C.A8uRzfFyePFXVe9TN25XiQHaFP?rs=1&pid=ImgDetMain" >

    <img src="https://ts1.cn.mm.bing.net/th/id/R-C.454adc7c22b464bca65a0ba2726fd3aa?rik=IiFCDoOAU181uQ&riu=http%3a%2f%2fpic.baike.soso.com%2fp%2f20131112%2f20131112161515-39763088.jpg&ehk=YhGJuIBQy4yp58Al%2bJQOMfNYfgG1Y0hhXCBHD4AQw78%3d&risl=&pid=ImgRaw&r=0&sres=1&sresct=1">

</body>

</html>
	```



#### -- 相对定位 position:relative
相对定位是相对于原来的自己定位。

##### -- 特点：
1. 相对定位元素没有脱离标准文档流 
2. 相对定位元素会覆盖标准文档流中的元素

**参考代码：**

```html
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>相对定位案例</title>

    <style>

        input[type="text"]{

            font-size: 36px;

        }

        input[type="button"]{

            position: relative;

            top: 5px;

        }

    </style>

</head>

<body>

    <input type="text"><input type="button" value="检测输入">

</body>

</html>

image.png

- 绝对定位：position: absolute
  • 绝对定位参照于祖先定位元素进行定位，即查找父元素是否进行了定位的设置，如果都没有，会相对于浏览器窗口进行定位

- Z-index 属性

决定谁在谁上，谁覆盖谁

  • 只有设置了定位的元素才有 z-index
  • z-index无单位，为正整数，默认为0
  • 多个定位元素的z-index同级，则后面的会覆盖前面的

- 结构伪类

image.png

- border collap

在CSS中，“border collapse” 是指表格边框的合并方式。这个属性是 border-collapse，用于控制表格单元格的边框是合并在一起还是分开显示。

border-collapse 属性有两个可能的值：

  1. collapse: 边框合并在一起。相邻单元格的边框会合并成一个边框，看起来像是一个连续的边框。
  2. separate: 边框分开显示。相邻单元格的边框会分开显示，每个单元格都有自己的边框。

示例

<table>  
  <tr>    <td>单元格1</td>  
    <td>单元格2</td>  
  </tr>  <tr>    <td>单元格3</td>  
    <td>单元格4</td>  
  </tr></table>  

table {  
  width: 100%;  border-collapse: collapse; /* 边框合并 */  
}  
  
td {  
  border: 1px solid black;  padding: 8px;}

在这个例子中，border-collapse: collapse; 使得表格的边框合并在一起，相邻单元格的边框会合并成一个边框。

如果将 border-collapse 设置为 separate，边框会分开显示：

table {  
  width: 100%;  border-collapse: separate; /* 边框分开 */  
  border-spacing: 10px; /* 控制边框之间的间距 */  
}  
  
td {  
  border: 1px solid black;  padding: 8px;}

在这个例子中，border-collapse: separate; 使得每个单元格都有自己的边框，并且可以使用 border-spacing 属性来控制边框之间的间距。

- 伪元素

伪元素（Pseudo-elements）是CSS中的一种特殊选择器，用于在元素的特定部分添加样式或内容。伪元素以双冒号（::）开头，用于区分伪类（以单冒号开头）。伪元素允许在文档中插入内容，而不需要修改HTML结构。

常见的伪元素

以下是一些常见的伪元素及其用途：

  1. ::before: 在元素内容之前插入内容。
  2. ::after: 在元素内容之后插入内容。
  3. ::first-line: 选择元素的第一行内容。
  4. ::first-letter: 选择元素的第一个字母。
  5. ::selection: 选择用户选择的文本部分。

示例

::before 和 ::after
<p class="example">这是一个示例段落。</p>  

.example::before {  
  content: "开始：";  
  color: red;}  
  
.example::after {  
  content: "结束。";  
  color: blue;}

在这个例子中，::before 伪元素在段落内容之前插入“开始：”，::after 伪元素在段落内容之后插入“结束。”。

::first-line 和 ::first-letter
<p class="example">这是一个示例段落。这是一个示例段落。</p>  

.example::first-line {  
  font-weight: bold;  color: green;}  
  
.example::first-letter {  
  font-size: 2em;  color: purple;}

在这个例子中，::first-line 伪元素选择段落的第一行，并将其字体加粗并设置为绿色。::first-letter 伪元素选择段落的第一个字母，并将其字体大小设置为2倍，颜色设置为紫色。

::selection
<p class="example">选择这段文字看看效果。</p>  

.example::selection {  
  background-color: yellow;  color: red;}

在这个例子中，::selection 伪元素选择用户选择的文本部分，并将其背景颜色设置为黄色，文本颜色设置为红色。

注意事项

  1. content 属性: 对于 ::before 和 ::after 伪元素，content 属性是必需的。可以是一个字符串、一个URL（用于插入图像）、一个计数器（用于生成编号）等。
  2. 兼容性: 虽然大多数现代浏览器都支持伪元素，但在某些旧版浏览器中可能需要使用单冒号（:）来兼容。

- 文本阴影

image.png

- 盒子阴影

image.png

image.png

- 圆角矩形

border-radius：A, B, C, D
A,B,C,D分别代表其四个角的情况。如果后面只有一个数值，默认对四个角都进行该圆化操作。

image.png

- 透明度

image.png

司南锤
关注
专栏目录
HTML+CSS+JS学习笔记
10-25
它通过一系列的标签来组织页面元素，使浏览器...学习HTML、CSS和JS是前端开发的基础，它们结合使用可以创建功能丰富、交互性强的网页。了解这些基本概念和标签后，可以通过实践项目来加深理解，逐步掌握前端开发技能。
CSS快速掌握，自学版
10-08
本资源摘要信息对应的文件信息为“CSS快速掌握，自学版”，它是一本在线笔记，旨在帮助读者从基础开始学习CSS，并逐步掌握高级技术。下面是该资源中的知识点总结： 第1章：CSS简介 * CSS是什么？CSS，全称为层叠...
Html与Css学习笔记以及经验总结
06-23
这篇学习笔记和经验总结将深入探讨这两者的核心概念，帮助初学者快速掌握这两门技术。 首先，HTML是用于创建网页内容的标记语言。它由一系列元素组成，这些元素通过标签表示，比如`<html>`、`<head>`、`<body>`等。...
移动端CSS的学习笔记。
01-19
【移动端CSS学习笔记】 在移动端开发中，CSS扮演着至关重要的角色，因为它负责网页的样式和布局。本文将深入探讨移动端CSS的相关知识点，包括调试工具、视口设置、图片处理、布局策略以及响应式设计。 1. **谷歌...
bootstrap学习笔记
06-17
Bootstrap是一个强大的前端框架，主要用于快速开发响应式的Web应用程序和网站。...通过这份笔记，开发者可以快速掌握Bootstrap框架的核心概念，以及如何将其运用到自己的项目中，构建出既美观又功能强大的Web应用程序。
CSS-Day3
m0_74039531的博客
09-29 426
伪类的语法：selector:pseudo-class {property:value;}CSS类也可以使用伪类：selector.class:pseudo-class {property:value;}您可以使用 :first-child 伪类来选择父元素的第一个子元素。p:first-child { color:blue; }在下面的例子中，选择相匹配的所有<p>元素的第一个 <i> 元素：p > i:first-child { color:blue; }在下面的例子中，选择器匹配所有作
CSS画出三角形的做法
mingangel的博客
10-01 465
在网页中，会有三角形的出现，我们脑海里会有很多想法，如何去实现他们，我来提供一种比较好玩的做法。
【CSS】position
小秀的博客
10-02 392
特点：粘性元素根据滚动位置在相对（relative）和固定（fixed）之间切换。起先它会被相对定位，直到在视口中遇到给定的偏移位置为止 - 然后将其“粘贴”在适当的位置（比如 position:fixed）。特点：不影响元素本身特性，元素不脱离文档流，相对于原位置进行偏移。特点：元素脱离文档流 ，块级元素由内容撑开宽高，清除子集浮动。参考物：距离最近的使用了定位的父级，没有时找body。position: static 静态定位（默认）参考物：根据用户的滚动位置进行定位。参考物：元素的初始位置。
241006-Gradio中Chatbot通过CSS自适应调整高度
最新发布
专注机器学习之路
10-06 166
【代码】241006-Gradio中Chatbot通过CSS自适应调整高度。
CSS 中的@media print 是干什么用的？
读心悦
09-29 282
在这个查询块内，你可以设置各种样式，以确保打印输出的内容看起来整洁、专业，并且只包含必要的信息。例如，你可能还想隐藏某些不重要的元素，如广告、侧边栏或仅用于装饰的图片，同时增加标题和段落的字体大小，以及为页面添加页眉和页脚（但这次是在打印样式中自定义的，与网页上的不同）。这种做法通常很有用，因为网页的页眉和页脚可能包含导航链接、社交媒体图标、版权声明等对于在线浏览很有用的信息，但在打印版本中，这些信息可能并不必要，甚至可能占用宝贵的页面空间。元素都将被隐藏（即不显示在打印的页面上）。这是通过将这些元素的。
CSS——文字闪烁效果
懒羊羊大王的博客
10-02 1630
今天来完成一个文字闪烁的动态效果，包含倒影、闪烁、可编辑等细节。
css优化的方法
hexadecimal_001的博客
10-05 551
CSS优化的方法多种多样，旨在提高网页的加载速度、渲染性能和可维护性。
CSS中的font-variation-settings：探索字体的可变性
艾恩小灰灰的博客
09-30 510
可变字体允许字体文件包含一系列的设计轴（Design Axes），如宽度（Width）、倾斜度（Slant）、粗细（Weight）等。通过调整这些轴的值，可以实现从一种样式到另一种样式的平滑过渡，而无需加载多个独立的字体文件。为设计师提供了前所未有的灵活性，在保持页面加载性能的同时，能够创造出丰富多样的视觉效果。随着更多浏览器的支持和可变字体的普及，这一功能将在未来成为Web设计中的重要工具之一。
前端编程艺术（2）----CSS
lys20221113242的博客
10-02 1374
1.CSSCSS，全称为层叠样式表（Cascading Style Sheets），是一种用来控制网页布局和样式的标记语言。它与HTML结合使用，通过为HTML元素应用样式来美化和格式化网页。使用CSS，可以将网页的布局、颜色、字体、背景、边框等各个方面进行精确控制，从而使网页呈现出专业、统一和美观的外观。CSS通过选择器和声明来定义样式，选择器用于选中要应用样式的HTML元素，声明则定义元素的样式属性和值。2.CSS引入在HTML文件中引入CSS有三种方式：内部样式表、外部样式表和行内样式。
国庆节快乐前端（HTML+CSS+JavaScript+BootStrap.min.css）
2301_81807150的博客
10-02 1272
CSS样式: position: absolute;, flexbox布局, animation关键帧, @keyframes, transform, transition, z-index, background-image, font-size, color.响应式设计: 通过设置最大宽度和高度来适应不同尺寸的屏幕。// 弹幕和倒计时部分"祖国，我为你骄傲！","繁荣昌盛，伟大中国！","我的心永远在你身边！","强大的祖国，辉煌的未来！","中华儿女，携手共创辉煌！",
CSS 中 object-fit 的 cover 和 contain
weixin_64684095的博客
09-30 486
object-fit 属性用于指定可替换元素（如`<img>`、`<video>`等）如何适应其容器。
前端学习第二天笔记 CSS选择 盒子模型 浮动 定位 CSS3新特性 动画 媒体查询 精灵图雪碧图 字体图标
samroom的博客
10-02 1488
CSS选择器，背景属性，文本属性，表格属性，关系选择器，CSS盒子模型，弹性盒子模型，文档流，浮动，清除浮动，相对定位，绝对定位，固定定位，CSS3新特性，动画，媒体查询，雪碧图精灵图，字体图标
HTML的介绍
2401_84214299的博客
10-03 850
form标签,描述了要把数据按照什么方式,提交到那个页面中. input标签,各种输入控件,单行文本框,按钮,单选框,复选框. type(必须有),取值种类很多,button,checkbox,text,file,image,password等. name:给input起了个名字,尤其是对于单选按钮,具有相同的name才能多选一.value:input中的默认值.checked:默认被选中.div标签,division的缩写,含义是分割 span标签,含义是跨度.用于网页布局的两个标签.
27 Vue3之unocss原子化
qq_37550440的博客
09-29 510
原子化 CSS 是一种 CSS 的架构方式，它倾向于小巧且用途单一的 class，并且会以视觉效果进行命名。 现在你可以直接使用class="m-1"来设置边距。但正如你所见，用这种方法的情况下，你不能使用除了 1 到 10 之外的边距，而且，即使你只使用了其中一条 CSS 规则，但还是要为其余几条规则的文件体积买单。如果之后你还想支持不同的 margin 方向，使用比如mt代表margin-top，mb代表margin-bottom等，加上这 4 个方向以后，你的 CSS 大小会变成原来的
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

司南锤

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值