css入门学习

最新推荐文章于 2024-04-23 11:04:30 发布

~山有木兮

最新推荐文章于 2024-04-23 11:04:30 发布

阅读量3.4k

点赞数 7

文章标签： css 学习前端

本文链接：https://blog.csdn.net/weixin_52288941/article/details/125326568

版权

前言

学过前端的人，对HTML语言一定不会感到陌生，因为它是前端设计最基本的工具。然而，随着网站越来越复杂，网站的维护变得越来越重要，对设计师的要求也越来越高。设计出美观大方，升级方便，维护轻松的网站，就成为前端设计师最基本的要求。

CSS是一项出色的技术，它使得网页的表现与内容完全分离，使得网站的维护工作变得更容易，不会因为内容的改变而影响表现，也不会因为表现的改变而影响内容。

一、CSS是什么？

HTML 标签的初衷是用于定义文档的内容，而不用关注文档的布局，布局交由浏览器来完成。然而，当时的两大主流浏览器（Netscape和IE）不断地将新的 HTML 标签和属性（如字体标签和颜色属性等）添加到 HTML
规范中。使文档的内容和表现（布局、字体、颜色、背景等）完全耦合在一起，对网页表现的任何修改，都必须修改网页的内容，造成站点的维护越来越困难。

为了解决此问题，万维网联盟（W3C）肩负起了 HTML 标准化的使命，并在 HTML 4.0 之外创造出CSS，让CSS来控制网页的外观，让HTML继续回到最拿手的老本行——为内容提供结构。

有了CSS，你再也不必担心HTML中的 h1 的字体是否过大，也不必担心无序列表的间隔是否合适，因为这些都可以在稍后用CSS进行调整。你只需集中精力用HTML来组织网页的内容，而如何使内容看起来更美观，就完全交给CSS来完成。

CSS是Cascading Style Sheet的简称，中文含义为“层叠样式表”，简称“样式表”，是用来控制如何显示HTML元素的一种样式设计语言，简单的说，就是告诉浏览器如何渲染网页。

CSS是一项出色的技术，它使得网页的表现与内容完全分离，可以称得上WEB 设计领域的一个重大突破。CSS使得网站维护工作变得更容易，不会因为内容的改变而影响表现，也不会因为表现的改变而影响内容。

CSS不需要编译，直接由浏览器解释执行。网站开发者只需为HTML 元素定义样式，并应用到所希望的任意页面。如需进行全局更新，只需简单地改变样式，网站中的所有元素均会自动更新，而不必对HTML代码做任何修改，使开发效率得到极大的提高。

二、CSS使用

（一）CSS基本语法

CSS 规则集（rule-set）由选择器和声明块组成：
在这里插入图片描述
选择器指向您需要设置样式的 HTML 元素。

声明块包含一条或多条用分号分隔的声明。

每条声明都包含一个 CSS 属性名称和一个值，以冒号分隔。

多条 CSS 声明用分号分隔，声明块用花括号括起来。

（二）CSS选择器

我们可以将 CSS 选择器分为五类：

简单选择器（根据名称、id、类来选取元素）
组合器选择器（根据它们之间的特定关系来选取元素）
伪类选择器（根据特定状态选取元素）
伪元素选择器（选取元素的一部分并设置其样式）
属性选择器（根据属性或属性值来选取元素）

元素选择器

元素选择器根据元素名称来选择 HTML 元素。

HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。

实例

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

CSS ID 选择器

id 选择器使用 HTML 元素的 id 属性来选择特定元素。

元素的 id 在页面中是唯一的，因此 id 选择器用于选择一个唯一的元素！

要选择具有特定 id 的元素，请写一个井号（＃），后跟该元素的 id。

实例

#para1 {
  text-align: center;
  color: blue;
}

CSS 类选择器

类选择器选择有特定 class 属性的 HTML 元素。

如需选择拥有特定 class 的元素，请写一个句点（.）字符，后面跟类名。

实例

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

详情可参考

CSS 选择器

下面我们对上面三种使用到的CSS选择器做一个全面的比较

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*id选择器:id必须保证全局唯一
        不遵循就近原则，固定的
        id选择器>class选择器>标签选择器
        #id名称{
        */

        #sky{
            color: blue;  /*ID选择器*/
        }
        .center{
          text-align: center;    /*类选择器*/
          font-size: 30px;
        }
        h1{
            color: red;     /*元素选择器*/
        }
    </style>


</head>
<body>

<h1 class="center" id="sky" >我是居中显示且为蓝色</h1>
<h1 class="center">我是居中显示</h1>
<h1 id="sky">我是蓝色显示</h1>
<h1>标题4</h1>

</body>
</html>

实际效果

在这里插入图片描述

（三）三种生效方式

定义了CSS样式，那么如何让这些规则对页面生效？
我们一般有三种方法：外部样式表，内部样式表，内联样式

1.外部样式表

在html工程文件的同一目录新建一个样式表文件后缀名为.css的文件，我们在这个文件中创建样式表
编辑修改好样式后，一定要在HTML中导入样式表

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

HTML文件

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <!-- 注意下面这个语句，将导入外部的 style.css 样式表文件 -->
  <link rel="stylesheet" type="text/css" href="style.css">
  <title>外部样式表</title>
</head>
<body>
  <h1>红色一级标题</h1>
  <hr>
  <p class="test">使用的类选择器，外部样式表)</p>
</body>
</html>

CSS文件

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

实现效果

在这里插入图片描述

2.内部样式表

我们也可以将样式放在 HTML 文件中，这称为内部样式表。如：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>外部样式表</title>
  <!-- 内部样式表 -->
  <style>    
    body {
  background-color: linen;
  text-align: center;
        }
    h1 {
      color: red;
        }
    .test {
      margin-top: 100px;
      color: chocolate;
      font-size: 50px;
          }
  </style>
</head>
<body>
  <h1>红色一级标题</h1>
  <hr>
  <p class="test">使用的类选择器，内部样式表)</p>
</body>
</html>

在这里插入图片描述
值得注意的是，使用内部样式表一般是在<head></head>内插入；一般而言，只有页面的样式规则较少时可采用这种方式；由于扩展性低，在大型WEB开发时，不建议使用这种方式。

3.内联样式表

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

  <h3 style="color:green;"> This is inline ways</h3>

在这里插入图片描述
这种方式极不灵活，不建议使用。

（四）CSS颜色

我们在显示屏上看到的各种颜色都是通过红（red）、绿（green）、蓝（blue）三原色组合而成的，按不同的比例混合这三种颜色就可以得到其它颜色，通过调整红、绿、蓝三种颜色的数值可以最大限度的控制颜色。

CSS 中提供了一些属性（例如 color、background）来设置 HTML 元素的颜色（例如元素的背景颜色或字体颜色），我们可以通过不同形式的值来指定颜色，如下图所示：
在这里插入图片描述
css的颜色设置具体可参考
CSS颜色设置（6种方法）

基本代码

<head>
    <title>CSS颜色</title>
    <style>
    p {
        font-size: 16px;
        font-weight: bold;
    }
    #rgb {
        color: rgb(255, 0, 0);
    }

    #rgba {
        color: rgba(255, 0, 0, 0.5);
    }

    #hex {
        color: #EE82EE  ;
    }

    #short {
        color: #E8E;
    }

    #hsl {
        color: hsl(0, 50%, 50%);
    }

    #hsla {
        color: hsla(0, 50%, 50%, 0.5);
    }

    #built {
        color: green;
    }
    </style>
</head>
<body>
    <p id="rgb">
        color: rgb(255, 0, 0)=纯红;
    </p>
    <p id="rgba">
        color: rgba(255, 0, 0, 0.5)=纯红，透明度为50%;
    </p>
    <p id="hex">
        color: #EE82EE （颜色的十六进制码表示）;
    </p>
    <p id="short">
        color: #E8E （效果同 #EE８８EE一样）;
    </p>
    <p id="hsl">
        color: hsl(0, 50%, 50%)红色，饱和度５０％　，亮度５０％;
    </p>
    <p id="hsla">
        color: hsla(0, 50%, 50%, 0.5)红色，饱和度５０％　，亮度５０％,透明度50%;
    </p>
    <p id="built">
        color: green 绿色;
    </p>
</body>

基本效果
在这里插入图片描述

（五）盒子模型

四个属性

