Idle Works, Idle Thoughts

CSS学习笔记

文本控制

在手机上正常显示文本:

<meta name="viewport" content="width=device-width, initial-scale=1" />

手机从竖屏转为横屏时,字体保持正常:

-webkit-text-size-adjust: 100%;     /* Prevent font scaling in landscape(Mobile) */    

从px到em的转换:

16px = 1em.

font-*表示对字体的设置,如font-size, font-family等。

text-*表示对文本的设置,如text-align等。

font-family用于设置字体族,如:

font-family: Helvetica, Arial, Tahoma, "Microsoft Yahei", STXiHei, sans-serif;

有几点需要注意:

  1. 先设置英文字体,再设置中文字体。而不是相反的顺序。
  2. 如果字体包含空格,用引号把字体名称引起来,如“Microsoft Yahei”。

不同平台上的简体中文:

Windows OS X
黑体(SimHei) 冬青黑体(Hiragino Sans GB)
宋体(SimSun) 华文细黑(STHeiti Light 或 STXihei)
仿宋(FangSong) 华文黑体(STHeiti)
楷体(KaiTi) 华文楷体(STKaiti)
微软雅黑(Microsoft YaHei) -

从OS X 10.11(EI Captain)起,苹果使用一种新设计的中文字体,叫做PingFang(“苹方”/“萍方”)。同时,PingFang也是iOS 9上的默认字体。在OS X上,它的位置在:

/System/Library/Fonts/PingFang.ttc  

PingFang有6个字重,font-family定义如下:

字重 定义
苹方-简体 常规体 PingFangSC-Regular
苹方-简体 细体 PingFangSC-Light
苹方-简体 极细体 PingFangSC-Ultralight
苹方-简体 纤细体 PingFangSC-Thin
苹方-简体 中黑体 PingFangSC-Medium
苹方-简体 中粗体 PingFangSC-Semibold

除了简体外,PingFang还提供了繁体(PingFangTC-*)和港体(PingFangHK-*)。

文本在input里居中:

input { text-align:center; }

White Space

white-space用来控制元素中的空格(whitespace)和断行(line breaks),它有几个取值,其默认值是 normal

normal, nowrap, pre, pre-line, pre-wrap

wrap有自动换行的意思。一行挤不下,就放在两行里显示。这几个值,就是来控制whitespace, wrap和line breaks的。

取值 Whitespace wrap line breaks
normal N → 1 Yes No
nowrap N → 1 No No
pre N No Yes
pre-line N → 1 Yes Yes
pre-wrap N Yes Yes

它们的具体含义如下:

pre标签

如果你是个程序员,要写技术博客,通常要在HTML中保持源代码的缩进和断行,应该用<pre>标签。大多数浏览器对<pre>设置了如下样式:

pre {
    display: block;
    font-family: monospace;
    white-space: pre;
    margin: 1em 0;
} 

保持缩进和断行的关键在于:white-space: pre;

nowrap

Table的th通常有这样的要求:让所有元素都在一行,不自动换行。可以如下设定:

.nowrap { white-space:nowrap; }

HTML元素

table

限制table中一列的宽度,如果超出宽度限制,就显示省略号:

.col-td { 
    max-width:42px; 
    white-space:nowrap; 
    overflow:hidden;
    text-overflow:ellipsis; 
}

这里做了4件事:

列表

list-style控制列表前的符号样式,它的设置格式为:

list-style: type position image

其默认值为:

list-style: disc outside none    

即圆点显示。

div通用

可编辑的DIV:

<div onClick="this.contentEditable='true';">
    content
</div>

属性选择符

Attribute selector,即属性选择符。

所谓属性,如a标签的href,img标签的alt属性等。

