CSS知识点

CSS样式表的引入

有三种引入方法,包括外联样式内联样式嵌入样式,最好使用外联样式,有利于做到内容与表现分离。

外联样式使用方式(常用):

<link rel="stylesheet" type="text/css" href="css/index.css">

内联样式使用方式(优先级最高):

<div style="width:100px; height:100px;">

嵌入样式使用方式:

<style type="text/css">
...
/*css语句*/
...
</style>

样式表的优先级

内联样式表的优先级别最高,外联样式表嵌入样式表的优先级与书写顺序有关,后书写的优先级别高。

样式表的作用域

  • 内联样式表的作用域是当前标签;
  • 嵌入样式表的作用域是当前文件;
  • 外联样式表的作用域是有关联的所有文件。

CSS选择器

CSS选择器最基本的可以分成三类,标签选择器类选择器ID选择器。在此基础上又分为后代选择器群组选择器

  • 标签选择器:结构中,标签名称作为选择器,所有页面元素都可以作为选择器;
  • 类选择器:页面中可以定义多个,对具有相同class的一类元素进行操作,类选择器更适合一类样式;
  • ID选择器:一个id名称只能对应文档中一个具体的元素对象,因为id只能定义页面中唯一的元素对象;
  • 后代选择器:又称为包含选择器,可以选择作为某元素后代的元素。我们可以定义后代选择器来创建一些规则,使这些规则在某些文档结构中起作用,而在另外一些结构中不起作用;
  • 群组选择器:通过分组,可以将某些类型的样式“压缩”在一起,这样就可以得到更简洁的样式表。
    <!--HTML注释-->
    <div id="box" class="box1">
    <p class="title"></p>
    </div>
    <div class="box2">
    <p class="title"></p>
    </div>
    /*CSS注释*/
    /*标签选择器*/
    div{
    width: 100px;
    height: 100px;
    ...
    }
    p{
    width: 100px;
    height: 100px;
    ...
    }
    /*类选择器*/
    .title{
    ...
    }
    /*id选择器*/
    #box{
    ...
    }
    /*后代选择器,只想对box2下的title做单独修改*/
    .box2 .title{
    ...
    }
    /*群组选择器,box1和box2都具有1px边框线*/
    .box1,.box2{
    border: 1px solid #ccc;
    }

选择器权重

  • 标签选择器:1
  • 类选择器:10
  • ID选择器:100
  • 后代选择器:为各选择器之和
  • 群组选择器:元素本身的权重,权重不想加

更多选择器知识点介绍,详见W3C

CSS伪元素

css的伪元素,之所以被称为伪元素,是因为他们不是真正的页面元素,html没有对应的元素,但是其所有用法和表现行为与真正的页面元素一样,可以对其使用诸如页面元素一样的css样式,表面上看上去貌似是页面的某些元素来展现,实际上是css样式展现的行为,因此被称为伪元素。

  • css有一系列的伪元素,如:before:after:first-line:first-letter等,在此详述一下:before:after元素的使用,其他可通过W3C CSS伪元素学习使用。

伪元素:before和:after的用法

在真正页面元素内部之前和之后添加新内容(可以对伪元素应用定位可以置于任何位置)。
举例:

<p>eol</p>
<style>
p:before{content: "hello "}
p:after{content: "world!"}
</style>

上面例子从技术角度看,等价于下面的html结构:

<p>
<span>hello </span>
eol
<span>world!</span>
</p>

由此可知:伪元素:before和:after添加的内容默认是inline(内联)元素;这两个伪元素的content属性,表示伪元素的内容,设置:before和:after时必须设置其content属性,否则伪元素就不起作用。

content属性值:

  • 字符串:字符串作为伪元素的内容添加到主元素中
    注意:字符串中若有html字符串,添加到主元素后不会进行html转义,也不会转化为真正的html内容显示,而是会原样输出。

  • attr(attr_name):伪元素的内容跟主元素的某个属性值进行关联,及其内容为主元素的某指定属性的值
    好处:可以通过js动态改变主元素的指定属性值,这时伪元素的内容也会跟着改变,可以实现某些特殊效果。

  • url():引用外部资源,例如图片。

:before和:after常见使用场景

  • 清除浮动

    <style type="text/css">
    .box:after{
    content: ".";
    clear: both;
    display: block;
    height: 0;
    overflow: hidden;
    }
    </style>
  • 特效使用
    利用这两个伪元素,可以实现各种效果,如放大镜、叉叉、箭头、三角符等,也可轻易实现如下效果。

代码如下:

<style type="text/css">
a {
position: relative;
display: inline-block;
outline: none;
text-decoration: none;
color: #000;
font-size: 32px;
padding: 5px 10px;
}
a:hover::before, a:hover::after { position: absolute; }
a:hover::before { content: "\5B"; left: -20px; }
a:hover::after { content: "\5D"; right: -20px; }
</style>

更多

更多CSS基础知识可以到W3SCHOOL CSS官方教程或者菜鸟教程中继续学习。