CSS相关知识总结

最新推荐文章于 2024-09-03 15:38:58 发布

Shine957

最新推荐文章于 2024-09-03 15:38:58 发布

阅读量184

点赞数 1

分类专栏：总结文章标签： css

本文链接：https://blog.csdn.net/Shine957/article/details/115335456

版权

总结专栏收录该内容

3 篇文章 0 订阅

订阅专栏

CSS介绍

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

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

CSS用法相关

CSS语法

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

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

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

说明：

选择器是您需要改变样式的对象（上图的规则就一级标题生效）。
每条声明由一个属性和一个值组成。（无论是一条或多条声明，都需要用{}包裹，且声明用;分割）
属性（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>

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

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

内联样式
内部样式表或外部样式表
浏览器缺省样式

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

有关颜色、尺寸

颜色

颜色在网页中的重要性不言而喻。
我们可以采用颜色名称也可以使用颜色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

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS相关知识总结

CSS相关知识总结CSS介绍CSS用法相关CSS语法选择器CSS生效的三种形式外部样式表内部样式表内联样式有关颜色、尺寸、对齐CSS介绍CSS是级联样式表（Cascading Style Sheets）的缩写。HTML 用于撰写页面的内容，而 CSS 将决定这些内容该如何在屏幕上呈现。网页的内容是由 HTML的元素构建的，这些元素如何呈现，涉及许多方面，如整个页面的布局，元素的位置、距离、颜色、大小、是否显示、是否浮动、透明度等等，这些都将由CSS完成CSS用法相关CSS语法一条CSS样式规则由
复制链接

扫一扫