初步认识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一样,需要在实操中更加关心以及亲自动手处理。