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

CSS基础知识1

2017-07-12 08:58 197 查看
css基础知识

基本概念:

Css 指层叠样式表（Cascading Style Sheets）

为什么需要CSS：

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

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

（1）内联[b]样式[/b]

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

将样式定义在style属性中。

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

只能应用于当前一个页面

（2）内部样式

<head
lang="en">

    <meta
charset="UTF-8">

    <title></title>

    <style>

        p{

            font-size:
36px;

            color:
crimson;

        }

    </style>
</head>
<body>
<p>内部样式1</p>
<p>内部样式2</p>
</body>

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

内容和表现形式的耦合程度降低了，但都还在同一个文件中，没有实现完全分离

定义的样式只能在本页中使用

（3）外部样式表

首先需要定义一个样式表文件(.CSS)

样式：
字体大小：36
颜色：深红
p{

    font-size:
36px;

    color:
crimson;

}

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中引用。推荐尽量使用外部样式。



颜色:

所有的颜色都可以由红色（red）、绿色(green)、蓝色(blue)三种颜色调和而成，这三种颜色是三原色。

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

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

（1）十六进制形式；

（2）RGB颜色

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

（3） RGBA颜色

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

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

（4）HSL颜色

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

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

（5）HSLA颜色

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

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

（6）预定义颜色

CSS提供了一些常用的预定义颜色表示形式

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

 

1.3 尺寸单位

cm:厘米：绝对单位

mm:毫米：绝对单位

in:英寸(inch)：绝对单位,基准点为父节点字体的大小，如果自身定义了font-size按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值。

px:像素(pixel)：绝对单位,页面按精确像素展示

%:百分比：相对尺寸单位（元素的高度和宽度）

em：相对长度单位

vw：相对单位（视口高度和宽度）viewpoint width，视窗宽度，1vw等于视窗宽度的1%。

vh：相对单位（视口高度和宽度）viewpoint height，视窗高度，1vh等于视窗高度的1%。

绝对单位：cm,mm,in,px

相对单位：cm,%,em,vw,vh

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