CSS 介绍(一)

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 介绍(二)文章。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 10,401评论 1 88
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 18,405评论 1 40
  • HTML 5 HTML5概述 因特网上的信息是以网页的形式展示给用户的,因此网页是网络信息传递的载体。网页文件是用...
    阿啊阿吖丁阅读 1,057评论 0 0
  • CSS 指层叠样式表(Cascading Style Sheets),是一种用来为结构化文档(如 HTML 文档或...
    神齐阅读 632评论 0 14
  • css简介: css,指的是Cascading Style Sheet(层叠样式表),是用来控制网页外观的一门技术...
    IT的咸鱼阅读 26评论 0 0