一、Web端CSS的使用
CSS是Cascading Style Sheet(层叠样式表)的缩写。是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。
如何将样式表加入您的网页:
你可以用以下三种方式将样式表加入您的网页。而最接近目标的样式定义优先权越高。高优先权样式将继承低优先权样式的未重叠定义但覆盖重叠的定义。
内联方式 Inline Styles 内联定义即是在对象的标记内使用对象的style属性定义适用其的样式表属性。 示例代码:
内部样式块对象 Embedding a Style Block 你可以在你的HTML文档的<head>标记里插入一个<style>块对象。 示例代码:
外部样式表 Linking to a Style Sheet 你可以先建立外部样式表文件*.css,然后使用HTML的link对象。 示例代码:
二、React Native中CSS
内联样式
对象样式
使用Stylesheet.Create
样式拼接
导出样式对象
下面的代码是index.ios.js中的代码:
/** * Sample React Native App * https://github.com/facebook/react-native * @flow */ import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, View } from 'react-native'; import liyuechun from './styles' var textStyle = { fontSize:15, backgroundColor:'#DAC', textAlign:'center' }; class YZDemo extends Component { render() { return ( <View style={ { width: 300, height: 600, backgroundColor: 'red', padding: 50, margin: 10 } }> <Text style={textStyle}> www.52learn.wang </Text> <Text style={liyuechun.yuzhi}> 匠心品质 </Text> <Text style={liyuechun.liangxin}> 良心育人 </Text> <Text style={[liyuechun.textFontSize, liyuechun.textBGColor]}> 黎跃春 </Text> <Text style={[liyuechun.textFontSize, {backgroundColor: 'yellow'}]}> 欢迎大家来到育知同创 </Text> </View> ); } } AppRegistry.registerComponent('YZDemo', () => YZDemo);
下面的代码是styles.js的代码:
import React from 'react'; import { StyleSheet } from 'react-native'; var liyuechun = StyleSheet.create( { yuzhi: { fontSize: 40, color: 'green', marginTop: 40, backgroundColor: 'blue' }, liangxin: { fontSize: 80, backgroundColor: '#FFF', marginTop: 5 }, textFontSize: { fontSize: 20 }, textBGColor: { backgroundColor: '#F88' } }); module.exports = liyuechun;