a[href="#"] { color: #E18728; }

有7种不同的属性选择符:

[attr]          { /* attribute exists */ }
[attr="foo"]    { /* attribute has this exact value */ }
[attr*="foo"]   { /* attribute value contains this value */ }
[attr~="foo"]   { /* attribute has this value in a space-separated list */ }
[attr^="foo"]   { /* attribute starts with this */ }
[attr$="foo"]   { /* attribute ends with this */ }
[attr=|"foo"]   { /* attribute has this value in a dash-separated list */ }

1. attr存在:

img[alt] {}

匹配所有有alt属性的img,如:

<img src="flower.png" alt="flower">

2. 匹配attr的值:

img[alt="blue"]

匹配alt值为blue的img,如:

<img src="flower.png" alt="blue">

3. 匹配attr中包含一个值:

img[alt*="art"]

匹配alt值里含有art这个字符串的img,如:

<img src="flower.png" alt="start travel">

4. 匹配attr中的一个值,如:

img[alt~="art"]

匹配:

<img src="flower.png" alt="photo art">

不匹配:

<img src="flower.png" alt="start travel">

5. 匹配开始,如:

img[alt^="."] { border: 0; }

img的alt若以.点号打头就不要border。

所有name以wt_打头的input元素,即如<input name="wt_1" />

input[name^=wt_] { margin-right:0.5em; }

6. 匹配结束,如:

a[href$="pdf"] { border: 1px solid #E6E6E6; }

a标签的href若以pdf结尾就加一个border。

7. 匹配连词符中的第1个值,如:

img[alt|="2015"]

匹配:

<img src="flower.png" alt="2015-1985">

不匹配:

<img src="flower.png" alt="1985-2015">

伪元素和伪类选择符

伪元素选择符(Pseudo Elements):

::after, ::before, ::first-letter, ::first-line, ::selection

伪类选择符(Pseudo Classes),如常见的针对一个链接的选择符:

a:hover, a:active, a:visited, a:link (unvisited)

如常见的针对form元素的选择符:

:checked, :enabled, :disabled, :focus

如常见的其他选择符:

:first-child, nth-child(n)     

::before 选择符。在标题3之前添加一段文字:

h3::before {
    content: "Title 3: ";        
}

注意,在content中不能用HTML特殊符号,如&sect;,这样只能直接显示为&sect;文本,而非书节符号。只能通过如下方式显示:

h3::before {
    content: "\00a7";
}

在每个list前添加一个图标:

list { list-style: none; }
list::before { content: url("images/star.jpg"); }    

选择背景图片

我们经常可以看到这样的页面设计,有一个Icon,显示为灰色,鼠标移上去后就变成了彩色。这个图片一般是这样:

它的实现效果如下(把鼠标移动到图片上):

它的实现代码:

<div class="css-images-sel"></div>

.css-images-sel {
    width: 153px;
    height: 153px;
    background: url("/images/css.images.sel.png");
}

.css-images-sel:hover {
    background-position: right;
}    

另一个案例,图片如下:

它的实现效果如下(把鼠标移动到图片上):

它的实现代码(2个元素的背景都是同一个,但通过偏移和宽度,控制显示区域):

<div>
    <div class="css-twitter"></div>
    <div class="css-facebook"></div>
</div>

.css-twitter, .css-facebook { 
    width: 27px;
    height: 26px;
    background: url("/images/css.twitter.facebook.png");
    float: left;
    margin: 0 8px 0 0;
}

.css-twitter:hover  { background-position: left bottom; }
.css-facebook       { background-position: right top; }
.css-facebook:hover { background-position: right bottom; }

对指定类的a:hover进行设置,例如:

<a href="#" class="notice">Notice</a>

CSS代码:

a.notice:hover {}    

用CSS绘制简单图形

以下CSS代码实现画一个圆:

.mark {
    height:1em;
    width:1em;
    border-radius:1em;
    display:inline-block;
    margin-left:0.5em;
}

加上一组底色搭配:

.bbc { background-color:#4a89dc; }
.gbc { background-color:#8cc152; }
.rbc { background-color:#da4453; }

在HTML中套用:

<ul>
    <li>三人同舟<span class="mark bbc"></span></li>
    <li>懒人闲思录<span class="mark gbc"></span></li>
    <li>巴菲特传<span class="mark rbc"></span></li>
</ul>

效果: