CSS实用笔记（一）

什么是 CSS？
CSS（Cascading Style Sheet）是用来为网页添加样式的代码,是一种用于向用户指定文档如何呈现的语言。

CSS实际上是如何工作的？

当浏览器显示文档时，它必须将文档的内容与其样式信息结合。分为两个阶段处理文档：

  1. 浏览器将 HTML 和 CSS 转化成 DOM （文档对象模型）。DOM在计算内存中表示文档。它把文档内容和其样式结合在一起。
  2. 浏览器显示 DOM 内容。

    参考资料

CSS 的加载方式

  • 外部样式表
    • 通过<link>引入 CSS。
    <!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>CSS</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Hello CSS!</h1>
</body>
</html>
    • 通过@import引入样式，放入<style>元素中，或被引用的外部 CSS 文件。
    <style>
@import url("styles.css");
@import url('styles.css');
@import url(styles.css);
@import 'styles.css';
@import "styles.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;">Hello World!<p>

缺点：大量使用会使页面看起来很复杂， 且不利于更改样式。

  • 属性样式

不推荐，太过时啦。

![](a.png)

@charset 是什么，有什么作用？

  • 在 CSS 文件中使用@charset "utf-8"，告诉浏览器使用"utf-8"的格式解码。原理和我们在HTML中使用<meta charset="utf-8">类似。
  • CSS 中@charset "utf-8"会对我们的中文注释产生影响，当在线上预览 CSS 文件时，使用@charset "utf-8"以防使我们的中文注释变成乱码。
  • 当在选用的字体，使用中文时，@charset "utf-8"能够使浏览器正确识别中文字体。
    例如：font-family: '微软雅黑';

若不使用 @charset "utf-8"应当尽量保证 CSS 文件中不要出现中文。

@import有什么作用？如何使用？

@import通常用来将外部CSS文件通过<style>标签引入HTML，或将新的CSS文件引入已被HTML引用的CSS文件。

  • 在HTML的<style>标签中引入外部CSS文件
<style>
@import url("styles.css");
@import url('styles.css');
@import url(styles.css);
@import 'styles.css';
@import "styles.css";
@import url('landscape.css') screen and (orientation:landscape);
</style>
//以上几种写法都适用，但是不要忘记分号
  • 在已经被HTML引用的CSS文件中引入新的CSS文件
    直接在CSS文件中写
@import "styles2.css"  //styles2.css为想要新增的CSS文件

CSS选择器常见的有几种?

CSS选择器用于定位我们想要给予样式的HTML元素。

  • 元素选择器（Element Selectors）
p {
  color:red;
}
div {
  color:blue;
}
  • ID 选择器（ID Selectors）
<p id="notification">通知：明天不上班！</p>

#notification {
  font-size: 25px;
}
  • 类选择器（Class Selectors）
    一个 CSS 类可以应用到多个不同的元素，一个元素也可以应用多个不同的 CSS 类。
<ul>
  <li class="first done">起床</li>
  <li class="second done">刷牙</li>
</ul>

.first {
  font-weight: bold;
}
.done{
  text-decoration: line-through;
}
  • 通用选择器（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的所有元素。

[date-color="grey"] {
  color: #ccc;
}

[attr~=val]
[attr~=val]仅选择attr属性的值（以空格间隔出多个值）中包含val值的所有元素，比如位于被空格分隔的多个类（class）中的一个类。

[attr*=val]
[attr*=val]选择 attr 属性的值中包含字符串 val 的元素。

[title*="good"] {
  display: none;
}

[attr^=val]
[attr^=val]选择attr属性的值以val开头（包括val）的元素。

[href^="http://"] {
  background-color: #f0ad4e;
}

[attr$=val]
[attr$=val]选择attr属性的值以val结尾（包括val）的元素。

[src$="gif"] {
  border: 1px solid #ccc;
}

[attr|=val]
[attr|=val]选择attr属性的值以val（包括val）或val-开头的元素（-用来处理语言编码）。

[lang|="zh"] {
  font-family: '微软雅黑';
}
  • 组合选择器（Combinators）

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>                            //选中
  • 多个选择器（Multiple Selectors）
.players .player.curry, .player.mvp, #lebron-james {
  background-image: url(../images/mvp.png);
}

id 选择器和 class 选择器的使用场景分别是什么？

  • id选择器用于标识页面上唯一的元素，一个元素只能添加一个id选择器
  • class选择器可以应用到很多元素，一个元素也可以有很多的class选择器

