CSS学习总结_爱不仅爱你伟岸的身躯也爱你坚持的位置足下的土地出自-CSDN博客

本文链接：https://blog.csdn.net/jmdm123/article/details/114698163

学习总结目录

1、CSS简介
2、CSS语法格式
- 选择器
3、样式表分类
- 补充：
4、CSS属性

1、CSS简介

CSS是Cascading Style Sheets的缩写，中文名叫做级联样式表。

CSS的作用在于美化网页，包括网页的整体和局部布局，颜色，尺寸，位置，浮动，透明度等。

2、CSS语法格式

CSS语法格式
分析：

选择器：是要改变样式的对象。（代表某一个或某一类标签）
声明：声明由属性和属性值组成，所有声明由一对花括号括起来，声明之间用分号隔开。
属性：对不同的属性赋予不同的属性值能够改变样式，属性与属性值之间用冒号隔开。

图片中的代码表示：将所有一级标题（h1）的字体设置为12个像素，字体颜色设置为蓝色。（注：px表示像素）

选择器

元素选择器

样例：

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

上图中的p就表示元素选择器，元素选择器就是将元素名称作为选择器。

上面的代码表示将所有的段落（p）的颜色设置为红色，并且居中。

id选择器

样例：

HTML代码

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

CSS代码

#sky{
  color: blue;
}

#sky就表示id选择器，我们首先在想要改变样式的元素p中设置属性id的值为sky，id选择器需要在id值前面加#，id相当于<p>biao标签的一个标识。

上面的代码表示：将id="sky"的标签的字体颜色设置为蓝色。

注：在HTML中标签的id是唯一的，因此这种方式不常用，因为他只能改变一个标签的样式。

class选择器
样例：

HTML代码

<p class="red">我是红色的</p>

CSS代码

.red{
  color: red;
}

.red就是class选择器，它是在class属性值前加上.。

上面的代码表示：将所有class的值为red的标签的字体颜色设置为红色。

注：HTML中的元素的class属性的值可以重复，在实际的应用中class选择器用的最多。

组合选择器
组合选择器分为后代选择器和子选择器。

后代选择器
样例：

HTML代码

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

CSS代码

.haha p {
      background-color: yellow;
    }

.haha p就是后代选择器。.haha是class选择器，p是元素选择器，中间用空格分开。

上面的代码表示在class为haha的标签中所有的p元素的背景颜色都设置为黄色。（注：上面的代码中的1、2、3段的背景将变为黄色，但4、5段不会变为黄色，因为4、5段不在class值为haha的<div>标签中！）
2. 子选择器
样例：

HTML代码

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

CSS代码

.haha > p {
      background-color: yellow;
    }

与前面的后代选择器相比，子选择器是在.haha和p之间添加了>。表示改变class的值为.haha的元素的的直接子元素中的p元素的背景颜色为黄色。（注：1、2段的背景会变为黄色，而3段的背景不会变为黄色，因为3段不是<div class="haha">的直接子元素。）

3、样式表分类

内联样式表

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

内联样式表就是在需要改变样式的元素中设置属性style，然后进行相应声明。（注：内联样式表的使用不灵活，在应用中不常用！）

内部样式表

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <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>段落1</h1>
  <hr>
  <p class="haha">haha</p>
</body>
</html>

内部样式表是通过在HTML中的<head>标签中添加<style>标签，然后将CSS的内容写在<style>标签中。简单来说就是将CSS放在HTML中。

注：内部样式表适用于CSS内容较少的情况，实际用得较少。

外部样式表

HTML代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <!-- 注意下面这个语句，将导入外部的 mycss.css 样式表文件 -->
  <link rel="stylesheet" type="text/css" href="mycss.css">
  <title>页面标题</title>
</head>
<body>
  <h1>我是有样式的</h1>
  <hr>
  <p class="haha">还是有点丑：)</p>
</body>
</html>

CSS代码（保存在相对于html文件的当前目录的mycss.css这个文件中）：

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

首先我们将HTML和CSS现在两个不同的文件中，然后需要在HTML中的<head>标签中添加<link rel="stylesheet" type="text/css" href="mycss.css">这行代码。这行代码表示将当前目录下的mycss.css文件导入HTML中。

注：外部样式表的特点在于将HTML与CSS分开，各司其职。这样做的好处在于：使得这个项目的结构清晰，能够提高CSS代码的复用性。这也是实际开发过程中最常用的一种样式表。

补充：

样式表的优先级：内联样式表>内部样式表>外部样式表（总结：哪种样式表离元素最近就生效）

4、CSS属性

颜色、尺寸、对齐

颜色

<h3 style="background-color:Orange;">Orange</h3>

通过颜色名称来设置颜色。

<h3 style="background-color:#ff0000;">#ff0000</h3>

通过颜色RGB16进制值来设置颜色。RGB（Red，Green，Blue）

尺寸

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

我们可以通过设置height、width属性来设置尺寸，尺寸的单位有px（像素）、%。

注：上面代码中的width: 100%;表示class为example-1的标签的宽度占该标签的父元素的100%。

对齐

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

我们可以设置text-align属性来对齐元素的文本，属性值包括left、right、center，默认为左对齐。

盒子模型

如上图所示，这就是盒子模型，它表示一个元素可以形象地看作是一个盒子。它主要包括content（内容）、padding（内边距）、border（边框）、margin（外边距）。
分析：

Content（内容）：表示起始标签和结束标签之间的内容，例如文本、图片等。
Padding（内边距）：表示内容和边框之间的区域。
Border（边框）：表示盒子的边框，一般不显示。
Margin（外边距）：边框外与其他元素或边界的区域。

边框的设置

.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;
}

上图的CSS代码中：

border: 1px dotted black;：边框的上下左右都设置相同的值。
border-bottom: 1px solid blue;：只设置边框的底部的样式。
border-radius: 15px;：设置边框圆角。

边距的设置

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

边距的设置和边框的设置相似，边距也分为上下左右四个边距。
上图中的padding-top、padding-bottom、padding-right、padding-left分别代表上边距、下边距、右边距、左边距，而padding代表上下左右四个边距。

padding: 25px 50px 75px 100px;

上面这段代码是一种简写的方式，按照上、右、下、左（顺时针）的顺序进行赋值。

padding: 25px 10px;

这也是一种简写的赋值方式，它表示25px表示上下边距，10px表示左右边距。

内容溢出

.example-overflow-scroll-y {
  width: 200px;
  height: 100px;
  background-color: #eee;
  overflow-y: scroll;
}

当元素所包含的内容尺寸超出内容指定的区域大小时，内容就会溢出，这是我们需要运用overflow这个属性来处理溢出的内容。

overflow属性值：

visible：溢出的内容能够显示。（默认值）
hidden：溢出的内容隐藏起来，不显示。
scroll：溢出的内容在当前的视图下被裁剪，但可以通过上下、左右滚动条查看溢出的内容。
auto：溢出的内容被裁剪，根据具体情况自动设置滚动条。

不透明度

我们通过opacity属性来设置任何元素（通常用于图片）的不透明度。
不透明度的值的范围在[0.0～1.0]之间，不透明度的值越小，图片越透明。

HTML代码：

<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="../image/img6.jpg">
  <img class="opacity-5" src="../image/img6.jpg">
  <img class="opacity-10" src="../image/img6.jpg">
</body>
</html>

效果图：

在这里插入图片描述

浮动

我们可以通过设置float属性来让某一元素在一定区域内在水平方向上向左或向右移动，通常通过这种方式来调整文本和图片的布局。（注意：当某一元素移动后，其周围的元素也会进行重新排列）
HTML代码：

<html>
<head>
  <style>
    .example-float-right {
      width: 25%;
      border-radius: 10px;
      float: right;
    }
  </style>
</head>
<body>
  <img src="https://static.runoob.com/images/demo/demo1.jpg" class="example-float-right" alt="">
  <p>
    我如果爱你——
    绝不象攀援的凌霄花，
    借你的高枝炫耀自己；

    我如果爱你——
    绝不学痴情的鸟儿，
    为绿荫重复单调的歌曲；

    也不止像泉源，
    常年送来清凉的慰藉；

    也不止像险峰，
    增加你的高度，衬托你的威仪。

    甚至日光。
    甚至春雨。

    不，这些都还不够！
    我必须是你近旁的一株木棉，
    作为树的形象和你站在一起。

    根，紧握在地下，
    叶，相触在云里。

    每一阵风过，
    我们都互相致意，
    但没有人，
    听懂我们的言语。

    你有你的铜枝铁干，
    像刀，像剑，
    也像戟；

    我有我红硕的花朵，
    像沉重的叹息，
    又像英勇的火炬。

    我们分担寒潮、风雷、霹雳；
    我们共享雾霭、流岚、虹霓。
    仿佛永远分离，
    却又终身相依。

    这才是伟大的爱情，
    坚贞就在这里：
    爱——
    不仅爱你伟岸的身躯，
    也爱你坚持的位置，足下的土地。
</p>
</body>
</html>

效果图（将图片向右浮动）：
在这里插入图片描述

定位

我们可以通过设置position属性的值来对元素进行定位。
position的属性值包括：static（静态）、relative （相对）、fixed （固定）、absolute （绝对）。

注意：只有在我们设置了position属性的值后，我们再能使用top, bottom, left, right属性，否则定位无效。

static
static为position属性的默认属性值，元素的位置按照元素在HTML中的顺序从上往下、从左往右排列。
relative
当我们设置为position: relative;时，表示将元素相对于静态（正常）位置进行偏移。
例子：
html代码：

<div class="example-relative">我偏移了正常显示的位置。去掉我的样式对比看看？</div>

css代码：

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

fixed
当我们设置为position: fixed;时，元素将固定不动（即使是拉动滚动条也不会动）。
固定的元素的具体位置任然由top, bottom, left, right等属性确定。（注意：这些属性的值是相对于视口，也就是浏览器的可见区域）
absolute
虽然从字面上理解，absolute时=是绝对的意思，但在这里它也是一种相对的概念。
当我们设置为position: absolute;时，元素相对于其最近设置了定位属性（非static）的父元素进行偏移。如果该元素的所有父元素都没有设置定位属性，那么就相对于<body>这个父元素进行偏移。