css折叠样式（3）――常用样式属性-css教程-PHP中文网

首页

web前端

css教程

css折叠样式（3）――常用样式属性

黄舟

Dec 28, 2016 pm 04:06 PM

css

要点：

一、颜色属性

demo.html

<!doctype html>  
<html>  
    <head>  
        <title>CSS的颜色属性的四种方式</title>  
        <meta charset="utf-8">  
        <style type="text/css">  
            body{  
                color:red  
            }  
            .c1{  
                color:#ff6600  
            }  
          
            .c2{  
                color:rgb(0,0,255)  /* 红(R)、绿(G)、蓝(B) 每个的取值范围0~255 */  
            }  
          
            .c3{  
                color:rgba(0,100,0,0.4)    /* RGBA是代表Red（红色） Green（绿色） Blue（蓝色）和 Alpha的(色彩空间)透明度(0-1) */  
            }  
        </style>  
    </head>  
    <body>  
        <p>这是第一种方式</p>  
        <p class="c1">这是第二种方式</p>  
        <p class="c2">这是第三种方式</p>  
        <p class="c3">这是第四种方式</p>  
    </body>  
</html>

二、字体属性

demo.html

<!doctype html>  
<html>  
    <head>  
        <title>CSS的字体属性</title>  
        <meta charset="utf-8">  
        <link rel="stylesheet" type="text/css" href="style.css">  
  
    </head>  
    <body>  
        <p class="c1">字体大小20px</p>  
        <p class="c2">楷体</p>  
        <p class="c3">加粗</p>  
        <p class="c4">斜体</p>  
          
    </body>  
</html>

style.css

p.c1{  
      
    font-size:50px  
}  
  
p.c2{  
      
    font-family:KaiTi,SimSun    /* 可以使用“，”隔开，以确保当字体不存在的时候直接使用下一个 */  
}  
  
p.c3{  
      
    font-weight:bold           /* font-weight 字体加粗,normal(默认值)、bold(粗)、bolder(更粗)、lighter(更细) */  
                              /*另外一种方式：100、200、300~900，400 = normal，而 700 = bold，只能整百 */  
}  
      
p.c4{  
      
    font-style:italic    /* normal:标准 italic:斜体 oblique:倾斜 inherit：继承  */  
}

[b]三、背景属性[/b]

四、文本属性

五、边框属性

（1）边框风格：

（2）边框宽度：

（3）边框颜色：

（4）组合方式（简写方式如上图）

demo.html

<html>  
    <head>  
        <title>CSS常见属性(边框属性)</title>  
        <meta charset="utf-8">  
        <style type="text/css">  
            div{  
                width:70px;  
                height:70px;  
                float:left;     
                margin-right:20px;  
                background-color:rgb(250,128,10);  
              
            }  
            .div1{  
                border:solid 2px green;  
            }  
              
                }  
            .div2{  
                border-style:dashed;  
                border-width:4px;  
                border-color:blue;  
            }  
              
            .div3{  
                border-top-style:solid;  
                border-bottom-style:dashed;  
                border-left-style:dotted;  
                border-right-style:double;  
                border-top-width:thin;  
                border-bottom-width:2px;  
                border-color:red green blue yellow;               
            }  
            .div4{  
            width:40px;  
            height:40px;  
            border-width:20px;  
            border-style:ridge;  
  
            }  
              
        </style>  
    </head>  
    <body>  
        <div class="div1"></div>  
        <div class="div2"></div>  
        <div class="div3"></div>  
        <div class="div4"></div>  
    </body>  
</html>

六、列表属性

demo.html

<html>  
    <head>  
        <title>CSS常见属性(列表属性)</title>  
        <meta charset="utf-8">  
        <style type="text/css">  
          
        ul.ul1{  
        /* 当图片list-style-image和标记类型list-style-type同时存在时，一图片为先，图片不存在则使用list-style-type*/   
            list-style-type:square;  
            list-style-position:inside;     
            list-style-image:url(images/arr.gif);             
        }  
          
        ul.ul2{  
            list-style:disc outside url(&#39;images/arr.png&#39;)  
        }  
          
          
        </style>  
    </head>  
    <body>  
        <ul class="ul1">  
            <li>无序列表1</li>  
            <li>无序列表2</li>  
                <ul class="ul2">  
                    <li>无序列表1</li>  
                    <li>无序列表2</li>  
                    <li>无序列表3</li>  
                    <li>无序列表4</li>  
                </ul>  
            <li>无序列表3</li>  
            <li>无序列表4</li>  
        </ul>  
    </body>  
</html>

以上就是css折叠样式（3）――常用样式属性的内容，更多相关内容请关注PHP中文网（www.php.cn）！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

' CSS4”更新Apr 11, 2025 pm 12:05 PM

自从我第一次介绍了CSS4面中的事情以来，就已经进行了更多的讨论。我将在这里从其他人那里汇集我最喜欢的想法。有

三种代码Apr 11, 2025 pm 12:02 PM

每次启动一个新项目时，我都会将我正在查看的代码分为三种类型，或者如果您愿意的话。我认为这些类型可以应用于

https很容易！Apr 11, 2025 am 11:51 AM

我对公开哀悼HTTPS的复杂性感到内gui。过去，我从第三方供应商那里购买了SSL证书，并且遇到了麻烦

HTML数据属性指南Apr 11, 2025 am 11:50 AM

您想了解的有关HTML，CSS和JavaScript中数据属性的所有信息。

了解JavaScript中的不变性Apr 11, 2025 am 11:47 AM

如果您以前从未在JavaScript中使用不变性，则可能会发现很容易将其与为新值或重新分配分配变量的混淆。

具有现代CSS功能的定制样式表单输入Apr 11, 2025 am 11:45 AM

如今，可以在语义上且易于访问的同时构建自定义的复选框，无线电按钮和切换开关。我们甚至不需要

脚注字符Apr 11, 2025 am 11:34 AM

有特殊的超级数字字符有时非常适合脚注。他们在这里：

如何使用HTML，CSS和JavaScript创建动画倒计时计时器Apr 11, 2025 am 11:29 AM

您是否曾经在项目上需要一个倒计时计时器？对于这样的东西，可以自然访问插件，但实际上更多

See all articles

热AI工具

热工具

MinGW - 适用于 Windows 的极简 GNU

这个项目正在迁移到osdn.net/projects/mingw的过程中，你可以继续在那里关注我们。MinGW：GNU编译器集合（GCC）的本地Windows移植版本，可自由分发的导入库和用于构建本地Windows应用程序的头文件；包括对MSVC运行时的扩展，以支持C99功能。MinGW的所有软件都可以在64位Windows平台上运行。

mPDF是一个PHP库，可以从UTF-8编码的HTML生成PDF文件。原作者Ian Back编写mPDF以从他的网站上“即时”输出PDF文件，并处理不同的语言。与原始脚本如HTML2FPDF相比，它的速度较慢，并且在使用Unicode字体时生成的文件较大，但支持CSS样式等，并进行了大量增强。支持几乎所有语言，包括RTL（阿拉伯语和希伯来语）和CJK（中日韩）。支持嵌套的块级元素（如P、DIV），