css初步学习总结
CSS初步学习总结
- 初步认识CSS
- CSS语法以及各效果呈现设置
-
- CSS语法
- CSS各效果呈现设置
- 学习总结
-
- 关于CSS认知
- 初步学习CSS后的感受
初步认识CSS
CSS是级联样式表（Cascading Style Sheets）的缩写。HTML 用于撰写页面的内容，而 CSS 将决定这些内容该如何在屏幕上呈现。
网页的内容是由 HTML的元素构建的，这些元素如何呈现，涉及许多方面，如整个页面的布局，元素的位置、距离、颜色、大小、是否显示、是否浮动、透明度等等1。
CSS语法以及各效果呈现设置
CSS语法
一条CSS样式规则由两个主要的部分构成：选择器，以{}包裹的一条或多条声明:
这条规则表明，页面中所有的一级标题都显示为蓝色，字体大小为12像素。
-
说明：
- 1、 选择器是您需要改变样式的对象（上图的规则就一级标题生效），常见的有元素选择器、id选择器和class选择器：id选择器针对的是指定id所对应的对象，但因为HTML中元素的id值唯一，所以id选择器的适用范围只有一个元素；class选择器针对的是指定类所对应的对象，因为HTML中元素的class值可以多个也可以重复，故而class选择器的适用范围更大，因此 更常用的是class选择器。
- 2、 每条声明由一个属性和一个值组成。（无论是一条或多条声明，都需要用 {} 包裹，且声明用 ; 分割）
- 3、属性（property）是您希望设置的样式属性（style attribute）。 每个属性有一个值。属性和值被冒号分开。
Q：CSS如何生效？
A：我们一般有三种方法：外部样式表，内部样式表，内联样式表。
其中，外部样式表最为常用也最为好用，我们创建新的html文件和css文件，只需在html文件中附上css文件的路径信息，便可将两者连接。而这些操作并不影响html（网页内容）和css（网页样式呈现）的独立性。格式如下第4行所示：
1 <head>
2 <meta charset="utf-8">
3 <!-- 注意下面这个语句，将导入外部的 mycss.css 样式表文件 -->
4 <link rel="stylesheet" type="text/css" href="mycss.css">
5 <title>页面标题</title>
6 </head>
CSS各效果呈现设置
1.颜色、尺寸、对齐
颜色
我们可以采用颜色名称也可以使用颜色RGB16进制值，来设定前景或背景的颜色。
尺寸
我们可以用 height 和 width 设定元素内容占据的尺寸。常见的尺寸单位有：像素 px，百分比 % 等。
对齐
对于元素中的文本，我们可以简单的设置 text-align 属性为 left, center, right即可（缺省的是左对齐）
2.盒子模型
盒子模型指的是一个 HTML 元素可以看作一个盒子。从内到外，这个盒子是由内容 content, 内边距 padding, 边框 border, 外边距 margin构成的，如下图所示：
-
说明
- · Content 盒子的内容，如文本、图片等
- · Padding 填充，也叫内边距，即内容和边框之间的区域
- · Border 边框，默认不显示
- · Margin 外边距，边框以外与其它元素的区域
3.边框与边距
无论边框、内边距还是外边距，它们都有上下左右四个方向。
4.定位
- position属性用于对元素进行定位。该属性有以下一些值：
- · static 静态
- · relative 相对
- · fixed 固定
- · absolute 绝对
设置了元素的position属性后，我们才能使用 top, bottom, left, right属性，否则定位无效。
static静态定位是元素的默认定位方式，按照元素在 HTML出现的先后顺序从上到下，从左到右进行元素的安排。
relative相对定位把元素相对于他的静态（正常）位置进行偏移。
fixed固定定位使得元素固定不动（即使你上下左右拖动浏览器的滚动条）。
此时元素固定的位置仍由top, bottom, left, right属性确定，但相对的是视口（viewport，就是浏览器的屏幕可见区域）。
absolute绝对定位2使元素相对于其最近设置了定位属性（非static）的父元素进行偏移。
如果该元素的所有父元素都没有设置定位属性，那么就相对于 < body > 这个父元素。
5.溢出
当元素内容超过其指定的区域时，我们通过溢出overflow属性来处理这些溢出的部分。
-
溢出属性有以下几个值：
- · visible 默认值，溢出部分不被裁剪，在区域外面显示
- · hidden 裁剪溢出部分且不可见
- · scroll 裁剪溢出部分，但提供上下和左右滚动条供显示
- · auto 裁剪溢出部分，视情况提供滚动条
6.浮动
在一个区域或容器内，我们可以设置float属性让某元素水平方向上向左或右进行移动，其周围的元素也会重新排列。
一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
一个元素浮动后，其后的元素将尽可能包围它，或者说出现在这个浮动元素的左或右方。
如果希望浮动元素后面的元素在其下方显示，可使用clear: both样式来进行清除。
7.不透明度
我们可以用opacity对任何元素（不过常用于图片）设置不透明度。
值在[0.0～1.0]之间，值越低，透明度越高。
8.组合选择器
在前面说的元素、id、class选择器，我们可以进行组合，以得到简洁精确的选择。
后代选择器
以空格作为分隔，如：.haha p 代表在div元素内有 .haha这种类的所有元素。
例如：
1 <html>
2 <head>
3 <style>
4 .haha p {
5 background-color: yellow;
6 }
7 </style>
8 </head>
9 <body>
10 <div class="haha">
11 <p>Paragraph 1 in the div .haha.</p>
12 <p>Paragraph 2 in the div .haha>.</p>
13 <span>
14 <p>Paragraph 3 in the div .haha.</p>
15 </span>
16 </div>
17 <p>Paragraph 4. Not in a div .haha.</p>
18 <p>Paragraph 5. Not in a div .haha.</p>
19 </body>
20 </html>
这段代码表示段落1、2、3都将有黄色的背景，而段落4、5没有。
子选择器
也称为直接后代选择器，以 > 作为分隔，如：.haha > p 代表在有 .haha类的元素内的直接 < p > 元素。
例如：
1 <html>
2 <head>
3 <style>
4 .haha > p {
5 background-color: yellow;
6 }
7 </style>
8 </head>
9 <body>
10 <div class="haha">
11 <p>Paragraph 1 in the div .haha.</p>
12 <p>Paragraph 2 in the div .haha.</p>
13 <span>
14 <p>Paragraph 3 in the div .haha - it is descendant but not immediate child.</p>
15 </span> <!-- not Child but Descendant -->
16 </div>
17 <p>Paragraph 4. Not in a div .haha.</p>
18 <p>Paragraph 5. Not in a div .haha.</p>
19 </body>
20 </html>
9.伪类和伪元素
伪类（pseudo-class）或伪元素（pseudo-element）用于定义元素的某种特定的状态或位置等。
使用伪类/伪元素的语法如下：
1 /* 选择器后使用 : 号，再跟上某个伪类/伪元素 */
2 selector:pseudo-class/pseudo-element {
3 property:value;
4 }
学习总结
关于CSS认知
在正式学习CSS之前，由于在之前的项目中接触过可视化页面美化的问题，已经大概知道CSS有何用处，且用过Qt上的QSS（Qt自带，效果和CSS相似，可用于美化Qt可视化ui页面）。但对于专门美化HTML的CSS，仍然是一知半解，不甚熟悉。
在初步学习CSS之后，我认识到它的确是拥有极大美化页面功能的，特别是相对于早期只能用HTML来管理样式效果的页面而言，CSS的加入不仅便捷了对内容的操作，更是提高了内容和样式彼此的独立性，使得内容和样式的修改更为清晰简便更具针对性，使得代码部分更加简洁、更好管理。
初步学习CSS后的感受
在我看来，CSS是在以HTML为基础的网页设计制作上为网页效果锦上添花的计算机语言。以我们熟悉的word文档举例，HTML就像是word中的所有文字内容，如果不加以修饰，那么给人的视觉效果将会是杂乱无章的，如果加入了CSS，那么这些文字就会有一定的样式和排版，它就会使人感到更舒适心情更愉悦。
从网页制作的初衷来看，网页是为了满足人类需求而服务的，那么自然地，在上述两种情况中，人们必然更加倾向后者。
在初步学习CSS之后，我感觉因为CSS本身具有排版和设计因素，自己对网页制作更有兴趣了，如果说HTML算是有些枯燥，那么CSS相当于是为网页注入了“有趣的灵魂”。不过在细节方面，它与HTML一样，需要在实操中更加关心以及亲自动手处理。
在 Internet 早期阶段（CSS大量使用之前），页面的内容和样式都由 HTML 来负责，因为 HTML 的样式管理和呈现效果有限，所以网页设计的效果很不如人意，这是一个相当糟糕的问题。万维网联盟 W3C（World Wide Web Consortium）意识到这个问题，于1997年推出 CSS 1.0（当前最新的版本是 CSS3），正式推动了内容（HTML）和表现（CSS）的分离，人们开始可以把所有的布局和样式代码从 HTML 中移除放入到 CSS 中。 ↩︎
绝对定位此处可能有些混淆，请留意其是仍是相对的，不过是相对最近的父元素。 ↩︎