CSS引入方式

CSS的三种样式表

按照CSS书写样式的位置(或者引入的方式),CSS样式表可以分为三大类:

  • 行内样式表(行内式)
  • 内部样式表(嵌入式)
  • 外部样式表(链接式)
内部样式表

内部样式表(内嵌样式表)是写到HTML页面内部,是将所有的CSS代码抽取出来,单独放到一个<style>标签中

    <style>
      p {
        line-height: 26px;
      }
    </style>
  • <style>标签理论上可以放在HTML文档的任何地方,但一般会放在文档的<head>标签中
  • 通过此种方式,可以方便控制当前整个页面中的元素样式设置
  • 代码结构清晰,但是并没有实现结构与样式完全分离
  • 使用内部样式表设定CSS,通常也被称为嵌入式引入
行内样式表

行内样式表(内联样式表)是在元素标签内部的style属性中设定CSS样式,适合于修改简单样式

    <p style="color: chartreuse; font-size: 50px">我要变!٩(๑❛ᴗ❛๑)۶</p>
  • style其实就是标签的属性
  • 在双引号中间,写法要符合CSS规范
  • 可以控制当前的标签设置样式
  • 由于书写繁琐,并且没有体现出结构与样式相分离的思想,所有不太推荐大量使用,只有对当前元素添加简单样式的时候,可以考虑使用
  • 使用行内样式表设定CSS，通常也被称为行内式引入
外部样式表

实际开发中都是外部样式表,适合于样式比较多的情况,核心是:样式单独写到CSS文件中,之后把CSS文件引入到HTML页面中使用

引入外部样式表分为两步:

  • 新建一个后缀名为.css的样式文件,把所有CSS代码都放入此文件中
  • 在HTML页面中,使用<link>标签引入这个文件

例:

p {
  color: chartreuse;
  font-size: 50px;
}
    <link rel="stylesheet" href="style.css" />
属性作用
rel定义当前文档与链接文档之间的关系,在这里需要指定为stylesheet,表示被链接的文档是一个样式表文件
href定义所链接外部样式表文件的URL,可以是相对路径,也可以是绝对路径
  • 使用外部样式表设定CSS,通常也被称为外链式或链接式引入,这种方式是开发中常用的方式

CSS引入方式总结

样式表优点缺点使用情况控制范围
行内样式表书写方便,权重高结构样式混写较少控制一个标签
内部样式表部分结构和样式相分离没有彻底分离较多控制一个页面
外部样式表完全实现结构和样式相分离需要引入最多控制多个页面

Emmet语法

Emmet语法的前身是Zen coding,它使用缩写,来提高html/CSS的编写速度,VScode内部已经集合该语法

  • 快速生成HTML结构语法
  • 快速生成CSS样式语法

快速生成HTML结构语法

  • 生成标签,直接输入标签名按住tab或者enter键即可,比如div然后tab键,就可以生成<div><div>
  • 如果想要生成多个相同的标签,加上*就可以了,例:
div*3
  • 如果有父子级关系的标签,就可以用>,例:
ul>li
  • 如果有兄弟关系的标签,用+就可以了,例:
div+p
  • 如果生成带有类名或者id名字的,直接写.demo或者#名字,例
.classname
#idname
  • 如果生成的div类名是有顺序的,可以用自增符号$
    div.classname$*4
  • 如果想要在生成的标签内部写内容可以用{}表示
    h1.testname{hello}

快速生成CSS样式语法

CSS基本采取简写形式即可

  • 比如w200,就可以生成width:200px;
  • 比如tdn,就可以生成text-decoration: none;

快速格式化代码

VScode快速格式化代码:shift+alt+f

也可以设置当我们保存页面的时候自动格式化代码:

  • File--->Preferences--->Setting
  • 搜索Emmet,在Edit in settings.json里面添加两行:"editor.formatOnType": true,和"editor.formatOnSave": true,即可

CSS的复合选择器

什么是复合选择器

在CSS中,可以根据选择器的类型把选择器分为基础选择器和复合选择器,复合选择器是建立在基础选择器之上的,对基本选择器进行组合形成的

  • 复合选择器可以更准确、更高效的选择目标元素(标签)
  • 复合选择器是由两个或多个基础选择器,通过不同的方式组合而成的
  • 常用的复合选择器包括:后代选择器,子选择器,并选择器,伪类选择器等等
后代选择器(重要)

后代选择器又称为包含选择器,可以选择父元素里面子元素,其写法就是把外层标签写在前面,内层标签写在后面,中间用空格分隔,当标签发生嵌套时,内层标签就成为外层标签的后代

