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

CSS基础知识

2017-07-15 15:25 253 查看


1.1基本概念

CSS 指层叠样式表（CascadingStyle Sheets），为了实现页面内容和表现形式的分离。

为什么需要用CSS  
什么是cdn

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

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

（1）            内联样式

<p
style="font-size:
24px;color:
bisque">

将样式定义在style属性中。

内容和表现形式高度耦合，维护困难，不利于分工合作。

（2）            内部样式

<head
lang="en">
   
<meta
charset="UTF-8">
   
<title></title>
   
<style>
       
p{
           
font-size:30px;
           
color:blue;
       
}
       
</style>
</head>
<body>
   
<p>内部样式演示1</p>
   
<p>内部样式演示2</p>
   
<p>内部样式演示3</p>

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

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

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

（3）外部样式表

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

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

}

Css中也可以使用注释，形式为/*……..*/

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

<head
lang="en">
   
<meta
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位表示一个颜色，那么可以表示2*种颜色，即256种颜色。所以我们总共可以表示256*256*256种颜色。

Css中有多种颜色表示形式：

<body>
   
<p
style="color:#ff0000">十六进制颜色</p>
   
<p
style="color:RGB(255,0,0)">RGB颜色</p>
   
<p
style="color:RGBA(255,0,0,0.5)">RGBA颜色</p>
   
<p
style="color:HSL(120,50%,50%)">HSL颜色</p>
   
<p
style="color:HSLA(120,50%,50%,0.4)">HSLA颜色</p>
   
<p
style="color:BLACK">HSLA颜色</p>
</body>

 

（1）十六进制形式：

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

---（2）RGB颜色

<p
style="color:
RGB(255,0,0)">十六进制颜色</p>

（3）RGBA颜色

在RGB颜色基础上增加了透明度分量（Alpha），该分量的取值范围为0（完全透明）~1.0（完全不透明）。

（4）HSL颜色

颜色可以由另外三个分量来表示，即色调、饱和度和明度。

（5）HSLA颜色

在HSL颜色的基础上增加了Alpha分量

（6）预定义颜色

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

 

1.3尺寸单位

cm：厘米

mm：毫米

in：英寸（inch）

px：像素（pixel）

%：百分比

Em：相对长度单位。相对于当前对象内文本的字体尺寸。
如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。

<style>

body { font-size: 14px; }

h1 { font-size: 16px; }

.size1 p { font-size: 1em; }

.size2 p { font-size: 2em; }

.size3 p { font-size: 3em; }

</style>

</head>

<body>

<h1>假定当前默认字体尺寸是14px，n
em即为14px字体尺寸的n倍：</h1>

<ul>

      
<liclass="size1">

             
<strong>1em</strong>:

             
<p>1em大小的文字</p>

      
</li>

      
<liclass="size2">

             
<strong>2em</strong>:

             
<p>2em大小的文字</p>

      
</li>

      
<liclass="size3">

             
<strong>3em</strong>:

             
<p>3em大小的文字</p>

      
</li>

</ul>

Vw：相对于视口的宽度。视口被均分为100单位的vw

<style>

p {

      
font-size:5vw;

}

</style>

</head>

<body>

<p>相对于viewport宽度大小的文字</p>

</body>

</html>

     

Vh：相对于视口的宽度。视口被均分为100单位的vh

<style>

p {

      
font-size:5vh;

}

</style>

</head>

<body>

<p>相对于viewport高度大小的文字</p>

</body>

</html>

      

 

px：绝对单位，%相对尺寸单位。

那些是绝对单位，那些是相对单位，（自学）

px，pt，cm，mm这些定值都是绝对单位，
em，%这些是相对单位

权：某位的1所代表的值

145=1*102的二次方+4*101一次方+5*100

101=1*82二次方+4*81一次方+5*80

65=6*161一次方+5*160
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航