CSS的引入方式和复合选择器
CSS的引入方式
样式表 | 优点 | 缺点 | 范围 |
---|---|---|---|
行内样式表 | 书写方便 | 结构样式混写 | 控制一个标签 |
内部样式表 | 部分结构和样式相分离 | 没有彻底 | 控制一个页面 |
外部样式表 | 完全实现结构和样式分离 | 需要引入 | 控制多个页面 |
<link rel="stylesheet" href="a.css">
<!-- href="路径" -->
emmet 语法
快速生成HTML标签
- 生成多个标签:div*****10
- 有父子级关系的标签:ul > li
- 兄弟关系:div**+**p
- 带有类名或者标签名的:div**.**pink(class名)div#gray(id名)
- 生成的div的类名是有顺序的:p.demo**$***5
- 生成的标签默认显示几个文字:div{这里写文字}
注意:$是自增的符号
快速生成CSS样式
- width:100px; w100
- 可以用首字母快速生成样式
复合选择器
- 后代选择器
可以选择父元素里的子元素
ul li{
width: 300px;
}
注意:
- 元素一和元素二必须用空格隔开
- 只要有一层以上的关系就可以用,就像:
<ul>
<li>
<a href="#">aaa</a>
</li>
</ul>
也可以通过后代选择器对“a”标签进行选择(ul li a)
- 子选择器
只选择父元素最近一级的子元素
元素1>元素2{样式声明}
注意:
元素1和元素2用大于号隔开
元素1是父级,元素2是子级,最终选择元素2
并集选择器
可以将多个标签用同一样式
元素1,元素2{样式声明}
注意:
- 用逗号来实现
- 任何选择器都可以作为并集选择器的一部分
- 最后一个元素不需要加逗号
div,
p,
.pig li{样式声明}
- 伪类选择器
链接伪类选择器
给某些选择器添加特殊效果,用“ : ”来实现
属性 | 定义 |
---|---|
a:link |
选择所有未被访问的链接 |
a:visited |
选择所有已经被访问过的链接 |
a:hover |
选择鼠标指针位于其上的链接 |
a:active |
选择活动链接(鼠标按下未弹起) |
这个好好玩!
注意:按照 lvha的顺序!!!
focus伪类选择器
用于选取获得焦点的表单元素input:focus{样式声明}
选择器 | 作用 | 用法 |
---|---|---|
后代选择器 | 用来选择后代元素 | 符号是空格 .nav a |
子代选择器 | 选择最近一级元素 | 符号是大于号 .nav>p |
并集选择器 | 选择某些相同样式的元素 | 符号是逗号 .nav,.header |
链接伪类选择器 | 选择不同状态的链接 | a:hover{} |
:focus 选择器 | 选择获得光标的表单 | input:focus |
CSS的引入方式和复合选择器的更多相关文章
- python 全栈开发,Day46(列表标签,表格标签,表单标签,css的引入方式,css选择器)
一.列表标签 列表标签分为三种. 1.无序列表<ul>,无序列表中的每一项是<li> 英文单词解释如下: ul:unordered list,“无序列表”的意思. li:lis ...
- 11 CSS的三种引入方式和基本选择器
<!-- 整体说明: 1.CSS的三种引入方式 (1)行内样式 (2)内接样式 (3)外接样式 2.CSS的基本选择器 (1)id选择器 (引用方式:#id) (2)标签选择器(引用方式:标签名 ...
- 前端1-----CSS层叠样式表了解,css的引入方式,三大选择器(标签,类,id),高级选择器
前端1-----CSS层叠样式表了解,css的引入方式,三大选择器(标签,类,id),高级选择器 一丶CSS简介 叠样式表(英文全称:Cascading Style Sheets)是一种用来表现 ...
- Day46(列表标签,表格标签,表单标签,css的引入方式,css选择器)
一.列表标签 列表标签分为三种. 1.无序列表<ul>,无序列表中的每一项是<li> 英文单词解释如下: ul:unordered list,“无序列表”的意思. li:lis ...
- 前端(二)—— CSS的引入方式、长度与颜色单位、常用样式、选择器
CSS的引入方式.长度与颜色单位.常用样式.选择器 一.CSS的三种引入方式 1.行间式 <!doctype html> <html> <head> <met ...
- CSS的引入方式和样式
CSS的引入方式和样式 一.样式 行内样式 内接样式 外接样式(1.链接式 2.导入式) <!--行内样式--> <div> <p style="color: ...
- CSS的引入方式
再用HTML编写的文本中,有是没能达到我们想要的效果,此时此刻我们可以用过引用CSS来控制!这不仅使得效果好而且代码层次清晰.CSS的引入方式可以分为四类: 1.链入外部样式表,就是把样式表保存为一个 ...
- js介绍,js三种引入方式,js选择器,js四种调试方式,js操作页面文档DOM(修改文本,修改css样式,修改属性)
js介绍 js运行编写在浏览器上的脚本语言(外挂,具有逻辑性) 脚本语言:运行在浏览器上的独立的代码块(具有逻辑性) 操作BOM 浏览器对象盒子 操作DOM 文本对象 js三种引入方式 (1)行间式: ...
- web@css引入方式,基本选择器,3大特性,高效运行
4.高效的css 所谓高效就是让浏览器查找更少的元素标签来确定匹配的style元素. 1.不要再ID选择器前使用标签名 解释:ID选择是唯一的,加上标签名相当于画蛇添足了,没必 ...
随机推荐
- fiddler 手机抓包(含https) 完整流程
第一部分:下载并安装fiddler 一.使用任一浏览器搜索[fiddler下载安装],并下载fiddler 安装包. 二.fiddler安装包下载成功后,将下载的fiddler压缩包解压到自定义文件夹 ...
- editorconfig、eslint、prettier三者的区别、介绍及使用
每次搭建新项目都少不了这些工具,但时间一久就忘记了,下次搭新项目时又要四处查官方文档,因此特此记录,主要内容是对这三个工具的理解,以及具体使用方式 editorconfig 理解 先看官网的定义: E ...
- 基于excel的接口自动化测试框架:支持参数化、关联等
1. 框架结构说明 2. 框架代码实现 action 包 case_action.py business_process 包 main_process.py util 包 global_var.py ...
- junit+maven单元测试
一.概念 junit是一个专门测试的框架 集合maven进行单元测试,可批量测试类中的大量方法是否符合预期 二.作用:单元测试:测试的内容是类中的方法,每一个方法都是独立测试的.方法是测试的基本单位. ...
- 1083 List Grades
Given a list of N student records with name, ID and grade. You are supposed to sort the records with ...
- 03 Django web服务开发 - URL路由
Django中的APP -Django中的一个APP就是一个应用的意思 -项目可以包含多个APP(多个应用) -一个项目对应一个网站(生活服务网站) 一个APP队形网站的一个应用(二手交易,家政服务) ...
- CVE-2017-11826:Office Open XML 标签嵌套解析混淆漏洞
\x01 前言 CVE-2017-11826 据说是 360 在 2017 年 9 月底发现的一个关于 XML 格式解析的一个漏洞,之后微软在 10 月份发布了关于 CVE-2017-11826 的补 ...
- Windows PE导出表编程2(重组导出表函数地址)
本次要做的尝试是通过修改导出表的函数地址,实现程序功能的更改,实现这个最大的限制就是堆栈平衡问题. 先写一个DLL和EXE为了测试. DLL代码如下: 这样的话有两个导出函数(我们假设是一个密码验证之 ...
- MAC地址格式
随机配置一个mac地址,发现有的会报出Cannot assign requested address. 错误码是EADDRNOTAVAIL. 检查不是组播地址也不是全0地址. 组播地址就是第一个字节最 ...
- Day006 方法的定义和调用
方法的定义 Java的方法类似于其他语言的函数,是一段用来完成特定功能的代码片段,一般情况下,定义一个方法包含以下语法: 方法包含一个方法头和一个方法体.下面是一个方法的所有部分: 修饰符:修饰符,这 ...