CSS基础理解

2017-07-31 本文已影响26人抱着熊喵啃什么

CSS基础理解

一、CSS 加载方式有几种

CSS可以通过使用外部样式表、内部样式表、内联样式来使用。

外部样式表（推荐）
1)通过 <link> 引入 CSS。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>CSS</title>
  <link rel="stylesheet" href="index.css">
</head>
<body>
  <h1>Hello CSS!</h1>
</body>
</html>

2)通过 @import 引入样式，放入 css 中

<style>
@import url("index.css");
@import url('index.css');
@import url(index.css);
@import 'custom.css';
@import "common.css";
@import url('landscape.css') screen and (orientation:landscape);
</style>

内部样式表
将 CSS 放在页面的 <style>元素中。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>CSS</title>
  <style>
    h1 { background: orange; }
  </style>
</head>
<body>
  <h1>Hello CSS!</h1>
</body>
</html>

内联样式
不推荐，但在某些情况下很有用。
<p style="background: orange; font-size: 24px;">CSS 很 👍<p>

二、@charset有什么作用

在外部样式表文件内使用。指定该样式表使用的字符编码。

三、CSS具有哪些选择器

简单选择器（Simple selectors）：通过元素类型、class或 id匹配一个或多个元素。

元素选择器 Element Selectors

p {
  color: red;
}

div {
  color: blue;
}

ID 选择器 ID Selectors

<p id="notification">通知：明天放假</p>

#notification {
  font-size: 24px;
}

类选择器 Class Selectors

<ul>
  <li class="first done">起床</li>
  <li class="second done">刷牙</li>
  <li class="third">洗脸</li>
</ul>

.first {
  font-weight: bold;
}

.done {
  text-decoration: line-through;
}

4.通用选择器 Universal Selector

* {
  box-sizing: border-box;
}

.flex-container * {
  flex-basis: 100%;
}

属性选择器（Attribute selectors）：通过属性 / 属性值匹配一个或多个元素。

[attr]
[attr] 选择包含 attr 属性的所有元素，不论 attr 的值为何。

[disabled] {
  cursor: not-allowed;
}

[attr=val]
[attr=val]仅选择 attr 属性被赋值为 val 的所有元素。

[data-color="gray"] {
  color: #ccc;
}

伪类（Pseudo-classes）：匹配处于确定状态的一个或多个元素，比如被鼠标指针悬停的元素，或当前被选中或未选中的复选框，或元素是DOM树中一父节点的第一个子节点。

a:link { ... }
a:visited { ... }
a:hover { ... }
a:active { ... }
li:first-child { ... }
li:last-child { ... }
body :not(p) { ... }
p:not(.warning) { ... }

伪元素（Pseudo-elements）:匹配处于相关的确定位置的一个或多个元素，例如每个段落的第一个字，或者某个元素之前生成的内容。
::after ::before ::selection ::first-letter ::first-line ::-webkit-input-placeholder

.clearfix::after {
  content: '';
  clear: both;
  display: block;
}

/* 设置 input 元素 placeholder 的字体颜色 */
input::-webkit-input-placeholder {
  color: #aaa;
}

组合器（Combinators）：这里不仅仅是选择器本身，还有以有效的方式组合两个或更多的选择器用于非常特定的选择的方法。例如，你可以只选择divs的直系子节点的段落，或者直接跟在headings后面的段落。

A, B
A, B 选中匹配 A 或/和 B 的元素

.author, .famous {
  font-weight: bold;
}

<h1>登鹳雀楼</h1>
<p class="author">王之涣<p>
<p class="normal">百日依山尽，黄河入海流。</p>
<p class="famous">欲穷千里目，更上一层楼。</p>

A B
A B 选中匹配 B 且为匹配 A 的元素的后代元素。

.article a {
  color: #384ebf;
}

A > B
A > B 选中匹配 B 且为匹配 A 的元素的直接子元素。

.warriors > li {
  background-image: url(../images/warrior.svg);
}

<ul class="warriors">
  <li><!-- ✅ -->
    斯蒂芬·库里
    <ul>
      <li>微博：<a href="http://weibo.com/u/3432945104">@StephenCurry</a></li>
      <li>Twitter: <a href="https://twitter.com/stephencurry30">@StephenCurry30</a></li>
    </ul>
  </li>
  <li>凯文·杜兰特</li><!-- ✅ -->
  <li>克莱·汤普森</li><!-- ✅ -->
  <li>德雷蒙德·格林</li><!-- ✅ -->
</ul>

A + B
A + B 选中匹配 B 且为匹配 A 的元素的下一相邻元素。

.cavs .lbj + li {
  text-shadow: 1px 1px 5px #ccc;
}

<ul class="cavs">
  <li class="lbj">勒布朗·詹姆斯</li>
  <li>凯里·欧文</li><!-- ✅ -->
  <li>凯文·乐福</li>
</ul>

A ~ B
A ~ B 选中匹配 B 且为匹配 A 的元素的下 N 个相邻元素。

.cavs .lbj ~ li {
  text-shadow: 1px 1px 5px #ccc;
}

<ul class="cavs">
  <li class="lbj">勒布朗·詹姆斯</li>
  <li>凯里·欧文</li><!-- ✅ -->
  <li>凯文·乐福</li><!-- ✅ -->
</ul>

多用选择器（Multiple selectors）：这些也不是单独的选择器；这个思路是将以逗号分隔开的多个选择器放在一个CSS规则下面，以将一组声明应用于由这些选择器选择的所有元素。

.players .player.curry, .player.mvp, #lebron-james {
  background-image: url(../images/mvp.png);
}

CSS基础理解

CSS基础理解

一、CSS 加载方式有几种

二、@charset有什么作用

三、CSS具有哪些选择器

猜你喜欢

热点阅读