Hybrid App开发之css样式使用

前言：

前面学习了html，今天学习一下css的基本使用，看下html与css之间是如何结合来编写前端网页的。

CSS 是什么？

CSS 是 Cascading Style Sheets（级联样式表）的缩写。 CSS 是一种样式表语言，用于为 HTML 文档定义布局。例如，CSS 涉及字体、颜色、边距、高度、宽度、背景图像、高级定位等方面。

CSS 跟 HTML 的区别在哪里？

HTML 用于结构化内容；CSS 用于格式化结构化的内容。

采用 CSS 有哪些好处？

CSS 是 Web 设计界的一次革命。CSS 的具体优点包括：

通过单个样式表控制多个文档的布局；
更精确的布局控制；
为不同的媒体类型（屏幕、打印等）采取不同的布局；
无数高级、先进的技巧。

基本的 CSS 语法

先举个简单的例子，比如我们要为一个网页设置一个背景色

采用html方式我们会给body添加下面属性

<body bgcolor="aliceblue">

采用css方式

 <style type="text/css">

    body{

      background-color: aliceblue;

    }

 </style>

上例也向你展示了基本的 CSS 模型

selector:{property:value}

selector选择器代表花括号中的属性设置将应用于哪个html元素
property 属性设置html标签的属性
value 值设置html标签属性的值

为一个 HTML 文档应用 CSS

为HTML文档应用CSS有以下三种方法可供选择。下面对这三种方法进行了概括。我们建议你对第三种方法（即外部样式表）予以关注。

行内样式表（style 属性）
内部样式表（style 元素）
外部样式表（引用一个样式表文件）

下面以给段落设置字体颜色和字体大小为例说明三种使用方式

1.）行内样式表（style属性）

为 HTML 应用 CSS 的一种方法是使用 HTML 属性 style

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>css样式</title>

</head>

<body>

<div>

    <p style="color: green;font-size: 5rem ">

        行内样式表

    </p>

</div>

</body>

</html>

2.）内部样式表（style 元素）

为 HTML 应用 CSS 的另一种方法是采用 HTML 元素 style

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>css样式</title>

    <style type="text/css" >

        p{

            color: green;

            font-size: 5rem;

        }

    </style>

</head>

<body>

<div>

    <p>

        内部样式表

    </p>

</div>

</body>

</html>

3.）外部样式表（引用一个样式表文件）

这里推荐采用这种引用外部样式表的方法，外部样式表就是一个扩展名为 css 的文本文件。跟其他文件一样，你可以把样式表文件放在 Web 服务器上或者本地硬盘上。

比如我这里在styles文件中新建一个global.css 目录如下：

然后在index.html的HTML 代码的头部（header）中添加引用<link rel="stylesheet" type="text/css" href="../styles/global.css" />

global.css代码如下：

p{

    color: green;

    font-size: 5rem;

}

index.html代码如下

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>css样式</title>

    <link rel="stylesheet" type="text/css" href="../styles/global.css" />

</head>

<body>

<div>

    <p>

        外部样式表

    </p>

</div>

</body>

</html>

元素的分类与标识

1.）使用css样式类

用 class 对元素进行分类，根据上面的我们可以为标签<p>创建一个样式，但是我们一个html网页中也行会用到好多种样式<p>标签，这时怎么办呢？这时我们可以采用样式类，为每个标签创建多个样式类，比如我们一篇文章，开头，内容，结尾三个段落的字体颜色不一样，我们可以创建三个不同需要的样式类，如下：

p{，

    font-size: 5rem;

}

p.header{

    color: green;

}

p.content{

    color: orangered;

}

p.footer{

    color: blue;

}

从上可以看出一个标签元素后面加上一个点（.）跟上你的样式类名称即可，看下如何在html上使用的，采用class属性即可选择使用哪个样式类。

<div>

    <p class="header">

        这是文章开头

    </p>

    <p class="content">

        这是文章内容

    </p>

    <p class="footer">

        这是文章结尾

    </p>

</div>

2.）使用样式id

除了可以对元素进行分类以外，你还可以标识单个元素。这是通过 HTML 属性 id 实现的。 HTML 属性 id 的特别之处在于，在同一 HTML 文档中不能有两个具有相同 id 值的元素。文档中的每个 id 值都必须是唯一的。

还接着上面的例子来说明，比如现在我们需要自定一个<p>标签的title。

p#title{

    color:red;

}

在html中引用

 <p id="title">

    这是文章题目

 </p>

样式id常用于布局的目的，定义页面的特殊部门，比如标题区域、页脚区域，页面区域。

常用css样式举例

1.）颜色与背景

CSS 属性 color 用于指定元素的前景色。

h1{

    color: aliceblue;

}

CSS 属性 background-color 用于指定元素的背景色。

body {

    background-color: aliceblue;

}

CSS 属性 background-image 用于设置背景图像。

 body{

    background-image: url("../../images/bg_post_activity_5.png");

 }

