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
  • 可以用首字母快速生成样式

复合选择器

  1. 后代选择器

可以选择父元素里的子元素

ul li{
width: 300px;
}

注意:

  1. 元素一和元素二必须用空格隔开
  2. 只要有一层以上的关系就可以用,就像:
<ul>
<li>
<a href="#">aaa</a>
</li>
</ul>

也可以通过后代选择器对“a”标签进行选择(ul li a)

  1. 子选择器

只选择父元素最近一级的子元素

元素1>元素2{样式声明}

注意:

  1. 元素1和元素2用大于号隔开

  2. 元素1是父级,元素2是子级,最终选择元素2

  3. 并集选择器

可以将多个标签用同一样式

元素1,元素2{样式声明}

注意:

  1. 用逗号来实现
  2. 任何选择器都可以作为并集选择器的一部分
  3. 最后一个元素不需要加逗号
div,
p,
.pig li{样式声明}
  1. 伪类选择器

链接伪类选择器

给某些选择器添加特殊效果,用“ : ”来实现

属性 定义
a:link 选择所有未被访问的链接
a:visited 选择所有已经被访问过的链接
a:hover 选择鼠标指针位于其上的链接
a:active 选择活动链接(鼠标按下未弹起)

这个好好玩!

注意:按照 lvha的顺序!!!

focus伪类选择器

用于选取获得焦点的表单元素input:focus{样式声明}

选择器 作用 用法
后代选择器 用来选择后代元素 符号是空格 .nav a
子代选择器 选择最近一级元素 符号是大于号 .nav>p
并集选择器 选择某些相同样式的元素 符号是逗号 .nav,.header
链接伪类选择器 选择不同状态的链接 a:hover{}
:focus 选择器 选择获得光标的表单 input:focus

CSS的引入方式和复合选择器的更多相关文章

  1. python 全栈开发,Day46(列表标签,表格标签,表单标签,css的引入方式,css选择器)

    一.列表标签 列表标签分为三种. 1.无序列表<ul>,无序列表中的每一项是<li> 英文单词解释如下: ul:unordered list,“无序列表”的意思. li:lis ...

  2. 11 CSS的三种引入方式和基本选择器

    <!-- 整体说明: 1.CSS的三种引入方式 (1)行内样式 (2)内接样式 (3)外接样式 2.CSS的基本选择器 (1)id选择器 (引用方式:#id) (2)标签选择器(引用方式:标签名 ...

  3. 前端1-----CSS层叠样式表了解,css的引入方式,三大选择器(标签,类,id),高级选择器

    前端1-----CSS层叠样式表了解,css的引入方式,三大选择器(标签,类,id),高级选择器 一丶CSS简介    叠样式表(英文全称:Cascading Style Sheets)是一种用来表现 ...

  4. Day46(列表标签,表格标签,表单标签,css的引入方式,css选择器)

    一.列表标签 列表标签分为三种. 1.无序列表<ul>,无序列表中的每一项是<li> 英文单词解释如下: ul:unordered list,“无序列表”的意思. li:lis ...

  5. 前端(二)—— CSS的引入方式、长度与颜色单位、常用样式、选择器

    CSS的引入方式.长度与颜色单位.常用样式.选择器 一.CSS的三种引入方式 1.行间式 <!doctype html> <html> <head> <met ...

  6. CSS的引入方式和样式

    CSS的引入方式和样式 一.样式 行内样式 内接样式 外接样式(1.链接式 2.导入式) <!--行内样式--> <div> <p style="color: ...

  7. CSS的引入方式

    再用HTML编写的文本中,有是没能达到我们想要的效果,此时此刻我们可以用过引用CSS来控制!这不仅使得效果好而且代码层次清晰.CSS的引入方式可以分为四类: 1.链入外部样式表,就是把样式表保存为一个 ...

  8. js介绍,js三种引入方式,js选择器,js四种调试方式,js操作页面文档DOM(修改文本,修改css样式,修改属性)

    js介绍 js运行编写在浏览器上的脚本语言(外挂,具有逻辑性) 脚本语言:运行在浏览器上的独立的代码块(具有逻辑性) 操作BOM 浏览器对象盒子 操作DOM 文本对象 js三种引入方式 (1)行间式: ...

  9. web@css引入方式,基本选择器,3大特性,高效运行

    4.高效的css 所谓高效就是让浏览器查找更少的元素标签来确定匹配的style元素.      1.不要再ID选择器前使用标签名        解释:ID选择是唯一的,加上标签名相当于画蛇添足了,没必 ...

随机推荐

  1. fiddler 手机抓包(含https) 完整流程

    第一部分:下载并安装fiddler 一.使用任一浏览器搜索[fiddler下载安装],并下载fiddler 安装包. 二.fiddler安装包下载成功后,将下载的fiddler压缩包解压到自定义文件夹 ...

  2. editorconfig、eslint、prettier三者的区别、介绍及使用

    每次搭建新项目都少不了这些工具,但时间一久就忘记了,下次搭新项目时又要四处查官方文档,因此特此记录,主要内容是对这三个工具的理解,以及具体使用方式 editorconfig 理解 先看官网的定义: E ...

  3. 基于excel的接口自动化测试框架:支持参数化、关联等

    1. 框架结构说明 2. 框架代码实现 action 包  case_action.py business_process 包 main_process.py util 包 global_var.py ...

  4. junit+maven单元测试

    一.概念 junit是一个专门测试的框架 集合maven进行单元测试,可批量测试类中的大量方法是否符合预期 二.作用:单元测试:测试的内容是类中的方法,每一个方法都是独立测试的.方法是测试的基本单位. ...

  5. 1083 List Grades

    Given a list of N student records with name, ID and grade. You are supposed to sort the records with ...

  6. 03 Django web服务开发 - URL路由

    Django中的APP -Django中的一个APP就是一个应用的意思 -项目可以包含多个APP(多个应用) -一个项目对应一个网站(生活服务网站) 一个APP队形网站的一个应用(二手交易,家政服务) ...

  7. CVE-2017-11826:Office Open XML 标签嵌套解析混淆漏洞

    \x01 前言 CVE-2017-11826 据说是 360 在 2017 年 9 月底发现的一个关于 XML 格式解析的一个漏洞,之后微软在 10 月份发布了关于 CVE-2017-11826 的补 ...

  8. Windows PE导出表编程2(重组导出表函数地址)

    本次要做的尝试是通过修改导出表的函数地址,实现程序功能的更改,实现这个最大的限制就是堆栈平衡问题. 先写一个DLL和EXE为了测试. DLL代码如下: 这样的话有两个导出函数(我们假设是一个密码验证之 ...

  9. MAC地址格式

    随机配置一个mac地址,发现有的会报出Cannot assign requested address. 错误码是EADDRNOTAVAIL. 检查不是组播地址也不是全0地址. 组播地址就是第一个字节最 ...

  10. Day006 方法的定义和调用

    方法的定义 Java的方法类似于其他语言的函数,是一段用来完成特定功能的代码片段,一般情况下,定义一个方法包含以下语法: 方法包含一个方法头和一个方法体.下面是一个方法的所有部分: 修饰符:修饰符,这 ...