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样式。
转载于:https://www.cnblogs.com/wuyuxin/p/6993766.html
Hybrid App开发之css样式使用相关推荐
- Hybrid App开发之jQuery选择器
什么是选择器? JQuery选择器通过标签名.属性名或者内容对DOM元素进行快速准确的选择,而不必担心浏览器的兼容性,通过JQuery选择器对页面元素精确定位,进而方便完成处理元素属性和行为事件. 选 ...
- 【转载】前端开发之CSS兼容写法经验总结
为什么80%的码农都做不了架构师?>>> 前端开发之CSS兼容写法经验总结技术 maybe yes 发表于2014-11-23 22:47 原文链接 : http://blog ...
- Android 系统(55)---Android App开发之ANR异常的原因分析及处理总结
Android App开发之ANR异常的原因分析及处理总结 Android App开发之ANR异常的原因分析及处理总结 ANR的全称是application not responding,根据它的意思 ...
- 手机APP开发之MIT Appinventor详细实战教程(一),利用通过蓝牙控制单片机,以及实现单片机与android设备之间的串口通信
目录 (一)前期软件准备和硬件准备 ( 二 ) 实现的思路和操作原理 ( 三) 具体的操作方法 MIT Appinventor 是编程领域较为受欢迎且适用的编程软件 ,因其操作流程和使用方法简单,一直 ...
- Hbuilder app开发之app启动图片
hbuilder app开发之app启动图片: http://jingyan.baidu.com/article/19020a0a163e73529d284200.html 注意:也可以打包的时候生 ...
- 我的App开发之路:从零开始到上线赚钱
我的App开发之路:从零开始到上线赚钱 背景介绍 本人从第一次写代码赚钱开始,到现在已经12年了,使用过多种操作系统.编程语言. 现在作为一名个人开发者,开发一些小应用. 本文就应用软件开发做个简单总 ...
- 如何在React JS组件和React JS App中添加CSS样式?
In this tutorial, we will only work with CSS styles. Please ensure you have basic knowledge of HTML, ...
- 零基础学前端开发之CSS基础
第三章:CSS3样式基础 知识点: 1.CSS概念 2.CSS语法格式 3.CSS的使用 4.三类范围 为什么使用CSS 化妆前: 化妆后: HTML语法,在网页上显示数据,第一章p br b fon ...
- web开发之CSS知识点总结
CSS通常称为CSS样式或者层叠样式表,主要用于修饰HTML页面的文本内容(字体,大小,颜色)等,图片的外形(高宽,边框样式,边距)等以及版面的布局等外观样式,CSS可以使得HTML页面更美观,CSS ...
最新文章
- VI和VIM编辑器深入学习笔记--基本vi命令
- 程序员减轻压力的十个建议
- 在路由器使用ACL防止IP地址欺骗
- 在ASP.NET中使用Session常见问题集锦
- css border 圆角气泡案例
- VVC/JEM代码学习16:xCheckRDCostMerge2Nx2N
- 批发企业如何使用订单软件app管理账目混乱问题
- java编写一个汽车类,有属性:品牌、型号、排量、速度,有方法:启动、加速、转弯、刹车、息火...
- 不良资产处置(四):国内外不良资产处置公司的背景特点
- 在TMS320F2812上实现从flash拷贝整个程序到RAM上运行的方法探讨
- 人工智能的主要优势是什么?
- 前端开发step1,2,3
- 有没有大讨论,联想都要面对 “第四道槛”
- 特征提取——Hand-crafted feature
- 如何实现系统的单点登录?
- 拼多多退款怎么设置?万顿思教育
- 阴阳师各服务器在线人数,阴阳师伪神活动成难忘今宵,玩家团结一心,你换了哪个SSR?...
- ubuntu虚拟机迁移/移动/复制后无法上网
- CSAW-2015-StringIPC解法一修改cred结构
- 打破“双十定律”,华为云AI推动超级抗菌药Drug X研发加速