CSS入门

CSS是什么 摘自维基百科

层叠样式表（英语：Cascading Style Sheets，简写CSS），又称串样式列表、级联样式表、串接样式表、层叠样式表、階層式樣式表，一种用来为结构化文档（如HTML文档或XML应用）添加样式（字体、间距和颜色等）的计算机语言，由W3C定义和维护。目前最新版本是CSS2.1，为W3C的推荐标准。CSS3现在已被大部分现代浏览器支持，而下一版的CSS4仍在开发中

为什么要说div和css

因为大家都用html中的div块级标签结合css来渲染页面，其实说span和css也是可以的

简单的html样式渲染

  • 直接在标签中使用style来进行渲染
    <div style="background-color: #6699FF; color: coral; height: 40px; width: 140px;">简单的html渲染</div>

    <br>

    <span style="background-color: #6699FF; color: coral; height: 40px; width: 140px;">简单的html渲染</span>
  • 结果

在head中写样式

同样，我们可以在head中写一些样式，并使用一定的方式将样式和标签进行关联，关联的方式有很多种，下面一一说明：

id选择器

  • head 中的样式需要放在<style></style>标签中
/*id选择器，以#开头*/

    <style>

        #i1 {

            background-color: aqua;

            height: 47px;

        }

        #i2 {

            background-color: yellow;

            height: 47px;

        }

        #i3 {

            background-color: crimson;

            height: 47px;

        }

    </style>
  • 使用这些id选择器
<body>

    <!--在标签中使用id来关联-->

    <div id="i1">id选择器1</div>

    <div id="i2">id选择器2</div>

    <span id="i3">id选择器3</span>

</body>
  • 结果

class选择器

  • class举例，以.作为标志
    <style>

        .c1 {

            background-color: #99CCFF;

            height: 30px;

        }

    </style>
  • 使用class选择器
    <div class="c1">重复使用class选择器</div>

    <div class="c1">重复使用class选择器</div>

    <div class="c1">重复使用class选择器</div>

    <span class="c1">重复使用class选择器</span>
  • 结果展示

标签选择器

  • 在样式中中直接使用一个标签来定义一个样式，那么body重的所有的这个标签都会使用这个样式
        div { /*这个地方我使用的是div标签来举例，大家可以尝试其他的各种标签*/

            background-color: black;

            color: red;

        }
  • 使用标签选择器
    <div>标签选择器</div>

    <div>标签选择器</div>

    <!--而我们的span标签就不会套用这个样式-->

    <span>标签选择器</span>
  • 结果

组合选择器

  • 用逗号.来将多个相同的样式链接起来
/*这里使用的是id的形式来说明，class也通用*/

        #y1,#y2,#y3 {

            background-color: yellow;

            height: 47px;

        }
  • 使用组合选择器，共同拥有这样一个样式
    <div id="y1">组合选择器</div>

    <div id="y2">组合选择器</div>

    <span id="y3">组合选择器</span>
  • 结果

层级选择器

  • 根据我们规定的层级关系，来套用样式
     .c1 {

            background-color: #99CCFF;

            height: 30px;

        }

    /*层级选择器1,会选择span标签下的div标签进行渲染*/

        span div {

            background-color: white;

            color: red;

        }

      /*会选择使用了class选择器下的div进行渲染，当然也可以使用id选择器*/

        .c1 div {  /* 这里我们使用了上面的class选择器c1*/

            background-color: greenyellow;

            color: purple;

        }
  • 使用层级选择器
    <span >层级选择器第一层

        <div >层级选择器第二层</div>

    </span>

    <br>

    <span class="c1">层级选择器第一层

        <div >层级选择器第二层</div>

    </span>
  • 结果

属性选择器

  • 根据我们自己定义的属性来进行选择
        .c1 { /*class选择器*/

            background-color: #99CCFF;

            height: 30px;

            color: black;

        }

        /*属性选择器，会选择class选择器下面的id选择器[y1]进行渲染*/

        .c1 [id='y1'] {

            background-color: yellow;

            height: 417px;

        }
  • 使用属性选择器
    <div class="c1">属性选择器第一层

        <div id="y1">属性选择其第二层</div>

    </div>

  • 结果

  • 此处做一个简单的分析，利用chrome的检查来分析

  1. 首先使用div中的class选择器c1进行渲染“属性选择器第一层”
  2. 最后找到属性选择器的第二级：id='y1'，使用属性选择器的方式进行渲染

选择器的优先级

  • 既然说到了这么多的选择器，那么如果我写了很多样式，也使用了很多的仙则其方式，那么我们的页面到底会选择哪种的方式进行渲染呢？
  • 答案是哪个写在最上面就优先级高，而后面的重复的内容会把上面的覆盖
  • 举例说明
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>css优先级</title>

    <style>

        /*一个id选择器*/

        #b1 {

            background-color: skyblue;

        }

        /*一个class选择器*/

        .c1 {

            background-color: red;

        }

        /*一个属性选择器*/

        div [id='b1'] {

            background-color: green;

        }

        .c1 [id='b1'] {

            background-color: gold;

        }

        /*一个标签选择器*/

        div {

            background-color: yellow;

        }

    </style>

</head>

<body>

    <div>这个div标签会直接使用上面的div标签选择器进行渲染，背景色为黄色</div>

    <br>

    <div>第一层会使用div标签的背景色：黄色

        <div id="b1">这个二层div标签会使用属性选择器：背景色为天空蓝</div>

    </div>

    <br>

    <div class="c1">第一层会使用class的red，而不会使用div的green

        <div id="b1">第二层会使用id选择器的skyblue</div>

    </div>

</body>

</html>
  • 上面的结果：

