HTML CSS 第三次笔记

爱泡脚的鸡腿
115 阅读4分钟

1.CSS

1.1初识CSS

image.png 示例：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS</title>
  <style>
    /* 样式标签内部的代码是css标签，用来描述网页的样式 */
    /* p选择器 */
    p {
      /* 键值对 (key:value)*/

      color: red;
    }
  </style>
</head>


<body>
  <p>我是p</p>
</body>

</html>

1.2 CSS引入方式

1.2.1

html中引入外部css文件使用情景是当css对象以及对象样式过多，html文件内部比较冗杂，所以在外部写入css文件，再通过引入的方式使用

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>外部样式</title>
  <!-- 引入外部css文件 -->
  <link rel="stylesheet" href="E:\DeskTop\day4\通讯录.css">
  </link>
</head>

<body>
  <p>
    你好
  </p>
</body>

</html>

/* 这就是一个css文件 */
p {
  color: red;
}

结果：

image.png

1.2.2 行内样式

image.png

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <button style="color: red;"></button>
</body>

</html>

2 CSS选择器

image.png

2.1 基础选择器

image.png

2.1.1 标签选择器

image.png

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    p {
      color: pink;
    }

    div {
      color: skyblue;
    }
  </style>
</head>

<body>
  <div>我是DIV</div>
  <div>我是DIV</div>
  <div>我是DIV</div>
  <p>我是p</p>
  <p>我是p</p>
  <p>我是p</p>
</body>

</html>

image.png

2.1.2类选择器

2.1.2.1 单类名选择器

image.png 与标签选择器不同，类选择器可以差异化选择

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* 标签选择器 */
    p {
      color: skyblue;
    }

    /* 类选择器 */
    .pink {
      color: pink;
    }
  </style>
</head>

<body>
   /* 类选择器可以调用多个 */
  <p class="pink">我是p</p>
  <p>我是p</p>
  <p class="pink">我是p</p>
</body>

</html>

结果：

image.png

2.1.2.2多类名写法
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* 标签选择器 */
    p {
      color: skyblue;
    }

    /* 类选择器 */
    .pink {
      color: pink;
    }

    .fontsize {
      /* font-size: 通过像素单位定义文字大小; */
      font-size: 20px;
    }
  </style>
</head>

<body>
  <!-- 给第一个p标签设置两个样式 -->
  <p class="pink fontsize">我是p</p>
  <p>我是p</p>
  <p class="pink">我是p</p>
</body>

</html>

结果：

image.png

2.1.3 id选择器

image.png

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* id选择器 */
    #red {
      color: red;
    }

    /* 注意
    1.很少使用id选择器做样式
    2.id选择器是唯一的，不能重复被调用 */
  </style>
</head>

<body>
  <p>我是段落</p>
  <p>我是段落</p>
  <p>我是段落</p>
</body>

</html>

2.1.4 通配符选择器

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* 通配符选择器 */
    /* *是通配符，表示所有标签 */
    * {
      color: red;
    }
  </style>
</head>

<body>
  <p>我是段落</p>
  <div>我是div</div>
  <strong>我是加粗</strong>
</body>

</html>

image.png

3 画盒子

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box1 {
      width: 100px;
      height: 100px;
      background-color: pink;
      /* margin-top: 100px; */
    }

    .box2 {
      width: 100px;
      height: 100px;
      background-color: skyblue;
      /* margin-top: 100px; */
    }
  </style>
</head>

<body>
  <div class="box1">我是div1</div>
  <div class="box2">我是div2</div>
</body>

</html>

image.png

4 文字控制属性

image.png

4.1字体粗细

image.png

4.2字体倾斜

image.png

4.3字体行高

image.png 行高

image.png

4.4 字体家族

image.png

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      font-style: 30px;
      font-family: 隶书;
    }
  </style>
</head>

<body>
  <div>我是字体家族</div>
</body>

</html>

结果：

image.png

4.5 font复合

image.png

