CSS 介绍（一）

2019-05-28 本文已影响0人走在路上的小二

CSS 概述

CSS 指层叠样式(Cascading Style Sheets)
样式定义如何显示 HTML 元素
样式通常存储在样式表中
把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
外部样式表可以极大的提高工作效率
外部样式表通常存储在 CSS 文件中
多个样式定义可层叠为一

样式解决了一个普遍的问题

HTML 标签原本被设计为用于定义文档内容。通过使用 <h1>、</p>、<table>等标签，HTML 的初衷是表达 "这是标题"、"这是表格"、"这是表格" 之类的信息。同时文档布局由浏览器来完成，而不使用任何的格式化标签。

由于两种主要的浏览器（Netscape 和 Internet Explorer）不断地将新的 HTML 标签和属性（比如字体标签和颜色属性）添加到 HTML 规范中，创建文档内容独立于文档表现层的站点变得越来越困难。

为了解决这个问题，万维网联盟（W3C），这个非营利的标准化联盟，肩负起了 HTML 标准化的使命，并在 HTML 4.0 之外创造出了样式（Style）。

所有的主流浏览器均支持层叠样式表。

样式表极大地提高工作效率

样式表定义如何显示 HTML元素，就像 HTML 3.2的字体标签和颜色属性所起的作用那样。样式通常保存在外部的 .css文件中。通过仅仅编辑一个简单的CSS 文档，外部样式表使你有能力改变站点中所有页面的布局和外观。

由于允许同时控制多重页面的样式和布局，CSS 可以称得上 WEB 设计领域的一个突破。作为网站开发者，你能够为每个 HTML 元素定义样式，并将之应用于你希望的任意多的页面中。如需进行全局的更新，只需简单地改变样式，然后网站中的所有元素均会自动地更新。

多重样式将层叠为一个

样式表允许以多种方式规定样式信息。样式可以规定在单个的 HTML 元素中，在 HTML 页的头元素中，或在一个外部的 CSS 文件中。甚至可以在同一个 HTML 文档内部引用多个外部样式表。

层叠次序

当同一个 HTML 元素被不止一个样式定义时，会使用哪个样式呢？

一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 4 拥有最高的优先权。

1.浏览器缺省设置
2.外部样式表
3.内部样式表（位于 <head> 标签内部）
4.内联样式（在 HTML 元素内部）
因此，内联样式（在 HTML 元素内部）拥有最高的优先权，这意味着它将优先于以下的样式声明：<head> 标签中的样式声明，外部样式表中的样式声明，或者浏览器中的样式声明（缺省值）。

简介介绍完了，接下来进入正题了。先介绍类选择器。

类选择器

包含如下几种：

类选择器
ID选择器
通配符选择器
链接伪类选择器
结构伪类选择器(css3 才有 )
交集选择器
后代选择器
子元素选择器
属性选择器
伪元素选择器
下面通过代码来介绍：

/*类选择器 是可以重复多次使用的，类似于姓名*/
.mingren { /*声明类样式*/
    color: orange;
}
        
/*ID选择器 只允许使用一次，类似于身份证是惟一的*/
#big { /*声明类样式*/
    color: orange;
}

/*通配符选择器 控制所有的标签，实际开发很少很少用到，一般测试使用*/
* {
    color: red;
}

/*链接伪类选择器*/
 a:link { /*未访问的链接 用得少*/
    font-size: 16px;
    color: gray;
    font-weight: 700;
}

/*已访问的链接:只要点击过链接一次的状态 用得少*/ 
a:visited { 
    font-size: 16px;
    color: orange;
    font-weight: 700;
}  

/*鼠标移动到链接上 用得多*/ 
 a:hover { 
    font-size: 16px;
    color: red;
    font-weight: 700;
} 

/*鼠标在链接上长按 用得少***/    
 a:active { 
      color: green;
}    
   
/*结构伪类选择器*/
li:first-child { /*第一个孩子*/
   color: red;
}
li:last-child { /*最后一个孩子*/
   color: green;
}

li:nth-child(3) { /*选择第三个孩子  nth-child(n) n代表第几个孩子*/
    color: skyblue
}

li:nth-child(even) { /*选择所有的偶数孩子*/
   color: green;
}

li:nth-child(odd) { /*选择所有的奇数孩子*/
   color: blue;
 }

li:nth-child(2n) { /*选择所有的2n孩子*/
   color: black;
}

li:nth-child(2n+1) { /*选择所有的2n+1孩子*/
    color: black;
}

li:nth-last-child(even) { /*从最后一个孩子开始数*/
   color: pink;
}

:target { /*目标伪装选择器：可用于选择当前活动的元素*/
    color: red;
}

/*交集选择器 标签.类选择器 ,即..又*/
div.singer {
    font-weight: 700;
    font-size: 40px;
}

div ul li { /*后代选择器，表示所有的后代li标签，要求一定是嵌套关系*/
    color: gray;
}

.nav li {
    color: green;
}

.nav > li { /*子元素选择器 亲儿子标签*/
    color: red;
}

 /*属性选择器:选取标签带有某些特殊属性的选择器 我们成为属性选择器*/
a[title] {
   color: blue;
}

input[type=text] {  /*表示选择input 属性 input="text" 的标签*/
   color: pink;
}

div[class^=font] { /* ^=表示 class 以font开始的div 标签*/
   color: pink;
}

div[class$=footer] { /* $=表示class 以footer结尾的div标签*/
    color: green;
}

div[class*=tab] { /* *=表示class 包含tao的div标签*/
    color: gray;
}

/* 伪元素选择器 比如 ::first-letter */
p::first-letter { /* 伪元素选择器  ::first-letter 选择第一个字*/
     font-size: 30px;
     color: orange;
}

p::first-line { /* 伪元素选择器  ::first-line 选择第一行*/
      font-size: 20px;
      color: gray;
}

p::selection { /* 当我们选择P 标签的样式*/
      color: green;
}

div::before { /* before 和 after 在盒子div 的内部前面插入或者后面插入*/
     color: green;
     content: "我哦我";
}

div::after {
     content: "我哦我";
}

PS:欢迎留言补充，笔者会继续跟进CSS 介绍（二）文章。