Learning CSS
- CSS的selector可参考http://www.w3.org/TR/CSS2/selector.html
- font-family中可按顺序设置多种字体,以避免某些字体在客户端未安装,比如:
p {font-family: "Gill Sans", Trebuchet, Calibri, sans-serif;} //font stack
- 可以使用@font-face嵌入字体文件
- 使用word-wrap: break-word;切断长字符串（单词）
- 要隐藏一块区域可使用diplay:none, visibility:hidden，注意后者隐藏后但仍然会占据页面空间。
- 字体大小可以使用：
绝对度量单位：Inches (in)， Centimeters (cm)， Millimeters (mm)， Points (pt)， Picas (pc)
相对度量单位：百分比（相对于默认字体大小的百分比）， Em， X-height (ex)， Pixels (px，像素大小在各客户端不一致)
关键字：xx-small, x-small, small, medium, large, x-large
由于浏览器的差异，字体显示效果各有不同，在选择何种字体大小单位时是一个可学习的小题目
- 设置文本溢出时候以省略号显示可以用text-overflow:ellipsis表示，但同时要配合使用white-space: nowrap;overflow: hidden;
p.style1
{
border: 1px solid black;
width: 150px;
height: 30px;
padding: 12px;
border: 1px solid black;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
- font属性由以下几个属性组成：
• font-style
• font-variant
• font-weight
• font-size/line-height
• font-family
前3个属性的顺序可以任意写，后两个的顺序则按上述规定写
- 对于HTML中的Box-Items，从外到底依次是margin, border, padding,内容。更多参考http://www.w3.org/TR/CSS2/box.html
- background-repeat: repeat-x;设置图片在X轴即水平方向上重复。
- 可用blockquote标签设置引用效果，该标签下应该是<p><div>等block element，不直接包含文本。
- 默认div, p等block elment都是一行一行的排列，在使用div布局时若要想设置左右两个区域，或者左右两块文本，可使用float:left方式，设置其中一块漂浮在左边。
- text-indent可设置第一行的缩进大小，若该值为负可产生倒挂效果。若使用该属性的块在屏幕的左边，这时候用负值会让第一行的前面看不见，安全的方法是同时设置margin-left值。
- 使用pseudo-element :first-line设置第一行的样式
p:first-line {
font-weight: bold;
}
- text-shadow: yellow .15em .15em .15em;可以设置文本背景颜色，后面四个值是背景色与文本行的偏离距离等参数。
- letter-spacing word-spacing line-height可设置字符、单词以及行间距。
- CSS3的border-radius可设置Box-Items中边框拐角半径大小。
- 设置背景图片：
body {
background-image: url(bkgd.jpg);
background-repeat: no-repeat;
}
- border-image可为边框设置背景色。
- 可以通过以下方法设置第二副图片旋转270度的效果,注意selector img+img 表示中+兄弟关系,此外不同浏览器平台的属性值有可能不一样,下面这么写可支持Safari, Firefox and Internet Explorer
- 控制浏览器滚动条的样式
- 可以用下述方法自定义列表前面的符号：
- 设置图片为列表符号：
- clear :none | left |right | both 参数：none : 允许两边都可以有浮动对象 both : 不允许有浮动对象 left : 不允许左边有浮动对象 right : 不允许右边有浮动对象
img+img {
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
body,html {
scrollbar-face-color: #99ccff;
scrollbar-shadow-color: #ccccff;
scrollbar-highlight-color: #ccccff;
scrollbar-3dlight-color: #99ccff;
scrollbar-darkshadow-color: #ccccff;
scrollbar-track-color: #ccccff;
scrollbar-arrow-color: #000033;
}
ul {list-style: none;margin: 0;padding: 0 0 0 1em;text-indent: −1em;} /*首先在这里设置list-style none清除默认列表符号*/
li {width: 33%;padding: 0;margin: 0 0 0.25em 0;}
li:before {content: "\00BB \0020";} /*设置了每个列表项前面的内容*/
li {
list-style-type: disc;
list-style-image: url(bullet.gif);
}
