CSS学习总结

CSS学习总结

CSS简介

1.CSS是什么？

（1）CSS即层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。

（2）CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

（3）CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

2.CSS的基本语法

一条css样式规则由两个主要的部分组成：选择器和用=={}==括起来的一条或多条声明。

如图所示：

这条规则表明，页面中所有的一级标题都显示为蓝色，字体的大小是12个像素。

注意：

• 每一条声明都是由一个属性和一个值组成的，声明之间要用 ；分隔。
• 属性和值之间用：号隔开。
• 选择器是选择你要改变样式的对象，一般是对html文件里面的元素的类和ID。

选择器

一个html页面上的元素很多，就可以使用选择器来在页面中选择你想要应用样式的对象。

选择器的种类有元素选择器、id选择器和**class（类）**选择器。其中的class选择器使用得更广泛。

id选择器

/* id选择器前面使用#号。 */
#exemple{
    color:red;
}

上面这条规则表明，找到页面上id为exemple的元素并让其呈现红色。

class选择器

/*class选择器前面使用 . 号*/
.center{
    text-align:center;
}
.large{
    font-side:30px;
}
.red{
    color:red;
}

上面的三个代码定义了一些规则，如只要页面上某元素的class为red，就会让其呈现红色。

如下：

<p class="center">我会居中显示的</p>
<p class="red">我是红色的</p>
<p class="center large red">我又红又大还居中</p>
<p class="red">我也可以是红的</p>

3.css怎么生效

在定义了css样式后，需要让这些样式生效。通常有三种方法：外部样式表，内部样式表和内联样式。

外部样式表

外部样式表是通过在html文件中导入外部的css样式表文件

内部样式表

及将样式直接放在HTML文件中，这称为内部样式表

内联样式

所谓内联样式，就是直接把样式规则直接写到要应用的元素中，如：

<h3 style="color:green;">I am a heading</h3>

级联的优先级

从高到低分别是：

1. 内联样式
2. 内部样式表或外部样式表
3. 浏览器缺省样式

4.颜色，尺寸，对齐

颜色

我们可以采用颜色名称也可以使用颜色RGB16进制值，来设定前景或背景的颜色。如：

<h3 style="background-color:Tomato;">Tomato</h3>
<h3 style="background-color:Orange;">Orange</h3>
<h3 style="background-color:MediumSeaGreen;">MediumSeaGreen</h3>
<h3 style="background-color:DodgerBlue;">DodgerBlue</h3>
<h3 style="background-color:Gray;">Gray</h3>
<h3 style="background-color:SlateBlue;">SlateBlue</h3>
<h3 style="background-color:Violet;">Violet</h3>
<h3 style="background-color:LightGray;">LightGray</h3>
<!-- 颜色值，3个字节分别代表RGB（Red，Green，Blue）的0～255的值 -->
<h3 style="background-color:#ff0000;">#ff0000</h3>
<h3 style="background-color:#0000ff;">#0000ff</h3>
<h3 style="background-color:#3cb371;">#3cb371</h3>
<h3 style="background-color:#ee82ee;">#ee82ee</h3>
<h3 style="background-color:#ffa500;">#ffa500</h3>

尺寸

我们可以用 height 和 width 设定元素内容占据的尺寸。常见的尺寸单位有：像数 px，百分比 %等。

对齐

对于元素中的文本，我们可以简单的设置text-align属性为left, center, right即可（显然缺省的是左对齐），上例中已有相关的应用。
对于元素本身如何对齐，我们后面再学习

5.盒子模型

盒子模型指的是一个 HTML 元素可以看作一个盒子。从内到外，这个盒子是由内容 content, 内边距 padding, 边框 border, 外边距 margin构成的。

说明：

• Content 盒子的内容，如文本、图片等
• Padding 填充，也叫内边距，即内容和边框之间的区域
• Border 边框，默认不显示
• Margin 外边距，边框以外与其它元素的区域

6.定位

position属性用于对元素进行定位。该属性有以下一些值：

1. static 静态
2. relative 相对
3. fixed 固定
4. absolute 绝对

设置了元素的position属性后，我们才能使用top, bottom, left, right属性，否则定位无效。

static

设置为静态定位position: static;，这是元素的默认定位方式，也即你设置与否，元素都将按正常的页面布局进行。
即：按照元素在 HTML出现的先后顺序从上到下，从左到右进行元素的安排。

relative

设置为相对定位position: relative;，这将把元素相对于他的静态（正常）位置进行偏移

fixed

设置为固定定位position: fixed;，这将使得元素固定不动（即使你上下左右拖动浏览器的滚动条）。
此时元素固定的位置仍由top, bottom, left, right属性确定，但相对的是视口（viewport，就是浏览器的屏幕可见区域）

absolute

设置为绝对定位position: absolute;，将使元素相对于其最近设置了定位属性（非static）的父元素进行偏移。

7.溢出

如果元素内容超过其指定的区域时，可以通过溢出overflow属性来处理溢出的部分。

溢出的属性一般有以下几个值：

• visible 默认值,及溢出部分不被裁剪,可以在区域外面显示
• hidden 裁剪掉溢出的部分并让其不可见
• scroll 裁剪溢出部分 , 但可以通过滚动上下和左右的滚动条来显示
• auto 裁剪溢出部分,根据情况自动提供滚动条

8.浮动

在一个区域或容器内,外面可以设置float属性让一个元素在水平方向上向左或者右进行移动,其他的元素也会跟着其位置的变化而重新进行排列.

注意:

一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
浮动元素之后的元素将围绕它。

9.不透明度

在css中可以使用opacity对你想对其使用的任何元素(不过常用于图片)设置不透明度.一般值在[0.0~1.0]之间,值越低,透明度越高.

10.伪类和伪元素

伪类（pseudo-class）或伪元素（pseudo-element）用于定义元素的某种特定的状态或位置等。
比如我们可能有这样的需求：

• 鼠标移到某元素上变换背景颜色
• 超链接访问前后访问后样式不同
• 离开必须填写的输入框时出现红色的外框进行警示
• 保证段落的第一行加粗，其它正常
• 等等…

伪类和伪元素的使用语法:

/* 选择器后使用 : 号，再跟上某个伪类/伪元素 */
selector:pseudo-class/pseudo-element {
  property:value;
}

移到某元素上变换背景颜色

• 超链接访问前后访问后样式不同
• 离开必须填写的输入框时出现红色的外框进行警示
• 保证段落的第一行加粗，其它正常
• 等等…

伪类和伪元素的使用语法:

/* 选择器后使用 : 号，再跟上某个伪类/伪元素 */
selector:pseudo-class/pseudo-element {
  property:value;
}