CSS样式表基础

二十三年蝉

发布于 2018-02-27 10:06:37

1.2K00

代码可运行

文章被收录于专栏：闻道于事闻道于事

运行总次数：0

代码可运行

层叠样式表：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或者一个类，并可以通过该选择器找到这个元素。

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2017-06-08 ，如有侵权请联系 cloudcommunity@tencent.com 删除

css

html

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

css

html

登录后参与评论

暂无评论