首页
学习
活动
专区
圈层
工具
发布

【CSS】CSS 选择器 ① ( CSS 选择器作用 | CSS 选择器分类 | 标签选择器 | 类选择器 | div 与 span 标签 | 多类名选择器 )

标签 ② div 标签 5、多类名选择器 一、CSS 选择器作用 ---- CSS 作用 : 以下面的代码为例 , 先通过 选择器 h3 将 HTML 中的 h3 标签类型选择出来 , 然后为这些标签设置...style 样式 ; h3 { color: blue; font-size:20px; } CSS 选择器 作用 : 在 HTML 文件 中 选择 符合特定规则的 标签 ; 二、CSS...-- 1、简介 标签选择器 是 使用 HTML 标签作为选择器 , 如果 HTML 引入了使用 标签选择器的 CSS 样式 , 那么该 HTML 中的 所有的指定标签 , 都使用该 CSS 样式 ; 标签选择器...可以 将 HTML 中 某个类型的标签全部选择出来 , 并应用 CSS 样式 ; 标签选择器 优缺点 : 优点 : 可以 快速为 HTML 页面的 某个类型的标签统一样式风格 ; 缺点 : 不能进行差异化的样式风格设置...font-size:20px; } CSS 类选择器 优点 : 可以选择指定的若干标签 ; 2、类名规范 类名规范 : 多个单词组成的类名 , 推荐使用 - 隔开 ; 不要使用 纯数字 ,

