CSS-入门-MDN文档学习笔记

CSS介绍

查看更多学习笔记:GitHub:LoveEmiliaForever
MDN中文官网

CSS概况

CSS的作用

CSS 是用来指定文档如何展示给用户的一门语言——如网页的样式、布局、等等
一份文档是由标记语言组织起来的文本文件(如用HTML组织文档),展示一份文档给用户实际上是将文档变成用户可用的文件
CSS 可以用于给文档添加样式,如改变文本样式、创建布局、添加动画等特效

CSS的语法

CSS 是一门基于规则的语言,你可以定义用于你的网页中特定元素样式的一组规则

    h1 {
        color: red;
        font-size: 5em;
    }
    p {
        color: black;
    }

其中CSS规则的语法组成如下

  1. 选择器selector:选择我们希望应用样式规则的HTML元素
  2. { }与其内一系列声明,声明的语法为属性: 属性值;
  3. 声明内的属性属性值与HTML元素内的属性属性值行为相似

一个CSS样式表可以有多个规则

CSS模块

CSS 由许多模块构成,例如Backgrounds and Borders模块
其内包含模块的属性、特性等等

CSS规范

所有的标准 Web 技术 (HTML, CSS, JavaScript 等) 都被定义在一个巨大的文档中,称作规范
它是由 (像是 W3C、WHATWG、ECMA) 这些规范化组织所发布的,其中定义了各种技术是如何工作的

CSS的浏览器支持

让所有的浏览器都同时支持一个 CSS 新特性是不现实的,通常都会一个空档期
会出现一些浏览器已经支持新特性而另一些仍未支持新特性的状态
因此,查看特性的实现状态是非常有用的

CSS使用入门

连接CSS文件

共有三种方法连接HTML和CSS,其中最为常用的是使用标签

    <head>
        <link rel="stylesheet" href="css文件地址">
    head>

给HTML元素添加样式

使用选择器选中元素即可添加样式,使用多个选择器时用,隔开它们,这被称为群组选择器
在下例中使用的是标签选择器,它会选择所有的对应元素

    p, li{
        color: green;
    }

改变元素默认行为

现代浏览器有对HTML元素的默认样式
如果想要改变这个默认样式,只需要在css文件中应用相应规则即可

使用类名

如果想要给某一类的元素运用样式,那么不必一个个的选择

  1. 使用class="类名1 类名2"属性给HTML元素添加类名
  2. 使用CSS的类选择器选中该类.类名
  3. 添加声明即可应用样式到该类

后代选择器(包含选择器)

在选择器中间以空格隔开,即可使用后代选择器
它会选择前一选择器的后代中符合后一选择器要求的元素

相邻兄弟选择器

+相隔选择器,即可使用相邻兄弟选择器
它会选择在前一选择器下面的兄弟节点中符合后一选择器要求的第一个元素

根据状态应用样式

元素拥有不同的状态,如被访问过的、没被访问过的、被鼠标悬停的等等
css也可以为这些不同的状态应用样式
a:link代表未被访问的a:visited代表被访问了的

CSS的组成

连接CSS到HTML

下面的三种方法优先级是内联样式 > 内部样式表 > 外部样式表

外部样式表

将CSS写入到一个单独的.css文件,网页即可连接该.css文件用于设定样式

    <head>
        <link rel="stylesheet" href="css文件地址">
    head>

这样的方法能够让.css文件被多个网页使用

内部样式表

将样式表直接写入到HTML文档的内部称为内部样式表
这种方法要求把CSS写入到