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. manjaro配置攻略

    2021.1.30 更新 1 概述 本文主要讲述了新安装的Manjaro一些常用的配置,包括源.常用软件.快捷键.终端以及一些效率工具的配置. 2 pacman源 首先是pacman源的选择: sud ...

  2. (十四)docker exec 详解

    1. 作用 在运行的容器中执行命令 2. 语法 docker exec [OPTIONS] CONTAINER COMMAND [ARG...] OPTIONS说明: -d :分离模式: 在后台运行 ...

  3. OO博客总结——OO落下帷幕

    OO博客总结--OO落下帷幕 凡此过往,皆为序章. 不知不觉OO课程即将落下帷幕,一路坎坎坷坷磕磕绊绊,可算是要结束了,心里终于松了一口气,也有小小的不甘和遗憾.凡此过往,皆为序章.特殊的线上OO课程 ...

  4. hdu 2841 Visible Trees(容斥)

    原文链接 There are many trees forming a m * n grid, the grid starts from (1,1). Farmer Sherlock is stand ...

  5. php异常及错误信息捕获并记录日志实现方法全解析

    php异常处理 什么是异常? PHP 5 提供了一种新的面向对象的错误处理方法.异常处理用于在指定的错误(异常)情况发生时改变脚本的正常流程.这种情况称为异常. 当异常被触发时,通常会发生: 当前代码 ...

  6. jumpserver2

    测试环境 CPU: 64位双核处理器 内存: 4G DDR3 数据库:mysql 版本大于等于 5.6 mariadb 版本大于等于 5.5.6 环境 系统: CentOS 7 IP: 192.168 ...

  7. 我为Dexposed续一秒——论ART上运行时 Method AOP实现

    转载于:http://weishu.me/2017/11/23/dexposed-on-art/ 两年前阿里开源了 Dexposed 项目,它能够在Dalvik上无侵入地实现运行时方法拦截,正如其介绍 ...

  8. 简单写个logictic回归

    最近做华为软件精英挑战赛热身赛,给出的demo是使用logistic做的金融风控,比赛要求很严格,如果使用Python 进行训练那么不能使用任何第三方机器学习库,只能使用Python和原生numpy1 ...

  9. Python数模笔记-Sklearn(1) 介绍

    1.SKlearn 是什么 Sklearn(全称 SciKit-Learn),是基于 Python 语言的机器学习工具包. Sklearn 主要用Python编写,建立在 Numpy.Scipy.Pa ...

  10. GDOI2021 游记

    蹭了个名额去参加 \(\text{GDOI}\) \(\text{tg}\),体验了一下大佬的生活/kk (以下试题皆为 \(\text A\) 卷 DAY -1 不知道要复习什么.本来没有机会来参加 ...