CSS基础知识1

1.1基本概念
CSS指层叠样式表
为什么需要用CSS
HTML描述了要呈现的内容,而CSS则定义了这些内容的呈现形式,比如字体、颜色等。使用CSS能够将页面内容和呈现形式有效分离,有利于分工合作,也有利于快速更换不同呈现形式。
使用样式表可以有三种方式
(1) 内联样式

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

将样式定义在style属性中。内容和表现形式高度耦合,维护困难,不利于分工合作。
只应用当前页面中使用。
(2)内部样式

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style>
        p{
            font-size: 36px;
            color: aqua;
        }
    </style>
</head>
<body>
<p>内部样式的演示a</p>
<p>内部样式的演示b</p>
</body>
</html>

<head>标签中通过<style>标签来定义
内容和表现形式的耦合程度降低了,但都还在ntml文件中,没有实现完成分离。
定义的样式只能在本页面中使用
(3)外部样式
首先需要定义一个样式表文件(.css)

/*定义了应用于段落的样式:
字体大小:36
字体颜色*/
p{
    fornt-size:36px;
    color: red;
}

CSS中也可以使用注射,形式为/*......*/
然后需要使用这些样式的HTML文件引入该样式表文件。

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>外部样式表</title>
    <link rel="stylesheet" type="text/css" href="CSS/E102-01-02.css">
</head>

外部样式表是的内容和表现形式彻底分离,有利于分工合作及维护可在多个HTML中应用。
1.2颜色
自然界的颜色数量是没有限量的,但计算机只能表达有限的信息。
所有的颜色都是有红色(Red)、绿色(Green)、和蓝色(Blue)三种颜色调配而成,这三种颜色俗称三原色。
CSS中用8表示一个颜色,那么可以表示28种颜色,即256种颜色。所以总共可以表示256*256*256种颜色(真彩色)。
CSS中有多种颜色表示形式:
(1)十六进制形式:#ff0000

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

(2)RGB颜色:rgb(128,0,0)

<p style="color: RGB(236,0,0)">十六进制颜色表示形式</p>

(3)RGBA颜色

 <p style="color: RGBA(243,0,2,0.5)">十六进制颜色表示形式</p>

在RGB颜色的基础上增加了透明度分量Alpha
(4)HSL颜色

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

颜色也可以由 另外三个分量来表示即色饱和度和明度
(5)HSLA颜色

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

在HSL颜色的基础上增加了Alpba分量
(6)预定义颜色

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

CSS提供了一些常用的预定义颜色,比如red、green等
1.3尺寸单位
cm:厘米;
mm:毫米;
in:英寸(inch);
px:像素(pixel);
%:百分比;
em:相对于父元素的字体大小;
vw:视窗的宽度:视窗宽度是100vh(viewport width);
视口被均分为100单位的vw;
vh:视窗的高度:视窗高度是100vh(viewport height);
视口被均分为100单位的vw。

哪些是绝对单位?哪些是相对单位?
绝对单位:px、in、cm、mm。
相对单位:%、em。
其中vm、vh、%是百分比单位。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章