CSS常用样式（一）

最新推荐文章于 2024-06-03 23:30:08 发布

anrang1377

最新推荐文章于 2024-06-03 23:30:08 发布

阅读量85

点赞数

原文链接：http://www.cnblogs.com/46ly/p/5760175.html

版权

一、字体样式

1、font-style：设置或检索对象中的文本字体样式。

取值：

normal：指定文本字体样式为正常的字体

italic：指定文本字体样式为斜体。对于没有斜体变量的特殊字体，将应用oblique

oblique：指定文本字体样式为倾斜的字体

2、font-variant：设置或检索对象中的文本是否为小型的大写字母。

取值：

normal：正常的字体

small-caps：小型的大写字母字体 3、font-weight：设置或检索对象中的文本字体的粗细。　　取值：　　normal：正常的字体。相当于number为400 bold：粗体。相当于number为700。 bolder：特粗体。也相当于strong和b对象的作用 lighter：细体 integer：用数字表示文本字体粗细。取值范围：100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

4、font-size：设置或检索对象中的字体尺寸。

　　取值：

relative-size：相对于父对像中字体尺寸进行相对调节。使用成比例的em单位计算。可选参数值：smaller | larger

length：用长度值指定文字大小。不允许负值。

percentage：用百分比指定文字大小。其百分比取值是基于父对象中字体的尺寸。不允许负值。

5、font-family：设置或检索用于对象中文本的字体名称序列。

　　取值：

　　family-name:字体名称。可以有多个值，以逗号隔开。浏览器以先后顺序依次使用字体。

　　generic-family:字体序列名称。

6、font-stretch：设置或检索对象中的文字是否横向拉伸变形。

　　取值：

　　ultra-condensed：比正常文字宽度窄4个基数。

extra-condensed：比正常文字宽度窄3个基数。

condensed：比正常文字宽度窄2个基数。

semi-condensed：比正常文字宽度窄1个基数。

normal：正常文字宽度

semi-expanded：比正常文字宽度宽1个基数。

expanded：比正常文字宽度宽2个基数。

extra-expanded：比正常文字宽度宽3个基数。

ultra-expanded：比正常文字宽度宽4个基数。

注：也可以直接用font：[ [ <font-style> || <font-variant> || <font-weight> ]? <font-size> [ / <line-height> ]? <font-family> ] 简写的方式。

下面举个综合以上属性的例子：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            #p1{
                font-family: "微软雅黑";
                font-size: 15px;
                font-style: italic;
                font-stretch:extra-condensed;
                font-weight: bold;
                font-variant: normal;
            }

/* #p1{
font:italic normal bold 15px "微软雅黑";
}*/


        </style>
    </head>
    <body>
        <p id="p1">翦翦风，鸳鸯灯。星月无眠，鹊桥筑梦。</p>
    </body>
</html>

效果如下：

翦翦风，鸳鸯灯。星月无眠，鹊桥筑梦。

二、元素样式

1、宽度

width:auto|length

例：p{ width:100px;}

　　div{width:50%;}

height:auto|length;

例：p{height:200px;}

　　div{height:50%;}

3、外边距

margin:auto|length

取值：

margin-top: 设置上边的外边距

margin-right: 设置右边的外边距

margin-bottom: 设置下边的外边距

margin-left: 设置左边的外边距

缩写形式:

margin:上边距右边距下边距左边距

margin:上下边距左右边距

margin:上边距左右边距下边距

例子如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            #div1{
                width:200px;
                height: 100px;
                background:pink;                
            }
            #div2{
                width: 110px;
                height: 80px;
                margin-top:20px;
                margin-right: 20px;
                margin-bottom: 30px;
                margin-left: 40px;
                background: blue;
            }            
        </style>
    </head>
    <body>        
        <div id="div1">
            <div id ="div2">
                我是里边的内容。
            </div>
        </div>
        
    </body>
</html>

我是里边的内容。

4、内边距

padding:auto|length

取值：

padding-top: 设置上边的内边距

padding-right: 设置右边的内边距

padding-bottom: 设置下边的内边距

padding-left: 设置左边的内边距

缩写形式:

padding:上边距右边距下边距左边距

padding:上下边距左右边距

padding:上边距左右边距下边距

例子如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">            
            #div3{
                width: 100px;
                height: 100px;
                padding-top: 20px;
                padding-right: 30px;
                padding-bottom: 30px;
                padding-left: 10px;
                background-color: #0000FF;
            }
        </style>
    </head>
    <body>
        
        <div id="div3">
            我是里面的内容
        </div>
    </body>
</html>

我是里面的内容

三、颜色

color 检索或设置对象的文本颜色。无默认值。

颜色属性值分三种值的格式

（1）、英文单词，比如 red , yellow ,green …

（2）、十六进制表示方式，#开头，6个十六进制的字符或数字组合。比如：#FFFFFF，#000000，#CCCAAA，#22BCAD。十六进制： 0-9 和 a-f RGB模式，红 0-255，绿 0-255，蓝 0-255。比如： RGB(120,33,234)。

RGBA(255,0,0,.5) RGBA模式，最后的A表示透明度50%小数点前的0可以省略不写。

例：

<style>
      #p11{
    color: red;                
    }    
      #p22{
    color:#eee;
    }
    #p33{
    background: rgba(0,0,0,0.5);
    }
</style>

<body>
        <p id="p11">段落1</p>
        <p id="p22">段落2</p>
        <p id="p33">段落3</p>
</body>

段落1

段落2

段落3

转载于:https://www.cnblogs.com/46ly/p/5760175.html

anrang1377

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