CSS学习总结

最新推荐文章于 2022-07-13 15:23:12 发布

蔡姬努力变大佬

最新推荐文章于 2022-07-13 15:23:12 发布

阅读量301

点赞数 1

本文链接：https://blog.csdn.net/qq_46580518/article/details/117384118

版权

CSS学习总结

一、CSS简介
- - 1、定义
  - 2、特点
二、学习CSS
三、总结

一、CSS简介

1、定义

是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS主要负责HTML元素构建的网页内容的修饰，包括整个页面的布局，元素的位置、距离、颜色、大小、是否显示、是否浮动、透明度等等。

2、特点

1.丰富的样式定义
CSS提供了丰富的文档样式外观，以及设置文本和背景属性的能力；允许为任何元素创建边框，以及元素边框与其他元素间的距离，以及元素边框与元素内容间的距离；允许随意改变文本的大小写方式、修饰方式以及其他页面效果。
2.易于使用和修改
CSS可以将样式定义在HTML元素的style属性中，也可以将其定义在HTML文档的header部分，也可以将样式声明在一个专门的CSS文件中，以供HTML页面引用。总之，CSS样式表可以将所有的样式声明统一存放，进行统一管理。
另外，可以将相同样式的元素进行归类，使用同一个样式进行定义，也可以将某个样式应用到所有同名的HTML标签中，也可以将一个CSS样式指定到某个页面元素中。如果要修改样式，我们只需要在样式列表中找到相应的样式声明进行修改。
3.多页面应用
CSS样式表可以单独存放在一个CSS文件中，这样我们就可以在多个页面中使用同一个CSS样式表。CSS样式表理论上不属于任何页面文件，在任何页面文件中都可以将其引用。这样就可以实现多个页面风格的统一。
4.层叠
简单的说，层叠就是对一个元素多次设置同一个样式，这将使用最后一次设置的属性值。例如对一个站点中的多个页面使用了同一套CSS样式表，而某些页面中的某些元素想使用其他样式，就可以针对这些样式单独定义一个样式表应用到页面中。这些后来定义的样式将对前面的样式设置进行重写，在浏览器中看到的将是最后面设置的样式效果。
5.页面压缩
在使用HTML定义页面效果的网站中，往往需要大量或重复的表格和font元素形成各种规格的文字样式，这样做的后果就是会产生大量的HTML标签，从而使页面文件的大小增加。而将样式的声明单独放到CSS样式表中，可以大大的减小页面的体积，这样在加载页面时使用的时间也会大大的减少。另外，CSS样式表的复用更大程度的缩减了页面的体积，减少下载的时间。

总的来说，CSS简化了网页的格式代码，外部的样式表还会被浏览器保存在缓存里，加快了下载显示的速度，也减少了需要上传的代码数量（因为重复设置的格式将被只保存一次）。只要修改保存着网站格式的CSs样式表文件就可以改变整个站点的风格特色，在修改页面数量庞大的站点时，显得格外有用。这就避免了一个个网页的修改，大大减少了工作量。

二、学习CSS

1、CSS的基本结构

每条CSS都由选择器和声明构成，声明由"{}"包裹。
例：h1{color:blue; font-size:15px;}

（1）选择器

目标：选择器选择的是我们需要改变样式的对象。
作用：选择文档的某些部分，以便你可以将CSS规则应用于它。
分类：
①id选择器（只适用于一个元素）
例：

#sky{
  color: blue;
}
<p id="sky">蓝色的天空</p>

注意：定义时，前面需要加"#"。
②class选择器（元素的class值可以有多个，一个class也可以被重复使用）
例：

.red{
  color: red;
}
<p class="red">我是红色的</p>
<p class="red">我也可以是红的</p>

注意：定义时，前面需加上"."。
③伪类选择器（类似于动态插入一个元素）

我们使用:first-child伪类定位第一个p元素，然后::first-line选择器选择该元素的第一行，就好像在第一行周围添加了一个<span>以使其变为粗体和改变颜色。

