前端菜鸟笔记 Day-3 CSS基础

时间 2019-12-08

标签前端菜鸟笔记 day css 基础栏目 CSS 繁體版

原文原文链接

文章大纲来源：【Day 3】HTML复习 + CSS基础css

初识CSS
入门CSS

初识CSS

层叠样式表（Cascading Style Sheets），即前端常说的CSS。

内容引用：CSS 简介html

样式解决了什么问题？

HTML标签本来被设计为用于 定义文档内容。

经过使用标签来表达语义信息。前端

那个时候的文档布局由浏览器实现，没有使用什么格式的标签。git

可是当时主要的浏览器（Netscape 和 Internet Explorer）不断地将新的HTML标签和属性（好比字体颜色等）加入到HTML规范中，文档内容要独立于文档表示层愈来愈困难（各家都有各家的HTML书写属性规范，而且样式通常不统一）。github

为了解决这个问题，万维网联盟（W3C）在HTML 4.0 以外创造出样式（Style）。浏览器

样式表如何提升工做效率？

样式表（Style Sheets）定义 如何显示 HTML 元素。

样式一般保存在外部的.css文件中，而且能够被多个.html文件所引用，因此外部的样式表能够一处修改，多处协同影响。ide

CSS的使用方法

一共有三种：布局

标签内属性定义

<!-- learn.html -->
<body style="background: red;">
   ...
</body>

内部定义

<!-- learn.html -->
<style>
body {
  background: red;
}
</style>

外部定义

<!-- learn.html -->
<head>
  <link rel="stylesheet" type="text/css" href="style.css" />
</head>

/* style.css */
body {
  background: red;
}

外部定义能够<link>多个样式表，书写多个<link>标签引用便可。字体

那“层叠”指的是什么？

样式表容许 多种方式规定样式信息。

HTML元素属性中
HTML的头元素中
外部的CSS文件中
同一个文档引用多个外部样式表

那么就容易遇到一个问题：“当同一个 HTML 元素被不止一个样式定义时，会使用哪一个样式呢？”设计

这就是一种层叠了，即多重样式将层叠为一个。

在这个层叠过程当中，就须要一种层叠次序，来选择最后到底选择哪个样式：

最高 —— 内联样式，即 HTML 元素内部
高 —— 内部样式表，即<head>标签内部
中 —— 外部样式表
最低 —— 浏览器缺省样式

拥有高次序的样式会覆盖低次序的样式定义。

入门CSS

基础语法

CSS规则由两个主要部分构成： 选择器，以及声明。

selector {
  declaration1;
  declaration2;
  ...
  declarationN;
}

选择器（selector）用于选择须要改变的 HTML 元素
声明（declaration）定义须要改变的属性和值，每条声明由一个属性和一个值组成（property: value）。

例如：

h1 {
  color: red;
  font-size: 14px;
}

将<h1>元素内的文字颜色定义为红色，同时字体大小设置为14像素。

内容引用：CSS 基础语法

语法补充

除了基础语法，还有一些须要补充的内容。

内容引用：CSS 高级语法

选择器分组

被分组的选择器能够分享相同的声明。

h1,h2,h3,h4,h5,h6 {
  color: green;
}

使用逗号将须要分组到一组的选择器链接在一块儿便可。

样式继承

根据CSS，子元素从父元素继承属性。

body {
  font-family: Verdana, sans-serif;
}

上述规则说明，<body>元素将使用Verdana字体（若是访问者系统中有的话）。

经过CSS继承，子元素将继承最高级元素（上面的例子是<body>）所拥有的属性。这里的子元素指的就是在<body>标签内声明的那些全部标签(其实并不必定是全部，具体取决于浏览器支持度)。

可是在使用CSS继承规则时，若是不但愿一个特定子元素继承该CSS，则再说明一条特殊规则来覆盖便可（这部分涉及到选择器优先级问题，将在后面说明）。

body {
  font-family: Verdana, sans-serif;
}
p {
  font-family: Times, "Times New Roman", serif;
}

CSS 派生选择器

依据元素的位置关系来定义样式。

CSS1称其为上下文选择器（contextual selectors），CSS2称其为派生选择器。

例子：

li strong {
  font-style: italic;
  font-weight: normal;
}

<p>
  <strong>我是粗体字，不是斜体，由于这个规则对我不起做用</strong>
</p>
<ol>
  <li>
  <strong>我是斜体字。这是由于 strong 元素位于 li 元素内。</strong>
  </li>
  <li>我是正常的字体。</li>
</ol>

只有 li 元素中的 strong 元素的样式为斜体字，这样无需为须要修饰的 strong 元素单独定义 class或者id，代码更加简洁。

派生选择器还有更加深刻的内容：

CSS 后代选择器
CSS 子元素选择器
CSS 相邻兄弟选择器

内容引用：CSS 派生选择器

CSS id选择器

为标有 特定id 的 HTML 元素指定特定的样式。

id选择器以"#"来定义。

#red { color: red; }
#green { color: green; }

<p id="red">这个段落是红色。</p>
<p id="green">这个段落是绿色。</p>

之因此叫特定的，就是由于 id属性 只能在每一个HTML文档中出现一次。

在如今布局中，id选择器经常用于创建派生选择器。

#sidebar p {
  ...
}

样式只会应用于出如今id是sidebar的元素内的段落。

内容引用：CSS id 选择器

CSS 类选择器

类选择器的功能能够简单当作是：能给多个元素相同id的id选择器，只不过这里再也不是用id了，而是用class。

在CSS中，类选择器以一个点号显示。

.center {
  text-align: center;
}

全部拥有center类的HTML元素都会应用这个样式。

<h1 class="center">
This heading will be center-aligned
</h1>

<p class="center">
This paragraph will also be center-aligned.
</p>

注意：类名的第一个字符不能是数字，不然没法在 Mozilla 或 Firefox 中起做用。

和 id 同样，class 也可被用做派生选择器。

.sidebar p {
  ...
}

内容引用：CSS 类选择器

CSS 属性选择器

对带有指定属性的 HTML 元素设置样式，不只限于 class 和 id 属性。

注意：只有在规定了 !DOCTYPE 时，IE7 和 IE8 才支持属性选择器。在 IE6 及更低的版本中，不支持属性选择。

属性选择器：

/* 带有 title 属性的全部元素 */
[title] {
  color: red;
}

属性和值选择器：

/* title="W3School" 的全部元素 */
[title=W3School] {
  border: 5px solid blue;
}

若是一个属性有多个值，想要选中这样的元素：

/* 适用于由空格分隔的属性值 */
[title~=hello] {
  color: red;
}
/* 适用于由连字符分隔的属性值 */
[lang|=en] {
  color: red;
}

这种方法的一个应用是设置表单的样式：

input[type="text"] {
  ...
}
input[type="button"] {
  ...
}
...

内容引用：CSS 属性选择器

我的静态博客：

气泡的前端日记： https://rheabubbles.github.io