语法:

元素1 元素2 {样式声明}

上述语法表示选择元素1里面的所有元素2(后代元素)

例:

    <style>
      ol li {
        color: red;
      }
    </style>
    <ol>
      <li>我是ol的child</li>
      <li>我是ol的child</li>
      <li>我是ol的child</li>
    </ol>
    <ul>
      <li>我是ul的child</li>
      <li>我是ul的child</li>
      <li>我是ul的child</li>
    </ul>

后代选择1.png

注:

  • 元素1和元素2中间用空格隔开
  • 元素1是父级,元素2是子级,最终选择的是元素2
  • 元素2可以是儿子,也可以是孙子等,只要是元素1的后代即可
  • 元素1和元素2可以是任意基础选择器

我们在实际工作中不肯只有1个ol或者1个ul,我们如果只想改变某一个ol中的某个标签,可以这么做:

    <ol class="first">
      <li><a href="#">我是第一个ol的</a></li>
    </ol>
    <ol class="second">
      <li><a href="#">我是第二个ol的</a></li>
    </ol>
     .first li a {
        color: greenyellow;
      }
      .second li a {
        color: rgb(14, 94, 131);
      }

后代选择器2.png

子选择器(重要)

子元素选择器(子选择器)只能选择作为某元素的最近一级子元素,简单理解就是选择亲儿子元素

语法:

元素1>元素2 {样式声明}

上述语法表示选择元素1里面的所有直接后代(子元素)元素2

例:

    <div class="nav">
      <a href="#">I'm son</a>
      <p>
        <a href="#">I'm grandson</a>
      </p>
    </div>
      .nav > a {
        color: pink;
      }

子选择器.png

  • 元素1和元素2中间用大于号隔开
  • 元素1是父级,元素2是子级,最终选择的是元素2
  • 元素2必须是亲儿子,其孙子等之类都不归他管
并集选择器(重要)

并集选择器可以选择多组标签,同时为他们定义相同的样式,通常用于集体声明

并集选择器是各种选择器通过,连接而成,任何形式的选择器都可以作为并集选择器的一部分

语法:

元素1,元素2 {样式声明}

例如:

      div,
      p {
        color: greenyellow;
      }
  • 元素1和元素2之间用逗号隔开
  • 逗号可以理解为和的意思
  • 并集选择器通常用于集体声明
  • 约定的语法规范,并集选择器竖着写,一定注意最后一个选择器不需要加逗号
伪类选择器

伪类选择器用于向某些选择器添加特殊的效果,比如给链接添加特殊效果,或选择第一个,第n个元素,伪类选择器书写最大的特点是用:,比如:hover,:first-child,因此伪类选择器很多,比如有链接伪类,结构伪类等

链接伪类选择器
      /* a:link  选择所有未被访问的链接 */
      /* a:visited 选择所有已被访问的链接 */
      /* a:hover 选择鼠标指针位于其上的链接 */
      /* a:active  选择活动链接(鼠标按下未弹起的链接) */

例:

a:link:

      a:link {
        color: #333333;
        text-decoration: none;
      }
  <body>
    <a href="http://www.google.cn/">点我跳转</a>
  </body>

未选中伪链接.png

a:visited:

      a:visited {
        color: mediumslateblue;
      }

a:hover:

      a:hover {
        color: mediumslateblue;
      }

伪链接选择器hover.png

a:active:

      a:active {
        color: red;
      }

伪选择器active.png

伪链接选择器注意事项
  • 为了确保生效,请按照LVHA的顺序声明::link-:visited-:hover-:active
  • 因为a链接在浏览器中具有默认样式,所有我们实际工作中都需要给链接单独指定样式

链接伪类选择器在实际开发中的书写:

      /* 平时的状态 */
      a {
        color: #333333;
        text-decoration: none;
      }
      /* 鼠标经过时的状态 */
      a:hover {
        color: mediumslateblue;
      }
:focus伪类选择器

:focus伪类选择器用于选取获得焦点的表单元素,焦点就是光标,一般情况<input>类表单元素才能获取,因此这个选择器也主要针对于表单元素来说

     input:focus {
        background-color: bisque;
      }

focus伪类选择器.png

复合选择器总结
选择器作用特征使用情况隔开符号及用法
后代选择器用来选择后代元素可以是子孙后代较多符号是 ,例:.nav a
子代选择器选择最近一级元素只选亲儿子较少符号是>,例:.nav>p
并集选择器选择某些相同样式的元素可以用于集体声明较多符号是,,例:.nav,.header
链接伪类选择器选择不同状态的链接跟链接相关较多重点记住a{}和a:hover实际开发的写法
:focus选择器选择获得光标的表单跟表单相关较少input:focus记住这个写法

