CSS基础2：伪类选择器，字体图标，盒模型 -

首页 > 博客列表 > CSS基础2：伪类选择器，字体图标，盒模型

博主信息

博文 6

粉丝 0

访问量 5755

专题推荐

更多>

一、伪类选择器

伪类：伪代表假，类代表权重（class级别），可以分发结构伪类和状态伪类。
结构伪类：根据元素位置获取元素。
状态伪类：根据元素状态获取元素。
重点学习结构伪类。
结构伪类主要用来选择子元素，需要知道一个起点然后进行查询。

实例一：查询

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>伪类查询</title>
  </head>
  <body>
    <!-- 创建一个8行单列的列表 -->
    <!-- ul.list>li{item$}*8  -->
    <ul class="list">
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
    </ul>
    <style>
      /* <!-- 通过伪类选择任意一行，进行操作, */
      /* 一共8行，取值【1-8】 -- > */
      .list > li:nth-of-type(4) {
        background: green;
      }
      /* 选中第一行 ,可以用first-child，但是first-child会忽略数据类型，所以以后都用first-of-type来处理*/
      /* 属于单元素伪类 */
      .list > li:first-of-type {
        background-color: aquamarine;
      }
      /* 选中最后一行 ,属于单元素伪类*/
      .list > li:last-of-type {
        background-color: brown;
      }
      /* nth-of-type(an+b)参数计算 */
      /* a：系数，取值0，1，2，3。。。h */
      /* n：权数，取值从0，1，2，3。。。自动计算 */
      /* b：偏移量，0，1，2，3，.... */
      /* 举例 */
      /* 偶数行字体设置为italic */
      .list > li:nth-of-type(2n) {
        font-style: italic;
      }
      /* 奇数行字体大小20px，用2n-1或2n+1 */
      .list > li:nth-of-type(2n-1) {
        font-size: 20px;
      }
      /* 对于常用语法有语法糖，2n用even表示，2n+1用odd表示。 */
      /* 偶数行鼠标移上去字体变为30px */
      .list > li:nth-of-type(even):hover {
        font-size: 30px;
        cursor: pointer;
      }
      /* 奇数行字体颜色设置为lightgreen */
      .list > li:nth-of-type(odd) {
        color: lightgreen;
      }
    </style>
  </body>
</html>

实例二：表单伪类

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>表单伪类</title>
  </head>
  <body>
    <input type="text" />
    <!-- 禁用表单，减少攻击项 -->
    <p><input type="text" disabled /></p>
    <input type="radio" name="sex" id="m" value="0" /><label for="m">男</label>
    <input type="radio" name="sex" id="f" value="1" /><label for="f">女</label>
    <button>提交</button>
    <style>
      /* 将iput设置为disbled的input背景色设置为lightgrey */
      input:disabled {
        background-color: lightgrey;
      }
      /* 将enbaled的input设置背景未浅绿 */
      input:enabled {
        background-color: limegreen;
      }
      /* 将选择按钮选中后绑定的lable的字体颜色变为红色 */
      input:checked + label {
        color: red;
      }
      /* 设置button样式，宽100px，高30px，无边框，无边线,背景绿色，字体白色 */
      button {
        width: 100px;
        height: 30px;
        border: none;
        outline: none;
        background-color: seagreen;
        color: snow;
      }
      /* 鼠标移动到button，背景变为lightsalmon色，鼠标变为小手pointer */
      button:hover {
        background-color: lightsalmon;
        cursor: pointer;
      }
      /* 鼠标聚焦到input，背景颜色变为lightseegreen */
      input:focus{
          background-color: lightseagreen;
      }
      }
    </style>
  </body>
</html>

二、字体图标

字体图标引用第三方，目前用的最多的是阿里图表，因为免费，样式也不错。
网站地址https://www.iconfont.cn
所有的图像图标实际都是文本。
有三种引用方式：unicode，font class，symbol，推荐使用更方便的font class方式引用。
引用步骤：

在网站选择需要的图标，下载源码，将源码包解压后放到本地项目中。

打开源码中的demo_index.html按font class的引用步骤操作，如下：
第一步：引入项目下面生成的 fontclass 代码：
<link rel="stylesheet" href="./iconfont.css">
第二步：挑选相应图标并获取类名，应用于页面：
<span class="iconfont icon-xxx"></span>
“ iconfont” 是你项目下的 font-family。可以通过编辑项目查看，默认是 “iconfont”。

实例演示：字体图标引用

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8" />
 <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <link rel="stylesheet" href="./font_icon2/iconfont.css" />
 <title>字体图标引用</title>
</head>
<body>
 <!-- 引用图标class，第一个class必须是iconfont,第二个class是对应图标的class名称 -->
 <p><span class="iconfont icon-chart_bar"></span></p>
 <p><span class="iconfont icon-user"></span></p>
 <p><span class="iconfont icon-home home"></span></p>
 <p><span class="iconfont icon-show eye"></span></p>
 <!-- 通过style设置图表属性，因为图标本质上是文本，所以文本的相关属性设置均可使用 -->
 <style>
   .iconfont.icon-chart_bar {
     font-size: 80px;
     color: red;
   }
   .iconfont.icon-user {
     font-size: 50px;
     color: royalblue;
   }
   .home {
     font-size: 50px;
     color: seagreen;
   }
   .eye {
     font-size: 50px;
     color: tomato;
   }
 </style>
</body>
</html>

三、盒模型

常用的盒模型属性：width，height,border,padding,margin。
实例演示常用属性：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8" />
 <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <title>常用盒模型属性</title>
</head>
<!-- 创建5个box实例供实验使用 -->
<body>
 <div class="box1"></div>
 <div class="box2"></div>
 <div class="box3"></div>
 <div class="box4"></div>
 <div class="box5"></div>
 <style>
   /* 设置box1宽200px，高200px，边框宽度10px，虚线，黑色，背景色浅绿 */
   /* 实际box1的宽带计算=200+30*2+10*2=280px，比设计的200px变大了 */
   /* 此时要想让box1的实际大小为设置的200px，需要添加box-sizing=border-box属性。 */
   .box1 {
     width: 200px; /*宽度*/
     height: 200px; /*高度*/
     border: 10px dashed black; /*边框宽度，样式，颜色*/
     background-color: lightgreen; /*box1的背景色*/
     padding: 20px; /*内边距，呼吸区*/
     box-sizing: border-box; /*box1宽带包含border和padding宽度*/
     margin: 10px; /*设置box间距10px*/
   }
   .box2 {
     width: 200px; /*宽度*/
     height: 200px; /*高度*/
     /* border: 10px solid black;边框宽度，样式，颜色 */
     background-color: lightsalmon; /*box1的背景色*/
     /* 四值 , 顺时针 */
     /* padding: 上 右 下 左 ; */
     /* padding: 5px 10px 15px 20px; */
     /* 三值 , 中间表示左右*/
     /* padding: 5px 10px 15px; */
     /* 双值: 第1个上下,第2个左右 */
     /* padding: 5px 10px; */
     /* 单值, 四个方向全一样 */
     /* padding: 5px; */
     /* padding: 是透明的,只有宽度可以设置 */
     padding: 5px 10px 15px 20px; /*内边距，呼吸区*/
     box-sizing: border-box; /*box1宽带包含border和padding宽度*/
     margin: 10px; /*设置box间距10px*/
     background-clip: content-box; /*边框背景裁剪到内容区，默认是整个box，如box1*/
     /* 分别设置border得4个边框样式 */
     border-top: 5px dashed red;
     border-bottom: 8px dotted blueviolet;
     border-left: 6px solid yellowgreen;
     border-right: 4px double brown;
   }
   /* 通用初始化box方案 */
   .box3 {
     padding: 0px;
     border: 0px;
     box-sizing: border-box;
   }
 </style>
</body>
</html>

四、盒模型常用单位

px，em，rem，vh，vw
px：是决定单位，和设备相关。
em/rem:相当单位，em相当于当前浏览器的默认字号，推算得1em=16px，1rem=10px。使用该单位可以动态调整大小，利于布局，同时也会受到其他因素限制。
vh/vw:相对固定值，将视口（可视窗口）高度/宽度分成100份，是个比值。1vh=1/100,1vw=1/100
抄录圣杯布局：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
 <meta charset="UTF-8" />
 <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <title>圣杯布局</title>
</head>
<body>
 <header>header</header>
 <aside class="left">left</aside>
 <main>main</main>
 <aside class="right">right</aside>
 <footer>footer</footer>
 <style>
   * {
     padding: 0;
     margin: 0;
     box-sizing: border-box;
   }
   header,
   footer {
     background-color: lightgreen;
   }
   body {
     display: grid;
     grid-template-columns: 6em 1fr 6em;
     grid-template-rows: 2em minmax(20em, 30em) 2em;
   }
   aside {
     background-color: lightblue;
   }
   main {
     background-color: yellow;
   }
   header,
   footer {
     grid-column: span 3;
   }
 </style>
</body>
</html>

批改老师：

PHPz

批改状态：合格

老师批语：

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

前端环境搭建

2021-12-29 21:51:54