前端学习day04

最新推荐文章于 2024-10-16 11:23:07 发布

周佳栋

最新推荐文章于 2024-10-16 11:23:07 发布

阅读量34

点赞数

文章标签：前端学习 css

本文链接：https://blog.csdn.net/zhoujiadong001/article/details/131009211

版权

学习内容：css选择器、属性

1.css选择器

1.1否定伪类选择器（可以从已选中的元素中剔除出某些元素）

语法

:not(选择器){

}

1.2属性选择器（根据指定的属性名称找到对应的标签, 然后设置属性格式）

最常见的应用场景, 就是用于区分input属性

input[type=password]{}
<input type="text" name="" id="">
<input type="password" name="" id="">

[attribute|=value] CSS2

[attribute^=value] CSS3

<input type="text" name="user-name" id="">

<input type="password" name="username" id="">

CSS2中的只能找到value开头,并且value是被-和其它内容隔开的
CSS3中的只要是以value开头的都可以找到, 无论有没有被-隔开

-属性的取值是以什么结尾的[attribute$=value] CSS3

-属性的取值是否包含某个特定的值[attribute~=value]

CSS2 [attribute*=value] CSS3

1.3通配符选择器

*{
            	属性:值;
        	}

*css3三大特性

1.继承性（给父元素设置一些属性, 子元素也可以使用）

注意：①color/font-/text-/line-开头的属性才可以继承

②在CSS的继承中不仅仅是儿子可以继承, 只要是后代都可以继承

③a标签的文字颜色和下划线是不能继承的,当做子元素

④h标签的文字大小是不能继承的

2.层叠性

3.优先级

优先级问题（权重）

①style属性 1000

②id属性 100

③类选择器伪类选择器属性选择器 10

④标签选择器伪元素选择器 1

⑤通配符选择器 0

2.属性

颜色属性关键字、十六进制、rgb、rgba

文本属性斜体（italic）文本加粗（font-weight）文字大小、字体类型（font-family））

##### -iconfont使用步骤

1.打开iconfont网站https://www.iconfont.cn/

<img src="images/image-20210803211859215.png" alt="image-20210803211859215" style="zoom:50%;" />

2.搜索要使用的图标

<img src="images/image-20210803211941669.png" alt="image-20210803211941669" style="zoom:50%;" />

3.将喜欢的图标加入到购物车，前提是需要登录iconfont

4.打开购物车，下载代码到本地

<img src="images/image-20210803212146495.png" alt="image-20210803212146495" style="zoom:50%;" />

5.下载后，将对应的文件夹放到项目目录下

<img src="images/image-20210803212351317.png" alt="image-20210803212351317" style="zoom:50%;" />

6.在对应的页面中，通过link标签引入iconfont.css，直接根据对应的类名使用即可

```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>Document</title>

  <!-- 引入对应的iconfont.css -->

  <link rel="stylesheet" href="./font_jcx62njyfg/iconfont.css">

</head>

<body>

  <!-- class="iconfont icon-xxx" 使用对应的图标即可-->

  <i class="iconfont icon-Flowerbud"></i>

</body>

</html>

```

##### -iconfont多色图标使用步骤

1.搜索或选择多色图标

<img src="images/image-20210804231028105.png" alt="image-20210804231028105" style="zoom:50%;" />



<img src="images/image-20210804231055377.png" alt="image-20210804231055377" style="zoom:50%;" />

2.选择合适的图标加入购物车

<img src="images/image-20210804231151404.png" alt="image-20210804231151404" style="zoom:50%;" />

3.将图标添加至项目，没有项目创建即可

<img src="images/image-20210804231409910.png" alt="image-20210804231409910" style="zoom:50%;" />

4.在项目中选择symbol，生成线上链接或下载到本地

<img src="images/image-20210804231521807.png" alt="image-20210804231521807" style="zoom:50%;" />

5.引用线上js地址，直接使用script标签引入即可；下载到本地，引入iconfont.js到项目中即可

```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>Document</title>

  <style>

    /* 加入通用css代码（引入一次就行） */

    .icon {

       width: 1em; height: 1em;

       vertical-align: -0.15em;

       fill: currentColor;

       overflow: hidden;  

    }

  </style>

  <!-- 线上 -->

  <script src="http://at.alicdn.com/t/font_2723033_a8d3feqyo3r.js"></script>

  <!-- 本地 -->

  <script src="./font_2723033_472uiy994m2/iconfont.js"></script>

</head>

<body>

  <!-- 挑选相应图标并获取类名，应用于页面 -->

  <svg class="icon" aria-hidden="true">

    <use xlink:href="#icon-xianxingbingbao"></use>

  </svg>

</body>

</html>