CSS样式表基础

层叠样式表:Cascading Style Sheets,是一种用来表现HTML等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。

样式表的三种样式:

1.内联

    <span style="color:#666">
        这是span里的文字
    </span>

写在标签里面。代码重用性差,控制精确,优先级最高。使代码冗余,应用最少。

2.内嵌

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
    .cls1{
        color:#039;
        }
    #id1{
        color:#0F3}
    *{
        color:#C00}
    div{
        color:#CF0}
</style>
</head>

一般写在<head>标签之间,代码重用性相对高,控制不如内联精确。

3.外部

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

写在另外一个文件里,然后再HTML中引用。代码重用性最高,精确度最低。

三种方式中内联优先级最高,内嵌和外部谁写在后面谁优先。

选择器

在 CSS 中,选择器是一种模式,用于选择需要添加样式的元素。以下是W3C的选择器举例:

下面说一下常用的选择器:

标签选择器

    div{
        color:#CF0}
……
    <div>
        这是第三个div里的文字
    </div>

定义所有该标签下的内容。方法是直接在样式表里写该标签,在{}里写样式。

id选择器:

    #id1{
        color:#0F3}
    *{
……
    <div id="id1">
        这是第一个div里的文字
    </div>

给当前元素一个id,每个元素都可以加,id唯一不可以重复,id名可以使用数字和_。

方法是  #id名称,只能取到一个元素。

class选择器:

    .cls1{
        color:#039;
        }
……
    <div class="cls1">
        这是第二个div里的文字
    </div>

类,给一类元素加名称,可以重复,每个元素都可以加。

方法是  .class名称,能取到多个元素。

*选择器

*{
    color:#C00}

*选择器中的样式应用于网页所有内容。

组合选择器:

可以通过组合选择器来增加精确度和减少代码冗余。

并列关系:

用,号

    div,span{
        color:#CF0}
……
    <div>
        这是第三个div里的文字
    </div>
    <span>
        这是span里的文字
    </span>

两个标签,或者一个id和一个class都可以并列

后代关系:

用空格符号

    div p{
        color:#93C}
……
    <div>
        <p>
            这是第三个div里的p里的文字
        </p>
        这是第三个div里的文字
    </div>

div下的p应用该样式

筛选关系:

用.符号

    div.cls1{
        color:#039
        }
……
    <div class="cls1">
        这是第二个div里的文字
    </div>
    <div>
    <span class="cls1">
        这是span里的文字
    </span>

在div标签中class=“cls1”的应用该样式

选择器的优先级,越小越优先:

id选择器>class选择器>标签选择器>*所有,但是,可以用!important设置当前样式优先级最高。

    .cls1{
        color:#039
        !important
        }

需要注意的是,选择器给元素添加了一个id或者一个类,并可以通过该选择器找到这个元素。

posted @ 2017-06-08 16:38 谁将新樽辞旧月,今月曾经照古人 阅读(...) 评论(...) 编辑 收藏

公告