文字与字体相关样式
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;
}