您的位置：首页 > Web前端 > CSS

CSS基本概念和颜色

2017-07-12 11:08 330 查看

CSS基础知识

1.1基本概念

CSS 指层叠样式表（cascading stylesheets）

为什么需要CSS：

HTML 描述了要呈现的内容，而CSS 则定义了这些内容的形式，比如字体、颜色等。使用CSS能够将页面内容和呈现形式有效分离，有利于分工合作，也有利于快速更换不同的呈现形式。

样式表的使用有三种方式：内联样式、内部样式、外部样式

 

（1）使用内联样式

将样式定义到 style 属性中，一次只能定义当前页面的当前标签，内容和呈现形式高度耦合，维护困难，不利于fengonghe

<p style="font-size: 24px; color:green"> 内联样式的演示</p>

（2）内部样式

在<head>标签中通过<style>标签来定义一次定义只能在当前页面运行，内容和表现形式的耦合程度降低了。但还都是在同一个html文件里面，并没有实现完全分离
定义的样式只能运用于当前的这个页面。




<head>    <metacharset="utf-8">    <title>Title</title>   
<style>       p{给了           font-size:36px;           color:red;       
}    </style></head><body><p>内部样式的演示1</p><p>内部样式的演示2</p></body>

（3）外部样式表

首先定义一个样式表文件（.css）


p{

    font-size:36px;

    color:blue;

}


link：是用于链接css样式文件到需要它的html文件中的，内容和呈现形式彻底分离，有利于分工合作及维护，可在多个html文件中引用。


<head>
    <metacharset="utf-8">
    <title>Title</title>
   
4000
<link rel="stylesheet"type="text/css"href="css/E102-01-02.css">
</head>
<body>

1.2颜色
颜色的样式是无穷的，但是计算机只能表示有限的信息。

最基本的颜色：

所有的颜色都可以通过红色（red）绿色（green）蓝色（blue）三种颜色调配而成。这三种颜色俗称三原色。

CSS中用8位表示一个颜色，那么可以表示 2的8次方  种颜色，既256种颜色，所以总共可以表示256*256*256种颜色（真彩色）。

CSS中有六种颜色表示形式：

（1）    十六进制形势：#ff0000;

<p style="color:#ff0000;">十六进制颜色表示形式</p>

（2）    RGB形式：RGB(1255,0,0);

<pstyle="color:RGB(255,0,0);">RGB颜色表示形式</p>

（3）    RGBA形式：（255,0,0,0.5） 在GRB的基础上增加了透明度分量（Alpha），分量的取值范围为0-1.0。

<pstyle="color:RGBA(255,0,0,0.5);">RGBA颜色表示形式</p>

（4）    HSL形式：用另外三个分量来表示：色调、饱和度和明度。饱和度和明度在css中取值范围在0~1之间。

<pstyle="color:HSL(120,50%,50%)">HSL颜色表示形式</p>

颜色也可以有另外三个分量来表示，既色调、饱和度和明度。饱和度和明度在css中取值范围在0~1之间。

（5）    HSLA形式：在HSL基础上增加了透明度分量（Alpha），分量的取值范围为0~1之间。

<pstyle="color:HSLA(120,50%,50%,0.4)">HSLA颜色表示形式</p>

（6）    预定义颜色

<p style="color:aqua">预定义颜色表示形式</p>

CSS提供了一些常用的预定义颜色，比如red，blue等。
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航