4.5.1 font复合写法一：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      /* 不倾斜 */
      font-style: normal;
      /* 加粗 */
      font-weight: 700;
      /* 字号 */
      font-size: 18px;
      /* 行高 */
      line-height: 30px;
      /* 字体家族 */
      font-family: 华文琥珀;

    }
  </style>
</head>

<body>
  <div>我是复合</div>
</body>

</html>

image.png

4.5.2 font复合写法二(简写)：

只有 字号 和 字体 必须写，其余可以省略；但必须严格按照 （倾斜、加粗、字号/行高、字体） 的顺序

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      /* 倾斜 */
      /* 加粗 */
      /* 字号/行高 */
      /* 字体家族 */
      font: normal 700 18px/30px '微软雅黑'

    }
  </style>
</head>

<body>
  <div>我是复合</div>
</body>

</html>

结果 image.png

4.6 首行缩进

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .p1 {
      font-size: 10px;
      line-height: 10px;
      color: gray;
      /* 缩进 */
      /* 单位 em 相对单位 1em 就是当前元素一个文字的大小 */
      text-indent: 2em;
    }

    .p2 {
      font-size: 10px;
      line-height: 10px;
    }
  </style>
</head>

<body>
  <p class="p1">
    我是第一段文本哦针对关税政策对制造业企业出口带来的成本压力，部分上市公司表示正加
    速海外产能布局。有上市企业表示，已提前在部分低关税国家或地区寻找制造场所并开展了
    相关人员储备工作，预计可在1个月内实现低关税区域的制造替代，同时，公司在欧洲市场以
    及亚太、中东、南美等广阔的新兴市场均有完善布局。还有企业表示，在美国、越南设立生产
    基地，同时将销售市场逐步转向欧洲和印度，利用东南亚基地满足区域内需求。

  </p>
  <p class="p2">
    我是第二段文本哦还有企业正在采用科学的外贸结算手段，积极分摊关税负担。例如采用装运
    港船上交货价结算模式，也就是客户承担货物运装上船后的运费并自行清关支付关税的方法，
    缓解自身业务受关税的直接影响。还有上市公司表示，公司在美业务的相关关税成本由客户承
    担。
  </p>
</body>

</html>

image.png

4.7 (水平居中)

无论是文字还是图片居中，其本质都是给盒子添加对应的text-align:center;

4.7.1 文字水平和垂直居中

image.png

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      width: 100%;
      height: 60px;
      /* 背景颜色 */
      background-color: #333;
      /* 文字颜色 */
      color: #fff;
      /* 垂直居中（设置大小为行高就可以实现垂直居中） */
      line-height: 60px;

      /* 水平居中 */
      text-align: center;

    }
  </style>
</head>

<body>
  <div class="box">我是一个居中文字</div>
  <!-- 文字可以水平居中 -->

</body>

</html>

image.png

4.7.2 图片水平和垂直居中

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      width: 100%;
      height: 60px;
      /* 背景颜色 */
      background-color: #333;
      /* 文字颜色 */
      color: #fff;
      /* 垂直居中（设置大小为行高就可以实现垂直居中） */
      line-height: 60px;

      /* 水平居中 */
      text-align: center;

    }

    .njz {
      text-align: center;
    }
  </style>
</head>

<body>
  <!-- 文字可以水平居中 -->
  <div class="box">我是一个居中文字</div>
  <!-- 图片可以水平居中 -->
  <!-- 需要建立一个盒子 再讲图片放入盒子中 -->
  <div class="njz">
    <img src="./img/njs12.jpg" alt="">
  </div>


</body>

</html>

结果： image.png

4.8 文本装饰

image.png

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    span {
      font-size: 40px;
      /* 没有装饰线 */
      /* text-decoration: none; */
      /* 下划线 */
      /* text-decoration: underline; */
      /* 上划线 */
      /* text-decoration: overline; */
      /* 删除线 */
      text-decoration: line-through;
    }
  </style>
</head>

<body>
  <span>我是装饰线</span>
</body>

</html>

image.png

4.9 文字颜色

（第四位是透明度 从0~1（））
rgb格式：rgba（255，255,255,0）

4.10 调试工具

avatar
文章
阅读
粉丝