CSS day01

作者: 秒速18厘米 | 来源:发表于2017-11-16 17:48 被阅读0次

知道自己有多差劲了吗,赶紧努力吧。

起始进度:

百度前端 Mozilla

1.层叠和继承

对于层叠来说,共有三种主要的样式来源:

  • 浏览器对HTML定义的默认样式。
  • 用户定义的样式。
  • 开发者定义的样式,可以有三种形式:
    • 定义在外部文件(外链样式):本教程中案例主要是通过这种形式定义样式。
    • 在页面的头部定义(内联样式):通过这种形式定义的样式只在本页面内生效。
    • 定义在特定的元素身上(行内样式):这种形式多用于测试,可维护性较差。

优先级,从高到低依次为:网页开发者定义的样式、网页阅读者定义的样式、浏览器的默认样式。对继承的元素来说,子元素自身的样式优先级高于从父级继承来的样式。

另外,CSS提供了一个 !important 关键字,用户可以通过使用这个关键字使自己定义的样式覆盖掉开发者定义的样式。这就意味着,作为开发者,你很难准确的预知页面最终在用户电脑上的显示效果。

2.选择器

示例代码

<p id="principal" class="key">

  • Type selector

p {color: blue;}

  • ID selector (唯一,区分大小写)

#principal {color: blue;}

  • Class selector

.key {color: blue;}

伪类选择器(Pseudo-classes selectors)

CSS伪类(pseudo-class)是加在选择器后面的用来指定元素状态的关键字。比如,:hover会在鼠标悬停在选中元素上时应用相应的样式。

伪类和伪元素(pseudo-elements)不仅可以让你为符合某种文档树结构的元素指定样式,还可以为符合某些外部条件的元素指定样式:浏览历史(比如是否访问过 (:visited), 内容状态(如:checked), 鼠标位置 (如:hover).

伪类列表

常见的基于关系的选择器

选择器 选择的元素
A E 元素A的任一后代元素E (后代节点指A的子节点,子节点的子节点,以此类推,即A的子子孙孙)
A > E 元素A的任一子元素E(也就是直系后代)
E:first-child 任一是其父母结点的第一个子节点的元素E
B + E 元素B的任一下一个兄弟元素E
B ~ E B元素后面的拥有共同父元素的兄弟元素E

相关文章

  • 第一阶段

    day01­_起源和结构 结构:Xhtml xml 表现:CSS 行为:DOM ECMAScript 以上都属于W...

  • CSS day01

    知道自己有多差劲了吗,赶紧努力吧。 起始进度: 百度前端 Mozilla 1.层叠和继承 对于层叠来说,共有三种...

  • css基础day01

    一、css定义 CSS通常称为CSS样式表或层叠样式表(级联样式表),主要用于设置HTML页面中的文本内容(字体、...

  • day02

    A我学习到了什么? 1温习day01的知识点 2拓展HTML标签的分类 3CSS选择器 B我掌握到了什么 1温习d...

  • jQuery_01

    Day01 简介 百度百科查jQuery 官网 下载地址压缩版非压缩版 中文文档 引用操作 优化原则将CSS文件在...

  • html-css

    目录 Day01标签行元素 Day02表单元素css选择器伪类选择符行内元素块元素表格 Day03文本相关属性列表...

  • HTML&CSS(Day01上午)

    1、HTML&Css简介,学习路径 课件简介章节 2、HTML常用标签 2-1:开发工具(Hbuilder,vsC...

  • 100天iOS数据结构与算法实战 Day01

    100天iOS数据结构与算法实战 Day01 100天iOS数据结构与算法实战 Day01

  • 初级代码

    Day01 class 例子{ public static void main(String[] args){ ...

  • vue-cli新建工程无法启动

    > day01@1.0.0 lint D:\WorkspaceVue\day01 > eslint --ext ....

网友评论

      本文标题:CSS day01

      本文链接:https://www.haomeiwen.com/subject/zxqrvxtx.html