CSS相关知识总结

最新推荐文章于 2023-05-30 17:49:58 发布
最新推荐文章于 2023-05-30 17:49:58 发布
阅读量199 收藏
点赞数 1
分类专栏： 总结 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shine957/article/details/115335456
版权

CSS相关知识总结

CSS介绍

CSS是级联样式表（Cascading Style Sheets）的缩写。HTML 用于撰写页面的内容，而 CSS 将决定这些内容该如何在屏幕上呈现。

网页的内容是由 HTML的元素构建的，这些元素如何呈现，涉及许多方面，如整个页面的布局，元素的位置、距离、颜色、大小、是否显示、是否浮动、透明度等等，这些都将由CSS完成

CSS用法相关

CSS语法

一条CSS样式规则由两个主要的部分构成：选择器和以{ }包裹的一条或多条声明。

h1 {color:blue;font-size:12px;}

这条规则表明，页面中所有的一级标题都显示为蓝色，字体大小为12像数。

说明：

  1. 选择器是您需要改变样式的对象（上图的规则就一级标题生效）。
  2. 每条声明由一个属性和一个值组成。（无论是一条或多条声明，都需要用{}包裹，且声明用;分割）
  3. 属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。

选择器

一个页面上的元素众多，选择器就用于在页面中找到/选择需要应用这个样式的对象。
除我们前示的元素选择器外，还有id和class选择器。其中class选择器使用非常普遍。

id 选择器

#sky{
  color: blue;
}

这条规则表示在页面内id=sky的元素显示为蓝色。
比如下面这条：

<p id="sky">蓝色的天空</p>

元素的id唯一，所以id选择器的适用范围只有一个元素。

class选择器

.center{
  text-align: center;
}
.red{
  color: red;
}

这里的代码定义了两个class，其名为“center”以及“red”，如果页面上出现了某元素的class为这两个中的一个，那么将产生相应的效果。

<p class="center">这一条将居中显示</p>
<p class="red">这一条将显示为红色噢</p>

CSS生效的三种形式

学会了如何定义 CSS样式，那么如何让这些规则对页面生效？
我们一般有三种方法：外部样式表，内部样式表，内联样式

外部样式表

在文件夹内新建HTML文件：

<html>
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="mycss.css">
   <!-- 这个语句将导入外部的名为mycss的样式表文件 -->
  <title>标题</title>
</head>
<body>
  <h1>样式表</h1>
  <hr>
  <p class="A1">简简单单样式表</p>
</body>
</html>

在同一个文件夹下新建一个CSS文件，并命名为mycss：

body {
  background-color: linen;
  text-align: center;
}
h1 {
  color: red;
}
.A1 {
  margin-top: 100px;
  color: chocolate;
  font-size: 50px;
}

一般会在项目的目录文件下建立一个CSS文件夹用作存放各种样式表，也方便我们引用相关文件。

内部样式表

内部样式表的运作原理是将样式直接放在HTML文件中，称为内部样式表。

<html>
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="mycss.css">
   <!-- 这个语句将导入外部的名为mycss的样式表文件 -->
  <title>标题</title>
  <style>
    body {
      background-color: linen;
      text-align: center;
    }
    h1 {
      color: red;
    }
    .A1 {
      margin-top: 100px;
      color: chocolate;
      font-size: 50px;
    }
  </style>
</head>
<body>
  <h1>样式表</h1>
  <hr>
  <p class="A1">简简单单样式表</p>
</body>
</html>

引入的< style >标签放入了样式，仅在页面规则较少时采用这种方式。

内联样式

内联样式是最简单的一种样式，其作用的机理便是直接将样式写入元素当中：

<h1 style="color:blue;">就这就这就这</h1>

内联样式的使用相当不灵活，一般不采用这种方式。

这三种不同的形式因为定义的不同，有时便会存在不同的规则作用于同一元素的情况，因此这三种形式有着优先级：

  1. 内联样式
  2. 内部样式表或外部样式表
  3. 浏览器缺省样式

