html5--6-4 CSS选择器

实例

学习要点

    掌握常用的CSS选择器

  • 了解不太常用的CSS选择器

什么是选择器

当我们定义一条样式时候，这条样式会作用于网页当中的某些元素，所谓选择器就是样式作用的对象.

插入样式的三种方法

    1. 内联样式表（行内）
    2. 内部样式表（style中）
    3. 外部样式表
      • 创建一个外部样式表
      • 在head中使用link元素插入样式表

CSS语法

  • 单一元素的多个属性之间用分号隔开；若只有一个可以省略
  • 多个元素之间用逗号隔开
  • 如果值为若干单词，则要给值加引号;除了这种情况外其他时候不可以加引号
  • css代码的注释
  • 样式的优先顺序:
    • 设计者设计的样式>浏览器用户自定义的样式>浏览器自设的样式
    • 强制优先级：！important
    1. 行内（内联）样式
    2. 内部样式：style中的样式
    3. 外部样式
  • 层叠、继承、冲突
    • 外观样式--比如字体、颜色可以继承;而布局有关的样式不可以继承，比如边框等
  • 可以在同一个 HTML 文档内部引用多个外部样式表。

CSS选择器

常用选择器

    1. 通用选择器：“*”；文档中所有的内容都会加上选择器
    2. 元素选择器；比如p，比如div
    3. id选择器:前面有一个 # 号
    4. 类选择器:前面加符号 .
      • 给一个元素加上多个类名
      • 指定某一特定的类

html5--6-4 CSS选择器的更多相关文章

  1. 第八十六节，html5+css3pc端固定布局,网站结构,CSS选择器,完成导航

    html5+css3pc端固定布局,网站结构,CSS选择器,完成导航 页面采用1280的最低宽度设计,去掉滚动条为1263像素. 项目是PC端的固定布局,会采用像素(px)单位. 网站结构语义 在没有 ...

  2. HTML5 -入门 (---css样式-------------（css基础与css选择器）---------------------—）

    ---恢复内容开始--- 一css基础入门与css选择器 CSS英文全拼:cascading style sheet 层叠样式表. 在html中使用:要在head中写style标签,所有样式放在sty ...

  3. IT兄弟连 HTML5教程 CSS3揭秘 CSS选择器1

    要使用CSS对HTML页面中的元素实现一对一.一对多或者多对一的控制,就需要用到CSS选择器.选择器是CSS3中一个重要的内容,使用它可以大幅度地提高开发人员书写或修改样式表的效率.在大型网站中,样式 ...

  4. HTML5新标签使用及CSS选择器(伪类)

    这些标签能够让搜索引擎更直接的解析页面内容. <header></header>语义:文档或者页面的头部 <nav></nav>语义:导航这两者不是组合 ...

  5. 你真的精通 CSS 了？来挑战一下 CSS 选择器测验吧

    CSS 选择器赋予 CSS 强大的 HTML 元素匹配功能.作为前端开发人员必须要掌握的一部分,可能基本的大家都知道.但是你真的精通 CSS 了吗?挑战一下 CSS 选择器测验就知道. 您可能感兴趣的 ...

  6. 第 13 章 CSS 选择器[上]

    学习要点: 1.选择器总汇 2.基本选择器 3.复合选择器 4.伪元素选择器 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 选择器,通过选择器定位到想要设置样式的元素.目前 CSS 选择器的 ...

  7. 30类css选择器

    大概大家都知道id,class以及descendant选择器,并且整体都在使用它们,那么你正在错误拥有更大级别的灵活性的选择方式.这篇文章里面提到的大部分选择器都是在CSS3标准下的,所以它们只能在相 ...

  8. (四)CSS选择器和派生选择器

    CSS派生选择器允许你根据文档的上下文关系来确定某个标签的样式.在学习派生之前,先来了解基本的CSS选择器.前面的文章中提到过下图,选择器的位置如下所示: CSS选择器 分为几种基本选择器:元素选择器 ...

  9. 这 30 类 CSS 选择器，你必须理解！

    CSS 选择器是一种模式,用于选择需要添加样式的元素.平时使用最多也是最简单的就是 #id..class 和标签选择器,在 CSS 中还有很多更加强大更加灵活的选择方式,尤其是在 CSS3 中,增加了 ...

  10. 第七十节，css选择器

    css选择器 学习要点: 1.选择器总汇 2.基本选择器 3.复合选择器 4.伪元素选择器 本章主要探讨 HTML5中  CSS选择器,通过选择器定位到想要设置样式的元素.目前CSS选择器的版本已经升 ...

随机推荐

  1. Gdb学习笔记1

    其实,从很早就开始接触gdb程序,gdb调试程序伴我成长,现在对其用法记录以下: 当程序的运行结果和预期结果不一致,或者程序出现运行错误时,gdb就可以派上大用处了.调试的基本过程是:  -> ...

  2. 使用selenium抓取淘宝的商品信息

    淘宝的页面大量使用了js加载数据,所以采用selenium来进行爬取更为简单,selenum作为一个测试工具,主要配合无窗口浏览器phantomjs来使用. import re from seleni ...

  3. 《从零开始搭建游戏服务器》MySQL安装配置

    一.下载资源: 到MySQL官网下载免安装版的mysql包,或者直接点击此链接下载:mysql-5.7.19-winx64.zip 二.解压配置: 将上面下载的安装包解压到一个本地目录下,在得到的my ...

  4. IOC基本理解

    什么是IOC? IOC全称为控制反转(Inversion Of Control),别名依赖注入(Dependency Injection). 控制反转即指我们获取依赖的方式发生了反转. 假设存在如下情 ...

  5. #ifdef #endif #if #endif

    c语言里所有以#开头的都是预编译指令,就是在正式编译之前,让编译器做一些预处理的工作. #ifdef DEBUG printf("variable x has value = %d\n&qu ...

  6. raspi扩展板

    1.Ciseco Slice 2.Adafruit(Plate) 3.Fen的Gertboard:(详见F盘下的使用手册) 12个缓冲输入输出端口 LED状态指示灯 3个按钮开关 6个开路集成电极 1 ...

  7. 深入爬虫书scrapy 之json内容没有写入文本

    settings.py设置 ITEM_PIPELINES = { 'tets.pipelines.TetsPipeline': 300, } spider代码 xpath后缀添加.extract() ...

  8. DDCTF2019逆向分析前俩题WriteUP

    DDCTF2019 笔者做了前俩道题.冷不丁过去一个月了.现在在此做一下WriteUp:题目链接: 1:题目1 2:题目2 reverse1:writeup: 1.程序打开后如下所示 2.查壳结果为U ...

  9. mysql explain 的type解释

    原文:http://blog.csdn.net/github_26672553/article/details/52058782 Explain命令 用于分析sql语句的执行情况和成本预估 今天我们重 ...

  10. 转：Python yield 使用浅析　from IBM Developer

    评注:没有看懂. 转: https://www.ibm.com/developerworks/cn/opensource/os-cn-python-yield/ Python yield 使用浅析 初 ...