等等，还包括第3级选择器，它们可以根据文档中的位置选择元素，直接选择位于元素之后的元素，或选择表格中的奇数行。

（2）声明

每条声明由一个属性和一个值组成，用冒号分隔。（无论是一条或多条声明，都需要用{}包裹，且声明用;分割）
①属性：希望设置的样式属性。
②值：对该属性应用的值。

（3）注释

位于 <style> 元素内的 CSS 注释，以 /* 开始，以 */ 结束。

2、CSS样式规则

（1）外部样式表

另外新建.css文件，可以在任何文本编辑器中编写，但必须以 .css 扩展名保存，且不应包含任何 HTML 标签。然后利用<link>元素包含外部样式表文件将它引用到HTML文件的head部分。
例：

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

意义：引入外部样式表是我们使用样式的主流方式，因为众多的样式规则单独放在一个文件中，与 HTML 内容分开，结构清晰。同时其它页面也可使用，达到复用的目的。

（2）内部样式表

在HTML文件中的 head 部分添加 <style> 元素，在该元素中进行定义。一般而言，只有页面的样式规则较少时可采用这种方式。
例：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <!-- 注意下面这个语句，将导入外部的 mycss.css 样式表文件 -->
  <link rel="stylesheet" type="text/css" href="mycss.css">
  <title>页面标题</title>
  <style>
    body {
      background-color: linen;
      text-align: center;
    }
    h1 {
      color: red;
    }
    .haha {
      margin-top: 100px;
      color: chocolate;
      font-size: 50px;
    }
  </style>
</head>
<body>
  <h1>我是有样式的</h1>
  <hr>
  <p class="haha">还是有点丑：)</p>
</body>
</html>

（3）内联样式

在HTML文件中操作，把样式规则用style属性（可包含任何 CSS 属性）直接写到要应用的元素中。三种方式中最不灵活的一种，完全将内容和样式合在一起，实际应用中非常少见。
例：

<h3 style="color:green;">I am a heading</h3>

级联的优先级

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

3、颜色、尺寸、对齐

（1）颜色

可以采用颜色名称也可以使用 RGB 值、HEX 值、HSL 值、RGBA 值或者 HSLA 值，来设定前景或背景的颜色。
例：

<h3 style="background-color:Tomato;">Tomato</h3>
<h3 style="background-color:#ee82ee;">#ee82ee</h3>
<h3 style="color:hsl(9, 100%, 64%);">Hello World</h3>
<p style="color:DodgerBlue;">Lorem ipsum dolor sit, amet consectetur adipisicing elit.</p>
<h1 style="border:2px solid Tomato;">Hello World</h1>

（2）尺寸

可以用 height 和 width 设定元素内容占据的尺寸。常见的尺寸单位有：像数 px，百分比 %等。
例：（在.css文件中）

.example-1 {
  width: 100%;
  height: 200px;
  background-color: powderblue;
  text-align: center;
}

（3）对齐

对于元素中的文本，我们可以简单的设置text-align属性为left, center, right即可（显然缺省的是左对齐）。

（4）背景图像

背景图像设置：默认重复覆盖整个页面
例：

body {
  background-image: url("paper.gif");
}
p {
  background-image: url("paper.gif");
}

①水平重复

body {
  background-image: url("gradient_bg.png");
  body {
  background-image: url("gradient_bg.png");
  background-repeat: repeat-x;
}
}

②垂直重复

body {
  background-image: url("gradient_bg.png");
  background-repeat: repeat-y;
}

③不重复

 background-attachment: fixed;

若要指定背景图像是应该滚动还是固定的，则使用

background-attachment: fixed;

或者

 background-attachment: scroll;

4、盒子模型

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

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

所以，用width属性设置元素的宽度，实际上只设置了其内容的宽度。

5、边框与边距

对于盒子模型来说，边框和边距都有四个方向的边。
各边：
例：

border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;

（1）边框

