07.29自我总结 css基础 一.什么是CSS CSS是级联样式表 CSS术语标记语言,没有逻辑 CSS作用 完成网页内容的样式与布局 二.CSS的三种引入方式 1....内联式 书写位置:在 head标签内定义一个stype标签内 CSS语法:css选择器{样式1;样式2} 优缺点:可读性强，有复用性，样式被html页面绑定了，不能提供给其它html页面使用 2....外联式 书写位置:在外部css文件中，在html文件中通过link标签引入css文件 CCS文件内CSS语法:css选择器{样式1;样式2} HTML文件中导入CSS文件语法:<link rel="stylesheet...三种方式的优先级别 内联与外联之间没有优先级区别，由于html属于解释性语言，书写在下方的会覆盖上方的样式 行间式的优先级要高于一切 三.<em>CSS</em><em>选择器</em> 统配<em>选择器</em> * { 样式1; } 标签<em>选择器</em> 标签名 { 样式1; } 类<em>选择器</em> .类名{ 样式1; } <!
1. css 选择器的定义css 选择器是用来选择标签的，选出来以后给标签加样式。2. css 选择器的种类标签选择器类选择器层级选择器(后代选择器)id选择器组选择器伪类选择器3....类选择器根据类名来选择标签，以 . 开头, 一个类选择器可应用于多个标签上，一个标签上也可以使用多个类选择器，多个类选择器需要使用空格分割，应用灵活，可复用，是css中应用最多的一种选择器。...示例代码 #box{color:red} 这是一个段落标签 .box1{width:100px...小结css 选择器就是用来选择标签设置样式的常用的 css 选择器有六种，分别是:标签选择器类选择器层级选择器(后代选择器)id选择器组选择器伪类选择器
---title: css基础选择器tags: 笔记categories: 笔记author: 喵雨date: 2022-06-19 09:50:46coverImg:---注：选择器能写在css文件中或者是在...html的 标签中标签选择器语法格式：标签 {属性:xxx;}示范： h1 { color:red; } 类选择器语法格式.类名 {...} .style2 { font-size: 35px; } 测试图片：图片id选择器...id选择器可以为标有特定id的HTML元素指定特定的样式HTML元素以id属性来设置id选择器，css中id选额器，以#来定义语法： #id名 { 属性:;}举例：css#pink { color...:red;}html 我是红色注：一个页面中有位移的一个标签调用了一个id，那么其它标签就不能再调用这个idid只允许调用一次通配符选择器举例* { color
选择器（重点） 要想将CSS样式应用于特定的HTML元素，首先需要找到该目标元素。在CSS中，执行这一任务的样式规则部分被称为选择器（选择符）。...标签选择器（元素选择器） 标签选择器是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。...样式显示效果跟HTML元素中的类名先后顺序没有关系,受CSS样式书写的上下顺序有关。 2. 各个类名中间用空格隔开。 多类名选择器在后期布局比较复杂的情况下，还是较多使用的。...鼠标经过 */ color: red; /* 鼠标经过的时候，由原来的 灰色 变成了红色 */ } 结构(位置)伪类选择器（CSS3) :first-child :选取属于其父元素的首个子元素的指定选择器...(CSS3) :target目标伪类选择器 :选择器可用于选取当前活动的目标元素 :target { color: red; font-size: 30px; }
、CSS 基础选择器 CSS 选择器 : 标签选择器 ( 推荐使用 ) : 使用 HTML 标签作为选择器 , 如果 HTML 引入了使用 标签选择器的 CSS 样式 , 那么该 HTML 中的 所有的指定标签..., 不限制选择层数深度 ; 后代选择器 可用于 选择 基础选择器选择出的元素组 中的 另外基础选择器选择出的元素组 ; 后代选择器 语法 : 父选择器 和 子选择器 都是 CSS 基础选择器 , 父选择器...写在后面 , 两个选择器之间使用 > 大于号隔开 ; 父选择器>子选择器 { 属性名称1:属性值1; } 交集选择器 交集选择器 由 两个 基础选择器 组成 , 目的是 选择出 同时满足 两个 基础选择器...要求的标签 ; 交集选择器语法 : 两个基础选择器之间没有空格 ; 基础选择器1基础选择器2 { 属性名称1:属性值1; } 并集选择器 并集选择器 可以 选择 若干 基础选择器 选择出的 并集元素集合...; 并集选择器语法 : 若干 基础选择器 可以写在一起 , 基础选择器之间使用 , 逗号隔开 ; 基础选择器1,基础选择器2,基础选择器3 { 属性名称1:属性值1; } 链接伪类选择器 链接伪类选择器
02-CSS基础选择器 2.1CSS选择器的作用 选择器就是根据不同的需求把不同的标签选出来，这就是选择器的作用。简单来说就是选择标签用的。...2.2选择器的分类 选择器分为基础选择器和复合选择器两大类。...基础选择器是由单个选择器组成的，基础选择器又包括：标签选择器、类选择器、id选择器和通配符选择器. 2.3标签选择器 标签选择器（元素选择器）是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的...CSS样式。...在CSS中，通配符选择器使用“*”定义，它表示选取页面中的所有元素（标签）。
-- 基础选择器之通用选择器 1、在head中添加样式（演示方便，可以使用link） 2、匹配所有标签，所有标签的样式都会受到影响 --> 基础选择器之通用选择器 基础选择器之通用选择器 基础选择器之标签选择器 基础选择器之标签选择器 基础选择器之id选择器 基础选择器之id选择器 基础选择器之class选择器 基础选择器之类class选择器 基础选择器之class选择器
要想熟练地使用 CSS 对网页进行修饰，首先需要了解CSS 样式规则。 CSS 规则由两个主要的部分构成：选择器以及一条或多条声明。...⭐css基础选择器 选择器分为基础选择器和复合选择器两个大类，我们这里先讲解一下基础选择器。...基础选择器是由单个选择器组成的 基础选择器又包括：标签选择器、类选择器、、id选择器和通配符选择器 ⚡标签选择器 标签选择器（元素选择器）是指用 HTML 标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的...HTML 元素以 id 属性来设置 id 选择器，CSS 中 id 选择器以“#" 来定义。...⭐通配符选择器 在 CSS 中，通配符选择器使用 "*" 定义，它表示选取页面中所有元素（标签）。
二、选择器是什么 选择器，就是用一种方式把我们想要的那个元素选中。只有把它选中，我们才可以为这个元素添加CSS样式。...在CSS中，有很多方式可以把我们想要的元素选中，这些不同的方式其实就是不同的选择器。...三、CSS选择器 CSS选择器非常多，以下是最常用的 5 种选择器： 元素选择器 id 选择器 class 选择器 后代选择器 群组选择器 可千万不要小看它们，这 5 种选择器使用频率占所有选择器的...CSS选择器格式 选择器{ 属性1 : 取值1; ......--必须放在title标签及其它meta标签前--> CSS选择器
CSS基础：选择器 选择器概述： • CSS与图片 • CSS与浏览器 • CSS常用属性 • CSS3文字与字体相关样式 Not选择器: 想对某个结构元素式样样式，但是想排除这个结构元素下面的子结构元素...，让它不使用这个样式，可使用not选择器。...empty选择器: Empty选择器用来指定元素内容为空白时使用的样式。 ? ? ? Target选择器: Target选择器对页面内的链接起作用。 ? ? ?...CSS3字体: • CSS3@font-face 规则 • 在 CSS3 之前---web 设计师必须使用已在用户计算机上安装好的字体。...，css的选择器有很多，具体可参考：http://www.w3school.com.cn/cssref/css_selectors.asp 其中下图这些实在css3中定义的 ?
常用选择器 元素选择器，即html标记如div,ul,li,p,h1~h6,table等。...p { font-size:14px; } h1 { color:#F00; } 复合选择器， 由两个选择器直接构成，第一个必须是元素选择器，第二个必须是类选择器和ID选择器，这两个选择器之间不能有空格...a[title=”test”] {color:#F00;} CSS的优先级 如何计算指定选择器的优先级？...#sidebar p:first-line { color: blue; } — 0, 1, 0, 2 文章参考 http://www.qianduan.net/taming-advanced-css-selectors.html...http://www.ruanyifeng.com/blog/2009/03/css_selectors.html
文章目录 一、基础选择器与复合选择器 二、后代选择器 1、语法说明 2、示例分析 3、完整代码示例 一、基础选择器与复合选择器 ---- CSS 基础选择器 : 在之前的博客中 , 介绍了 CSS...的基础选择器 ; 标签选择器 类选择器 ID 选择器 通配符选择器 在实际开发中 , 基础选择器 不能满足 快速选择标签的需求 ; 复合选择器 是 由 两个以上 的 基础选择器 通过 各种方式 组合 而成的...选择器 ; 复合选择器 可以 更精准 更快速 地 选择 目标元素标签 ; 二、后代选择器 ---- 1、语法说明 后代选择器 可用于 选择 基础选择器选择出的元素组 中的 另外基础选择器选择出的元素组...; 后代选择器 语法 : 父选择器 和 子选择器 都是 CSS 基础选择器 , 父选择器 和 子选择器 之间 使用空格分开 ; 父选择器 子选择器 { 属性名称1:属性值1; 属性名称2:属性值2...设置为 类选择器 .gradefather , 子选择器 也设置为 类选择器 .father2 , 孙子选择器 设置为 标签选择器 label , 那么将 label 标签内的文本设置为红色 , 则可以使用如下样式
八、属性选择器 1.[属性名] 选择具有该属性的元素 示意图 2.[属性=值]（重点） 选择具有该属性且等于该值的元素 示意图 3.
五、常用选择器 1.通配选择器（了解） 给所有标签添加样式，*{css样式} 示意图 ?...多学一招：通常只是用来去掉所有代码的边距，因为每个浏览器的边距不同，有的8个像素，有的7个像素，所以干脆会全部去掉，重新设置，保证浏览器的每个边距都一致 2.后代选择器（掌握） 选择元素里面的元素，外层元素和内层元素中间用空格隔开...：外层 内层{css样式} 示意图 ?...3.子元素选择器（掌握） 选择元素的直接子元素，父和子之间用 > 隔开：父元素>子元素{css样式} 示意图 ? 案例题： <!...（难) 4.相邻元素选择器（了解） 选择相邻的元素，两个元素中间用 + 隔开：元素1 + 元素2{css样式} 示意图 ?
css基础选择器有哪些（熟记） 一、选择器作用：规范了页面中哪些元素能够定义好样式，同时也能帮助我们去 二、选择器分类 1. 通用选择器（只能放在样式表） 1....- %） 5.特殊用法-分类选择器 1、作用：将元素选择器和类选择器结合在一起，从而实现对某种元素的不同样式的细分控制 2、语法： 元素选择器.类选择器{ 样式声明； } 6.特殊引用...群组选择器 1、选择器声明以逗号隔开的选择器列表，其目的是为了声明一组选择器的公共样式 2、语法： 选择器1,选择器2,选择器3,选择器4,{ 样式声明； } 6....后代选择器 作用：用于匹配某元素的后代元素的样式 后代：一级或者多余一级的父子（层级）关系 注意：后代选择器之间用空格隔开 2. 语法： 选择器1 选择器2{ 样式声明； } 7....子代选择器 1、作用：用于匹配某元素的子代元素，能够实现更精准的元素定位 2、语法： 选择器1>选择器2{ 样式声明； } 3、注意：子代选择器之间用大于号隔开 8.
属性选择器 [属性名] 语法： [属性名]{} [属性名=属性值] 语法： [属性名=属性值]{} [属性名~=属性值]（选择多个值中的一个） 语法： [属性名~=属性值]{} [属性名
属性选择器 CSS3 选择器 -伪类target 实例 如果你要在HTML元素中设置CSS样式，你需要在元素中设置"id" 和 "class"选择器。...[1] d 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。...class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示：在以下的例子中，所有拥有 center 类的 HTML 元素均为居中。
3、可以使用自定义的属性 --> 属性选择器之attribute <!...3、可以使用自定义的属性 --> 属性选择器之attribute=value <!...3、可以使用自定义的属性 --> 属性选择器之attribute|=value <!...3、可以使用自定义的属性 --> 属性选择器之attribute^=value <!...3、可以使用自定义的属性 --> 属性选择器之attribute$=value <!
-- CSS选择器 1、选择器指明了样式的作用对象，也就是样式作用域那些对象。...2、基础选择器 1、通用选择器：*，匹配所有标签，所有标签样式都收影响。 2、标签选择器：根据标签选择，指定标签受影响。...3、组合选择器 1、多元素选择器：匹配元素A或元素B，A和B之前用逗号分隔。 2、后代元素选择器：匹配所有属于A元素后代的B元素，A和B用空格分隔。...注：1、在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。...2、在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。 3、伪类名称对大小写不敏感。
-- 组合选择器 1、多元素选择器：匹配元素A或元素B，A和B之前用逗号分隔。 2、后代元素选择器：匹配所有属于A元素后代的B元素，A和B用空格分隔。...--> 组合选择器之多元素选择器 组合选择器之多元素选择器 组合选择器之后代选择器 组合选择器之后代选择器 组合选择器之后代选择器...--> 组合选择器之子代选择器 组合选择器之子代选择器 组合选择器之毗邻元素选择器 组合选择器之毗邻元素选择器
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
