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

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7706

Java教程

1640

CakePHP 教程

1394

Laravel 教程

1288

PHP教程

1231

显示更多

Related knowledge

vue中怎么用bootstrap Apr 07, 2025 pm 11:33 PM

在 Vue.js 中使用 Bootstrap 分为五个步骤：安装 Bootstrap。在 main.js 中导入 Bootstrap。直接在模板中使用 Bootstrap 组件。可选：自定义样式。可选：使用插件。

HTML，CSS和JavaScript的角色：核心职责 Apr 08, 2025 pm 07:05 PM

HTML定义网页结构，CSS负责样式和布局，JavaScript赋予动态交互。三者在网页开发中各司其职，共同构建丰富多彩的网站。

了解HTML，CSS和JavaScript：初学者指南 Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。

bootstrap怎么写分割线 Apr 07, 2025 pm 03:12 PM

创建 Bootstrap 分割线有两种方法：使用标签，可创建水平分割线。使用 CSS border 属性，可创建自定义样式的分割线。

bootstrap怎么插入图片 Apr 07, 2025 pm 03:30 PM

在 Bootstrap 中插入图片有以下几种方法：直接插入图片，使用 HTML 的 img 标签。使用 Bootstrap 图像组件，可以提供响应式图片和更多样式。设置图片大小，使用 img-fluid 类可以使图片自适应。设置边框，使用 img-bordered 类。设置圆角，使用 img-rounded 类。设置阴影，使用 shadow 类。调整图片大小和位置，使用 CSS 样式。使用背景图片，使用 background-image CSS 属性。

bootstrap按钮怎么用 Apr 07, 2025 pm 03:09 PM

如何使用 Bootstrap 按钮？引入 Bootstrap CSS创建按钮元素并添加 Bootstrap 按钮类添加按钮文本

bootstrap怎么设置框架 Apr 07, 2025 pm 03:27 PM

要设置 Bootstrap 框架，需要按照以下步骤：1. 通过 CDN 引用 Bootstrap 文件；2. 下载文件并将其托管在自己的服务器上；3. 在 HTML 中包含 Bootstrap 文件；4. 根据需要编译 Sass/Less；5. 导入定制文件（可选）。设置完成后，即可使用 Bootstrap 的网格系统、组件和样式创建响应式网站和应用程序。

bootstrap怎么调整大小 Apr 07, 2025 pm 03:18 PM

要调整 Bootstrap 中元素大小，可以使用尺寸类，具体包括：调整宽度：.col-、.w-、.mw-调整高度：.h-、.min-h-、.max-h-

See all articles

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

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题