上面使用背景图片发现图片纵向横向都平铺了，使用CSS 属性 background-repeat 就是用于控制平铺的。

background-repeat:repeat-x 图像横向平铺
background-repeat:repeat-y 图像纵向平铺
background-repeat:repeat 图像横向和纵向都平铺
background-repeat:no-repeat 图像不平铺

body{

        background-image: url("../../images/bg_post_activity_5.png");

        background-repeat:no-repeat;

    }

CSS 属性 background-attachment 用于指定背景图像是固定在屏幕上的、还是随着它所在的元素而滚动的。

一个固定的背景图像不会随着用户滚动页面而发生滚动（它是固定在屏幕上的），而一个非固定的背景图像会随着页面的滚动而滚动。

background-attachment:scroll 图像会跟随页面滚动——非固定的
background-attachment:fixed 图像是固定在屏幕上的

body{

    background-image: url("../../images/bg_post_activity_5.png");

    background-repeat:no-repeat;

    background-attachment: scroll;

}

CSS 属性 background-position设置图像放置在屏幕的位置

background-position:2cm 2cm 图像被放置在页面内距左边 2 厘米、顶部 2 厘米的地方
background-position:50% 25% 图像被放置在页面内水平居中、离顶部四分之一处
background-position:top right 图像被放置在页面的右上角

body{

    background-image: url("../../images/bg_post_activity_5.png");

    background-repeat:no-repeat;

    background-attachment: scroll;

    background-position:center;

}

CSS 属性 background 是上述所有与背景有关的属性的缩写用法

body{

    background: aliceblue url("../../images/bg_post_activity_5.png") no-repeat scroll center;

}

2.）字体

CSS 属性 font-family 的作用是设置一组按优先级排序的字体列表，如果该列表中的第一个字体未在访问者计算机上安装，那么就尝试列表中的下一个字体，依此类推，直到列表中的某个字体是已安装的

有两种类型的名称可用于分类字体：字体族名称（family-name）和族类名称（generic family）。下面来解释这两个术语

字体族名称（family-name）字体族名称（就是我们通常所说的“字体”）的例子包括“Arial”、“Times New Roman”、“宋体”、“黑体”等等。
族类（generic family）一个族类是一组具有统一外观的字体族。sans-serif 就是一例，它代表一组没有“脚”的字体。

p.header{

    color: green;

    font-family:  华文楷体, 华文宋体,新宋体;

}

CSS 属性 font-style 定义所选字体的显示样式

normal（正常）
italic（斜体）
oblique（倾斜）

p.header{

    color: green;

    font-family:  华文楷体, 华文宋体,新宋体;

    font-style: italic;

}

CSS 属性 font-variant 的值可以是：normal（正常）或 small-caps（小体大写字母）。

p.content{

    color: orangered;

    font-variant: small-caps;

}

CSS 属性 font-weight 指定字体显示的浓淡程度。其值可以是 normal（正常）或 bold（加粗）

p.content{

    color: orangered;

    font-variant: small-caps;

    font-weight:bold;

}

CSS 属性 font-size 来设置字体大小，字体大小可通过多种不同单位（比如像素或百分比等）来设置。

p.content{

    color: orangered;

    font-variant: small-caps;

    font-weight:bold;

    font-size: 2em;

}

一般都会使用px,pt,%,em这四种，‘px’和‘pt’将字体设置为固定大小，而‘%’和‘em’允许页面浏览者自行调整字体的显示尺寸

CSS 属性 font 是上述各有关字体的 CSS 属性的缩写用法。

p.footer{

    color: blue;

    font: bold italic 3em 华文宋体,新宋体;

}

3.）文本

CSS 属性 text-indent 用于为段落设置首行缩进，以令其具有美观的格式

p#title{

    color:red;

    text-indent: 20%;

}

CSS 属性 text-align 与 HTML 属性 align 的功能相同。该属性的值可以是：left（左对齐）、right（右对齐）或者 center（居中）。除了上面三种选择以外，你还可以将该属性的值设为 justify（两端对齐），即伸缩行中的文字以左右靠齐

p.footer{

    color: blue;

    font: bold italic 3em 华文宋体,新宋体;

    text-align: center;

}

CSS 属性 text-decoration 令我们可以为文本增添不同的“装饰”或“效果”。

p.footer{

    color: blue;

    font: bold italic 3em 华文宋体,新宋体;

    text-align: center;

    text-decoration: underline;

}

CSS属性letter-spacing用于设置文本的水平字间距

p.footer{

    color: blue;

    font: bold italic 3em 华文宋体,新宋体;

    text-align: center;

    text-decoration: underline;

    letter-spacing: 0.50em;

}

CSS 属性 text-transform 用于控制文本的大小写。无论字母本来的大小写，你可以通过该属性令它首字母大写（capitalize）、全部大写（uppercase）或者全部小写（lowercase）