4.6K20
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    HTML|css选择器模型

    问题描述 我们在做前端网页的时候需要简单的布局形式使网页变得美观好看。一些尺寸,颜色,背景等形式都可以通过CSS选择器模型来解决。往往布局网页形式的方法很多,但CSS选择器模型比较清晰方便而且效率高。...解决方案 选择器模型就是将一些形式对象装在一个CSS模型中,我们在使用这些对象时就可以直接通过写模型的名称就可以将其带入进网页改变其格式。对特定的元素的样式进行定义。...要清楚有几种选择器:CSS派生选择器,CSSid选择器,CSS类选择器,属性选择器。下面我主要对id和类两种选择器进行描述。...id选择器:①id选择器可以为标有特定id的HTML元素指定特定的样 式。 ②Id选择器以“#”来定义 ? 图3.1 首先在css文件中新建一个文档,在里面写上你要的形式。...图3.8 还有另外一种简单的方法就是直接使用 ? ? 图3.9 结语 掌握这些选择器的格式,有很多注意事项。格式不能写错不然运行不出来,命名尽量不要用中文或数字,标签该对齐的要对齐。

    1.9K10

    HTML&CSS03_CSS选择器定义

    想想当时我们一起学习一起努力的日子,是不是有种莫名的喜悦。...现在大家工作了,也会遇到一些前端设计的问题或相关的事情,这时你们能第一时间来到这里,想到曾经我们在一起共同学习过、努力过、拼搏过,我依然觉得很欣慰。...所以当我的朋友们真正需要我的时候,我还在这里等着你,我在这里为你们准备了前端设计基础知识的成套视频(试听版)。无论你是第一次无基础学习,还是有基础来复习复习,也或是想我了来看看我,嘻嘻。...大家多多分享我的公众号,把知识分享给更多想了解前端设计的朋友们 时刻提醒自己:不抱怨,多实践,终达成功彼岸! 我的座右铭:不能领跑也绝不放弃!

    1.2K70

    【 HTML&CSS 课程】03 块级标签和行内标签

    image.png 步骤1:问候一下div标签 首先,让我们一起认识一下div标签,这是一个极为常用的块级标签。所谓的块级标签,就是高度为0,宽度100%的标签,也就是说,它是独占一行的!...image.png 我靠,真TM惨,宽度和高度都是0,这个标签是HTML捡来的么?别急,我们给span标签里面加一点料。 听说双拾壹什么都便宜,那你能不能跟我在一起,就当便宜我。...步骤3:图片img是什么标签 网页中是可以引入图片的,在html中,我们用img标签来引入图片。 标签有两个必需的属性:src 和 alt。...DOCTYPE html> html> 第三讲 请问怎样才能停止散发魅力?帮朋友问的。...当然,还有一种方法,就是给标签设置display的css样式,这个我不打算单独拆成知识点来讲,以后在我们学着做项目的时候,会一一讲到的。

    1.9K50

    pyspider 爬虫教程 (1):HTML 和 CSS 选择

    在这个页面中我们需要提取: 电影的链接,例如,http://movie.douban.com/subject/1292052/ 下一页的链接,用来翻页 CSS选择器 CSS选择器,顾名思义,是 CSS...既然前端程序员都使用 CSS选择器 为页面上的不同元素设置样式,我们也可以通过它定位需要的元素。你可以在 CSS 选择器参考手册 这里学习更多的 CSS选择器 语法。...CSS选择器 表达式将会插入到你的代码中,如此重复,插入翻页的链接: def list_page(self, response): for each in response.doc('HTML>BODY...selector helper 并不是总是能提取到合适的 CSS选择器 表达式。...开始抓取 使用 run 单步调试你的代码,对于用一个 callback 最好使用多个页面类型进行测试。然后保存。

    2.7K70

    标签的选择

    所以今天我们着重的给大家来讲解一下如何选择标签,以最精简的代码实现我们的页面制作。...本文内容概要: 1 标签的默认样式 2 标签的语义性 3 标签的嵌套规则 4 标签的选用原则 5 合理选择标签的案例展示 一、标签的默认样式 通过这么长时间的页面制作,我们知道在每次制作的时候都需要引入一个叫做...; 标签的语义为定义文档中已被删除的文本; 三、标签的嵌套规则 如上,我们看到了所有标签的含义是什么,也可以通过它们自身的语义性来做相应的选择,做好页面优化工作。...2、主动减少html标签 1) 减少html标签嵌套:精简代码,是在确认了需求改动不频繁的前提下,能用1层标签的就不要用两层,然后通过css来达到相同的视觉效果; 2) 尽量少使用内联css:就是style...五、合理选择标签的案例展示 如下给出的两个案例是我们最常用的页面导航的制作,两种方式对应着两种标签的选择方法,各有各的特点。 制作导航栏,直接使用div~a的形式,减少层级的嵌套。如下: <!

    2K90

    【Hello CSS】第四章-HTML的标签与语意

    首先我们一起来看看这几大标签的具体情况以及子标签详情。 DOCTYPE 是个声明而不是标签,它必须在HTML 文档的第一行,位于 html> 标签之前。...class 规定元素的一个或多个类名(引用样式表中的类)。 contenteditable 规定元素内容是否可编辑。 contextmenu 规定元素的上下文菜单。上下文菜单在用户点击元素时显示。...我们知道,在HTML中,每个标题是通过标题标签来定义的,标题标签一共有6个,分别是:h1~6。...【Hello CSS】系列 【HelloCSS】是以 CSS基础概念为主题的系列文章,旨在帮助大家更深刻地了解并且提高 CSS在各位开发者心目中的地位。...如果你也喜欢 CSS,喜欢探讨技术,或者对本文,本系列有任何的意见或建议,鱼头非常希望你能加入一个有趣的微信群 — “进击的CSS”。

    69520

    HTML 与 CSS:从 “认识标签” 到 “美化页面” 的入门指南

    html> html:是整个html文件的根标签(最顶层的标签); head:页面的属性; title:页面标签标题; body:页面显示内容 。...效果显示: ⛲️4.标签的层次结构关系 html是head和body的父标签; head与title:父子关系 head与body:兄弟关系 二、HTML的常用标签 在VS Code中,创建xxx.html...多个空格,都只算一个空格 如果想要多个空格,可以用  换行标签:br 这是一个换行标签 这是一个换行标签 与 区别,p的间隔更大 2....HTML决定网页“有什么内容”,CSS决定网页内容“看起来什么样的”。...下面的布局就是由css控制的,而里面布局的内容是由html写的 二、引入方式 行内样式:直接写在html元素的style属性中 文本 示例: <div

    75910

    HTML的常用标签

    我们为什么要学html标签呢? 我们把文字内容直接添加到body标签内,网页中就可以展示内容了,为什么要学标签呢?那图片怎么添加?链接怎么添加?网页中带有的颜色大小等怎么控制呢?...浏览器并不会显示html标签,只是使用标签来解释页面内容的,所以我们要知道怎么区分和展示内容。 html标签有哪些呢? 元素是块级元素,没有特定的含义,用于组合其他标签使用。...This is a heading 段落:使用标签来定义。段落内容 定义预格式化的文本。通常会保留空格,换行。...链接:常见的点击某个链接、图片或文字进入网页,就需要使用标签。 文字、图片 图片:插入图片需要使用标签。...水平线:属于单标签。 框架: 元素会创建包含另外一个文档的内联框架(即行内框架)。

    2.3K30

    新的HTML标签 :

    本文介绍了一种新的HTML元素搜索方法,并提供了一个实用的工具来帮助开发者快速找到所需的元素。这对于那些需要处理大量HTML元素的开发者来说是非常有用的。...下面是正文 一个新的语义元素已经加入了 HTML 标准 。它代表文档中用于搜索或过滤的部分。...,我们可以使用 标签来包装表单: 由于 是标准中的新内容,所有浏览器、屏幕阅读器和其他工具可能需要一段时间才能跟上。...总体而言,这是更多的文本/代码(仅三个字符)和更多的嵌套(一个更高的级别)。 温馨提示:尽管我们在构建搜索组件时并不强制需要 标签,但是使用它却能带来额外的好处(甚至是必须的)。...这样,即使在无JavaScript环境下,搜索功能也能保持正常运行,或者说,这是一种实践渐进式增强策略的方式。 另一个需要注意的关键点是,搜索区域不一定是网站或在线平台上带有搜索按钮的文本输入框。

    2.8K30

    html块标签、含样式的标签

    仅供学习,转载请注明出处 html块标签 1、 标签 块元素,表示一块内容,没有具体的语义。 2、 标签 行内元素,表示一行中的一小段内容,没有具体的语义。...DOCTYPE html> html> 的标签 1、 标签 行内元素,表示语气中的强调词 2、 标签 行内元素,表示专业词汇 3、 标签 行内元素,表示文档中的关键字或者产品名 4、 标签...语义化的标签 语义化的标签,就是在布局的时候多使用有语义的标签,搜索引擎在爬网的时候能认识这些标签,理解文档的结构,方便网站的收录。...比如:h1标签是表示标题,p标签是表示段落,ul、li标签是表示列表,a标签表示链接,dl、dt、dd表示定义列表等,语义化的标签不多。

    3.8K20

    HTML的body标签-文本标签学习

    html> HTML的body标签-文本标签学习 <!...-- 标题标签: h1到h6:会将其中的数据加粗加黑显示.并且显示依次减弱.标题标签自带换行功能....设置水平线的宽度 size="高度" 设置水平线的高度 color="颜色" 设置水平线的颜色 段落标签: p:会将一段数据作为整体进行显示,主要是进行css和js操作时比较方便...注意: 1 标签的属性是对标签的功能进一步的补充,可以由开发人员自由指定标签的属性值,来达到想要的显示效果. 2 像素单位占据的是电脑屏幕的大小,百分比占据的是浏览器窗口的大小. -->...HTML的body标签-文本标签学习 今天北京天气真好,适合学习 今天上海天气真好,适合学习 今天成都天气真好,适合学习 今天遂宁天气真好,适合学习 今天郫县天气真好,适合学习 今天犀浦天气真好,

    3.6K01
    领券