Y分钟学CSS

Hydrogen 发布于2019-08-28 17:51 / 2025人阅读

摘要：通过，可以实现网页样式和内容的分离。注释注释使用和包裹。针对页面上的所有元素。其次，因为它比其他指令更具体。兼容性的绝大部分特性兼容各种浏览器和设备。但是兼容性问题仍然是需要留意的一个问题。是关于这方面最好的资源。

早期的web没有样式，只是单纯的文本。通过CSS，可以实现网页样式和内容的分离。

简单来说，CSS可以指定HTML页面上的元素所使用的样式。

和其他语言一样，CSS有很多版本。最新的版本是CSS 3. CSS 2.0兼容性最好。

你可以使用dabblet来在线测试CSS的效果。

注释

注释使用/*和*/包裹。

/* 注释 */

选择器

一般而言，CSS的声明语句非常简单。

选择器 { 属性: 值; /* 更多属性...*/ }

选择器用于指定页面上的元素。

针对页面上的所有元素。

* { color:red; }

假定页面上有这样一个元素

你可以通过类名来指定它。

.some-class { }

给出所有类名：

.some-class.class2 { }

标签名

div { }

#someId { }

由于元素包含attr属性，因此也可以通过这个来指定：

[attr] { font-size:smaller; }

以及有特定值的属性：

[attr="value"] { font-size:smaller; }

通过属性的值的开头指定：

[attr^="val"] { font-size:smaller; }

通过属性的值的结尾来指定：

[attr$="ue"] { font-size:smaller; }

通过属性的值的部分来指定：

[attr~="lu"] { font-size:smaller; }

你可以把这些全部结合起来，注意不同部分间不应该有空格，否则会改变语义。

div.some-class[attr$="ue"] { }

你也可以通过父元素来指定。

某个元素是另一个元素的直接子元素：

div.some-parent > .class-name {}

或者通过该元素的祖先元素

div.some-parent .class-name {}

注意，去掉空格后语义就不同了。你能说出哪里不同么？

div.some-parent.class-name {}

你可以选择某元素前的相邻元素:

.i-am-before + .this-element { }

某元素之前的同级元素（相邻或不相邻）：

.i-am-any-before ~ .this-element {}

伪类允许你基于页面的行为指定元素（而不是基于页面结构）。

例如，当鼠标悬停在某个元素上时：

:hover {}

已访问过的链接：

:visited {}

未访问过的链接：

:link {}

当前焦点的input元素：

:focus {}

属性单位

width: 50%; /* 百分比 */
font-size: 2em; /* 当前字体大小的两倍 */
width: 200px; /* 像素 */
font-size: 20pt; /* 点 */
width: 5cm; /* 厘米 */
width: 50mm; /* 毫米 */
width: 5in; /* 英尺 */

颜色

background-color: #F6E;  /* 短16位 */
background-color: #F262E2; /* 长16位 */
background-color: tomato; /* 颜色名称 */
background-color: rgb(255, 255, 255); /* rgb */
background-color: rgb(10%, 20%, 50%); /*  rgb 百分比 */
background-color: rgba(255, 0, 0, 0.3); /*  rgb 加透明度 */

图片

background-image: url(/path-to-image/image.jpg);

字体

font-family: Arial;
font-family: "Courier New"; /* 使用双引号包裹含空格的字体名称 */
font-family: "Courier New", Trebuchet, Arial; /* 如果第一个
                         字体没找到，浏览器会使用第二个字体，一次类推 */

使用

CSS文件使用 .css 后缀。

优先级

同一个元素可能被多个不同的选择器指定，因此可能会有冲突。

假定CSS是这样的：

/*A*/
p.class1[attr="value"]

/*B*/
p.class1 {}

/*C*/
p.class2 {}

/*D*/
p {}

/*E*/
p { property: value !important; }

然后标记语言为：

那么将会按照下面的顺序应用风格：

E 优先级最高，因为它使用了 !important，除非很有必要，尽量避免使用这个。

F 其次，因为它是嵌入的风格。

A 其次，因为它比其他指令更具体。

C 其次，虽然它的具体程度和B一样，但是它在B之后。

接下来是 B。

最后是 D。

兼容性

CSS2 的绝大部分特性兼容各种浏览器和设备。现在 CSS3 的兼容性也越来越好了。但是兼容性问题仍然是需要留意的一个问题。

QuirksMode CSS是关于这方面最好的资源。

扩展阅读

CSS优先级详解

CSS兼容性列表

理解 CSS 的 z-index 属性

原文 Learn X in Y minutes, where X=css
翻译 SegmentFault

云服务器 GPU云服务器一分钟内一分钟云服务器三分钟分钟

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/110840.html

【30分钟学完】canvas动画|游戏基础(2)：从零开始画画

摘要：前言上篇主要是理论的概述，本篇会多些实践，来讲讲的基础用法，并包含一些基础三角函数的应用，推荐没有基础的朋友阅读，熟悉的朋友可以跳过。完整实例一个会跟踪鼠标位置的箭头三角函数上下运动终于顺利过渡到三角函数的话题笑。前言上篇主要是理论的概述，本篇会多些实践，来讲讲canvas的基础用法，并包含一些基础三角函数的应用，推荐没有canvas基础的朋友阅读，熟悉的朋友可以跳过。本人能力...

anyway 2019-08-02 16:01 评论0 收藏0
【30分钟学完】canvas动画|游戏基础(2)：从零开始画画

摘要：前言上篇主要是理论的概述，本篇会多些实践，来讲讲的基础用法，并包含一些基础三角函数的应用，推荐没有基础的朋友阅读，熟悉的朋友可以跳过。完整实例一个会跟踪鼠标位置的箭头三角函数上下运动终于顺利过渡到三角函数的话题笑。前言上篇主要是理论的概述，本篇会多些实践，来讲讲canvas的基础用法，并包含一些基础三角函数的应用，推荐没有canvas基础的朋友阅读，熟悉的朋友可以跳过。本人能力...

Baoyuan 2019-08-22 15:42 评论0 收藏0
重学前端学习笔记（二十六）--CSSOM

摘要：笔记说明重学前端是程劭非前手机淘宝前端负责人在极客时间开的一个专栏，每天分钟，重构你的前端知识体系，笔者主要整理学习过程的一些要点笔记以及感悟，完整的可以加入的专栏学习原文有的语音，如有侵权请联系我，邮箱。笔记说明重学前端是程劭非（winter）【前手机淘宝前端负责人】在极客时间开的一个专栏，每天10分钟，重构你的前端知识体系，笔者主要整理学习过程的一些要点笔记以及感悟，完整的可以...

antz 2019-08-30 11:02 评论0 收藏0