CSS学习总结-CSDN博客

本文链接：https://blog.csdn.net/weixin_48936833/article/details/114597184

何为CSS

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

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

CSS语法

CSS与HTML不同，CSS使用{ }包裹一条或多条声明，{ }前面的部分称为选择器。

说明：
1.选择器是您需要改变样式的对象。
2.每条声明由一个属性和一个值组成。（无论是一条或多条声明，都需要用{ }包裹，且声明用;分割）
3.属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。
4.CSS的注释为/* ……*/。

id选择器

/* 注意：id选择器前有 # 号。 */
#sky{
  color: blue;
}

这条规则表明，找到页面上id为sky的那个元素让它呈现蓝色。

class选择器

/* 注意：class选择器前有 . 号。 */
.center{
  text-align: center;
}
.large{
  font-size: 30px;
}
.red{
  color: red;
}

以上代码定义了三条规则，分别应用于页面上对应的元素，如只要页面上某元素的class为red，那么就让它呈现红色。

CSS如何生效

让CSS对页面生效一般有三种方法，即：外部样式表，内部样式表，内联样式。

外部样式表

新建一个html文件（后缀为.html），然后包含如下代码：

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

上述代码将导入外部的 mycss.css 样式表文件，然后在同一目录新建一个样式表文件mycss.css（注意后缀名为css），写入内容后即可在浏览器中打开。
注意：
引入外部样式表是我们使用样式的主流方式，因为众多的样式规则单独放在一个文件中，与 HTML 内容分开，结构清晰。同时其它页面也可使用，达到复用的目的。

内部样式表

在<head>与</head>之间加入如下代码：

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

该代码与上述外部样式表效果一样。
注意：
一般而言，只有页面的样式规则较少时可采用这种方式。

内联样式

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

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

注意：
内联样式是最不灵活的一种方式，完全将内容和样式合在一起，实际应用中非常少见。

CSS颜色、尺寸、对齐

颜色

我们可以采用颜色名称也可以使用颜色RGB16进制值，来设定前景或背景的颜色。
注：颜色值，3个字节分别代表RGB（Red，Green，Blue）的0～255的值
比如：

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

尺寸

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

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

对齐

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

盒子模型

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

定位

position属性用于对元素进行定位。该属性有以下一些值：

static 静态
relative 相对
fixed 固定
absolute 绝对
设置了元素的position属性后，我们才能使用top, bottom, left, right属性，否则定位无效。

static

默认定位方式，元素将按正常布局进行。

relative

相对定位，这将把元素相对于他的静态（正常）位置进行偏移

fixed

固定定位，这将使得元素固定不动（即使你上下左右拖动浏览器的滚动条）。

absolute

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

溢出

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

浮动

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

<style>
    .example-float-right {
      float: right;
    }
</style>

这将使得其向右浮动

不透明度

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

组合选择器

后代选择器

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

子选择器

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

伪类和伪元素

伪类（pseudo-class）或伪元素（pseudo-element）用于定义元素的某种特定的状态或位置等。
比如说我们需要把鼠标移到某元素上变换背景颜色，或超链接访问过后颜色不同……
语法如下

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