CSS基础

最新推荐文章于 2024-06-22 19:05:40 发布

s_yqb

最新推荐文章于 2024-06-22 19:05:40 发布

阅读量87

点赞数

分类专栏：前端基础文章标签： css

本文链接：https://blog.csdn.net/qq_39037116/article/details/120395267

版权

前端基础专栏收录该内容

5 篇文章 0 订阅

订阅专栏

CSS的导入

CSS 指层叠样式表 (Cascading Style Sheets)，样式定义如何显示 HTML 元素。通过选择器选中HTML元素，然后用一些声明来进行元素的样式修改，声明后要加分号。

有三种插入样式表的方法，分别是外部 CSS、内部 CSS、行内 CSS。当有多个css对一个元素的同一个样式进行修改时，比如用这三种方法同时对标题h1添加颜色的样式，最终样式的结果要看是哪个css最后进行了修改。

1、外部 CSS(实现html和css分离，推荐)

通过link标签，引入外部的css文件来对选择的元素进行修改样式。link标签中rel是固定的，href是导入的路径，这里使用相对路径方式，定位到当前文件夹下的CSS目录里的style文件
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--外部样式-->
    <link rel="stylesheet" href="CSS/style.css">
</head>
<body>
<h1>一级标题</h1>
</body>
</html>

2、内部 CSS

在head中的style标签中可以写css代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--内部样式-->
    <style>
        h1{
            color:yellow;
        }
    </style>
</head>
<body>
<h1>一级标题</h1>
</body>
</html>

3、行内 CSS

可以直接在元素标签上进行添加样式，即style属性。有多个语句时也要用分号结尾

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
<h1 style="color:yellow;">一级标题</h1>
</body>
</html>

选择器

基本选择器

基本选择器一共包括三种，分别是标签选择器、类选择和 id选择器。选择器是有优先级的，当多个选择器选择了同一个元素的同一个样式进行修改时，最后修改结果要根据优先级来：id>class>标签

1、标签选择器：选中页面中所有此类标签。用法是 标签{ }

2、类选择器：通过类class选择元素。用法是 .类的名称{ }

2、id选择器：通过id选择元素，id是全局唯一。用法是 #id{ }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*标签选择器，会选择页面上所有这个标签的元素*/
        h1{
            color: blue;
        }
        /*类选择器  .class名称{}  一个class可以复用 */
        .first{
            color: red;
        }
        /*id选择器   #id名称{}  全局唯一 */
        #pp{
            color: yellow;
        }
    </style>
</head>
<body>
<!--优先级：id > class > 标签-->
<h1>一级标题</h1>
<p class="first">第一个段落</p>
<p class="second">第二个段落</p>
<p id="pp">第三个段落</p>
</body>
</html>

层次选择器

层次选择器一般常用的有四个，后代选择器、子代选择器、相邻兄弟选择器和通用选择器
1、后代选择器可以选择某个元素的所有后代中的某种元素 格式：元素元素{ }
2、子代选择器可以选择某个元素的所有子代中的某种元素 格式：元素>元素{ }
3、相邻兄弟选择器可选择某一元素的下一个兄弟元素，并且这个元素必须是我们指定的类型。如果不是，则不选 格式：元素+元素{ }
4、通用选择器可选择紧接在某一元素后的所有指定类型的兄弟元素 格式：元素~元素{ }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*后代选择器*/
        body p{
            background: red;
        }
        /*子代选择器*/
        body>p{
            background: yellow;
        }
        /*相邻兄弟选择器*/
        .pp+p{
            background: blue;
        }
        /*通用选择器*/
        .pp~p{
            background: aqua;
        }
    </style>
</head>
<body>
    <p class="pp">第一段</p>
    <p>第二段</p>
    <p>第三段</p>
    <ul>
        <li>
            <p>第一小段</p>
        </li>
        <li>
            <p>第二小段</p>
        </li>
    </ul>
    <p>第四段</p>
    <p>第五段</p>
</body>
</html>

结构伪类选择器

结构伪类选择器有两类，一类是nth-child，一类是nth-of-type
第一类：
1、ul 下的第一个元素，且这个元素必须是 li 元素

  <style>
    ul li:first-child{
      background: yellow;
    }  
  </style>

