CSS基础知识

来源:互联网 发布:2017手机淘宝店铺装修 编辑:程序博客网 时间:2024/06/10 05:59

CSS基础知识

1.1基本概念

CSS指层叠样式表(CascadingStyle Sheets)

为什么需要用CSS

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

       使用样式表可以有三种方式:

(1)  内联样式

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

将样式定义在style属性中,内容和表现形式高度耦合,维护困难,不利于分工合作

这样不利于分工合作,不提倡使用

(2)  内部样式

<head>
    <meta http-equiv="Content-Type"content="text/html; charset=utf-8"/>
    <title>CSS样式</title>
    <style type="text/css">
        p{
            font-size:36px;
            color:red;
        }
    </style>
</head>
<body>
<p style="font-size:24px;color:blue">内联样式的演示</p>
<p>内部样式演示1</p>
<p>内部样式演示2</p>
</body>

 

在<head>标签中通过<style>标签来定义

内容和表现形式的耦合程度降低了,但都还是在html文件中,没有实现完全分离。

定义的样式只能在当前页面中使用.

(3)  外部样式表

首先需要

/*只应用于段落的样式*/
p{
    font-size: 36px;
    color: blue;
}

       css中也可以使用注释,形式为/*...*/

       然后在需要使用这些样式的html文件中引入该样式表文件

<head>
    <meta http-equiv="Content-Type"content="text/html; charset=utf-8"/>
    <title></title>
    <link type="text/css" rel="stylesheet"href="css/E101-01-01.css"/>
</head>

       外部样式表使得内容和表现形式彻底分离,有利于分工合作及维护。可在多个html中引用。

推荐尽量使用外部样式,但后面的案例为了方便,还会大量使用内部样式甚至内联样式。

1.2颜色

所有的颜色都可以由红色、绿色和蓝色三种颜色调配而成,这三种颜色俗称三原色。

CSS中用8为表示一个颜色,那么可以表示28种颜色,即256种颜色,所以总共可以表示256*256*256种颜色

CSS中有多种颜色的表现形式:

(1)    十六进制形式:

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

(2)    RGB颜色

<p style="color:RGB(225,0,0)">RGB颜色表现形式</p>

(3)    RGBA颜色

<p style="color:RGBA(225,0,0,0.2)">RGBA颜色透明度表现形式</p>

在RGBA颜色基础上增加了透明度分量(Alpha),该分量的取值范围为0(完全透明)

~1.0(完全不透明)

(4)HSL颜色

<p style="color:RGBA(225,0,0,0.2)">RGBA颜色表现形式</p>

(5)HSLA颜色

<p style="color:HSLA(120,50%,50%,0.3)">HSLA颜色透明度表现形式</p>

(6)预定义颜色表示形式

CSS提供了一些常用的预定义颜色,比如:red\green

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

 

效果图如下: