day3 css基础&选择器&文本&样式表

最新推荐文章于 2023-03-02 23:51:17 发布
最新推荐文章于 2023-03-02 23:51:17 发布
阅读量186 收藏
点赞数
分类专栏： # html-css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39656383/article/details/106787033
版权

1. css简介

2.1 css简介

html只关注内容的语义。
css是层叠样式表cascading style sheets的简称。
css也是一种标记语言。（不是编程语言）
css主要用于设置html页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。

2.2 css语法规范

css规则由两个主要的部分构成：选择器以及一条或多条声明。
选择器是用于指定css样式的html标签，花括号内是对该对象设置的具体样式。
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>体验CSS语法规范</title>
    <style>
        /* 选择器 {样式} */
        /* 给谁改样式 { 改什么样式} */
        p {
            color: red;
            /* 修改了文字大小为12像素 */
            font-size: 12px;  
        }
    </style>
</head>
<body>
    <p>有点意思</p>
</body>
</html>

2. css选择器

选择器分类基础选择器和复合选择器两个大类。

2.1 基础选择器

a) 标签选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>基础选择器之标签选择器</title>
    <style>
    /* 标签选择器 : 写上标签名 */
    p {
        color: green;
    }
    div {
        color: pink;
    }
    </style>
</head>
<body>
    <p>男生</p>
    <p>男生</p>
    <p>男生</p>
    <div>女生</div>
    <div>女生</div>
    <div>女生</div>
</body>
</html>

能够快速为页面中同类型的标签统一设置格式。

b) 类选择器

单独选某几个标签。
结构需要用class属性。
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>基础选择器之类选择器</title>
    <style>
        /* 类选择器口诀: 样式点定义  结构类(class)调用  一个或多个 开发最常用*/
      .red {
          color: red;
      }
      .star-sing {
        color: green;
      }
      .memeda {  
         color: pink;
      }
    </style>
</head>
<body>
    <ul>
        <li class="red">冰雨</li>
        <li class="red">来生缘</li>
        <li>李香兰</li>
        <li class="memeda">生僻字</li>
        <li class="star-sing">江南style</li>
    </ul>
    <div class="red">我也想变红色</div>
</body>
</html>
课堂案例

