CSS学习与总结-CSDN博客

本文链接：https://blog.csdn.net/qq_45999753/article/details/114629695

CSS学习与总结

1. CSS简介
2. CSS类型及语法
- 2.1 CSS类型
- 2.2 CSS语法
3. CSS使用
4. 总结

1. CSS简介

CSS(Cascading Style Sheets)中文为层叠样式表。是专门用来美化网页的的计算机语言，如果HTML算作是盖房子的话，CSS算作是装修，一个好的网页离不开精心美化。

2. CSS类型及语法

2.1 CSS类型

CSS共有外部样式表、内部样式表和内联样式表三种。

外部样式表就是在 .html文档外，建立一个 .css文档，之后在HTML文档内引用CSS文档。可以使CSS文档有很大的复用性，也可以很灵活的修改和增加。
内部样式表就是在HTML文档内在<head>元素中引入了<style>标签，放入了样式。
内联样式表就是在HTML文档内要应用的元素里面加入样式。
样式的应用也根据就近原则，哪个样式离得近，元素就用哪个。

2.2 CSS语法

选择器{属性1：值1；属性2：值2}
属性和值就称作声明。

3. CSS使用

3.1 颜色尺寸位置

改变字体颜色可以写颜色名称和RGB16进制值都可以实现改变字体颜色。根据属性和值的不同可以使网站多彩多样。
输入代码：
(HTML)

<head>
    <meta charset="utf-8">
    <!-- 引用外部样式表 -->
    <link rel="stylesheet" type="text/css" href="a.css">
    <title>我是页面标题</title>
</head>

<body>
    <h3 class="redb">红色背景</h3>
    <h3 class="blueb">蓝色背景</h3>
    <h3 class="red">红色</h3>
    <h3 class="blue">蓝色</h3>
</body>

(CSS)

body 
{
    background-color: linen;
    text-align: center;
}
.redb
{
    background-color:red
}
.blueb
{
    background-color :#0000ff;
}
.red
{
    color:red
}
.blue
{
    color:blue
}

在这里插入图片描述

通过不同的属性就可以改变字体的大小
输入代码：

(HTML)

<body>
    <div class="a">#96ceb4</div>
    <div class="b">#ffeead</div>
    <div class="c">#d9534f</div>
    <div class="d">#ffad60</div>
</body>

(CSS)

.a
{
    height: 50px;
    width: 100px;
    background-color :rgb(150,206,180);
    text-align: center;
}
.b
{
    width: 200px;
    height: 50px;
    background-color:rgb(255,238,173);
    text-align: center;
}
.c
{
    height: 50px;
    width: 300px;
    background-color :rgb(217,83,79);
    text-align: center;

}
.d
{
    height: 50px;
    width: 400px;
    background-color :rgb(255,173,96);
    text-align: center;
}

在这里插入图片描述
3. 从上面代码也给出来了我们可以对文本的位置进行改变，只需要改变值为right/left/center即可

3.2 边框与边距

我们可以将HTML的元素看作是一个盒子。从内到外分别是内容content、内边距 padding、边框 border、外边距 margin组成，所以我们就可以分别设计改变这几个组成部分的颜色大小可以完成更多样式。
输入代码：
(HTML)

<body>
    <div class="zhu">我是注释1</div>
    <div class="zhu">我是注释2</div>
    <div class="zhu">我是注释3</div>
</body>

(CSS)

.zhu
  {
      height: 25px;
      width: 300px;
      background-color: rgba(206, 206, 206,0.5);
      border-left: 5px solid rgba(80,80,80,1);
  }

在这里插入图片描述

3.3 定位

由属性position实现，共有static 静态、relative 相对、fixed 固定、absolute 绝对共4个值。
静态、相对和固定根据字面意思理解就可以了，绝对是根据其父元素的位置来定位。
输入代码：
(HTML)

<body>
    <div class="zhu">我是注释1</div>
    <div class="zhu">我是注释2</div>
    <div class="zhu">我是注释3</div>
    <div class="top">返回</div>
</body>

(CSS)

 .zhu
  {
      height: 500px;
      width: 300px;
      background-color: rgba(206, 206, 206,0.5);
      border-left: 5px solid rgba(80,80,80,1);
  }
  .top
  {
      position: fixed;
      bottom: 40px;
      right: 10px;
      background-color:#204969;
      color: #dadada;
      padding: 25px;
      text-align: center;
  }

在这里插入图片描述
可以滑动页面体验一下

3.4 溢出

当元素的内容超过指定的区域时，可以使用overflow属性来进行处理这些溢出的部分。其值有以下几个：

visible 默认值，溢出部分不被裁剪，在区域外面显示
hidden 裁剪溢出部分且不可见
scroll 裁剪溢出部分，但提供上下和左右滚动条供显示
auto 裁剪溢出部分，视情况提供滚动条

3.5 浮动

我们可以用float属性将元素浮动起来，剩下的元素将会依次将他包围。
实现效果如下：
在这里插入图片描述

3.6 不透明度

顾名思义可以改变元素不透明度
输入代码：
(HTML)图片路径适当更改

<body>
    <img src="./1.jpg" alt="p1" class="p1">
    <img src="./1.jpg" alt="p2" class="p2">
    <img src="./1.jpg" alt="p3" class="p3">
    <img src="./1.jpg" alt="p4" class="p4">
</body>

(CSS)

.p1
  {
    width: 20%;
    float: left;
    margin: 10px;
    opacity:0.25;
  }
  .p2
  {
    width: 20%;
    float: left;
    margin: 10px;
    opacity:0.5;
  }
  .p3
  {
    width: 20%;
    float: left;
    margin: 10px;
    opacity:0.75;
  }
  .p4
  {
    width: 20%;
    float: left;
    margin: 10px;
    opacity:1;
  }