CSS总结

SS_SS_SSS_SSS

已于 2022-07-03 14:59:47 修改

阅读量839

点赞数 1

CC 4.0 BY-SA版权

文章标签： css css3 前端

于 2022-06-22 15:49:31 首次发布

本文链接：https://blog.youkuaiyun.com/SS_SS_SSS_SSS/article/details/125214933

本文详细介绍了CSS的基础知识，包括外部样式表、内部样式表、内联样式及其优先级，深入讲解了CSS语法、选择器（如id和class选择器）、盒子模型、边框与边距、定位（static、relative、fixed、absolute）、溢出处理、浮动、不透明度、组合选择器（后代、子、相邻、兄弟选择器）以及伪类和伪元素的使用。通过对这些概念的学习，可以帮助读者更好地理解和掌握CSS在页面布局中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一.CSS简介

CSS是一种用来表现HTML或XML等文件样式的计算机语言。HTML 用于撰写页面的内容，CSS 将决定这些内容该如何在屏幕上呈现。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。这些元素如何呈现，涉及许多方面，如整个页面的布局，元素的位置、距离、颜色、大小、是否显示、是否浮动、透明度等等。

二.令CSS生效

有三种办法可以让CSS生效分别是：外部样式表，内部样式表，内联样式

1.外部样式表

首先新建一个HTML文件：

图中html文件中框出来的名称要写为同文件夹下CSS的名字，CSS才能生效。

一般我们会在项目目录下建一个文件夹，用以存放css样式表文件，这样我们引入样式文件时路径就变为 ./css/bailu.css之类的。

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

运行效果图：

2.内部样式表

将样式放在 HTML 文件中称为内部样式表

效果图与上面一致，只是将CSS样式设置放在了html的<head>元素内。

3.内联样式

内联样式就是直接把样式规则直接写到要应用的元素中

运行效果图：

4.级联的优先级

元素在外部、内部及内联样式中优先级问题，从高到低分别是：

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

三.CSS语法

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

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

1.选择器是您需要改变样式的对象。

2.每条声明由属性和值组成，要用大括号包裹，且声明间用分号分割。一条css可包含多条声明。

3.属性是设置的样式属性。每个属性有一个值。属性和值被冒号分开。

运行效果图：

选择器

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

1.id 选择器

注意：id选择器前有 # 号。元素的id值必须唯一，所以id 选择器适用范围只有一个元素。

#lg{
  color:aqua;
  text-align:center;
}
#LG{
  color:rgb(179, 0, 255);
  text-align:center;
}

运行效果图：

2.class 选择器

注意：class选择器前有 . 号。元素的class值可以多个，也可以重复。

.center{
  text-align: center;
}
.size{
  font-size: 40px;
}
.green{
  color: green;
}
.pink{
  color:pink;
}

运行效果图：

四.盒子模型

从内到外，这个盒子是由内容 content如文本、图片等, 内边距 padding即内容和边框之间的区域, 边框 border默认不显示, 外边距 margin边框以外与其它元素的区域构成的，如图所示

.box1 {
  height: 200px;
  width: 200px;
  background-color:blueviolet;
  color: aliceblue;
  border: 10px solid red;
  padding: 30px;
  margin: 30px;
}
.box2 {
  height: 200px;
  width: 200px;
  background-color:pink;
  color: aliceblue;
  border: 10px solid blue;
  padding: 35px;
  margin: 25px;
}
pre{
display: inline-block;
}

运行效果图：

五.边框和边距

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

1.边框

dotted表示以圆点为边框；solid表示以实线为边框；border-top/bottom/left/right（上下左右）表示分别设置上下左右单独的边框；border-radius表示边框圆角

.one {
  border: 5px dotted purple; /* 圆点 */
}
.two {
  border-bottom: 5px solid greenyellow; /* 只设置底部边框 */
}
.three {
  border: 5px solid black;
  border-radius: 10px; /* 边框圆角 */
}
.four {
  border-left: 10px solid pink;
}
.five {
  border-top: 5px solid red;
}

运行效果图：

2.边距

边距和边框一样也有上下左右， padding-top/bottom/left/right；

边距还可以简写：