可以对border 属性允许您指定元素边框的样式、宽度和颜色。
①样式：border-style

允许以下值：
dotted - 定义点线边框
dashed - 定义虚线边框
solid - 定义实线边框
double - 定义双边框
groove - 定义 3D 坡口边框。效果取决于 border-color 值
ridge - 定义 3D 脊线边框。效果取决于 border-color 值
inset - 定义 3D inset 边框。效果取决于 border-color 值
outset - 定义 3D outset 边框。效果取决于 border-color 值
none - 定义无边框
hidden - 定义隐藏边框

②宽度：border-width
③颜色：border-color

（2）边距

可以对内边距和外边距设置大小。
例：

padding: 20px; /* 上下左右都相同 */
margin: 20px; /* 上下左右都相同 */
padding: 25px 50px 75px 100px; /* 简写形式，按上，右，下，左顺序设置 */

6、定位

使用position属性对元素定位，属性包括下列值：
1.static 静态
2.relative 相对
3.fixed 固定
4.absolute 绝对
5.sticky 粘性
根据不同的 position 值，它们的工作方式也不同。

（1）static（默认方式）

不受 top、bottom、left 和 right 属性的影响，始终根据页面的正常流进行定位。
即：按照元素在 HTML出现的先后顺序从上到下，从左到右进行元素的安排。

（2）relative

相对于其正常位置进行定位，设置top、right、bottom 和 left 属性将其偏离其正常位置进行调整。

注：不对其余内容进行调整以适应元素留下的任何空间。

（3）fixed

相对于视口定位，即使滚动页面，它也始终位于同一位置。利用top、right、bottom 和 left 属性定位。

注：固定定位的元素不会在页面中通常应放置的位置上留出空隙。

（4）absolute

相对于最近的定位祖先元素进行定位（而不是相对于视口定位，如 fixed）。如果绝对定位的元素没有父元素，它将使用文档主体（body），并随页面滚动一起移动。

注：“被定位的”元素是其位置除 static 以外的任何元素。

（5）sticky

根据滚动位置在相对（relative）和固定（fixed）之间切换。起先它会被相对定位，直到在视口中遇到给定的偏移位置为止 - 然后将其“粘贴”在适当的位置

注：Internet Explorer、Edge 15 以及更早的版本不支持粘性定位。 Safari 需要 -webkit- 前缀。至少指定 top、right、bottom 或 left 之一，以便粘性定位起作用。

7、溢出

（1）overflow属性

当元素内容超过其指定的区域时，我们通过溢出overflow属性来处理这些溢出的部分。
属性包括：
1.visible 默认值，溢出部分不被裁剪，在区域外面显示
2.hidden 裁剪溢出部分且不可见
3.scroll 裁剪溢出部分，但提供上下和左右滚动条供显示
4.auto 裁剪溢出部分，视情况提供滚动条（必要时）

注：overflow仅适用于具有指定高度的块元素

（2）overflow-x属性和overflow-y属性

规定仅水平(x)或垂直(y)更改内容的溢出。

8、浮动

（1） `float` 属性

规定元素如何浮动；(水平向左或右进行移动，其周围的元素也会重新排列。)

float 属性可以设置以下值之一：
1.left - 元素浮动到其容器的左侧
2.right - 元素浮动在其容器的右侧
3.none - 元素不会浮动（将显示在文本中刚出现的位置）。默认值。
inherit - 元素继承其父级的 float 值

意义：使图像和文本进行合理布局。
效果：一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止；浮动元素之后的元素将围绕它。

（2）`clear` 属性

规定哪些元素可以在清除的元素旁边以及在哪一侧浮动。
常见用法是在元素上使用了 float 属性之后

clear 属性可设置以下值之一：
1.none - 允许两侧都有浮动元素。默认值
2.left - 左侧不允许浮动元素
3.right- 右侧不允许浮动元素
4.both - 左侧或右侧均不允许浮动元素
5.inherit - 元素继承其父级的 clear 值

