css第一个元素

CSS中选择器

▼魔方 西西 提交于 2019-11-28 17:50:36
CSS选择器:就是指定CSS要作用的标签,那个标签的名称就是选择器。意为:选择哪个容器。 选择器语法 CSS 选择符: 1,基本选择器语法 选择器 类型 功能描述 * 通配选择器 选择文档中所以HTML元素 E 元素选择器 选择指定类型的HTML元素 #id ID选择器 选择指定ID属性值为“id”的任意类型元素 .class 类选择器 选择指定class属性值为“class”的任意类型的任意多个元素 selector1,selectorN 群组选择器 将每一个选择器匹配的元素集合并 2,层次选择器语法 选择器 类型 功能描述 E F 后代选择器(包含选择器) 选择匹配的F元素,且匹配的F元素被包含在匹配的E元素内 E>F 子选择器 选择匹配的F元素,且匹配的F元素所匹配的E元素的子元素 E+F 相邻兄弟选择器 选择匹配的F元素,且匹配的F元素紧位于匹配的E元素的后面 E~F 通用选择器 选择匹配的F元素,且位于匹配的E元素后的所有匹配的F元素 3,动态伪类选择器语法 选择器 类型 功能描述 E:link 链接伪类选择器 选择匹配的E元素,而且匹配元素被定义了超链接并未被访问过。常用于链接描点上 E:visited 链接伪类选择器 选择匹配的E元素,而且匹配元素被定义了超链接并已被访问过。常用于链接描点上 E:active 用户行为选择器 选择匹配的E元素,且匹配元素被激活

HTML&&css面试题

本小妞迷上赌 提交于 2019-11-28 14:06:08
1.XHTML和HTML有什么区别 HTML是一种基本的WEB网页设计语言,XHTML是一个基于XMl的置标语言 最主要的不同 XHTML元素必须被正确地嵌套。 XHTML元素必须被关闭 标签名必须用小写字母 XHTMl文档必须拥有根元素 2.什么是语义化的HTML? 直观的认识标签对于搜索引擎的抓取有好处,用正确的标签做正确的事情! HTML语义化就是让页面的内容结构化,便于对浏览器,搜索引擎解析; 在没有样式css情况下也以一种文档格式显示,并且是容易阅读。搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重,利于SEO。 在阅读源代码的人对网站更容易将网站分块,便于阅读维护理解。 2(1)、简述一下你对HTML语义化的理解? 1、用正确的标签做正确的事情。 2、html语义化让页面的内容结构化,结构更清晰,便于对浏览器,搜索引擎解析; 3、即使在没有样式CSS情况下也以一种文档格式显示,并且是容易阅读的; 4、搜索引擎的爬虫也依赖于HTML标记确定上下文和各个关键字的权重,利用SEO; 5、使阅读源代码的人对网站更容易将网站分块,便于阅读维护理解。 3.常见的浏览器内核有哪些? Trident内核:IE,MaxThon,TT,The Word,360,搜狗浏览器等。[又称为MSHTML] Gecko内核:Netscape6及以上版本,FF,MozillaSuite

前端CSS的选择器整理搜集

匆匆过客 提交于 2019-11-28 13:29:31
HTML选择器 三大基础选择器 标签选择器 html{属性:属性值} id选择器 #id{属性:属性值} class选择器 .id{属性:属性值}权重   标签的权重最低 按照通常说法分数为1分     id选择器的权重最高 一般为100分     class的选择器权重最低 一般为10分    //这里的分数仅仅为了方便判断,实际当中并不存在具体的看文尾    高级选择器 并集    “并集”选择器:同时选中各个基本选择器所选择的范围,任何形式的选择器都可以,并集选择器是多个选择器通过逗号连接而成的。例如h1,h2,h3{color:red;font-size:23px;} 交集 “交集”选择器:由两个选择器直接连接构成,其结果是选中二者各自元素范围的交集,其中第一必须是标记选择器,第二个必须是类别选择器或者ID选择器,两个选择器之间不能有空格,必须连续书写.div. d1选中一个div标签类名叫d1 后代    选择它里面的后代元素 例如.box .d1 p 选中类名为.box下面的.d1 的p标签 子元素选择器 .d1>a 选择类名为.d1下面的a标签 相邻兄弟选择器 div+p div后面的p标签被选中 普通兄弟选择器 div~p div后面额p标签全部被选中 通配符       *{ color :red}星号代表所有,让颜色为红色 超链接伪类选择器

CSS 学习手册--Super精心整理

