CSS入门

我儿长柏必定高中
23 阅读5分钟

CSS简介

CSS是用来做什么的呢？我们知道HTML用来展现页面的内容，那么CSS就用来负责页面的美化。
CSS全称是Cascading Style Sheets，即层叠样式表，它规定了网页的样式和布局，将多个样式层叠地统一储存在样式表(外部的.css文件)中，再根据需要调用，这样可以极大提高工作效率。

CSS语法

CSS规则由两个主要部分构成：选择器、一条或多条声明

选择器 {
    属性名: 属性值;
    属性名: 属性值;
}

我们来看一条简单的css语句

h4{
    color: red;
    font-size: 12px;
}
  • 选择器：指需要改变的HTML元素，在这个例子中就是h4，也就是会改变所有的h4标签的样式
  • 声明：每条声明由属性: 值构成，在这个例子中有两条声明，分别规定了颜色和字体尺寸

选择器

用来选择要设置样式的元素，CSS常用的选择器有三种，分别是元素选择器，id选择器和类选择器。

元素(标签)选择器

为某个标签的所有元素设置先沟通的样式，比如上面例子中的h4元素选择器。但是元素选择器容易重名造成污染。

id选择器

为标有特定id的HTML元素设置特定的样式，id选择器的优先级最高。在和HTML中以id属性表示，在CSS中用＃来定义，复合id名中间用下划线_，比如

#idSelector{
    color: blue;
}

<p id="idSelector">ID选择器</p>

要注意的是，id属性不可以数字开头，且不可有同名id，只能在一个元素中使用。

类选择器

是最常用的选择器，可以在多个元素中使用。在HTML中用class属性表示，在CSS中用.来定义，复合类名中间用中横线-。如果使用多个类选择器，可以使用空格分开。比如

.classSelector{
    font-size: 12px;
}
.purple{
    color: purple;
}

<p class="classSelector purple">类选择器</p>

通配符选择器

适用于页面中所有的元素，用*定义，不常用。

<style type="text/css">
        *{
            margin: 0;
        }
    </style>

属性选择器

适用于所有带有该属性的标签，用[属性]定义，常用在表单中。

<head>
    <style type="text/css">
        [type="text"]{
            width: 200px;
        }
        [type="password"]{
            width: 300px;
        }
    </style>
</head>    

<body>
    <input type="text" />
    <input type="password" />
</body>

优先级

!important > id > 类 | 属性 > 标签 > 通配符 当class选择器和属性选择器同时存在时，哪个在后面用哪个

层级关系/派生/越级选择器

样式表中也有层级关系，父级中的子级可区别于其他同类名的其他元素，比如：

.child{
    color: brown;
}
.parent{
    .child{
        color: grey;
    }
}

    <!-- 层级关系 -->
    <div class="parent">
        <div class="child">父级中的子级可区别于同类名的其他元素</div>
    </div>
    <div class="child">同类名的其他元素</div>

当然，不止类和类可以进行嵌套，标签和标签、类和标签、类和id、标签和id都可以进行嵌套，但id和id不可以进行嵌套。浏览器在进行匹配的时候，是从下至上从右至左匹配的。

插入样式表

我们定义好样式表后，应该如何使用它呢？浏览器在读到样式表时，会将样式表插入html文档并格式化。插入样式表的方法有三种：外部样式表，内部样式表和内联样式表。

外部样式表 External style sheet

新建一个css文件夹，在里面添加css文件。在html文档头部的head标签中插入link标签来链接到css样式表，这样样式表就可以应用在整个页面中，适用许多网页都要使用样式表的情况，也是我们主要使用的情况。

<head>
    <title>CSS</title>
    <link rel="stylesheet" type="text/css" href="css/mystyle.css">
</head>

内部样式表 Internal style sheet

当我们需要对单个文档应用特殊的样式时，就应该使用内部样式表。在head标签的最底下中添加style标签，里面添加要使用的样式：

<head>
    <meta charset="UTF-8">
    <title>CSS</title>
    <style type="text/css">
        div{
            width: 100px;
            height: 100px;
            background-color: #000;
        }
    </style>
</head>

内联样式表 Inline style

也称为内部样式表，如果样式只需要在一个元素中使用一次，将会使用内联样式，因为会把样式和内容混杂在一起，所以不能体现样式表的很多优势。在需要使用样式的标签中使用style属性：

<p style="color: sienna; margin-left: 20px">这是一个段落。</p>

混合使用

如果同时拥有内部样式和外部样式，则颜色属性继承外部样式表，文字排列和字体尺寸继承内部样式表。但是如果外部样式放在内部样式之后，则外部样式将覆盖内部样式。总的优先级排列如下：内联样式 > 内部样式 > 外部样式 > 浏览器默认样式

CSS权重

CSS中，不同的元素有不同的权重，是256进制的，下面是表格：

元素权重
*0
标签，伪元素1
class，属性，伪类10
id100
内联样式1000
!important正无穷

如果遇到一段文字属于多个标签、类、id揉在一起不知道选哪种样式，就可以进行计算来判断。

练习

现在我们已经掌握了基本的匹配规则了，来思考一下如何让实现下面的要求吧！

我们想得到四个盒子，前两个小盒子的尺寸是100px，颜色分别是绿色和蓝色；后两个大盒子的尺寸是200px，颜色分别是紫色和红色

<head>
    <style type="text/css">
        .box{
            width: 100px;
            height: 100px;
        }
        .big-box{
            width: 200px;
            height: 200px;
        }
        .box.box1{
            background-color: green;
        }
        .box.box2{
            background-color: blue;
        }
        .big-box.box1{
            background-color: purple;
        }
        .big-box.box2{
            background-color: red;
        }
    </style>
</head>

<body>
    <div class="box box1">box box1</div>
    <div class="box box2">box box2</div>
    <div class="big-box box1">big-box box1</div>
    <div class="big-box box2">big-box box2</div>
</body>

image.png

实现一个文本样式提示类
所有的文本都是粗体
1、 success 成功的提示 green
2、 warning 警告的提示 orange
3、 danger 失败的提示 red

<head>
    <style type="text/css">
        .tip{
            font-weight: bold;
        }
        .tip.tip-success{
            color: green;
        }
        .tip.tip-warning{
            color: orange;
        }
        .tip.tip-danger{
            color:red;
        }
    </style>
</head>

<body>
    <p class="tip tip-success">success 成功的提示</p>
    <p class="tip tip-warning">warning 警告的提示</p>
    <p class="tip tip-danger">danger 失败的提示</p>
</body>

image.png

avatar
文章
阅读
粉丝