CSS学习总结-CSDN博客

本文链接：https://blog.csdn.net/qq_49017596/article/details/117659197

CSS学习总结

一、何为CSS
二、CSS

一、何为CSS

CSS是级联样式表（Cascading Style Sheets）的缩写。HTML 用于撰写页面的内容，而 CSS 将决定这些内容该如何在屏幕上呈现。
网页的内容是由 HTML的元素构建的，这些元素如何呈现，涉及许多方面，如整个页面的布局，元素的位置、距离、颜色、大小、是否显示、是否浮动、透明度等等。
CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

二、CSS

1.CSS语法

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

2.选择器

一个页面上的元素众多，选择器就用于在页面中找到/选择需要应用这个样式的对象。
除元素选择器外，还有id和class选择器。
元素选择器：

p{
  color:red;
}

id选择器：
页面

<p id="sky">蓝色</p>

将页面上id为sky的元素呈现为蓝色

#sky{
  color: blue;
}

class选择器：
页面

<p class="red">红色</p>

页面上元素的class为red，那么就让它呈现红色。

.red{
  color: red;
}

3.CSS的生效

我们一般有三种方法：外部样式表，内部样式表，内部样式表。
1.外部样式表：新建一个后缀为html的HTML文件，再在同一目录新建一个后缀名为css的样式表文件，需要在HTML文件中导入外部的样式表文件。
2.内部样式表：将样式放在 HTML 文件中，这称为内部样式表。在<head>元素中引入了<style>标签，在<style>中放入了样式。
3.内部样式表：直接把样式规则直接写到要应用的元素中。
级联的优先级是根据哪个样式定义离元素的距离近，哪个就生效的。

4.颜色, 尺寸, 对齐

1.颜色：可以采用颜色名称也可以使用颜色RGB16进制值，来设定前景或背景的颜色。
2.尺寸：可以用 height 和 width 设定元素内容占据的尺寸。常见的尺寸单位有：像数 px，百分比 %等。
3.对齐：可以设置text-align属性为left（左对齐）, center（居中）, right（右对齐）。

5.盒子模型

所有HTML元素可以看作盒子，CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：内容 content, 内边距 padding, 边框 border, 外边距 margin。
Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。
边框：border（上下左右都相同），border-bottom（只设置底部边框），border-radius（边框圆角）等；

.example-2 {
  border-bottom: 1px solid blue; 
}

边距：padding（上下左右都相同），padding-top，
padding-bottom，padding-right，padding-left等；

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

6.定位

position属性用于对元素进行定位。该属性有以下一些值：
1.static 静态（按照元素在 HTML出现的先后顺序从上到下，从左到右进行元素的安排。）
2.relative 相对（这将把元素相对于他的静态（正常）位置进行偏移，元素的位置由top, bottom, left, right属性确定。）
3.fixed 固定（将使得元素固定不动（即使你上下左右拖动浏览器的滚动条）。此时元素固定的位置仍由top, bottom, left, right属性确定，但相对的是视口（viewport，就是浏览器的屏幕可见区域））
4.absolute 绝对（将使元素相对于其最近设置了定位属性（非static）的父元素进行偏移。如果该元素的所有父元素都没有设置定位属性，那么就相对于<body>这个父元素。）
设置了元素的position属性后，我们才能使用top, bottom, left, right属性，否则定位无效。

7.溢出

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

8.浮动

在一个区域或容器内，可以设置float属性让某元素水平方向上向左或右进行移动，其周围的元素也会重新排列。一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。浮动元素之后的元素将围绕它。
如果希望浮动元素后面的元素在其下方显示，可使用clear: both样式来进行清除。

9.不透明度

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

.opacity1 {
      opacity: 0.5;
    }

10.组合选择器

1.后代选择器：
后代选择器用于选取某元素的后代元素,以空格作为分隔。

<html>
<head>
  <style>
    .cs p {
      background-color: yellow;
    }
  </style>
</head>
<body>
  <div class="cs">
    <p>In the div .cs.</p>
    <span>
        <p>In the div .cs.</p>
    </span>
  </div>
  <p>Not in the div .cs.</p>
</body>
</html>

前面两个将会有黄色背景，后面一个没有。
2.子选择器：
与后代选择器相比，子元素选择器只能选择作为某元素直接/一级子元素的元素,以>作为分隔。

<html>
<head>
  <style>
    .cs p {
      background-color: yellow;
    }
  </style>
</head>
<body>
  <div class="cs">
    <p>In the div .cs.</p>
    <span>
        <p>In the div .cs.</p>
    </span>
  </div>
  <p>Not in the div .cs.</p>
</body>
</html>

前面一个有黄色背景，后面两个没有。

11.伪类和伪元素

伪类（pseudo-class）或伪元素（pseudo-element）用于定义元素的某种特定的状态或位置等。如鼠标移到某元素上变换背景颜色，超链接访问前后访问后样式不同，保证段落的第一行加粗，其它正常等等。
使用伪类/伪元素的语法:

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

比如after 伪元素，":after" 伪元素可以在元素的内容之后插入新内容。
下面的例子在 <h1> 元素后面插入一幅图片：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style>
h1:after {
content:url(smiley.gif);
}
</style>
</head>
<body>
<h1>This is a heading</h1>
</body>
</html>