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;
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值