Y分钟学CSS

时间 2019-11-11

标签分钟 css 栏目 CSS 繁體版

原文原文链接

早期的web没有样式，只是单纯的文本。经过CSS，能够实现网页样式和内容的分离。css

简单来讲，CSS能够指定HTML页面上的元素所使用的样式。html

和其余语言同样，CSS有不少版本。最新的版本是CSS 3. CSS 2.0兼容性最好。web

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

注释

注释使用/*和*/包裹。浏览器

/* 注释 */

选择器

通常而言，CSS的声明语句很是简单。测试

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

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

针对页面上的全部元素。ui

* { color:red; }

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

<div class='some-class class2' id='someId' attr='value' />

你能够经过类名来指定它。url

.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 后缀。

<!-- 你须要在文件的 <head> 引用CSS文件 -->
<link rel='stylesheet' type='text/css' href='filepath/filename.css' />

<!-- 你也能够在标记中内嵌CSS。不过强烈建议不要这么干。 -->
<style>
   选择器 { 属性:值; }
</style>

<!-- 也能够直接使用元素的style属性。
这是你最不应干的事情。 -->


<div style='property:value;'>
</div>

优先级

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

假定CSS是这样的：

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

/*B*/
p.class1 {}

/*C*/
p.class2 {}

/*D*/
p {}

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

而后标记语言为：

<p style='/*F*/ property:value;' class='class1 class2' attr='value'>
</p>

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

E 优先级最高，由于它使用了 !important，除非颇有必要，尽可能避免使用这个。
F 其次，由于它是嵌入的风格。
A 其次，由于它比其余指令更具体。
C 其次，虽然它的具体程度和B同样，可是它在B以后。
接下来是 B。
最后是 D。

兼容性

CSS2 的绝大部分特性兼容各类浏览器和设备。如今 CSS3 的兼容性也愈来愈好了。可是兼容性问题仍然是须要留意的一个问题。

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

扩展阅读

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

1. Y分钟学C#
2. Y 分钟学 Dart
3. Y 分钟学 Elixir
4. Y分钟学Bash
5. Y分钟学Common Lisp
6. Y分钟学clojure宏
7. Y分钟Erlang
8. X分钟速成Y （其中Y=Python3）
9. 5分钟学会 CSS Grid 布局
10. 数学概率之z=x+y和z=x-y和z=x/y的分布
更多相关文章...
• jQuery Mobile CSS 类 - jQuery Mobile 教程
• CSS 指南 - 网站建设指南
• Git五分钟教程
• Tomcat学习笔记（史上最全tomcat学习笔记）