2、ul 下的最后一个元素，且这个元素必须是 li 元素

   <style>
     ul li:last-child{
         background: blue;
     }
   </style>

3、含有 p 的父元素下的第n个元素，且这个元素必须得是 p 类型

  <style>
      p:nth-child(1){
          color: red;
      }
  </style>

第二类
含有p的父元素下的第2个p元素

   <style>
       p:nth-of-type(2){
           color: blue;
       }
   </style>

属性选择器

可以根据属性来进行选择。像id，class还有其他很多都是属性，格式: 标签[属性]{ }，并且可以配合正则表达式一起使用，常见的有 1、= 绝对等于 2、*= 包含这个元素 3、^= 以这个开头 4、$= 以这个结尾

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*有id属性的*/
        a[id]{
            background: red;
        }
        /*id绝对等于first*/
        a[id=first]{
            background: red;
        }
        /*id包含first s*/
        a[id*="first s"]{
            background: red;
        }
        /*href以https开头*/
        a[href^=https]{
            background: red;
        }
        /*href以pdf开头*/
        a[href$=pdf]{
            background: red;
        }
    </style>
</head>
<body>
<p>
    <a href="https://www.baidu.com/" id="first" class="qq">按钮1</a>
    <a href="123.jpg" id="first second" class="ww">按钮2</a>
    <a href="pp.pdf" class="qq">按钮3</a>
    <a href="45.png" class="ww">按钮4</a>
</p>
</body>
</html>

常见样式

字体样式

font-family 字体。可以选多个，逗号隔开
font-size 字的大小
font-weight 粗细
font-style 风格，如斜体等
或者一个font整合 font: oblique bolder 20px “楷体”

   <style>
       p{
           /*font-family: Arial ,楷体;*/
           /*font-size: 20px;*/
           /*font-weight: bold;*/
           /*font-style: oblique;*/
           font: oblique bolder 20px "楷体";
       }
   </style>

文本样式

    <style>
      h1{
        color: red;
        text-align: center;   /*文本水平居中*/
      }
      p{
        text-indent: 2em;  /*首行缩进两个字*/
        text-decoration: underline;  /*下划线*/
        line-height: 300px;  /*文本的行高*/
        height: 300px;  /*块高*/
        /*当行高和块高相同时，可以实现文本上下居中*/
      }
      img, span{
          vertical-align: middle;  /*垂直对齐*/
      }
    </style>

背景

背景图片可以选择沿x轴重复、沿y轴重复或者不重复

<style>
   h1{
       /*背景图片、背景图片大小、背景图片位置、背景图片是否重复、背景颜色*/
       background-image: url("a.png") ;
       background-size: 10px 10px;
       background-position: 180px 15px;
       background-repeat: no-repeat;
       background-color: red;
   }
</style>

伪类

一般加冒号，后跟条件的就表示伪类。常见的两个鼠标伪类：鼠标悬浮和鼠标按住激活

<style>
    /*鼠标悬浮特性*/
    a:hover{
        font-size: 20px;
        color: red;
    }
    /*鼠标按住激活*/
    a:active{
        color: aqua;
    }
</style>

盒子模型

在这里插入图片描述
一个元素像被盒子包裹住了一样，从外到内是外边距、边框、内边距、元素自身。这些大小都是可以设置的

边框设置

边框一般可以设置边框的厚度、样式、颜色

  <style>
      div{
          border: 2px solid red;
      }
  </style>

内外边距设置

内外边距一般会设置上下左右的厚度。当然，也可以设置为auto，会自动设置厚度，让块元素居中

<style>
   h1,ul,li,a,body{
       /*上下左右*/
       margin: 0px;
       /*上下设为0  左右自动设置为居中*/
       margin: 0px auto;
       /*顺时针  上 右 下 左*/
       margin: 0px 0px 0px 0px;
       padding: 0px;
   }
<style>

display、overflow

display

块元素，如div、p、h1，这些元素独占一行
行元素，如span、a，这些元素可以跟其他行元素一起占一行
display可以改变这些特性，block表示变为块元素，inline表示变为行元素，inline-block表示保留块元素特性情况下变为行元素。none表示不显示

  <style>
      div{
          border: 3px solid red;
          display: inline;
      }
      span{
          border: 3px solid red;
          display: inline-block;
      }
  </style>

overflow

overflow可以设置当内容溢出时的处理方式，当然你需要给父级边框设置宽度和高度。如果不设置，它会根据内容大小自动撑开
overflow: scroll; 溢出后出现滚动键
overflow: hidden; 溢出后就隐藏

<head>
  <style>
    #father{
      width: 70px;
      height: 70px;
      border: 2px red solid;
      overflow: scroll;
    }
  </style>
</head>
<body>
<div id="father">
  <div id="img1"><img src="a.png"></div>
</div>
</body>
</html>

在这里插入图片描述

浮动

使用float可以实现向左向右浮动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #father{
            border: 2px red solid;
        }
        #img1{
            border: 2px red solid;
            float: left;
        }
        #img2{
            border: 2px red solid;
            float: left;
        }
        #text{
            border: 2px red solid;
            /*clear: left;*/
        }
    </style>
</head>
<body>
<div id="father">
    <div id="img1"><img src="a.png"></div>
    <div id="img2"><img src="b.png"></div>
    <div id="text">哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇</div>
</div>
</body>
</html>

在这里插入图片描述
但是我们发现，浮动可能会造成父级边框塌陷，因为浮起来的元素不会撑开父级元素，从而导致塌陷。上面例子中两张图片都浮动，因此只有文本撑开了父级边框

可以有几种方法解决父级边框塌陷问题
1、可以增加父级边框的高度（不建议）
2、在最后增加一个空的div，并且clear both
补充：给元素添加clear: both，可以清除元素左右两边的浮动。也可以只清楚一边，设置为left和right

<style>
	...
    #clear{
        clear: both;
    }
</style>

<body>
<div id="father">
	...
    <div id="clear"></div>
</div>
</body>

3、overflow，设置溢出处理(不设置div的大小，让它根据内容自动决定)

    #father{
      border: 2px red solid;
      overflow: hidden;
    }

只需要为父级边框设置overflow即可，此时由于没有设置父级边框宽高，它会自动根据内容来进行调整
4、给父类框架添加一个伪类，在父级最后面加上空的内容，并设置不可见，且清除两边浮动

<style>
    #father{
      border: 2px red solid;
    }
    /*after选择器可以在元素后面添加内容*/
    #father:after{
      content: "";
      clear: both;
      display: block;
    }
    ...
</style>

定位

相对定位

相对定位是相对于自己本来的位置进行定位，与浮起不同，他虽然移动了，但原来的位置依然被保留下来，不会造成父级塌陷
格式：

position: relative;
left: -20px;

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #father{
            border: 2px solid red;
        }
        #first{
            background: yellow;
            position: relative;
            top: -10px;
        }
        #second{
            background: yellow;
            position: relative;
            left: -20px;
        }
    </style>
</head>
<body>
<div id="father">
    <div id="first">第一个沙盒</div>
    <div id="second">第二个沙盒</div>
</div>
</body>
</html>

在这里插入图片描述

绝对定位

绝对定位是基于父级元素或者浏览器进行定位，原来的位置不会被保留，可能会导致塌陷

1、父级元素没有设置定位时，此元素相对浏览器边框定位
2、父级元素有定位(如relative、absolute)时，相对父级元素边框定位。当相对父级元素时，它会被困在父级元素框架中，不能超出

下面是相对于父级元素定位的例子

<html lang="en">
<head>
    <style>
        #father{
            height: 1500px;
            border: red 2px solid;
            position: relative;
        }
        #first{
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
            right: 20px;
        }
    </style>
</head>
<body>
    <div id="father">
        <div id="first"> </div>
    </div>
</body>
</html>

固定定位

固定定位是元素死死定位在屏幕的某个位置上

  #first{
      width: 50px;
      height: 50px;
      background: yellow;
      position: fixed;
      right: 0px;
      bottom: 0px;
  }

z-index

网页中元素默认都是平铺。当使用定位时，可以达到堆叠的效果，因此我们要设置index决定谁在上谁在下。取值范围默认是0，越高越在上

z-index: 99;