css3学习笔记1

文字与字体相关样式

text-shadow:length length length color
参数依次为：阴影离开文字的横方向距离，阴影离开文字的的纵方向距离，阴影的模糊半径，阴影颜色。
可以指定多个阴影，用逗号分隔。例如：

div{
        text-shadow: 10px 10px #f39800, 
40px 35px #fff100, 
70px 60px #c0ff00;
        color: navy;
        font-size: 50px;
        font-weight: bold;
        font-family: 宋体;
}

word-break:让文本自动换行。
三个值：
normal(使用浏览器默认规则）
keep-all(只能在半角空格或连字符处换行）
break-all(允许在单词内换行）

word-wrap:实现长单词与url地址的自动换行。
normal:
break-word:只在半角空格或连字符的地方进行换行。

web font 与@font-face属性

使用这个功能可以使网页可以使用安装在服务器端的字体。
实例：

@font-face{
    font-family: WebFont;(声明使用服务器端的字体）
    src: url('Fontin_Sans_R_45b.otf') format("opentype");
    font-weight: normal;
}
h1{
    font-family: WebFont; 
    font-size: 60px;
    text-align: center;
    border: solid 1px #4488aa;
    margin: 20px;
    padding: 5px;
}

在src中指定服务器字体的字体文件所在的路径。format属性声明字体文件的格式（可以省略）。
到目前为止，可以使用的文件格式为OpenType格式（文件扩展名为.otf）与TrustType格式(.ttf)，

使用本地的字体：需要将字体文件路径值改为“local()”形式的属性值，并且在local后面的括号中写入使用的字体。示例：

@font-face{
    font-family: Arial;
    src: local('Arial');
}
@font-face
{
    font-family: Arial;
    font-weight: bold;
    src: local('Arial Black');
}

@font-face可以指定的属性：
font-family:字体系列
font-style:normal,italic(使用斜体）,oblique(使用倾斜体),inherit
font-variant:字体大小写。normal,small-caps(使用小型大写字母),inherit
font-weight:normal,bold,bolder,lighter,100~900(400为normal,700为bold)
font-stretch:字体是否变形。normal,wider(把伸缩比例设置为更进一步的伸展值），
narrower,ultr-condensed(最宽的值）ultr-expanded(最窄的值），extra-condensed,extra-expanded,condensed,
condensed,semi-condensed,semi-expanded

font-size:字体大小
src:字体文件的路径

font-size-adjust:修改字体种类而保持字体尺寸不变
它需要使用每个字体种类自带的一个aspect值（比例值），示例如下：
div{
font-size:16px;
font-family:Times New Roman;
font-size-adjust:0.46;
}

盒相关样式

使用display属性定义盒的类型，分为block类型和inline类型。例如div，p元素属于block类型，span,a元素属于inline类型。将display:inline-block则在显示时它具有inline类型盒的特点，与inline的区别是inline指定width时不起作用，而inline-block起作用。
使用inline-block可以一行显示多个block类型的元素。
默认情况下inline-block并列显示的元素的对齐方式是底部对齐。可以改为顶部对齐。
vertical-align:top

使用inline-block类型来显示水平菜单。

ul{
        margin: 0;
        padding: 0;
}
li{
        display: inline-block;
        background-color: #00ccff;
        border: solid 1px #666666;
        text-align: center;
}
a{
        color: #000000;
        text-decoration: none;
        background-color: #ffcc00;
        display: inline-block;
        width: 100px;
        padding: 10px 0;
}

inline-table：使表格元素可以跟文字处于同一行中。

table{
display:inline-table;
border:solid 3px #00aaff;
}
//还可以作为列表来显示
div{
        display:list-item;
        list-style-type:circle;
        margin-left:30px;
}

display:none不显示

overflow属性：
可取：hidden，scroll,auto

overflow-x,overflow-y也一样。

text-overflow:在水平方向超出盒的容纳范围时有效，在盒的末尾显示一个代表省略的符号“…”.
示例：

div{
        overflow:hidden;
        text-overflow: ellipsis;
        -webkit-text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
        white-space: nowrap; 
        width: 300px;
        border: solid 1px orange;
}

box-shadow:length length length color(参数意义同text-shadow)
在Safari浏览器中要写成：“-webkit-box-shadow”,在firefox：“-moz-box-shadow”;

对盒子内子元素使用阴影：div中有个span元素

span{
     background-color: #ffaa00;
      　 -moz-box-shadow: 10px 10px 10px gray;
}
span{
     background-color: #ffaa00;
         -webkit-box-shadow:10px 10px 10px gray;
}

box-sizing属性：
content-box(表示元素的高度与宽度不包括内部补白区域，以及边框的宽度与高度,默认值）
border-box(表示元素的高度与宽度包括内部补白区域，以及边框的宽度与高度）

div{
        width: 300px;
        border: solid 30px #ffaa00;
        padding: 30px;
        background-color: #ffff00;
        margin: 20px auto;
}
div#div1{
        box-sizing: content-box;
        -webkit-box-sizing: content-box;
        -moz-box-sizing: content-box;
        -ms-box-sizing: content-box;
}