.three {
  border: 5px solid black;
  border-radius: 10px; /* 边框圆角 */
  padding: 25px 25px 25px 25px; /* 简写形式，按上，右，下，左顺序设置 */
}
.four {
  border: 10px solid pink;
  padding: 25px 10px; /* 简写形式，上下为25px，左右为10px */
}

运行效果图

六.定位

1.static

设置为静态定位position: static；这是元素的默认定位方式。按照元素在 HTML出现的先后顺序从上到下，从左到右进行元素的安排。

2.relative

设置为相对定位position: relative；这将把元素相对于他的静态（正常）位置进行偏移

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

综合对比来看，如果position属性是静态的，即便我们设置了上下左右也没有变化。

3.fixed

设置为固定定位position: fixed;，这将使得元素固定不动，无论是放大缩小页面，还是滚动页面，固定区域的大小和相对位置都不会改变。

.example-fixed {
  position: fixed;
  top: 100px;
  left: 20px;
  padding: 25px 25px;
  border-radius: 10px;
  color: rgba(255, 255, 255, 0.922);
  background-color: #9d0f9d;
  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: rgb(189, 107, 178);
  color:pink;
}

运行效果图：

4. absolute

设置为绝对定位position: absolute；将使元素相对于其最近设置了定位属性（非static）的父元素进行偏移。如果该元素的所有父元素都没有设置定位属性，那么就相对于<body>这个父元素。

.relative {
  position: relative;
  width: 400px;
  height: 200px;
  border: 3px solid rgb(87, 33, 173);
}
.absolute {
  position: absolute;
  top: 80px;
  right: 50px;
  width: 200px;
  height: 100px;
  border: 3px solid rgb(218, 73, 16);
}
.static {
  position: static;
  top: 800px;
  right: 5px;
  width: 200px;
  height: 100px;
  border: 3px solid rgb(16, 218, 120);
}

运行效果图：

七.溢出

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

1.visible 默认值，溢出部分不被裁剪，在区域外面显示

2.hidden 裁剪溢出部分且不可见

3.scroll 裁剪溢出部分，但提供上下和左右滚动条供显示

4.auto 裁剪溢出部分，视情况提供滚动条

.scroll{
  width: 300px;
  height: 100px;
  background-color: #eee;
  overflow-y: scroll;
}
.visible{
  width: 300px;
  height: 100px;
  background-color: #eee;
  overflow-y: visible;
}
.hidden{
  width: 300px;
  height: 100px;
  background-color: #eee;
  overflow-y: hidden;
}
.auto{
  width: 300px;
  height: 100px;
  background-color: #eee;
  overflow-y:auto;
}
div{
  display:inline-block;
  margin:10px;
}

运行效果图：

八.浮动

在一个区域或容器内，float属性让某元素水平方向上向左或右进行移动，其周围的元素也会重新排列。

 .left {
      float:left;
    }

运行效果图：

九.不透明度

opacity可以对任何元素设置不透明度。值在[0.0～1.0]之间，值越低，透明度越高。

img {
  width: 25%;
  border-radius: 10px;
  float:top;
  margin: 10px;
}
.opacity-2 {
  opacity: 0.2;
}
.opacity-5 {
  opacity: 0.5;
}
.opacity-10 {
  opacity: 1;
}

运行效果图：

十.组合选择器

1.后代选择器

以空格作为分隔，对父元素内的所有子孙元素都起作用。

.lg p {
  color:aqua;
}

运行效果图：

2.子选择器

也成为直接后代选择器，以>作为分隔，只对父元素的直接子元素才起作用。

.lg>p {
  color: aqua;
}

运行效果图：

可与上面的后代选择器对比记忆。

3.相邻选择器

相邻选择器通过“+”分隔符定义，即两个标签必须是规定给的顺序关系，否则无法实现

p+div {
  color: aqua;
}

运行效果图：

4.兄弟选择器

通过“~”分隔符定义，能够选择前置元素后同级的所有匹配元素

p~div {
  color: aqua;
}

运行效果图：

十一.伪类和伪元素

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

使用伪类/伪元素的语法：选择器后使用 : 号，再跟上某个伪类/伪元素

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); } /* 在每个一级标题后插入该图片 */