本秂侑毒 提交于 2019-11-28 02:58:11
目录 CSS 简介 1.CSS 简介 CSS 概述 层叠次序 2.CSS 基础语法 CSS 语法 值的不同写法和单位 记得写引号 多重声明: 空格和大小写 3.CSS 高级语法 选择器的分组 继承及其问题 友善地对待Netscape 4 继承是一个诅咒吗? 4.CSS 派生选择器 派生选择器 5.CSS id 选择器 id 选择器 id 选择器和派生选择器 单独的选择器 6.CSS 类选择器 7.CSS 属性选择器 对带有指定属性的 HTML 元素设置样式。 8.CSS 创建 如何插入样式表 多重样式 CSS样式 9.CSS 背景 10.CSS 文本 缩进文本 水平对齐 字间隔 字母间隔 字符转换 文本装饰 处理空白符 文本方向 11.CSS 字体 CSS 字体系列 指定字体系列 字体风格 字体变形 字体加粗 字体大小 CSS 字体属性 12.CSS 链接 设置链接的样式 常见的链接样式 13.CSS 列表 14.CSS 表格 15.CSS 轮廓 轮廓(Outline) 实例: CSS 边框属性 CSS 框模型 16.CSS 框模型概述 浏览器兼容性 17.CSS 内边距 CSS padding 属性 单边内边距属性 内边距的百分比数值 CSS 内边距属性 18.CSS 边框 CSS 边框 边框与背景 边框的样式 边框的宽度 边框的颜色 19.CSS 外边距 CSS margin

CSS学习笔记2:选择器

Deadly 提交于 2019-11-28 01:33:26
标签选择器   1、选择要给样式的目标标签,所以叫做标签选择器,也叫元素选择器。 2、给所有相同标签,给相同样式。 按 Ctrl+C 复制代码 按 Ctrl+C 复制代码 类选择器 1、html声明,CSS调用 2、格式: .类名{属性:值;属性:值} 3、类名尽量不使用下划线(用中横线代替),纯数字,中文,具体见命名规范。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS注释</title> <style type="text/css"> /*标签选择器:标签作为选择器*/ p{ color: red; } div{ color: purple; } /*类选择器:html声明,CSS调用*/ .mingren{ color: orange; font-weight: bold; font-family: "微软雅黑" } .zuozhu{ color: blue; } </style> </head> <body> <p>李大嘴</p> <p>佟掌柜</p> <p>白展堂</p> <!-- 声明类 --> <div class="mingren">鸣人</div> <div class="zuozhu">佐助</div> </body> </html> 多类名选择器 1、混合搭配

十、CSS

随声附和 提交于 2019-11-27 23:28:35
---恢复内容开始--- 作用:结构和样式相分离,用样式控制结构,是页面更加好看 简介:CSS通常称为层叠样式表,主要用于设置HTML页面的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边距等)以及版面的布局等外观显示样式。 CSS以HTML为基础,提供了丰富的功能、如字体、颜色、背景的控制及整体排版等 一、CSS选择器 1.语法 选择器 {   属性1:属性值1;   属性2:属性值2; } F12打开开发者调试工具,ctrl +/- 可以放大/缩小视图 多类名之间用空格隔开,顺序与css样式表中顺序有关 2.选择器分类 伪类选择器也是选择器,用于向某些选择器添加特殊的效果,比如给链接添加特殊效果,也可以选择,第一个,第n个元素 l类选择器是一个点,伪类选择器是2个点 2.1类选择器:.red {color:red} 2.2伪类选择器: a:hover {color:purple} :hover 是链接伪类选择器 2.2.1链接伪类选择器 2.2.2结构(位置)伪类选择器 :first-child 选取属于其父元素的首个子元素的指定选择器 :first-child 选取属于其父元素的最后一个子元素的指定选择器 :nth-child(n) 匹配属于其父元素的第n个子元素,even是偶数,odd是奇数,n从0开始 :nth-last-child(n)

CSS组合选择器