id可以理解为一个人的身份证号，是唯一对应的。而class可以理解为一个人的标签，#高帅富#，#律师#，#已婚#。

伪类选择器有哪些？伪元素有哪些？

  • 伪类（Pseudo-classes）

CSS伪类用于向某些选择器添加特殊的效果。
语法：

selector : pseudo-class {property: value}

a:link { ... }  //未访问的链接
a:visited { ... }  //已访问的链接
a:hover { ... }  //鼠标移动到链接上
a:active { ... }  //选定的链接

li:first-child { ... }  //向元素的第一个子元素添加样式。
li:last-child { ... }  //向元素的最后一个子元素添加样式。

body :not(p) { ... }
p:not(.warning) { ... }
  • 伪元素（Pseudo-elements）

CSS伪元素用于向某些选择器设置特殊效果。
语法：

selector:pseudo-element {property:value;}

::after

/* Add an arrow after links */
a::after {
  content: "→";
}

::before

/* Add a heart before links */
a::before {
  content: "♥";
}

::selection
应用于文档中被用户高亮的部分（比如鼠标选中的部分）。

p::selection {
  color: white;
  background: blue;
}

::backdrop
实验特性

::first-letter
选中一整块文字第一行的第一个字母，当文字所处的行之前没有其他内容（如图片和内联的表格）。

p::first-letter {
  color: red;
  font-size: 130%;
}

::first-line
将样式只应用于一个块状元素的首行。

::first-line {
  color: blue;
  text-transform: uppercase;
}

::-webkit-input-placeholder

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

下面代码是什么意思？

.item+p {color: red} class为item的元素的子元素p的下一相邻元素字体颜色为红色。
.item~p {color: yellow} class为item的元素它的子元素p的下N个相邻元素字体颜色为黄色。
.item p {color: blue} class为item的元素它的子元素p字体颜色为蓝色。
p.item {color: blue} p元素的后代class为item的元素字体颜色为蓝色。
.item>p{color: blue} class为item的元素它的直接子元素p字体颜色为蓝色。

em、rem分别是什么？

px、em、rem都是CSS中的单位：

px：

相对长度单位，像素px是相对显示器屏幕分辨率而言的。

em：

相对长度单位，元素的font-size的计算值，代表了继承的字体大小的倍数（设置父元素字体为18px，设置字体大小为2em时就相当于36px，浏览器默认字体为16px，若不设置字体大小，那2em为32px）。
常用于创建可伸缩布局，这样即使用户更改了字体尺寸也不影响页面整体布局。CSS属性line-height，font-size，margin-bottom和margin-top常用em表示值。

rem：

是CSS3新增的一个相对单位（root em，根em），默认初始值是html默认font-size大小。当为在根元素上设置font-size大小时，1rem=1em，代表根元素默认大小的倍数。
该单位常用于创建完美的可扩展布局。如果不被目标浏览器支持，可以使用em单位。IE8及之前版本不支持rem。

颜色有几种写法？

color: 直接写颜色名，如：blue;
color: #000000~ #ffffff;
color: #000~ #fff;
color: rgb(0,0,0)~ rgb(255,255,255);
color: rgb(0%,0%,0%)~rgb(100%,100%,100%);

参考链接

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • HTML+CSS(47-72)
    问答题47 /72 常见浏览器兼容性问题与解决方案？ 参考答案 (1)浏览器兼容问题一：不同浏览器的标签默认的外补...
    _Yfling阅读 14,687评论 1赞 92
  • CSS入门笔记 － 初识CSS
    引言 本人在慕课网学习HTML+CSS基础课程，记录一些文字，方便自己回忆，也希望对大家有所帮助 上次给大家带来了...
    zhaolion阅读 12,069评论 18赞 272
  • 前端面试题汇总
    <a name='html'>HTML</a> Doctype作用？标准模式与兼容模式各有什么区别? （1）、<...
    clark124阅读 8,948评论 1赞 19
  • 2017-10-29
    想念一个人久了，一定会重逢。
    桥豆麻袋1号阅读 1,664评论 0赞 0
  • 武道到底会发展成啥德行_9周3天
    今天是周末，媳妇店里课程特别多，媳妇安排好了上课的老师，但自己还是亲自在家长休息室陪家长聊天，真是做到了亲力亲为...
    秋景001阅读 1,222评论 0赞 0