也就是谁离元素近，谁就生效

有关颜色、尺寸

颜色

颜色在网页中的重要性不言而喻。
我们可以采用颜色名称也可以使用颜色RGB16进制值，来设定前景或背景的颜色。如：

<!-- 颜色名称 -->
<h3 style="background-color:Tomato;">Tomato</h3>
<h3 style="background-color:Orange;">Orange</h3>
<h3 style="background-color:DodgerBlue;">DodgerBlue</h3>
<h3 style="background-color:MediumSeaGreen;">MediumSeaGreen</h3>
<h3 style="background-color:Gray;">Gray</h3>
<h3 style="background-color:SlateBlue;">SlateBlue</h3>
<h3 style="background-color:Violet;">Violet</h3>
<h3 style="background-color:LightGray;">LightGray</h3>
<hr>
<!-- 颜色值，3个字节分别代表RGB（Red，Green，Blue）的0～255的值 -->
<h3 style="background-color:#ff0000;">#ff0000</h3>
<h3 style="background-color:#0000ff;">#0000ff</h3>
<h3 style="background-color:#3cb371;">#3cb371</h3>
<h3 style="background-color:#ee82ee;">#ee82ee</h3>
<h3 style="background-color:#ffa500;">#ffa500</h3>
<h3 style="background-color:#6a5acd;">#6a5acd</h3>
<!-- 文本颜色 -->
<h3 style="color:Tomato;">Hello World</h3>
<p style="color:DodgerBlue;">Lorem ipsum dolor sit, amet consectetur adipisicing elit.</p>
<p style="color:MediumSeaGreen;">Ad facilis est ducimus rem consectetur, corporis omnis, eveniet esse dolor molestiae numquam odio corrupti, sed obcaecati praesentium accusamus? Tempora, dolor a?</p>

ColorDrop 或 LOL Corlors 等网站有专业设计师设计的色彩供我们使用！

尺寸

我们可以用 height 和 width 设定元素内容占据的尺寸。常见的尺寸单位有：像数 px，百分比 %等。
新建如下 HTML 文件：

<html>
  <head>
    <link rel="stylesheet" href="./mycss.css">
  </head>
  <body>
    <div class="example-1">
      这个元素高 200 pixels，占据全部宽度
    </div>
    <div class="example-2">
      这个元素宽200像素,高300像素
    </div>
  </body>
</html>

建立对应css文件：

.example-1 {
  width: 100%;
  height: 200px;
  background-color: powderblue;
  text-align: center;
}
.example-2 {
  height: 100px;
  width: 500px;
  background-color: rgb(73, 138, 60);
  text-align: right;
}

边框与边距

盒子模型

盒子模型指的是一个 HTML 元素可以看作一个盒子。从内到外，这个盒子是由内容 content, 内边距 padding, 边框 border, 外边距 margin构成的，如下图所示：盒子模型

· Content 盒子的内容，如文本、图片等
· Padding 填充，也叫内边距，即内容和边框之间的区域
· Border 边框，默认不显示
· Margin 外边距，边框以外与其它元素的区域

在页面上点击鼠标右键，选择审查元素便可看到如下图所示的布局：盒子模型布局
一个元素真正占据的宽度应该是：
左外边距 + 左边框宽度 + 左内边距 + 内容宽度 + 右内边距 + 右边框宽度 + 右外边距
同理，他的高度：
上外边距 + 上边框宽度 + 上内边距 + 内容宽度 + 下内边距 + 下边框宽度 + 下外边距

因此，我们在用 width 属性设置元素的宽度时，实际上只设置了其内容的宽度。

无论边框、内边距还是外边距，它们都有上下左右四个方向。

边框

边框的设置如下代码：

<p class="example-1">I have black borders on all sides.</p>
<p class="example-2">I have a blue bottom border.</p>
<p class="example-3">I have rounded grey borders.</p>
<p class="example-4">I have a purple left border.</p>

