前端第三次培训(css选择器)
内部样式表
内嵌式是将CSS代码集中写在HTML文档的head头部标签中,并且用style标签定义,其基本语法格式如下:
<head>
<style type="text/CSS">
选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
</style>
</head>
语法中,style标签一般位于head标签中title标签之后,也可以把他放在HTML文档的任何地方。
type="text/CSS" 在html5中可以省略, 写上也比较符合规范, 所以这个地方可以写也可以省略。
行内式(内联样式)
内联样式,又有人称行内样式、行间样式、内嵌样式。是通过标签的style属性来设置元素的样式,其基本语法格式如下:
<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>
语法中style是标签的属性,实际上任何HTML标签都拥有style属性,用来设置行内式。其中属性和值的书写规范与CSS样式规则相同,行内式只对其所在的标签及嵌套在其中的子标签起作用。
外部样式表(外链式)
链入式是将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中,通过link标签将外部样式表文件链接到HTML文档中,其基本语法格式如下:
<head>
<link href="CSS文件的路径" rel="stylesheet" />
</head>
注意: link 是个单标签哦!!!
该语法中,link标签需要放在的三个属性head头部标签中,并且必须指定link标签,具体如下:
href:定义所链接外部样式表文件的URL,可以是相对路径,也可以是绝对路径。
type:定义所链接文档的类型,在这里需要指定为“text/CSS”,表示链接的外部文件为CSS样式表。
rel:定义当前文档与被链接文档之间的关系,在这里需要指定为“stylesheet”,表示被链接的文档是一个样式表文件。
类选择器
类选择器使用“.”(英文点号)进行标识,后面紧跟类名,其基本语
法格式如下:
.类名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
标签调用的时候用 class=“类名” 即可。
类选择器最大的优势是可以为元素对象定义单独或相同的样式。 可以选择一个或者多个标签
小技巧:
1.长名称或词组可以使用中横线来为选择器命名。
2.不建议使用“_”下划线来命名CSS选择器。
输入的时候少按一个shift键; 浏览器兼容问题 (比如使用_tips的选择器命名,在IE6是无效的) 能良好区分JavaScript变量命名(JS变量命名是用“_”)
3.不要纯数字、中文等命名, 尽量使用英文字母来表示。
命名规范: 见附件(Web前端开发规范手册.doc)
命名是我们通俗约定的,但是没有规定必须用这些常用的命名。
id选择器
id选择器使用“#”进行标识,后面紧跟id名,其基本语法格式如下:
#id名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
该语法中,id名即为HTML元素的id属性值,大多数HTML元素都可以定义id属性,元素的id值是唯一的,只能对应于文档中某一个具体的元素。
用法基本和类选择器相同。
id选择器和类选择器区别
W3C标准规定,在同一个页面内,不允许有相同名字的id对象出现,但是允许相同名字的class。
类选择器(class) 好比人的名字, 是可以多次重复使用的, 比如 张伟 王伟 李伟 李娜
id选择器 好比人的身份证号码, 全中国是唯一的, 不得重复。 只能使用一次。
id选择器和类选择器最大的不同在于 使用次数上。
前端第三次培训(css选择器)相关推荐
- HTML 前端学习(3)—— CSS 选择器
HTML 前端学习(3)-- CSS 选择器 CSS 注释 CSS 语法结构 CSS 三种引入方式 行内式 link 引入 style CSS 基础选择器 id 选择器 类选择器 元素(标签)选择器 ...
- 保安日记:前端学习第三篇之CSS选择器
前端第三篇 Emmet语法 快速生成HTML标签 快速生成CSS样式 1.比如w200按tab 可以生成width: 200px; 2.比如lh26按tab可以生成line-height:26px; ...
- web前端入门到实战:css选择器四大类:基本、组合、属性、伪类
什么是选择器?选择器的作用是通过它可以找到元素,把css样式传递给元素!css选择器主要分为:基本选择器.属性选择器.组合选择器与伪类选择器四个大类! css基本选择器 基本选择器又分为:通配符.标签 ...
- web前端【第三篇】CSS选择器
一.css概述 CSS是Cascading Style Sheets的简称,中文称为层叠样式表,对html标签的渲染和布局 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. 例如 二.c ...
- [css选择器]总结:IE6不支持的CSS选择符
转载地址:https://www.wenjiwu.com/doc/zvsbii.html.此文最后也给出了原文地址,但是我点击过去发现是什么赌博彩票的地址,360也弹出小心的提示,所以这里只给出了我转 ...
- css 查看更多_在Scrapy中如何利用CSS选择器从网页中采集目标数据——详细教程(上篇)...
/前言/ 今天小编给大家介绍Scrapy中另外一种选择器,即大家经常听说的CSS选择器. /CSS基础/ CSS选择器和Xpath选择器的功能是一致的,都是帮助我们去定位网页结构中的某一个具体的元素, ...
- Web前端开发笔记——第三章 CSS语言 第二节 CSS选择器
目录 前言 一.CSS选择器 (一)标签选择器 (二)id选择器 (三)类别选择器 二.针对标签的选择器嵌套 三.集体声明和全局声明 (一)集体声明 (二)全局声明 结语 前言 CSS代码由选择器和一 ...
- 第三阶段:Web前端:01Web(HTML、CSS、JavaScript)
转载自:国彬老师:https://shimo.im/docs/47kgJm9bMdiLO5qV/read 课程介绍:一.二.三 一.Web前端: 学习如何搭建页面,如何美化页面,如何给页面添加动态效果 ...
- 2 - 前端基础--CSS 选择器
引入css方式(重点掌握) 1.行内样式 <div> <p style="color: green">我是一个段落</p></div> ...
最新文章
- 20个非常有用的PHP类库
- Visual Studio “类视图”和“对象浏览器”图标含义
- 使用静态库分享共同的模块
- Python 学习笔记 多进程 multiprocessing
- 前端小知识点(6):听了好多闭包,这次可能最懂
- Go语言入门——Go语言环境搭建
- unity技能框架_如何使用指导框架学习新技能
- django中URL常用配置方法
- mysql从库新增_MySQL新增从库
- 计算机音乐东京不太热,洛天依 - 东京不太热[FLAC格式]
- R语言︱机器学习模型评估方案(以随机森林算法为例)
- 欧拉回路 - 铲雪车 - AcWing 1123
- 电子科技大学计算机学院拟录取,2021年电子科技大学硕士研究生拟录取名单
- Linux下压缩与解压缩
- 经济学原理上中国故事2019尔雅满分答案
- vcs+verdi/Debussy
- ssh允许root账号登陆
- oracle荣誉acd_Oracle函数
- android qq群加群代码,逆向分析某QQ恶意自动邀请加群APK
- twitter账号被冻结如何申诉,已成功解冻(我是第一次被冻结,听闻二次冻结会永久冻结)
热门文章
- C++异常处理 详解
- 工作中如何进行时间管理?
- VC 监视网页中的元素事件
- Linux服务 DNSBIND
- 输入5个同学的3门课程成绩,计算各门课程的总分及平均分
- win7使用U盘重装系统
- error:无法解析的外部符号 “public: __thiscall ···该符号在函数···中被引用”
- [日语二级词汇]动词(3)
- 魔乐科技安卓开发教程----李兴华----07BroadCast广播
- CRC校验(循环冗余校验)