内容(content)，也就是元素的（width、height）
内边距(padding)
边框(border)
外边距(margin）

注意：影响盒模型的大小：内容、内边距、边框，跟外边框没有关系。

css盒子模型的理解

我们可以把css盒子模型当成日常中的一个盒子去理解。

content就是盒子里装的东西，它有高度（height）和宽度（width）,可以是图片，可以是文字或者小盒子嵌套，在现实中，内容不能大于盒子，内容大于盒子就会撑破盒子，但在css中，盒子有弹性的，顶多内容太大就会撑大盒子，但是不会损害盒子。

padding即是填充，就好像我们为了保证盒子里的东西不损坏，填充了一些东西，比如泡沫或者塑料薄膜，填充物有大有小，有软有硬，反应在网页中就是padding的大小了。

border就是再外一层的边框，因为边框有大小和颜色的属性，相当于盒子的厚度和它的颜色或者材料。

margin外边距，就是我们的盒子与其他的盒子或者其他东西的距离。假如有很多盒子，margin就是盒子之间直接的距离，可以通风，也美观同时方便取出。

css盒子模型的理解：5分钟搞懂css盒子模型是什么？

在html中加入

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="box1">我是盒子一，外面红色的是我的边框。注意边框的内外都有25px的距离。</div>
    <div class="box2">我是盒子二，外面蓝色的是我的边框。注意与上面元素的外边距，发生了叠加，不是50px而是25px。</div>
  </body>
</html>

在style.css中加入

.box1 {
  height: 200px;
  width: 200px;
  background-color:#615200;
  color: aliceblue;
  border: 10px solid red;
  padding: 25px;
  margin: 25px;
}
.box2 {
  height: 300px;
  width: 300px;
  background-color:#004d61;
  color: aliceblue;
  border: 10px solid blue;
  padding: 25px;
  margin: 25px;
}

在打开的网页中使用F12快捷键进入控制台模式，点击box1内容，展现出box1的盒子模型
在这里插入图片描述
然后与css中设置的样式比较

在这里插入图片描述

提示：无论边框、内边距还是外边距，它们都有上下左右四个方向，且简写时的顺序为上，右，下，左（顺时针方向）。

下面设置了不同的边框和边距

 <div class="box">我是盒子，我有着不同的边框和边距。</div>

.box {
  height: 200px;
  width: 200px;
  background-color:#615200;
  color: aliceblue;
  border-bottom: 10px solid red;     /* 只设置下边框 */
  margin-inline:25px ;               /* margin设置左右边距 */
  padding-block:  15px;              /* padding设置上下边距*/
}

在这里插入图片描述
可与看到，没有设置的边框和边距是用‘-’代替了的，表示浏览器渲染不出来（因为没有设置）。

（六）定位

CSS 中的 position 属性用来设置元素在页面中的位置，通过该属性您可以把任何属性放置在任何您认为合适的位置。position 属性有 5 个可选值，分别对应 5 种不同的定位方式，如下所示：

在这里插入图片描述

1.静态定位

static 是 position 属性的默认值，表示没有定位，使用静态定位的元素会按照元素正常的位置显示，并且不会受到 top、bottom、left、right 和 z-index 属性的影响。

2.相对定位

相对定位就是元素相对于自己默认的位置来进行位置上的调整，可以通过 top、bottom、left 和 right 四个属性的组合来设置元素相对于默认位置在不同方向上的偏移量。

在这里插入图片描述

参考下图，盒子模型的外面多了一个position属性，表示相对于原来展示的向右偏移了60px，向下偏移了40px。

没有采取相对定位
在这里插入图片描述
采取了相对定位后

Html代码

  <div class="example-relative">我采用的是相对定位，我偏移了正常显示的位置</div>
    <!-- <div class="example-relative">我显示的是正常位置</div> -->

Css代码

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

3.固定定位

固定定位就是将元素相对于浏览器窗口进行定位，使用固定定位的元素不会因为浏览器窗口的滚动而移动，就像是固定在了页面上一样，我们经常在网页上看到的返回顶部按钮就是使用固定定位实现的。

<!DOCTYPE html>
<html>
<head>
    <style>
        div{
            height: 2000px;
        }
        p {
            width: 150px;
            height: 50px;
            background-color: #CCC;
            margin: 0;
            text-align: center;
            line-height: 50px;
            position: fixed;
            right: 50px;
            bottom: 50px;
        }
    </style>
</head>
<body>
    <div>
        <p class="fixed">我一直固定在这里</p>
    </div>
</body>
</html>

先在body新建一个新的div，其高度要大于视口高度（可以实现下滑的效果），然后可以看到随着页面移动，该固定点始终保持不动。

请添加图片描述

4.绝对定位

绝对定位就是元素相对于第一个非静态定位（static）的父级元素进行定位，如果找不到符合条件的父级元素则会相对与浏览器窗口来进行定位。您同样可以使用 top、bottom、left 和 right 四个属性来设置元素相对于父元素或浏览器窗口不同方向上的偏移量。

在这里插入图片描述

参考代码

<!DOCTYPE html>
<html>
<head>
    <style>
  
        div {
           position: relative; /* 决定父元素是否使用定位*/ 
          width: 400px;
          height: 200px;
          border: 3px solid rgb(87, 33, 173);
        }
        div.absolute {
            width: 150px;
            height: 50px;
            background-color: #B3FF99;
            line-height: 50px;
            text-align: center;
            position: absolute;
            bottom: 20px;
            right: 20px;
        }
    </style>
</head>
<body>
<div>
      <div> 父元素未使用绝对定位</div>
      <div class="absolute">position:absolute;></div>
 </div>
</body>
</html>

总结：通过这个小例子，我们可以发现，使用绝对定位时，若没有找到非静态定位的父元素，则相对于body区域定位，此时与相对定位效果一样。

（七）溢出

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

属性

visible
hidden
scroll
auto

visible的效果

overflow: visible （溢出部分不被裁剪，且在区域外面显示）

在这里插入图片描述
hidden的效果

overflow: hidden（裁剪溢出部分且不可见）

在这里插入图片描述

scroll的效果

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

在这里插入图片描述
关于滚动，我们还可以单独对上下或左右方向进行，添加以下代码即可

overflow-y:scroll;

auto的效果

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

在这里插入图片描述
在这里调整了以下每行显示的文字数目，使得在x方向上能够将字体完全显示出来，所以只在y轴方向上加入了滚动条。

参考代码

<!DOCTYPE html>
<html>
<head>
    <style>
  div {
  background-color: #eee;
  width: 300px;
  height: 200px;
  border: 1px dotted black;
   /* overflow: hidden;  */
   overflow:auto;
   /* overflow:scroll; */
   /* overflow-y:scroll; */
   
}
    </style>
</head>
<body>
<div>
    <p>花半开最美，情留白最浓，懂得给生命留白，亦是一种生活的智慧。淡泊以明志，宁静以致远，懂得给心灵留白，方能在纷杂繁琐的世界，淡看得失，宠辱不惊，去意无留；懂得给感情留白，方能持久生香，留有余地，相互欣赏，拥有默契；懂得给生活留白，揽一份诗意，留一份淡定，多一份睿智，生命方能如诗如画。人心，远近相安，时光，浓淡相宜。有些风景要远观，才能美好；有些人情要淡然，才会久远，人生平淡更持久，留白方能生远，莲养心中，随遇而安，生命的最美不过是懂得的距离。</p>
 </div>
</body>
</html>

（八）浮动

CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。
Float（浮动），往往是用于图像，但它在布局时一样非常有用。

使用右浮动可以达到下面的效果
在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
    <style>
   .example {
      float: right;
      height: 200px;
    }
    </style>
</head>
<body>
<div>
    <img src="https://www.keaidian.com/uploads/allimg/190424/24110307_5.jpg" class="example" alt="">
  <p>站在历史的海岸漫溯那一道道历史沟渠：楚大夫沉吟泽畔，九死不悔；魏武帝扬鞭东指，壮心不已；陶渊明悠然南山，饮酒采菊……他们选择了永恒，纵然谄媚诬蔑视听，也不随其流扬其波，这是执著的选择；纵然马革裹尸，魂归狼烟，只是豪壮的选择；
    纵然一身清苦，终日难饱，也愿怡然自乐，躬耕陇亩，这是高雅的选择。在一番选择中，帝王将相成其盖世伟业，贤士迁客成其千古文章。</p>
    <p>站在历史的海岸漫溯那一道道历史沟渠：楚大夫沉吟泽畔，九死不悔；魏武帝扬鞭东指，壮心不已；陶渊明悠然南山，饮酒采菊……他们选择了永恒，纵然谄媚诬蔑视听，也不随其流扬其波，这是执著的选择；纵然马革裹尸，魂归狼烟，只是豪壮的选择；
        纵然一身清苦，终日难饱，也愿怡然自乐，躬耕陇亩，这是高雅的选择。在一番选择中，帝王将相成其盖世伟业，贤士迁客成其千古文章。</p>
        <p>守候着自己的世界，或忙或累，或喜或悲，都是一种充实。闲时，静坐一隅，执盏遐思，过去的、现在的、未来的，喜的、悲的...什么都可以去想。或许，美好的东西，本就不该遗忘，怀念也好，思念也罢，用心感受，何尝不是一种幸福？每个人，
            肩上的背囊，都装满了自己的故事，或伤或痛，不懂卸载，当压的自己，连呼吸都是一种痛的时候，才学会拐弯。有些人，一转身，便走成了背影，有些事，一轮回，便旧成了曾经；学会宽恕自己，原谅错误，想要的，努力去争取；想忘的，时间会帮你。</p>
 </div>
</body>
</html>

实现图片的灵活布局
在这里插入图片描述

（九）不透明度

我们可以使用两种方式来设置图片的不透明度，通过
opacity属性
或者使用RGBA （），其中

R：红色值。正整数（0~255）

G：绿色值。正整数（0~255）

B：蓝色值。正整数（0~255）

A：透明度。取值0~1之间
rgba()只是单纯的可以设置颜色透明度，这样在页面的布局中有很多应用。比如说：让背景出现透明效果，但上面的文字不透明。

使用了rgba函数设置的效果
在这里插入图片描述
直接使用opacity设置的效果

具体代码可参考
css设置不透明度的几种方法

下面我们使用opacity属性来显示图片

<html>
<head>
  <style>
    img {
      width: 30%;
      height: 500px;
      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="https://upfile2.asqql.com/upfile/hdimg/wmtp/wmtp/2015-12/30/9835VicmIhquvD.jpg">
  <img class="opacity-5" src="https://upfile2.asqql.com/upfile/hdimg/wmtp/wmtp/2015-12/30/9835VicmIhquvD.jpg">
  <img class="opacity-10" src="https://upfile2.asqql.com/upfile/hdimg/wmtp/wmtp/2015-12/30/9835VicmIhquvD.jpg">
</body>
</html>

在这里插入图片描述

（十）复合选择器

更多详细内容可参考

CSS复合选择器（交集、并集、后代、子元素、兄弟、伪类、伪元素）

复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的,目的是为了可以选择更准确更精细的目标元素标签。

后代选择器通过空格标识符来实现，如下例所示

<html>
<head>
  <style>
    div p {
      background-color:lightblue;
    }
  </style>
</head>
<body>
  <div>
    <p>段落1是div的后代选择器</p>
    <p>段落2是div的后代选择器</p>
    <span>
        <p> span中的段落3是div的后代选择器</p>
    </span>
  </div>
  <p>段落4不是div的后代选择器,位于Body中</p>
  <p>段落5不是div的后代选择器,位于Body中</p>
</body>
</html>

通过空格使得p成为成为div的后代元素，当p向上找，若能够找到父元素div（即使不是直接父元素，如div->span->p，p仍然为div的后代元素，可以起作用），就可实现相应的功能。

在这里插入图片描述

子选择器 也称为直接后代选择器，子选择器是指定父元素所包含的子元素，子选择器使用">"表示

<html>
<head>
  <style>
    div>p {
      background-color:lightblue;
    }
  </style>
</head>
<body>
  <div>
    <p>段落1是div的直接后代选择器</p>
    <p>段落2是div的直接后代选择器</p>
    <span>
        <p> span中的段落3不是div的直接后代选择器</p>
    </span>
  </div>
  <p>段落4不是div的后代选择器,位于Body中</p>
  <p>段落5不是div的后代选择器,位于Body中</p>
</body>
</html>

通过>使得p成为成为div的直接后代元素，当p向上找，若能够找到父元素div，但是需要是其直接父元素，才可实现相应的功能（如本例中的div->span->p中，这就不能实现此功能，可以对比一下上一项的结果）。

伪类或伪元素用于定义元素的某种特定的状态或位置等。
比如我们可能有这样的需求：

鼠标移到某元素上变换背景颜色
超链接访问前后访问后样式不同
离开必须填写的输入框时出现红色的外框进行警示
保证段落的第一行加粗，其它正常

链接伪类选择器

link /* 未访问的链接 */
visited /* 已访问的链接 */
visited /* 已访问的链接 */
active /* 选定的链接 */

伪元素选择器

E::first-letter 文本的第一个单词或字
E::first-line 文本第一行
E::selection 可改变选中文本的样式

之所以被称为伪元素，是因为他们不是真正的页面元素，html没有对应的元素，但是其所有用法和表现行为与真正的页面元素一样，可以对其使用诸如页面元素一样的css样式，表面上看上去貌似是页面的某些元素来展现，实际上是css样式展现的行为，因此被称为伪元素。

我们使用来测试一下伪类的效果

<html>
<head>
  <style>
 img
{
  opacity:0.4;
  filter:alpha(opacity=40); /*  IE8 及其更早版本 */
}
img:hover
{
  opacity:1.0;
  filter:alpha(opacity=100); /* IE8 及其更早版本 */
}
  </style>
</head>
<body>
    
<img src="https://upfile2.asqql.com/upfile/hdimg/wmtp/wmtp/2015-12/30/9835VicmIhquvD.jpg" alt="">
    
</body>
</html>