扶醉桌前 提交于 2019-11-27 21:27:20
组合选择器 1、后代选择器 #1、作用:找到指定标签的所有后代(儿子,孙子,重孙子、、、)标签,设置属性 #2、格式: 标签名1 xxx { 属性:值; } #3、注意: 1、后代选择器必须用空格隔开 2、后代不仅仅是儿子,也包括孙子、重孙子 3、后代选择器不仅仅可以使用标签名称,还可以使用其他选择器比如id或class 4、后代选择器可以通过空格一直延续下去 示例 2、子元素选择器 #1、作用:找到制定标签的所有特定的直接子元素,然后设置属性 #2、格式: 标签名1>标签名2 { 属性:值; } 先找到名称叫做"标签名称1"的标签,然后在这个标签中查找所有直接子元素名称叫做"标签名称2"的元素 #3、注意: 1、子元素选择器之间需要用>符号链接,并且不能有空格 比如div >p会找div标签的所有后代标签,标签名为">p" 2、子元素选择器只会查找儿子,不会查找其他嵌套的标签 3、子元素选择器不仅可以用标签名称,还可以使用其他选择器,比如id或class 4、子元素选择器可以通过>符号一直延续下去 示例 3、毗邻选择器,CSS2推出(又称相邻兄弟选择器) #1、作用:选定紧跟其后的那个标签 #2、格式 选择器1+选择器2 { 属性:值; } #3、注意点: 1、毗邻选择器必须通过+号链接 2、毗邻选择器只能选中紧跟其后的那个标签,不能选中被隔开的标签 4、弟弟选择器,CSS3推出

web前端入门到实战:CSS的一些新东西

别等时光非礼了梦想. 提交于 2019-11-27 15:42:33
很多同学估计都有类似的问题,怎么才能第一时间获取到有关于CSS相关的新特性呢?有关于这个问题,并不是一个很复杂的问题 如何理解规范的形成 任何一个规范的形成都是一个漫长的过程,到目前为止, W3C 对Web标准制定的 Web标准和草案 接近 1161 个,包括 WD 、 CR 、 PR 、 PER 、 REC 、 ret 和 Note 这 7 种: WD (Working Draft 工作草案) :不稳定也不完整。目的是创建当前规范的一个快照,也能征求 W3C 和公众的意见 CR (Candidate Recommendation 候选推荐标准) :所有的已知 issues 都被解决了,向 implementor 征集实现;AC 正式审查,可能有三种结果:成为标准、返回工作组继续完善、废弃(此阶段的很有可能成为标准,且如有改动,则需给出改动原因) PR (Proposed Recommendation 提案推荐标准) :从 CR 到 PR 需要全面的 test suite 和实现报告,以证明每个特性都在至少2款浏览器里实现了,意味着其质量足以成为REC。此时,W3C 成员再最后一次 review 下规范(一般不会有实质性的改动;若有,则只能再发布一个新的WD或CR) PER (Proposed Edited Recommendation 已修订的提案推荐标准) REC

CSS的选择器

徘徊边缘 提交于 2019-11-27 12:02:10
1.基础的选择器 选择器 含义 示例 * 通用元素选择器,匹配任何元素 * { margin:0; padding:0; } E 标签选择器,匹配所有使用E标签的元素 p { font-size:2em; } .info和E.info class选择器,匹配所有class属性中包含info的元素 .info { background:#ff0; } p.info { background:#ff0; } #info和E#info id选择器,匹配所有id属性等于footer的元素 #info { background:#ff0; } p#info { background:#ff0; } 2.组合选择器 选择器 含义 示例 E,F 多元素选择器,同时匹配所有E元素或F元素,E和F之间用逗号分隔 Div,p { color:#f00; } E F 后代元素选择器,匹配所有属于E元素后代的F元素,E和F之间用空格分隔 #nav li { display:inline; } li a { font-weight:bold; } E > F 子元素选择器,匹配所有E元素的子元素F div > strong { color:#f00; } E + F 毗邻元素选择器,匹配所有紧随E元素之后的同级元素F p + p { color:#f00; } 3.CSS 2.1 属性选择器 选择器 含义

CSS学习笔记2:选择器

爷,独闯天下 提交于 2019-11-27 11:05:19
标签选择器   1、选择要给样式的目标标签,所以叫做 标签选择器 ,也叫 元素选择器 。 2、给所有相同标签,给相同样式。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS注释</title> <style type="text/css"> /*标签选择器:标签作为选择器*/ p{ color: red; } div{ color: purple; } </style> </head> <body> <p>李大嘴</p> <p>佟掌柜</p> <p>白展堂</p> <div>鸣人</div> <div>佐助</div> </body> </html> 类选择器 1、html声明,CSS调用 2、格式: .类名{属性:值;属性:值} 3、类名尽量不使用下划线(用中横线代替),纯数字,中文,具体见命名规范。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS注释</title> <style type="text/css"> /*标签选择器:标签作为选择器*/ p{ color: red; } div{ color: purple; } /*类选择器:html声明,CSS调用*/