参考：https://www.bilibili.com/video/BV14J4114768?p=68
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>利用类选择器画三个盒子</title>
    <style>
        .red {
            width: 100px;
            height: 100px;
            /* 背景颜色 */
            background-color: red;
        }
        .green {
            width: 100px;
            height: 100px;
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="red">红色</div>
    <div class="green">绿色</div>
    <div class="red">红色</div>
</body>
</html>
多类名

给一个标签指定多个类名，从而达到更多的选择目的。这些类名都可以选出这个标签。
多类名使用方式

<div class="red font20">亚瑟</div>

用空格分开。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=`, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>多类名的使用方式</title>
    <style>
        .red {
            color:  red;
        }
        .font35 {
            font-size: 35px;
        }
    </style>
</head>
<body>
    <div class="red font35">刘德华</div>
</body>
</html>

c) id选择器

id选择器可以为标有特定id的html元素指定特定的样式。
html元素以id属性来设置id选择器，css中id选择器以#来定义。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>基础选择器之id选择器</title>
    <style>
        /* id选择器的口诀: 样式#定义, 结构id调用, 只能调用一次, 别人切勿使用 */
      #pink {
          color: pink;
      }
    
    </style>
</head>
<body>
    <div id="pink">迈克尔·杰克逊</div>
    <div>pink老师</div>
</body>
</html>

d) 通配符选择器

用*定义，它表示选取页面中所有元素。
不需要调用，自动就给所有的元素使用样式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>基础选择器之通配符选择器</title>
    <style>
     * {
         color: red;
     }
     /* * 这里把 html  body  div  span  li 等等的标签都改为了红色 */
    </style>
</head>
<body>
    <div>我的</div>
    <span>我的</span>
    <ul>
        <li>还是我的</li>
    </ul>
</body>
</html>

总结

3. css字体属性

3.1 字体系列

css使用font-family属性定义文本的字体系列。

p { font-family: "微软雅黑";}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS字体属性之字体系列</title>
    <style>
     h2 {
         font-family: '微软雅黑';
     }
     p {
        /* font-family: 'Microsoft YaHei', Arial, Helvetica, sans-serif; */
        font-family: 'Times New Roman', Times, serif;
     }
    </style>
</head>
<body>
    <h2>pink的秘密</h2>
    <p>那一抹众人中最漂亮的颜色,</p>
    <p>优雅,淡然,又那么心中清澈.</p>
    <p>前端总是伴随着困难和犯错,</p>
    <p>静心,坦然,攻克一个又一个.</p>
    <p>拼死也要克服它,</p>
    <p>这是pink的秘密也是老师最终的嘱托.</p>
</body>
</html>

各种字体之间必须使用英文状态下的逗号隔开。
尽量使用系统默认自带字体。

3.2 字体大小

css使用font-size属性定义字体大小。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS字体属性之字体大小</title>
    <style>
        body {
            font-size: 16px;
        }
        /* 标题标签比较特殊,需要单独指定文字大小 */
        h2 {
            font-size: 16px;
        }
    </style>
</head>
<body>
    <h2>pink的秘密</h2>
    <p>那一抹众人中最漂亮的颜色,</p>
    <p>优雅,淡然,又那么心中清澈.</p>
    <p>前端总是伴随着困难和犯错,</p>
    <p>静心,坦然,攻克一个又一个.</p>
    <p>拼死也要克服它,</p>
    <p>这是pink的秘密也是老师最终的嘱托.</p>
</body>
</html>

px大小是最常用的单位。
谷歌浏览器默认的文字大小为16px。
可以给body指定整个页面文字的大小。

3.3 字体粗细

font-weight

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS字体属性之字体大小</title>
    <style>
       .bold {
           /* font-weight: bold; */
           /* 这个700 的后面不要跟单位  等价于 bold 都是加粗的效果 */
           /* 实际开发中,我们跟提倡使用数字 表示加粗或者变细 */
           font-weight: 700;    
       }
       h2 {
           font-weight: 400;   
           /* font-weight: normal;    */
       }
    </style>
</head>
<body>
    <h2>pink的秘密</h2>
    <p>那一抹众人中最漂亮的颜色,</p>
    <p>优雅,淡然,又那么心中清澈.</p>
    <p>前端总是伴随着困难和犯错,</p>
    <p>静心,坦然,攻克一个又一个.</p>
    <p class="bold">拼死也要克服它,</p>
    <p>这是pink的秘密也是老师最终的嘱托.</p>
</body>
</html>

在这里插入图片描述

3.4 文字样式

font-style
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS字体属性之文字样式(风格)</title>
    <style>
      p {
          font-style: italic;
      }
      em {
          /* 让倾斜的字体不倾斜   就是赶紧脉动回来 */
          font-style: normal;
      }
    </style>
</head>
<body>
    <p>同学,上课时候的你</p>
    <em>下课时候的你</em>
</body>
</html>

3.5 字体复合属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS字体属性之复合属性</title>
    <style>
       /* 想要div文字变倾斜 加粗 字号设置为16像素 并且 是微软雅黑 */
       div {
           /* font-style: italic;
           font-weight: 700;
           font-size: 16px;
           font-family: 'Microsoft yahei'; */
           /* 复合属性: 简写的方式  节约代码 */
           /* font: font-style  font-weight  font-size/line-height  font-family; */
           /* font: italic 700 16px 'Microsoft yahei'; */
           font: 20px '黑体';
       }
    </style>
</head>
<body>
   <div>三生三世十里桃花,一心一意百行代码</div>
</body>
</html>

在这里插入图片描述

3.6 字体属性总结

在这里插入图片描述
参考：https://www.bilibili.com/video/BV14J4114768?p=77

4. css文本属性

css text属性可定义文本的外观，比如颜色、对齐文本、装饰文本、文本缩进、行间距等。

4.1 文本颜色

color
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS文本外观属性之颜色</title>
    <style>
       div {
           /* color: deeppink; */
           /* color: #cc00ff; */
           color: rgb(255, 0, 255);
       }
    </style>
</head>
<body>
   <div>听说喜欢pink色的男生,都喜欢男人</div>
</body>
</html>

4.2 对齐文本

test-align
设置文本内容的水平对齐方式。
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS文本外观之文字对齐</title>
    <style>
        h1 {
            /* 本质是让h1盒子里面的文字水平居中对齐 */
            /* text-align: center; */
            text-align: right;
        }
    </style>
</head>
<body>
    <h1>居中对齐的标题</h1>
</body>
</html>

4.3 装饰文本

text-decoration
添加下划线、删除线、上划线等。
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS文本外观之装饰文本</title>
    <style>
       div {
           /* 下划线 */
           /* text-decoration: underline;   */
         /* 删除线 */
           text-decoration: line-through;
           /* 上划线 */
           text-decoration: overline;

       }
       a {
           /* 取消a默认的下划线 */
           text-decoration: none;
           color: #333;
       }
    </style>
</head>
<body>
    <div>粉红色的回忆</div>
    <a href="#">粉红色的回忆</a>
</body>
</html>

4.4 文本缩进

text-indent
指定文本的第一行的缩进，通常是段落的首行缩进。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS文本外观之文本缩进</title>
    <style>
        p {
            font-size: 24px;
            /* 文本的第一行首行缩进 多少距离  */
            /* text-indent: 20px; */
            /* 如果此时写了2em 则是缩进当前元素 2个文字大小的距离  */
            text-indent: 2em;  
        }
    </style>
</head>
<body>
        <p>打开北京、上海与广州的地铁地图，你会看见三张纵横交错的线路网络，这代表了中国最成熟的三套城市轨道交通系统。</p>

       <p> 可即使这样，在北上广生活的人依然少不了对地铁的抱怨，其中谈及最多的问题便是拥挤——对很多人而言，每次挤地铁的过程，都像是一场硬仗。更何况，还都是败仗居多。</p>
        
       <p> 那么，当越来越多的二线甚至三线城市迎接来了自己的地铁，中国哪里的地铁是最拥挤的呢？</p>
</body>
</html>

4.5 行间距

line-height

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS文本外观之行间距</title>
    <style>
       div {
           line-height: 26px;
       }
       p {
           line-height: 25px;
       }
    </style>
</head>
<body>
    <div>中国人</div>
       <p>打开北京、上海与广州的地铁地图，你会看见三张纵横交错的线路网络，这代表了中国最成熟的三套城市轨道交通系统。</p>

       <p> 可即使这样，在北上广生活的人依然少不了对地铁的抱怨，其中谈及最多的问题便是拥挤——对很多人而言，每次挤地铁的过程，都像是一场硬仗。更何况，还都是败仗居多。</p>
        
       <p> 那么，当越来越多的二线甚至三线城市迎接来了自己的地铁，中国哪里的地铁是最拥挤的呢？</p>
</body>
</html>

4.6 文本属性总结

在这里插入图片描述

5. css引入方式

5.1 css的三种样式表

  1. 行内样式表（行内式）
  2. 内部样式表（嵌入式）
  3. 外部样式表（链接式）

5.2 内部样式表

写到html页面内部，是将所有的css代码抽取出来，单独放到一个

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>内部样式表</title>
    <style>
            div {
                color: pink;
            }
     </style>
</head>
<body>
    <div>所谓内部样式表,就是在html页面内部写样式,但是是单独写到style标签内部.</div>
   
</body>
</html>

style标签理论上可以放在html文档的任何地方，但一般会放在文档的head标签中。
可以方便控制当前整个页面中的元素样式。

5.3 行内样式表

在元素标签内部的style属性中设定的css样式。适合于修改简单样式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>行内样式表</title>
</head>
<body>
        <p>夏天夏天悄悄过去留下小秘密</p>

        <p>压心底压心底不能告诉你</p>
        
        <p> 晚风吹过温暖我心底我又想起你</p>
        
        <p> 多甜蜜多甜蜜怎能忘记</p>
        
        <p>不能忘记你把你写在日记里</p>
        
        <p>不能忘记你心里想的还是你</p>
        
        <p>浪漫的夏季还有浪漫的一个你</p>
        
        <p style="color: pink; font-size: 20px;">给我一个粉红的回忆</p>
</body>
</html>

style其实就是标签的属性。
在双引号中间，写法要符合css。

5.4 外部样式表

实际开发都是外部样式表，适合于样式比较多的情况。
核心：样式单独写到css文件中，之后把css文件引入到html页面中使用。
所谓内部样式表，就是在html页面内部写样式，但是是单独写到style标签内部。

/* 这css文件里面只有样式没有标签 */
div {
    color:  pink;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>外部样式表</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div>来呀~快活呀,反正有大把时间...</div>
</body>
</html>

步骤：

  1. 新建一个后缀名为.css的样式文件，把所有css代码都放入此文件中。
  2. 在html页面中，使用link标签引入这个文件。

在这里插入图片描述

6. 综合案例

参考：

b站视频

源码

7. chrome调试工具

f12 or 右击检查
elements，左边html，右边css。

参考：
视频

weixin_39656383
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
day03（CSS01-基础选择器+字体文本样式）.rar
12-01
day03（CSS01-基础选择器+字体文本样式）.rar
day08-HTTP&Tomcat&Servlet
10-28
day08-HTTP&Tomcat&Servlet
学习CSS（一）
qq_56994594的博客
04-12 169
小白学习CSS（一）
2021-03-09CSS学习第一天
qq_44079486的博客
03-09 109
CSS学习第一天 1.CSS简介 CSS的主要使用场景就是美化页面，布局页面的。 1.1HTML的局限性 HTML只关注语义。 1.2CSS-网页的美容师 CSS是层叠样式表的简称。也称为CSS样式表或级联样式表。也是一种标记语言。 CSS主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。 总结： 1.HTML主要做结构，显示元素内容。 2.CSS美化HTML，布局网页。 3.CSS最大的价值：让HTML专注做结构呈现，样式交给
CSS(一)
weixin_53280964的博客
04-15 788
一.css简介 ●使用场景：美化网页，布局页面 1.HTML的局限性 只关注内容的语义 2.CSS——网页的美容师 层叠样式表（css样式表） 3.最大的价值 由HTML专注去做结构呈现，样式交给css，即结构（HTML)与样式（css)相分离 4.css的语法规范 css规则由两个主要的部分构成：选择器以及一条或多条声明 <style> /*选择器 {样式} */ /*给谁改样式 {改什么样式} */ p { color:
零基础学HTML_１
qq_29627015的博客
06-09 195
一、前言、web标准 1. 浏览器内核 浏览器 内核 备注 IE Trident IE、猎豹浏览器、３６０浏览器、百度浏览器 Firefox Gecko 可惜这几年已经没落了，打开速度慢，升级平凡、猪一样的队友Ｆｌａｓｈ Safari ｗｅｂｋｉｔ 现在很多人错误把ｗｅｂｋｉｔ叫做Chrome内核（即使Chrome内核已经是Blink了） Chrome chromium／Blink 在Chromium项目中研发Blink渲染引擎（即浏览器核心），内置于Chrome浏览器之中，Bl
【02】CSS-（day01）css样式表，css基础选择器，css文字文本样式
qq_42755008的博客
03-02 486
使用HTML时，需要遵从一定的规范。CSS亦如此，要想熟练地使用CSS对网页进行修饰，首先需要了解CSS样式规则，选择器用于指定CSS样式作用的HTML标签，花括号内是对该对象设置的具体样式。属性和属性值以“键值对”的形式出现。属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等。属性和属性值之间用英文“:”连接。多个“键值对”之间用英文“;”进行区分。选择器尽量少用通用选择器尽量少用 ID 选择器不使用无具体语义定义的标签选择器 div span```html。
CSS day1 |选择器&字体&文本&引入方式
csyldjy的博客
03-15 441
1 css简介 1.1 html局限性 HTML只关注内容语义（丑、臃肿繁琐）→骨架 1.2 CSS-网页的美容师 css是层叠样式表（cascading style sheets）的简称。 有时称之为CSS样式表或级联样式表。 css也是一种标记语言。 css主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式（美化）。 总结 1、HTML主要做结构，显示元素内容 2、css美化HTML，布局页面 3、css
css-day01笔记-CSS初识、基础选择器、文字和文本样式
Driedmango的博客
04-03 274
typora-copy-images-to: media 第01阶段.web基础：css-day01笔记-CSS初识、基础选择器、文字和文本样式 一、CSS层叠样式表 学习目标 理解 css的目的作用 css的三种引入方式 应用 css三种引用方式的书写 通过样式规则给标签添加简单的样式 1.HTML的局限性 说起HTML，这其实是个非常单纯的家伙， 他只关注内容的语义， ...
CSS1day（基础选择器、字体、文本属性、样式表方式）
shrimper
05-22 194
文章目录CSS选择器基础选择器 CSS选择器 基础选择器和复合选择器两个大类： 基础选择器由单个选择器组成的 包括：标签、类、id和通配符选择器 基础选择器 标签选择器： 为页面中某一类标签指定统一的CSS样式。 例如将<div>和<p>的所有标签选择出来进行设置样式。 显然这类标签的缺点是不能进行差异化样式。 例如： p { font-size: large; color: deeppink; } 类选择器： 差异化选择不同标签进行设置CSS样式。 需要在标签中定义cla
CSS&CSS3基础教程
qq_47848696的博客
10-13 548
CSS、CSS3全套讲解
day10-HTML5&CSS3提高.pdf
10-11
day10-HTML5&CSS3提高.pdf
day10-HTML5&CSS3提高.md
01-21
day10-HTML5&CSS3提高.md
练习前端-CSS引入、基础选择器-day04
08-31
练习前端-CSS引入、基础选择器-day04
pyzmq-15.1.0-py2.7-macosx-10.6-intel.egg
最新发布
06-12
Python库是一组预先编写的代码模块，旨在帮助开发者实现特定的编程任务，无需从零开始编写代码。这些库可以包括各种功能，如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库，如NumPy、Pandas和Requests，极大地丰富了Python的应用领域，从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径，而且为经验丰富的开发者提供了强大的工具，以高效率、高质量地完成复杂任务。例如，Matplotlib和Seaborn库在数据可视化领域内非常受欢迎，它们提供了广泛的工具和技术，可以创建高度定制化的图表和图形，帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。
51单片机库(基于12M晶振).zip
06-12
该资源内项目源码是个人的课程设计、毕业设计，代码都测试ok，都是运行成功后才上传资源，答辩评审平均分达到96分，放心下载使用！ ## 项目备注 1、该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的，请放心下载使用！ 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习，也适合小白学习进阶，当然也可作为毕设项目、课程设计、作业、项目初期立项演示等。 3、如果基础还行，也可在此代码基础上进行修改，以实现其他功能，也可用于毕设、课设、作业等。 下载后请首先打开README.md文件（如有），仅供学习参考, 切勿用于商业用途。 该资源内项目源码是个人的课程设计，代码都测试ok，都是运行成功后才上传资源，答辩评审平均分达到96分，放心下载使用！ ## 项目备注 1、该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的，请放心下载使用！ 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习，也适合小白学习进阶，当然也可作为毕设项目、课程设计、作业、项目初期立项演示等。 3、如果基础还行，也可在此代码基础上进行修改，以实现其他功能，也可用于毕设、课设、作业等。 下载后请首先打开README.md文件（如有），仅供学习参考, 切勿用于商业用途。
keke-15-cdn.mobileconfig
06-12
keke-15-cdn.mobileconfig
2024-2030年生鲜乳行业市场调研及前景趋势预测报告.pdf
06-12
2024-2030年生鲜乳行业市场调研及前景趋势预测报告.pdf
python css选择器
08-20
Python中的CSS选择器用于在HTML文件中选择特定的元素并为其添加样式。使用CSS选择器可以更精确地选择目标元素并设置样式。在Python中，可以使用第三方库如BeautifulSoup或lxml来解析HTML文件并使用CSS选择器进行元素选择。 在Python中使用CSS选择器的一种常见方法是使用BeautifulSoup库。该库提供了一个方法`select()`，可以使用CSS选择器选择HTML元素。例如，要选择所有具有class为"my-class"的div元素，可以使用以下代码： ``` from bs4 import BeautifulSoup html = """ <div class="my-class">This is a div with class "my-class".</div> <div>This is a div without class.</div> """ soup = BeautifulSoup(html, "html.parser") divs = soup.select("div.my-class") for div in divs: print(div.text) ``` 这将输出： ``` This is a div with class "my-class". ``` 在上面的例子中，我们首先创建了一个HTML字符串，然后使用BeautifulSoup库解析HTML。然后，使用`select()`方法选择所有具有class为"my-class"的div元素，并打印它们的文本内容。 除了BeautifulSoup，还有其他一些库可以在Python中使用CSS选择器，如lxml和pyquery等。它们的使用方式略有不同，但基本原理是相似的。 总结起来，Python中的CSS选择器是一种用于选择HTML元素并为其添加样式的方法。可以使用第三方库如BeautifulSoup来实现CSS选择器的功能。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [python学习 day47之CSS选择器](https://blog.csdn.net/wuzeipero/article/details/108622643)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* *3* [CSS样式与选择器（Python）](https://blog.csdn.net/qvqqv/article/details/130181076)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值