CSS入门

发表于 | 分类于 |

CSS 历史

CSS 层叠样式表 Cascading Style Sheets
1994 年，哈肯提出 CSS 的最初建议，1997 年，W3C 开始接管 CSS，1998 年，CSS2.1 被发表出来，修改了 2.0 中基本不被支持的内容，增加了一些已有的浏览器的扩展内容

我们不管 IE8 !!!

CSS3 从 2011 年开始被分为多模块单独分级

  • CSS 选择器 Level3
  • CSS 媒体查询 Level3
  • CSS Color Level3
  • …

google 上搜索 css spec

周边工具
LESS CSS: 一种简化的功能更多的 CSS 语言
SASS: 一种简化的功能更多的 CSS 语言
PostCSS: 一种 CSS 处理程序

添加 CSS

  • style 属性，内联样式，就是将样式写在标签上
  • 直接在 head 标签包起来的区域中写 style 标签

  • 新建一个外部 .css 文件，在这个文件中写 CSS 代码，然后在主 html 中引入这个 .css 文件，引用的方式为，就是加入 css link:

    <link rel="stylesheet" href="./a.css">

  • 在 CSS 中引入另一个 CSS，具体操作就是在需要被引入的 CSS 文件中加入(这种方法比较少用)

    @import url(./b.css);

CSS 优先级

从上到下，优先级递减

  1. 内联样式(html 标签元素中的 style 属性)
  2. id 选择器(#xxx)
  3. 类选择器(.xxx), 属性选择器([type=”xxx”]), 伪类(:hover)
  4. 类型选择器(div),伪元素(::after)

对优先级没有影响的

  • 通配符(*)
  • 关系选择符(+ > ~ ‘ ‘)
  • 否定伪类(:not())

对优先级有影响的

  • 在 :not() 内部声明的选择器会影响优先级

注意，每种选择器的优先级都是通过计算其 特殊性 来得到一个 特殊性值 ,然后通过比较这个值来排优先级

那么考虑到一种极端情况是，假如计算出来的这个 特殊性值 都一样怎么办?

  • 看它有没有 !important,若有，则它直接变成最高优先级(但是不到万不得已不要使用，因为这回破坏样式表中原来优先级规则，会加大调试难度)
  • 看来源排序，一般这种排序的顺序为: 创作人员的样式 > 读者人员的样式 > 用户代理的默认样式
  • 若以上比较还相同，则看样式的配置顺序了，越靠后的优先级越高(因为会覆盖)

CSS 选择器

这里列举一下比较常用的

基本选择器

  1. 通配选择器
    也就是 *,选中所有的元素

  2. 类选择器
    也就是选择标签中含有该类名的元素, 比如有这样的标签 <div class="xxx"></div> , 那么选中它就可以写成

    .xxx {
        /* css 代码 */
    }

  3. 元素选择器
    也就是标签名,类似于 main, div, 一般最好指定它的上一层父级使用,也可以结合其他选择器使用

    main > div {
        /* css 代码 */
    }
    main > div.xxx {
        /* css 代码 */
    }

  4. id 选择器
    也就是选择标签中含有该 id 名的元素，注意这里一个页面中不能有重复的 id 名, 比如有这样的标签 <div id="xxx"></div>

    #xxx {
        /* css 代码 */
    }

  5. 群组选择器
    也叫 “大家都一样选择器”,假如想要选择的多个类名所对应的标签都具有相同的样式, 可以这么写

    .xxx, .yyy, .zzz {
        /* css 代码 */
    }

注意中间是用 逗号 隔开的

层次选择器

两种常用的如 xxx yyy, xxx>yyy

  1. xxx yyy
    选择 xxx 元素中包含的 所有的 yyy 元素
  2. xxx>yyy
    选择 xxx 元素中 第一层 中包含的 所有的 yyy 元素(提示: DOM 的结构是一颗树的结构)

两种不常用的如 xxx+yyy, xxx~yyy

  1. xxx+yyy
    同一级下,选择 xxx 元素旁边 第一个 yyy 元素(提示: 想像一颗 DOM 树，从左往右寻找)
  2. xxx~yyy
    同一级下,选择 xxx 元素旁边 所有的 yyy 元素(提示: 想像一颗 DOM 树，从左往右寻找)

点击这儿 demo 链接

属性选择器

  • [attr]: 只要是具有 attr 属性的元素，我全都要!!
  • xxx[attr]: 选择具有 attr 属性的 xxx 元素
  • xxx[attr=value]: 选择具有 attr 属性同时该属性值为 value 的 xxx 元素
  • xxx[attr|=value]: 选择具有 attr 属性该属性值 可以为 value 也可以为 value- 开头 的 xxx 元素

  • xxx[attr~=value]: 选择具有 attr 属性同时该属性值中 有多个空格 (就像一句话,该 value 为这句话中的某个单词) 的 xxx 元素

    举个栗子: <a href="http://www.baidu.com" title="xxx yyy zzz"></a>
    则对应 a[title~="xxx"] 或 a[title~="yyy"] 或 a[title~="zzz"]

  • xxx[attr*=value]: 选择具有 attr 属性同时该属性值 任意位置都有value 的 xxx 元素

  • xxx[attr^=value]: 选择具有 attr 属性同时该属性值为 以 value 开头的任何字符串 的 xxx 元素
  • xxx[attr$=value]: 选择具有 attr 属性同时该属性值为 以 value 结尾的任何字符串 的 xxx 元素