p#label{

    color: orangered;

    text-transform: uppercase;

}

链接

上面学习了属性（比如修改颜色、字体、添加下划线等）也可以用在链接标签上。但不同的是， CSS 允许你根据链接是未访问的、已访问的、活动的、是否有鼠标悬停等分别定义不同的属性。这样，我们便可为网站增添奇特而有用的效果。你需要通过伪类（pseudo-class）来控制这些效果。

先看下什么是伪类？

伪类（pseudo-class）令你可以在为 HTML 元素定义 CSS 属性的时候将条件和事件考虑在内。

伪类:link 用于浏览者从未访问过的链接。

a:link{

    text-decoration: none;

    color: blue;

}

伪类:visited 用于浏览者已访问过的链接

a:visited{

    text-decoration: none;

    color: green;

}

伪类:active 用于活动的链接（即获得当前焦点的链接

a:active{

    text-decoration: none;

    color: gold;

}

伪类:hover 用于有鼠标悬停的链接

a:hover{

    text-decoration: none;

    color: orangered;

}

组织元素（span 和 div）

span 和 div 元素用于组织和结构化文档，并经常联合 class 和 id 属性一起使用。
在这一课中，我们将进一步探究 span 和 div 的用法，因为这两个 HTML 元素对于 CSS 是很重要的。

用 span 组织元素
用 div 组织元素

用 span 组织元素

span 元素可以说是一种中性元素，因为它不对文档本身添加任何东西。但是与 CSS 结合使用的话，span 可以对文档中的部分文本增添视觉效果

用 div 组织元素

div 可以被用来组织一个或多个块元素。

盒状模型

CSS 中的盒状模型（box model）用于描述一个为 HTML 元素形成的矩形盒子。盒状模型还涉及为各个元素调整外边距（margin）、边框（border）、内边距（padding）和内容的具体操作。下图显示了盒状模型的结构：

外边距和内边距

你学习了盒状模型。在这一课，我们将了解如何通过设置 margin（外边距）和 padding（内边距）这两个 CSS 属性来改变元素的显示

为元素设置外边距

一个元素有上（top）、下（bottom）、左（left）、右（right）四个边。外边距（margin）表示从一个元素的边到相邻元素(或者文档边界)之间的距离

p#label{

    color: orangered;

    text-transform: uppercase;

    margin-top: 5em ;

    margin-right:  3em ;

    margin-bottom:5em ;

    margin-left: 3em;

}

等同于

p#label{

    color: orangered;

    text-transform: uppercase;

    margin: 5em 3em 5em 3em;

}

为元素设置内边距

p#title{

    color:red;

    padding: 5em 3em 5em 3em;

}

等同于

p#title{

    color:red;

    padding-top: 5em;

    padding-right: 3em;

    padding-bottom: 5em ;

    padding-left: 3em;

}

边框

边框（border）可以有多种用途，比如作为装饰元素或者作为划分两物的分界线。在设置边框方面，CSS 为你提供了无尽选择。

边框宽度由 CSS 属性 border-width 定义，其值可以是“thin”（薄）、“medium”（普通）或“thick” （厚）等，也可以是像素值。
CSS 属性 border-color 用于定义边框的颜色。
边框样式[border-style]

p.footer{

    color: blue;

    font: bold italic 3em 华文宋体,新宋体;

    text-align: center;

    text-decoration: none;

    letter-spacing: 0.50em;

    border:0.05em dotted gold;

}

高度和宽度

设定宽度[width]
设定高度[height]

p.content{

    color: orangered;

    font-variant: small-caps;

    font-weight:bold;

    font-size: 2em;

    width: 50%;

    height: auto;

}

浮动元素（float）

我们可以通过 CSS 属性 float 令元素向左或向右浮动。也就是说，令盒子及其中的内容浮动到文档（或者是上层盒子）的右边或者左边。比如我们要实现一个图文混排的效果

定义一个css Id

#picture{

    float: left;

    width: 200px;

}

html代码

<div>

    <div id="picture">

        <img src="../../images/bg_post_activity_1.png" alt="这是一张图片" width="200px" >

    </div>

    <p>

        实现图文混排，实现图文混排，实现图文混排，实现图文混排，实现图文混排，实现图文混排,........，实现图文混排，实现图文混排，实现图文混排，

    </p>

</div>

元素的定位

CSS 定位令你可以将一个元素精确地放在页面上你所指定的地方

绝对定位
相对定位

绝对定位

要对元素进行绝对定位，应将 position 属性的值设为 absolute。接着，你可以通过属性 left、right、 top 和 bottom 来设定将盒子放置在哪里。

   #box1 {

            position:absolute;

            bottom: 50px;

            right: 50px;

    }

html代码

<div id="box1">

    <p>

        <a href="#" target="_blank">测试css样式的伪类</a>

    </p>

</div>

总结：

今天大致学习了一下css的基本使用，以及一些常用的css样式。