CSS基础知识1

来源：互联网发布：可以买数据的公司编辑：程序博客网时间：2024/06/16 17:32

css基础知识

基本概念:

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

为什么需要CSS：

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

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

（1）内联样式

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

将样式定义在style属性中。

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

只能应用于当前一个页面

（2）内部样式

<headlang="en">
    <metacharset="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文件中引入该样式表文件

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

颜色:

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

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

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

（1）十六进制形式；

（2）RGB颜色

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

（3） RGBA颜色

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

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

（4）HSL颜色

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

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

（5）HSLA颜色

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

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

（6）预定义颜色

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

<pstyle="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

阅读全文

2 0