前端技术——css

news2025/11/8 20:03:53

1.CSS的引入

【1】为什么要学习CSS?

如果只用HEML画页面的话--->这个页面就是页面上需要的元素罗列起来，但是页面效果很差，不好看，为了让页面好看，为了修饰页面。所以我们需要用到CSS。

CSS的作用：修饰HTML页面

有了CSS之后，样式和元素本身做到了分离的效果。---->降低了代码的耦合性

【2】HTML和CSS的关系？

先有HTML，先有页面，修饰页面--->CSS

【3】CSS名字：

CSS：cascading style sheets（层叠样式表）

层叠：样式的叠加

样式表：各种各样样式的集合

2.CSS的三种书写方式

【1】行内样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
      <!--
          书写方式：行内样式
          在这个标签中加入一个style属性，CSS的样式作为属性值
          多个属性值之间用分号进行拼接
      -->
      <h1 style="color: aqua;font-family: 'Adobe 宋体 Std L'">这是一个h1标题</h1>
</body>
</html>

【2】内部样式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <!--
    书写方式：内部样式：
    head标签中加入一个style标签,在里面定位到你需要修饰的元素，然后在{}中加入你要修饰的样式。
    -->
    <style>
      h1{
        color: greenyellow;
        font-family: "Agency FB";
      }
    </style>
</head>
<body>
      <h1>这是一个标题</h1>
</body>
</html>

【3】外部样式：

首先要创建一个css文件，css文件的后缀是.css

然后再创建html页面：

【4】实际开发中三种书写方式用的最多的是：

第三种：外部样式：因为这种方式真正做到了元素页面和样式分离

【5】三种书写方式他的优先级是什么样子的？

就近原则，行内>内部>外部

3.选择器

3.1基本选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      /*
      【1】基本选择器：元素选择器：
      通过元素的名字定位，它会获取页面上的所有这个元素，无论藏的多深，都可以获取到
      格式：
      元素名字{
            css格式；
      }
      */
      h1{
        color: red;
      }
      /*
      【2】基本选择器：类选择器
       应用场合：不同类型的标签使用相同的类型
       格式：
       .class的名字{
            css样式;
       }
      */
      .mycls{
          color: greenyellow;
      }

      /*
      【3】基本选择器：id选择器
      应用场合：可以定位到一个唯一的元素
      不同的标签确实可以使用相同的id，但是我们一般会进行人为的控制，让id可以唯一定位到一个元素
      格式：
       #id的名字{
            css样式;
       }
      */
      #myid{
          color: yellow;
      }
    </style>
</head>
<body>
      <h1>标题</h1>
      <h1 class="mycls">标题</h1>
      <h1 id="myid">标题</h1>
      <h1>标题</h1>
      <h2 class="mycls">h2标题</h2>
</body>
</html>

优先级别：

不用记，自己试一下就行

id选择器>class选择器>元素选择器

3.2关系选择器

div和span 结合css用于页面的布局。div+css用于页面布局。

【2】关系选择器：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    /*
    关系选择器：
    后代选择器：只要是这个元素的后代，样式都会发生变化
    div下面所有h1标签样式都会改变
    */
    /*div h1{
      color: red;
    }*/
    /*
    关系选择器：
    子代选择器：
    只改变子标签的样式
    */
    div>h1{
      color: red;
    }
    span>h1{
      color: red;
    }

  </style>
</head>
<body>

<div>
  <h1>这是一个标题</h1>
  <h1>这是一个标题</h1>
  <h1>这是一个标题</h1>
  <span>
          <h1>这是一个标题</h1>
          <h1>这是一个标题</h1>
        </span>
</div>
</body>
</html>

3.3属性选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      /*
      属性选择器：

      */
      input[type="text"]{
        background-color: red;
      }
    </style>
</head>
<body>
      <form>
        用户名：<input type="text">
        密&nbsp;&nbsp;码：<input type="password">
        <input type="submit" value="登录">
      </form>
</body>
</html>

3.4伪类选择器

伪类选择器向某些选择器添加特殊效果。

一般伪类选择器都用在超链接上：

3.5练习：百度导航栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    ul{
      list-style-type:none;/*将无序列表前的图标取消*/
    }
    li{
      float: left;/*向左浮动*/
      margin-left: 30px;/*设置间隔30px*/
    }
    a{
      text-decoration: none;/*去掉下划线*/
      font-size: 14px;/*字号*/
      color: black;/*字体颜色*/
    }
    a:hover{
        color: blue;
    }
  </style>
</head>
<body>
      <ul>
        <li>
          <a href="aaaa">新闻</a>
        </li>
        <li>
          <a href="aaaa">hao123</a>
        </li>
        <li>
          <a href="aaaa">地图</a>
        </li>
        <li>
          <a href="aaaa">视频</a>
        </li>
      </ul>
</body>
</html>

4.浮动

【2】利用代码加深浮动的印象

效果：（没有浮动效果）

先给绿色div加上浮动：

代码：

效果：

再给橙色div添加浮动：

效果：

最后再给黄色div添加浮动：

效果：底下的div，因为没有东西填充，没有东西支撑，也没有定义宽和高，所以缩没了。

【3】消除浮动影响：

方式1：

给浮动的父节点加入一个属性：overflow：hidden

方式2：

给父节点加一个高度，让粉色div有个撑起来的效果

方式3：

操作被影响的元素，给它加入一个属性：

5.定位

5.1如何定位

5.2静态定位（static）

5.3相对定位（relative）

<div style="width: 100px;height: 100px;background-color: red;position: relative;bottom: 10px;right: 20px"></div>

相对定位的应用场合：

（1）元素在小范围移动的时候

（2）结合结对定位使用

再说一个属性：z-index

设置堆叠顺序，设置元素谁在上谁在下。

注意：z-index属性要设置在定位的元素上

5.4绝对定位（absolute）

代码：

效果：

暂时来说看到的效果：蓝色div相对body产生的位移，相对body进行位置的改变，然后蓝色div发生位移以后，原位置得到了释放。橙色div移动上去了。

实际开发中，我们往往让蓝色div在粉丝div中发生位移效果：

配合定位来使用：

效果：

总结：

当给一个元素设置了绝对定位的时候，它相对谁变化呢？它会向上一层一层的找父级节点是否有定位，如果直到找到body了也没有定位，那么就相对body进行变换，如果父级节点有定位，这个定位可以是绝对定位，相对定位，固定定位，但是一般我们会配合使用父级为相对定位，当前元素为绝对定位，这样这个元素就会相对父级位置产生。无论是上面的哪一种，都会释放原来的位置，其他元素会占用这个位置。开发中建议使用父级节点relative定位，子级使用绝对定位。