伪类选择器

什么是伪类选择器？了解这个之前，应该了解下什么是伪类？mdn 的解释就是 “CSS 伪类是添加到选择器的关键字，指定要选择的元素的特殊状态。例如，:hover 可被用于在用户将鼠标悬停在按钮上时改变按钮的颜色”

那么所谓的伪类选择器就是在这个 “:hover” 之前加了一个基本选择器，比如 “button:hover”

主要有 动态伪类选择器，目标伪类选择器，元素状态伪类选择器，结构伪类选择器，否定伪类选择器

动态伪类选择器

选择元素为 xxx 的 a 标签中的超链接时:
xxx:link: 表示该超链接没有被访问过
xxx:visited: 表示该超链接已经被访问过
选择元素为 xxx 时，不管有没有超链接:
xxx:hover: 表示该元素被鼠标悬停选中
xxx:active: 表示该元素被激活
xxx:focus: 表示该元素获得焦点

注意对该伪类的设置要遵循 link>visited>hover>active 的规则(若你设置中出现了 link 或 visited),即你应该这样写代码

xxx:link {/* css 代码*/}
xxx:visited {/* css 代码*/}
xxx:active {/* css 代码*/}
xxx:hover {/* css 代码*/}

因为下面的 css 代码优先级会高一些，若调换顺序，则 css 代码不会生效,这应当是一个常识问题

目标伪类选择器

经常这样使用

xxx:target {/* css 代码 */}

或者

xxx:target yyy {/* css 代码 */}

这样做有什么用呢，一般用来 选中 xxx 元素中的 a 标签中的 href 指向的锚点
点击这儿demo 链接

元素状态伪类选择器

一般用在表单元素上

  • xxx:checked: 选择选中的复选或单选按钮
  • xxx:enabled: 选择所有启用的表单元素
  • xxx:disabled: 选择所有禁用的表单元素

一般是这样用

input:checked {/* css 代码 */}
input:enabled {/* css 代码 */}
input:disabled {/* css 代码 */}
input:[type="text"] {/* css 代码 */}

结构伪类选择器

假设有很多 xxx 元素排列在一起, 如 xxx xxx xxx xxx xxx xxx

  • xxx:first-child : 这个指这么多 xxx 元素的 第一个
  • xxx:last-child : 这个指这么多 xxx 元素的 最后一个
  • xxx:nth-child(n) : 这个指这么多 xxx 元素的 第 n 个
  • xxx:nth-last-child(n) : 这个指这么多 xxx 元素的 倒数第 n 个
  • xxx:first-of-type: 这个指这么多 xxx 元素的 指定的第一个
  • xxx:last-of-type: 这个指这么多 xxx 元素的 指定的最后一个
  • xxx:nth-of-type(n) : 这个指这么多 xxx 元素的 指定的第 n 个
  • xxx:empty: 就是选择没有 xxx 元素的的元素(文本节点都不能包含)

其中，若 xxx 元素是这样排列的 xxx xxx yyy xxx yyy xxx xxx
那么 xxx:nth-child(3) 并不会选中该元素，如上第三个是 yyy，而 xxx:nth-of-type(3) 就可以，这就说明一点，前者匹配的规则要比后者严格

一些小技巧:

  • 无论是使用 nth-child(n) 或是使用 nth-type-of(n),其中的 n 都可以这么写(若提前知道了一共有多少个排列的元素)
n * 元素个数
n + 元素个数
-n * 元素个数
n * 元素个数 + 一个数

以上 n 的取值范围为 0,1,2,…

  • 想要取奇数元素或者偶数元素???可以这么写
nth-child(odd) /*取奇数*/
nth-child(even) /*取偶数*/

否定伪类选择器

xxx:not(yyy): 表示选择除了 yyy 元素之外的 xxx 元素,可以这么用

/* 选中不是 type 为 submit 的 input 元素*/
input:not([type=submit]) {/* css 代码 */}

/* 选中不是 hover 状态的 div 元素 */
div:not(hover) {/* css 代码 */}

伪元素

什么是伪元素？？其实就是为了和伪类分开(伪类用的符号是 :),伪元素用的符号就是 ::
一般经常使用到的就是 ::before 和 ::after 了,作用就是为当前元素插入其他内容,比如如下的用法

a[href^=http]::after{
    content:"(" attr(href) ")";
}

若 a 标签是这么写的 <a href="http://www.baidu.com">baidu</a>, 那么它最终会显示成 baidu(http://www.baidu.com)

这里需要强调一点的就是，::after/::before 生成的内容不会成为 DOM 的一部分,此时若我们想粘贴复制这个地址当然是不行的

想其他的伪类还有 ::first-letter, ::first-line 之类的, mdn 上都都有就不多研究了

CSS 学习资源

  1. google: 关键字 + MDN
  2. CSS Tricks
  3. google: 阮一峰 CSS
  4. 张鑫旭的 240 多篇关于 CSS 的博客
  5. Codrops 炫酷 CSS 效果
  6. CSS 揭秘这本书
  7. CSS 2.1 中文 spec

举例，可以使用 google 搜索 center css tricks 查看这个居中的 CSS 方法

参考链接

优先级
其他参考