CSS样式的学习

来源：互联网发布：mcmore php 编辑：程序博客网时间：2024/06/06 00:45

今天学习了CSS的基础知识，CSS和html的功能不太一样，html主要描述了要呈现的内容，而CSS则是定义了这些内容的呈现形式，可以设置字体、颜色、大小等。使用CSS能够将页面内容和呈现的方式有效分离，有利于分工合作，提高效率。

1、基本样式

CSS是指层叠样式表，其中有三种方式：

（1）内联样式：是将样式定义在style属性中，但这样会导致内容和形式会高度耦合，不利于分工合作，而且只能应用于当前标签中。

（2）内部标签：是在<head>标签中通过<style>标签来定义，耦合程度是降低了，但还是在html文件中，没有实现完全分离，定义的样式只能在本页面使用。

（3）外部样式：需要先定义一个CSS表，然后在需要使用这些样式的html文件中引入该样式表文件：

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

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

2、颜色

自然界的颜色是无穷的，但计算机只能表示有限的信息。

需要将连续的量（无穷）转换为离散的量（有限）的。

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

CSS中8为表示一个颜色，那么可以表示2⁸种颜色，那么每个颜色值有24位来表示，即256种颜色，所以总共可以表示256*256*256种颜色（真彩色）。

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

（1）十六进制形式：#ff0000

<pstyle="color:#ff0000">十六进制颜色

（2）RGB颜色：（128,0,0）等价于#800000

<pstyle="color:RGB(255,0,0)"> RGB颜色表示形式

（3）RGBA颜色

<pstyle="color:RGBA(255,0,0,0.5)"> RGBA颜色表示形式

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

（4）HSL颜色

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

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

（5）HSLA颜色

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

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

（6）预定义颜色

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

<pstyle="color:darkviolet">预定义颜色表示形式

3、基础属性

属性名:属性值;

background-color:red;

font-size=24px;

}

4、字体相关的属性

font-famils：字体名称；

font-size：字体大小；

font-style：字形（斜体等）；

font-vanable：字体变化（如大写）；

font-weight：字体粗细。

font-family: 楷体;
font-size: 36px;
font-style:italic;
font-variant:small-caps;
font-weight:600;

可以简写，书写顺序：

font-style font-vanablefont-weight font-size font-famils

前面三个可省略，使用默认值，font-size和font-famils必须指定值

p{
font:60px楷体;
}

5、文本相关属性

文本相关属性主要包括颜色、对齐方式、修饰等。

（1）color:设置文本的颜色

（2）text-decoration：文本的修饰

none：默认值，没有装饰效果

underline加下划线

overline：加上划线

line-through：加删除线

text-shadow：增加阴影

如：text-shadow: -3px -3px darkorchid;的含义是定义一个紫色的背景，在其水平方向上左移3px，垂直方向上上移3px

（3）direction：文本的方向

ltr：自左至右；rtl：自右至左

（4）text-align：文本水平对齐方式

其中有：left（左对齐）、right（右对齐）、center（居中对齐）、justify（两端对齐）

（6）vertical-align: 文本垂直方向对齐

   top：靠上对齐

   bottom：靠下对齐

   middle：垂直居中对齐

（7）text-indent：文本缩进

   letter-spacing：字符之间的间距

   word-spacing：字（单词）的间距

（8）line-height：设置行高，实际上是调整行间距

阅读全文

0 0