ReactNative学习之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样式。
ReactNative学习之css样式使用的更多相关文章
- bootstrap学习总结-css样式设计(一)
由于项目需要,所以打算好好学习下bootstrap框架,之前了解一点,框架总体不难,但涉及到的东西还是很多,想要熟练掌握它,还是要多练练. 一:bootstrap是什么? bs是什么? 即前端页面搭 ...
- 1+X证书学习日志 —— css样式表
## 因为初级的内容较多,所以选了一些有用的 需要记忆的内容写下 方便日后回顾 CSS语法 选择符{属性:属性值;} ## 所有的css代码 都要放在css样式表里面 ...
- bootstrap学习总结-css样式设计(二)
首先,很感谢各位园友对我的支持,关于bootstrap的学习总结,我会持续更新,如果有写的不对的地方,麻烦各位给我指正出来哈.关于上篇文章,固定布局和流式布局很关键,如果还不太清楚的可以再看看我写的h ...
- HTML 学习笔记 CSS样式(定位)
CSS定位(Positioning)属性 允许你对元素进行定位. CSS定位和浮动 CSS为定位和浮动提供了一些属性,利用这些属性 可以建立列式布局,将布局的一部分与另一部分重叠.还可以完成多年来通常 ...
- HTML 学习笔记 CSS样式(边框)
元素的边框(border)是围绕元素内容和内边距的一条或多条线 CSS border 属性允许你规定边框的样式 宽度和颜色 CSS 边框 在 HTML 中,我们使用表格来创建文本周围的边框,但是通过使 ...
- HTML 学习笔记 CSS样式(框模型)
CSS框模型( Box Model)规定了元素框处理元素的内容 内边距 边框 和 外边距的方式 CSS框模型概述 可以用下面的模型图概述
- HTML 学习笔记 CSS样式(链接)
我们能够以不同的方法为链接设置样式. 设置链接的样式 能够设置链接样式的 CSS 属性有很多种(例如 color, font-family, background 等等).链接的特殊性在于能够根据它们 ...
- HTML 学习笔记 CSS样式(字体)
css字体属性定义文本的字体系列 大小 加粗 风格 和 变形(如小型大写字母(类似于大写字母字体变小了)) css字体系列 在css中 有两种不同类型的字体系列名称 1.通用字体系列 - 拥有相似外观 ...
- HTML 学习笔记 CSS样式(文本)
CSS文本属性可以定义文本的外观 通过文本属性 您可以改变文本的颜色 字符间距 文本对齐装饰文本 对文本进行缩进等等. 缩进文本 把web页面上的段落的第一行缩进,这是最常用的文本格式化效果. css ...
随机推荐
- 将ImageList中的图片转化成byte数组
Image imgwd = this.imageList1.Images["wd.png"]; var bytes = ImageToBytes(imgwd); public by ...
- git的使用及常用命令(二)
一,把文件放在版本库中 执行 git add XXX文件名 在执行 git commit -m ‘提交注释' 查看状态 git status 如果没有改变文件,nothing to comment ...
- 架构设计之Spring-Session分布式集群会话管理
前言 通常在web开发中,回话管理是很重要的一部分,用于存储与用户相关的一些数据.对于JAVA开发者来说,项目中的session一般由Tomcat或者jetty容器来管理. 特点介绍 尽管使用特定的容 ...
- swoole使用 常用案例
swoole使用 服务器及客户端 4种服务器[tcp/udp/web/websocket] TCP服务器 //创建Server对象,监听 127.0.0.1:9501端口 $serv = new sw ...
- Oracle12c多租户管理用户、角色、权限
Oracle 数据库 12 c 多租户选项允许单个容器数据库 (CDB) 来承载多个单独的可插拔数据库 (PDB).那么我们如何在容器数据库 (CDB) 和可插拔数据库 (PDB)管理用户权限.背景: ...
- 手把手教你学SVN
注意 转载须保留原文链接(http://www.cnblogs.com/wzhiq896/p/6822713.html ) 作者:wangwen896 整理 对于很多新手来说,SVN 代码托管一无所 ...
- python3 selenium 登录操作
使用场景: 测试过程中,有的时候需要登录才可以进行其他操作 举例说明: # coding=utf-8 """ :author: 花花测试 :time: 2017.05.0 ...
- 一个栗子上手CSS3动画
最近杂七杂八的事情很多,很多知识都没来得及总结,是时候总结总结,开启新的篇章- 本篇文章不一一列举CSS3动画的属性,若需要了解API,可前往MDN 在开始栗子前,我们先补补基础知识. css3动画分 ...
- mysql5.6源码自动安装脚本
将脚本与源码安装包放在同一目录下,执行脚本即可(执行脚本会使用yum安装依赖包) 安装完成之后,既可以使用mysql -uroot -p登录 脚本内容如下: [root@mysql src]# c ...
- C语言模拟实现多态
一.多态的主要特点 1.继承体系下.继承:是面向对象最显著的一个特性.继承是从已有的类中派生出新的类,新的类能吸收已有类的数据属性 和行为,并能扩展新的能力,已有类被称为父类/基类,新增加的类被称作子 ...