CSS的元素显示模式

了解元素的显示模式可以更好的让我们布局页面

什么是元素显示模式

作用:网页的标签非常多,在不同地方会用到不同类型的标签,了解他们的特点可以更好的布局我们的网页

元素显示模式就是元素(标签)以什么方式进行显示,比如<div>自己占一行,比如一行可以放多个<span>

HTML元素一般分为块元素和行内元素两种类型

块元素

常见的块元素有<h1>~<h6>,<p>,<div>,<ul>,<ol>,<li>等,其中<div>标签是最典型的块元素

块元素的特点:

  • 比较霸道,自己独占一行
    <div>I'm the god</div>
    I can't stand with you

独占一行.png

  • 高度,宽度,外边距以及内边距都可以控制
      div {
        width: 100px;
        height: 100px;
        background-color: cadetblue;
      }

仍然独占一行.png

  • 宽度默认是容器(父级宽度)的100%
      div {
        /* width: 100px; */
        height: 100px;
        background-color: cadetblue;
      }
  <body>
    <div>I'm the god</div>
    I can't stand with you
  </body>

跟父亲一样宽.png

  • 是一个容器及盒子,里面可以放行内或者块级元素

注:

  • 文字类的元素内不能使用块级元素
  • <p>标签主要用于存放文字,因此<p>里面不能放块级元素,特别是不能放<div>

例:

    <div>I'm the god</div>
    I can't stand with you
    <p>
      <div>I have a problem</div>
    </p>

文字元素不能套.png

  • 同理,<h1>~<h6>等都是文字类块级标签,里面也不能放其他块级元素
行内元素

常见的行内元素有<a>,<strong>,<b>,<i>,<del>.<s>,<ins>,<u>,<span>等,其中<span>标签是最典型的行内元素,有的地方也将行内元素称为内联元素

行内元素的特点:

  1. 相邻行内元素在同一行上,一行可以显示多个
  2. 高,宽直接设置是无效的

例:

      span {
        height: 100px;
        width: 200px;
      }
    <span>I'm in line one</span><strong>I'm in line one too</strong>

行元素1.png

  1. 默认宽度就是它本身内容的宽度
  2. 行内元素只能容纳文本或其他行内元素

注:

  • 链接里面不能再放链接
  • 特殊情况链接<a>里面可以放块级元素,但是给<a>转换一下块级模式最安全
行内块元素

在行内元素中有几个特殊的标签:<img/>,<input/>,<td>,它们同时具有块元素和行内元素的特点,有些资料称它们为行内块元素

行内块元素的特点:

  1. 和相邻的行内元素(行内块)在同一行上,但是它们之间会有空白缝隙,一行可以显示多个(行内元素特点)

例:

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

行内块1.png

  1. 默认宽度就是它本身内容的宽度(行内元素特点)
  2. 高度,行高,外边距以及内边距都可以控制(块级元素特点)

例:

      input {
        widows: 250px;
        height: 35px;
      }

行内块2.png

元素显示模式总结
元素模式元素排列设置样式默认宽度包含
块级元素一行只能放一个块级元素可以设置宽度高度容器的100%容器级可以包含任何标签
行内元素一行可以放多个行内元素不可以直接设置宽度高度它本身内容的宽度容纳文本或者其他行内元素
行内块元素一行放多个行内块元素可以设置宽度和高度它本身内容的宽度
元素显示模式转换

特殊情况下,我们需要元素模式的转换,简单理解:一个模式的元素需要另外一种模式的特性,比如想要增加链接<a>的触发范围

  • 转换为块元素:display:block
    <a href="#">I change</a>
    <a href="#">I change</a>
      a {
        width: 150px;
        height: 200px;
        background-color: rgba(27, 226, 226, 0.2);
        display: block;
      }

转换为块.png

注:这时候本来是行内元素的<a>却拥有了块级元素的特点,独占一行,且宽度与高度可以进行设置

  • 转换为行内元素:display:inline
    <div>I change again</div>
    <div>I change again</div>
    <div>I change again</div>
      div {
        display: inline;
        background-color: aqua;
      }

转换为行内元素.png

  • 转换为行内块:display:inline-block
    <span>change change change</span>
      span{
        display:inline-block;
        width: 100px;
        height:30px;
        background-color: aqua;
      }

转为行内块.png

Last modification：February 14, 2021
© Allow specification reprint
If you think my article is useful to you, please feel free to appreciate