9、不透明度

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

例：

<html>
<head>
  <style>
    img {
      width: 100%;
      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>

在这里插入图片描述

10、组合选择器

可以对元素、id 和 class三种选择器进行组合，以得到简洁精确的选择。

包括四种：
1.后代选择器 (空格)
2.子选择器 (>)
3.相邻兄弟选择器 (+)
4.通用兄弟选择器 (~)

（1）后代选择器

以空格作为分隔，匹配属于指定元素后代的所有元素。如：.haha p 代表在<div>元素内有.haha这种类的所有元素。

（2）子选择器

也称为直接后代选择器，匹配属于指定元素子元素的所有元素。

例：

div > p {
  background-color: yellow;
}

上述例子就是选择属于 <div> 元素子元素的所有 <p> 元素。
注：只能选择类中的直接后代。

（3）相邻兄弟选择器

匹配所有作为指定元素的相邻同级的元素，兄弟（同级）元素必须具有相同的父元素，“相邻”的意思是“紧随其后”。

例：

div + p {
background-color: yellow;
}

上述例子选择紧随 <div> 元素之后的所有 <p> 元素。

（4）通用兄弟选择器

匹配属于指定元素的同级元素的所有元素。

div ~ p {
  background-color: yellow;
}

上述例子选择属于

元素的同级元素的所有

元素。

11、伪类和伪元素

用于定义元素的某种特定的状态或位置等。

（1）伪类（定义元素的特殊状态）

例如以下场景：
1.设置鼠标悬停在元素上时的样式；
2.为已访问和未访问链接设置不同的样式；
3.设置元素获得焦点时的样式。
①语法：

selector:pseudo-class {
  property: value;
}

例：

<!DOCTYPE html>
<html>
<head>
<style>
div {
  background-color: green;
  color: white;
  padding: 25px;
  text-align: center;
}

div:hover {
  background-color: blue;
}
</style>
</head>
<body>

<p>请把鼠标移到下面的 div 元素上来改变其背景色：</p>

<div>把鼠标移到我上面</div>

</body>
</html>

在这里插入图片描述

②锚伪类

/* 未访问的链接 */
a:link {
  color: #FF0000;
}

/* 已访问的链接 */
a:visited {
  color: #00FF00;
}

/* 鼠标悬停链接 */
a:hover {
  color: #FF00FF;
}

/* 已选择的链接 */
a:active {
  color: #0000FF;
}

（2）伪元素（设置元素指定部分的样式）

例如以下场景：
1.设置元素的首字母、首行的样式；
2.在元素的内容之前或之后插入内容；
语法：

selector::pseudo-element {
  property: value;
}

例如：::first-line

<!DOCTYPE html>
<html>
<head>
<style>
p::first-line {
  color: #ff0000;
  font-variant: small-caps;
}
</style>
</head>
<body>

<p>您可以使用 ::first-line 伪元素将特殊效果添加到文本的第一行。一些更多的文字。越来越多，越来越多，越来越多，越来越多，越来越多，越来越多，越来越多，越来越多，越来越多，越来越多。</p>

</body>
</html>

在这里插入图片描述

三、总结

通过对CSS的学习，使我在web网页开发前端的学习路上又前进了一步，能在HTML的基础上用CSS的知识对网页进行美化。

蔡姬努力变大佬

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS学习总结

CSS学习总结一、CSS简介1、定义2、特点二、学习CSS1、CSS的基本结构（1）选择器（2）声明（3）注释2、CSS样式规则（1）外部样式表（2）内部样式表（3）内联样式级联的优先级3、颜色、尺寸、对齐（1）颜色（2）尺寸（3）对齐（4）背景图像4、盒子模型5、边框与边距（1）边框（2）边距6、定位（1）static（默认方式）（2）relative（3）fixed（4）absolute（5）sticky7、溢出（1）overflow属性（2）overflow-x属性和overflow-y属性8、浮动（
复制链接

扫一扫