我们从Chrome中重点看一下这一段中的里面的div:

    <div class="c1">第一层会使用class的red，而不会使用div的green

        <div id="b1">第二层会使用id选择器的skyblue</div>

    </div>
  • Chrome检查分析图：

  1. 首选使用div标签选择器，但是被覆盖
  2. 其次使用属性选择器div的id='b1'，但是被覆盖
  3. 再次使用属性选择器.c1 [id='b1']，但是也被覆盖
  4. 最后使用id选择器的b1进行最后的渲染，显示为skyblue

将我们的各种样式写入css文件中，以便于多个html进行复用

  • 包含上面例子中的各种选择器样式的css文件,定义为example.css
/*一个id选择器*/

#b1 {

    background-color: skyblue;

}

/*一个class选择器*/

.c1 {

    background-color: red;

}

/*一个属性选择器*/

div [id='b1'] {

    background-color: green;

}

.c1 [id='b1'] {

    background-color: gold;

}

/*一个标签选择器*/

div {

    background-color: yellow;

}
  • 在html的head中引用进来享用
<head>

    <link  rel="stylesheet" href="css/example.css" >

</head>

胖虎都看得懂的CSS入门的更多相关文章

  1. 小学生都看得懂的C语言入门(1): 基础/判别/循环

    c基础入门, 小学生也可以都看得懂!!!! 安装一个编译器, 这方面我不太懂, 安装了DEV-C++  ,体积不大,30M左右吧, 感觉挺好用,初学者够了. 介绍下DEV 的快键键: 恢复 Ctrl+ ...

  2. 一看就懂的ReactJs入门教程（精华版）

    一看就懂的ReactJs入门教程(精华版) 现在最热门的前端框架有AngularJS.React.Bootstrap等.自从接触了ReactJS,ReactJs的虚拟DOM(Virtual DOM)和 ...

  3. 小学生都看得懂的C语言入门(5): 指针

    现在已经学到C语言的后面了, 快学完咯.... (一)取地址运算 先来看一下sizeof 计算所占字节 #include<stdio.h> int main() { int a; a=; ...

  4. 小白都看得懂的Javadoc上手教程

    Javadoc是什么 官方回答: Javadoc is a tool for generating API documentation in HTML format from doc comments ...

  5. 小白都看得懂的Javadoc使用教程

    Javadoc是什么 官方回答: Javadoc is a tool for generating API documentation in HTML format from doc comments ...

  6. 小学生都看得懂的C语言入门(6): 字符串

    1.字符用 char 表示 #include<stdio.h> int main() { char c; char d; c=; d='; if (c==d){ printf(" ...

  7. 小学生都看得懂的C语言入门(4): 数组与函数

    // 之前判断素数, 只需要到sqrt(x)即可,//更加简单的, 判断能够比已知的小于x的素数整除, 运行更快 #include <stdio.h> // 之前判断素数, 只需要到sqr ...

  8. 小学生都看得懂的C语言入门(2): 判别 循环的一些应用实例

    1.bool 类型 定义bool类型之前需要导入#include <stdbool.h> #include <stdio.h> #include <stdbool.h&g ...

  9. 小学生都看得懂的C语言入门(3): 数组与函数

    #include <stdio.h> int main() { int x; ; ; scanf("%d",&x){ sum+=x; cnt++; scanf( ...

随机推荐

  1. 2. getline()和get()

    1.面向行输入:getline() ---其实还可以接受第三个参数. getline()函数读取整行,调用该方法 使用cin.getline().该函数有两个参数, 第一个参数是是用来存储输入行的数组 ...

  2. jmeter用Firefox录制https协议证书问题解决

    录制脚本的时候,比如录制https协议的百度网站 https://www.baidu.com ,所有录制设置均正常,但是在jmeter录制控制器里面就是没有任何录制的请求. 这个时候提示说证书不对 1 ...

  3. tf.train.shuffle_batch函数解析

    tf.train.shuffle_batch (tensor_list, batch_size, capacity, min_after_dequeue, num_threads=1, seed=No ...

  4. Trusted Execution Technology (TXT) --- 基本原理篇

    版权声明:本文为博主原创文章,未经博主允许不得转载. http://www.cnblogs.com/tsec/p/8409600.html 1. Intel TXT 介绍 TXT是Trusted Ex ...

  5. CF266D. BerDonalds [图的绝对中心]

    D. BerDonalds time limit per test 5 seconds memory limit per test 256 megabytes input standard input ...

  6. Laravel5.5核心架构理解

    1.依赖注入 方法传入组件名,框架会自动实例化,方法内可直接使用 例如最常用的requert对象 2.服务容器 其实,Laravel 的核心就是一个 IoC 容器,Laravel 的核心本身十分轻量, ...

  7. sparksql工程小记

    最近做一个oracle项目迁移工作,跟着spark架构师学着做,进行一些方法的总结. 1.首先,创建SparkSession对象(老版本为sparkContext) val session = Spa ...

  8. mssql学习

    1.创建表和数据插入SQL 我们在开始创建数据表和向表中插入演示数据之前,我想给大家解释一下实时数据表的设计理念,这样也许能帮助大家能更好的理解SQL查询. 在数据库设计中,有一条非常重要的规则就是要 ...

  9. vim学习、各类插件配置与安装

    vim学习.各类插件配置与安装 vim 插件 配置 1. vim学习 vim基础学习:根据网上流行基础文章<简明Vim练级攻略>,进阶书籍<vim实用技巧>.注:进阶书籍可以在 ...

  10. bzoj 3166 [Heoi2013]Alo 可持久化Trie

    3166: [Heoi2013]Alo Time Limit: 20 Sec  Memory Limit: 256 MBSubmit: 1227  Solved: 569[Submit][Status ...