css文件：

.example-1 {
  border: 1px dotted black; /* 上下左右都相同 */
}
.example-2 {
  border-bottom: 1px solid blue; /* 只设置底部边框 */
}
.example-3 {
  border: 1px solid grey;
  border-radius: 15px; /* 边框圆角 */
}
.example-4 {
  border-left: 5px solid purple;
}

边距

边距的设置一般如下：

padding: 20px; /* 上下左右都相同 */
padding-top: 20px;
padding-bottom: 100px;
padding-right: 50px;
padding-left: 80px;
padding: 25px 50px 75px 100px; /* 简写形式，按上，右，下，左顺序设置 */
padding: 25px 10px; /* 简写形式，上下为25px，左右为10px */

简写时的顺序为上，右，下，左或记为顺时针方向。

定位

简单的说：
定位是指，你可以相对元素的常规位置来定义元素的具体位置，可以相对元素或另一个元素定位元素的位置，甚至还可以相对视区（例如浏览器窗口）定位元素
定位的类型：
定位有五种类型，通过position属性指定，分别是static、relative、sticky、absolute、fixed。默认值时static。

设置了元素的position属性后，我们才能使用top, bottom, left, right属性，否则定位无效。

文档流
文档流，指的是元素排版布局过程中，元素会自动从左往右，从上往下的流式排列。并最终窗体自上而下分成一行行，并在每行中按从左到右的顺序排放元素。

脱离文档流
脱离文档流即是元素打乱了这个排列，或是从排版中拿走。

让元素脱离文档流的方法有：浮动和定位。

static

默认值。即没有定位，元素在正常的流中，top，right，bottom，left 和 z‐index 属性无效。

relative

生成相对定位的元素，通过 top，bottom，left，right 的位置相对于其正常位置进行定位。其中的相对指的是相对于元素在默认流中的位置。

<!-- HTML --!>
<div class="example-relative">我偏移了正常显示的位置</div>

<!-- CSS --!>
.example-relative {
  position: relative;
  left: 60px;
  top: 40px;
  background-color: rgb(173, 241, 241);
}

fixed

本质上是一种绝对定位，不为元素预留空间。通过指定相对于屏幕视窗的位置来指定元素的空间，且元素的位置在屏幕滚动时不会发生变化。应用于很多网站顶端的固定导航、右下角的固定广告等等。

<!-- HTML --!>
<div class="broad">占位区域。</div>
<div class="example-fixed">这个按钮是固定的</div>

<!-- CSS --!>
.example-fixed {
  position: fixed;
  bottom: 40px;
  right: 10px;
  padding: 6px 24px;
  border-radius: 4px;
  color: #fff;
  background-color: #9d0f0f;
  cursor: pointer;
  box-shadow: 0 3px 3px 0 rgba(0,0,0,0.3), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
}
.broad {
  height: 5000px;
  width: 5000px;
  padding: 20px;
  background-color: darkkhaki;
}

absolute

生成绝对定位的元素，不再以自己原来的位置定位，而是以网页的左上角（body）为原定定位。

<!-- HTML --!>
<div class="example-relative">父元素: relative 定位属性
  <div class="example-absolute">
    子元素: absolute 定位属性
  </div>
</div>

<!-- CSS --!>
.example-relative {
  position: relative;
  width: 400px;
  height: 200px;
  border: 3px solid rgb(87, 33, 173);
}
.example-absolute {
  position: absolute;
  top: 80px;
  right: 5px;
  width: 200px;
  height: 100px;
  border: 3px solid rgb(218, 73, 16);
}

sticky

元素一开始留在常规的文档流中，当触发粘滞的条件时，从常规的文档流中移除，但其在文档流中占据的空间保留，此时，相当于相对容纳快绝对定位，触发粘滞条件失效之后，元素回到常规文档流中的初始位置。

溢出

