css基础学习

来源：互联网发布：淘宝评价怎么添加视频编辑：程序博客网时间：2024/05/22 01:41

CSS指层叠样式表

为什么用CSS？？

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

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

（1）内联样式

将样式定义在style属性中，只有对当前标签有效，内容和表现形式高度耦合

弊端：维护困难，不利于分工合作。只能应用于当前标签。

（2）内部样式：

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

内容和表现形式降低了耦合程度，但都还是在Html中，没有实现完全分离。（但不彻底）

定义的样式只能应用于当前页面有效，重复应用率低。

（3）外部样式表

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

p{
font-size: 36px;
color: blue;
}

css中可以使用注释，形式为/**/

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

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

推荐使用外部样式

但后面的案例为了方便，会会大量使用内部样式甚至内联样式。

颜色（红绿蓝）

需要将需要连续的量（无穷）转化为离散的量（有限的）所有的颜色都可以由红色（red）、绿色（Green）、和蓝色（blue）三种颜色调配而成，这三种颜色俗称三原色。

css中用8位表示一个颜色，那么可以表示256（2的8次方）种颜色，那么每个颜色值为24位来表示的。即256种颜色，所以总共可以表示256*256*256种颜色

Css中有多种颜色表示形成；

（1）十六进制形式

<p style="color: #ff0000;">dddddddddddddddd</p>

每俩种符号表示一种颜色

（2）RGB颜色

<p style="color:RGB(255,0,0)">LLLLLLLLLLL</p>

（3）RGBA颜色

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

(4)HSL颜色

颜色也可以由另外三个分量表示，即色调.饱和度。透明度（亮度）。

（5）HSLA颜色

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

（6）预定义颜色

Css提供了一些常用的预定义颜色用（符号和数字表示）

1.3 尺寸单位

CM:厘米绝对

mm：毫米绝对

In：英寸（inch）对角线

Px：像素（pixel）絶対単位

%：百分比，相对尺寸单位

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

1. em的值并不是固定的；

2. em会继承父级元素的字体大小。

所以我们在写CSS的时候，需要注意两点：

1. body选择器中声明Font-size=62.5%；

2. 将你的原来的px数值除以10，然后换上em作为单位；

3. 重新计算那些被放大的字体的em数值。避免字体大小的重复声明。也就是避免1.2 * 1.2= 1.44的现象。

比如说你在#content中声明了字体大小为1.2em，那么在声明p的字体大小时就只能是1em，而不是1.2em,因为此em非彼em，它因继承#content的字体高而变为了1em=12px。

vw：viewpoint width，视窗宽度，1vw等于视窗宽度的1%。
vh：viewpoint height，视窗高度，1vh等于视窗高度的1%。

vmin：vw和vh中较小的那个。
vmax：vw和vh中较大的那个。

那些是絶対単位？那些是相对单位？

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

em，%这些是相对单位，没有参照就没有值

进制

1. 计数的方法

2. 2 基：某种计数方法所需数的个数

权：某位“1”代表的值

字体相关属性

background-color:red

font-size:13px

}

2.1字体相关属性

font-family:字体名称

font-size:字体大小

font-style:字形(斜体等)

font-variant：字形变化(如大写)

font-weight:字体粗细

font-family: 宋体;
font-size: 500px;
font-style: italic;
font-variant: small-caps;
font-weight: 800;

可以简写。书写顺序

Font-style font-variant

前面三个可缺省，使用默认值，font-size和font-family必须指定值这种方式更简洁

文本相关的属性

文本相关的属性主要包括颜色，对齐方式，等

Color设置文本颜色

Text-decoration：修饰

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

Underline：加上下划线

Line-through/加删除线

Text-shadow;增加阴影，text-shadow:red 5px 10px

含义是定仪一个红色的背景，水平方向上移5px，垂直方向向上上移10相片px

direction:ltr从左往右；rtl自右至左

text-align：文本对齐方式

left：左对齐

right;右对齐

center;居中对齐

justify：俩端对齐

vertical-align:align;垂直对齐方式

top：靠上对齐

bottom;靠下对齐

Middle：居中对齐

Text-indent:文本缩进

Letter-spacing;字符之间的间距

Word-spacing：字（单词）间距

Line-height：设置行高，实际上是调整行间距

阅读全文

1 0