当元素内容超过其指定的区域时，我们通过溢出overflow属性来处理这些溢出的部分。
溢出属性有一下几个值：

  • visible 默认值，溢出部分不被裁剪，在区域外面显示
  • hidden 裁剪溢出部分且不可见
  • scroll 裁剪溢出部分，但提供上下和左右滚动条供显示
  • auto 裁剪溢出部分，视情况提供滚动条

浮动

我们有时候为了让一行能够显示多个元素, 会设置元素的float属性：
定义：浮动的框可以向左或向右移动, 直到它的外边缘碰到包含框或另一个浮动框的边框为止。 由于浮动框不在文档的普通流中,所以文档的普通流中的浮动框之后的块框表现的就像浮动框不存在一样。

注意：这里是块框而不是内联元素；浮动框只对它后面的元素造成影响

注意：当初float 被设计的时候就是用来完成文本环绕的效果，所以文本不会被挡住，这是 float 的特性，即 float 是一种不彻底的脱离文档流的方式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .div1 {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
        .div2 {
            width: 200px;
            height: 100px;
            background-color: blue;
        }
        .div3 {
            width: 100px;
            height: 200px;
            background-color: green;
        }
        .div4 {
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="div1"></div>
    <div class="div2"></div>
    <div class="div3"></div>
    <div class="div4"></div>
</body>
</html>

特别注意
设置某一个元素为float 之后，当前元素是否往前一个位置飘动，取决于上一个元素是否设置了float，如果设置了则飘动，如果没有设置，则还是在原来的位置，只是飘起来，不飘动。

透明度

我们可以用opacity对任何元素（不过常用于图片）设置不透明度。
值在[0.0～1.0]之间，值越低，透明度越高。

<html>
<head>
  <style>
    img {
      width: 25%;
      border-radius: 10px;
      float: left;
      margin: 10px;
    }
    .opacity-2 {
      opacity: 0.2;
    }
    .opacity-5 {
      opacity: 0.5;
    }
    .opacity-10 {
      opacity: 1;
    }
  </style>
</head>
<body>
  <img class="opacity-2" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(87).jpg">
  <img class="opacity-5" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(87).jpg">
  <img class="opacity-10" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(87).jpg">
</body>
</html>

组合选择器

前面我们学习了 CSS有三种选择器：元素、id 和 class 。也可以进行组合，以得到简洁精确的选择。下面介绍两种组合选择器。

后代选择器

以空格作为分隔，如：.haha p 代表在div元素内有.haha这种类的所有元素。

<html>
<head>
  <style>
    .haha p {
      background-color: yellow;
    }
  </style>
</head>
<body>
  <div class="haha">
    <p>Paragraph 1 in the div .haha.</p>
    <p>Paragraph 2 in the div .haha>.</p>
    <span>
        <p>Paragraph 3 in the div .haha.</p>
    </span>
  </div>
  <p>Paragraph 4. Not in a div .haha.</p>
  <p>Paragraph 5. Not in a div .haha.</p>
</body>
</html>

子选择器

也称为直接后代选择器，以>作为分隔，如：.haha > p 代表在有.haha类的元素内的直接

元素。
参见如下代码：

<html>
<head>
  <style>
    .haha > p {
      background-color: yellow;
    }
  </style>
</head>
<body>
  <div class="haha">
    <p>Paragraph 1 in the div .haha.</p>
    <p>Paragraph 2 in the div .haha.</p>
    <span>
        <p>Paragraph 3 in the div .haha - it is descendant but not immediate child.</p>
    </span> <!-- not Child but Descendant -->
  </div>
  <p>Paragraph 4. Not in a div .haha.</p>
  <p>Paragraph 5. Not in a div .haha.</p>
</body>
</html>

伪类和伪元素

**伪类（pseudo-class）或伪元素（pseudo-element）**用于定义元素的某种特定的状态或位置等。
比如我们可能有这样的需求：

  • 鼠标移到某元素上变换背景颜色
  • 超链接访问前后访问后样式不同
  • 离开必须填写的输入框时出现红色的外框进行警示
  • 保证段落的第一行加粗，其它正常
  • 等等…

使用伪类/伪元素的语法如下：

/* 选择器后使用 : 号，再跟上某个伪类/伪元素 */
selector:pseudo-class/pseudo-element {
  property:value;
}

以下是常用的伪类/伪元素的简单使用：

a:link {color:#FF0000;}     /* 未访问的链接 */
a:visited {color:#00FF00;}  /* 已访问的链接 */
a:hover {color:#FF00FF;}    /* 鼠标划过链接 */
/* 鼠标移到段落则改变背景颜色 */
p:hover {background-color: rgb(226, 43, 144);}
p:first-line{color:blue;}   /* 段落的第一行显示蓝色 */
p:first-letter{font-size: xx-large;}   /* 段落的第一个字超大 */

h1:before { content:url(smiley.gif); } /* 在每个一级标题前插入该图片 */
h1:after { content:url(smiley.gif); } /* 在每个一级标题后插入该图片 */

感谢观看！

Shine957
关注
专栏目录
CSS知识点总结
weixin_48494427的博客
03-16 2266
CSS知识点总结
HTML中怎么设置h1的字体样式你知道吗？关于设置h1标签的样式详解（收藏）
lin123_00的博客
06-02 1万+
本篇文章主要为大家讲解了html中的h1标签的样式解析，但是如果不用css样式来做的话，那就只能在html4.01中显示了，所以我们还是尽快学习css层叠样式表吧，好了，现在让我们来说说这篇文章吧。 HTML中的H标签(H1，H2，H3等)用来标明一个页面中的标题层次系统。因此，Hl标签可以被当做整个网页的标题，H2标签就是小标题，H3是第三级标题等。搜索引擎对出现在H标签中的关键字有一点偏好，尤其是Hl标签，下面小编就来谈谈H1标签怎么用。 web前端全栈资料粉丝福利（面试题、视频、资料笔记、进阶路线
C# Color颜色RGB对照表
旭东怪的博客
09-21 3万+
序号 Color 颜色 RGB 1 Color.AliceBlue 艾丽丝蓝 240,248,255 2 Color.AntiqueWhite 古典白色 250,235,215 3 Color.Aqua，Color.Cyan 浅蓝色，蓝绿色，青色 0,255,255 4 Color.Aquamarine 海蓝色 127,255,212 5 Color.Azure 天蓝色 240,2
网站字体颜色大小php代码,html字体颜色的设置方法
weixin_28949049的博客
03-09 4455
html字体颜色的设置方法：1、通过外部CSS样式设置，代码如“.blue{color:blue;}”；2、通过内部CSS样式设置，代码如“style="color:white;font-size:25px;"”；3、通过font标签设置。本教程操作环境：windows7系统、HTML5&&CSS3版，DELL G3电脑，该方法适用于所有品牌电脑。HTML主要是用来写页面布局的，过...
css 选择器学习笔记
汪子熙的专家技术分享
03-20 375
网站链接： https://www.w3.org/TR/CSS21/selector.html CSS支持的所有选择器： 选择器 grouping 当几个选择器共享同一部分属性时，选择器可以放到同一组里。 下列两种css定义等价： h1 { font-family: sans-serif } h2 { font-family: sans-serif } h3 { font-family: sans-serif } h1, h2, h3 { font-family: sans-serif } Unive
【Vue】CSS样式的使用
qq_41670382的博客
06-15 553
Vue中css样式的使用方式
html中如何将h1标签设为白色
weixin_35749796的博客
12-22 1445
在html中，可以使用style属性来设置h1标签的颜色。 例如： <h1 style="color: white;">这是一个白色的h1标签</h1> 也可以使用css来设置h1标签的颜色。 例如： <style> h1 { color: white; } </style> <h1>这是一个白色的h1标签</h1> ...
css 基础知识总结以及demo
最新发布
04-09
标签引用CSS文件 在实际的项目开发过程中，我们一般都是将CSS单独存放在一个文件夹中，然后在HTML页面中通过如下形式进行引用。 样式表路径+名称.css"> 引用后CSS文件仍然是独立的，不会受到包括HTML和JavaScript...
html+css知识点总结
06-24
html+css知识点总结
CSS injection 知识总结
01-21
现代浏览器都已不允许在CSS中执行JavaScript了，以前的CSS注入可以利用JavaScript协议在 url() 、 [removed]) 中执行Javascript代码从而实现XSS。但是目前CSS注入在窃取数据方面仍然是非常有用的，下面分别来分析...
html+css基础知识总结
06-07
能快速准确的看出html+css基础标签和样式的作用
HTML 颜色style的五种设置方法
weixin_46119529的博客
05-30 2768
【代码】HTML 颜色style的五种设置方法。
CSS基础
qq_52215821的博客
06-26 115
CSS基础 更改文本的颜色 将 h2 元素设置为蓝色 <h2 style="color: blue;">CatPhotoApp</h2> 使用元素选择器来设置元素的样式 <style> </style> 使用class选择器设置元素的样式 使用 class 选择器设置单个元素的样式 <style> .blue-text { color: blue; } </style> <p class="blue-text"
h1标签改变字体颜色、大小
热门推荐
u011964285的专栏
07-25 5万+
pageEncoding="ISO-8859-1"%> http://www.w3.org/TR/html4/loose.dtd"> Insert title here style="color:red ; font-size:50px">Hello JSP!!!
html h1标签字体颜色css,你可能不知道的h1标签美化技巧
weixin_39524147的博客
06-17 5051
一看这个标题，相信大家会有这样一种感觉：美化h1标签不就是改变标题文本字体、字号或者颜色吗，还需要什么技巧?其实技巧还是有的，下面小编就为大家简单介绍一下。美化h1标签可不仅仅局限于改变文本的字体、字号或者颜色喔！基于界面风格的原因，有人想到了另一种美化方式，就是把标题性的文字做成图片。如:把文字做成图片，这个方法好像不错喔，挺特别的！但这样做有一个弊端，就是在切割页面的时候就直接用上了图片，因此...
CSS基础知识总结-新手入门篇
08-03
**CSS基础知识总结** **1. CSS概述** CSS（Cascading Style Sheets）是层叠样式表，主要用于美化HTML页面。它允许我们独立于内容来定义网页的布局和样式，使得网页设计更加灵活和可控。CSS可以控制网页元素的颜色、...
CSS的知识总结和梳理.xmind
03-14
个人学习尚硅谷css，总结的知识点和梳理，许多细节知识点存入各项笔记中
html div color=blue,CSS颜色
weixin_34649105的博客
06-16 306
CSS ColorsColors are specified using predefined color names, or RGB, HEX, HSL, RGBA, HSLA values.CSS 颜色名称In CSS, a color can be specified by using a predefined color name:TomatoOrangeDodgerBlueMediumS...
html<font>标签的color属性以及<h1> 到 <h6> 标签
zongyimin的博客
11-15 8971
规定文本的字体，字体的颜色，字体的大小。 实例 规定文本字体、大小和颜色： This is some text! This is some text! This is some text! face 定义字体的外观，size定义字体的大小，color定义字体的颜色 A heading A paragraph. - 标签可定义标题，定义最大的
CSS3基本知识点总结
瘦肉的博客
08-05 1万+
这两天总结了一下CSS3中的基本知识点，没有做到很全面，因为之前也记过一些笔记，就没有再整理成文档。这里我会把之前的笔记拍照贴出来，基本都是一些很零碎的小知识点，需要大家平时多敲代码，多翻看笔记，以加深记忆，从而对CSS熟练运用。 本文档参考了以下网站，如详细了解，请移步： https://www.w3cschool.cn/css3/htkn4flf.html http://www.runo...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值