（1）内联样式注：样式要采用驼峰命令发，如果非要使用原生css样式写法，需加引号缺点：一些动画，伪类不能使用class App extends Component {constructor(props) {super(props);this.state = {date: new Date()};}render() {const styleCss = {header : {color: ‘red‘,backgroundColor: ‘#ccc‘,"padding-top": ‘20px‘,paddingBottom: ‘20px‘}}return (<div className="App"><p style={styleCss.header}>这是一段文字，哈哈...
原文:CSS中使用文本阴影与元素阴影文本阴影介绍#在CSS中使用text-shadow属性设置文本阴影，该属性一共有4个属性值如：水平阴影、垂直阴影、（清晰度或模糊距离）、阴影颜色。text-shadow属性值说明，在文本阴影实践中：第一个值是设置阴影水平方向移动，第二个值是设置阴影垂直方向移动，第三个值是设置阴影模糊距离，第四个值是设置阴影颜色。text-shadow属性值可以设置为负数。文本可以设置多个阴影以逗号分隔即可。Copytext-sha...
在Web开发中我们经常要碰到这样的问题：在为一个页面设置背景图片之后往往希望图片能够在分辨率比较大的情况下水平垂直都居中显示。通常水平居中显示在Css中是很容易做到的，而垂直居中就需要使用一些Css的技巧：1. 首先为了能使得网站能够根据浏览器大小自适应，我们需要将页面的body元素height值设为100%，而在这之前，我们需要将xhtml验证从网站头删除。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:...
html<div id="outer"><div id="inner"></div></div> css #outer{width:500px;height:500px;background:yellow;display: flex;justify-content:center; /*justify-content属性定义了项目在主轴上的对齐方式align-items:center; /*align-items属性定义项目在交叉轴上如何对齐。}#inner{height:100px;width:100px;background: red}原文：http://www.cnblogs.com/chengdabelief/p/6510801.html
文字样式属性： 格式：font-style:italic;/normal; 快捷键：fsi / fsn + tab键文字粗细属性： 格式：font-weight:bold;/bolder;/lighter; 快捷键：fwb / fwbr / fwl + tab键文字大小属性： 格式：font-size:300px; （px是像素） 快捷键：fz300 + tab键文字字体属性： 格式：font-family:"楷体"; 快捷键：ff + tab键 中午要用引号括起来，设置的字体得是电...
CSS 的属性值中经常会出现百分比，搞清它们的基数是一件很重要的事情。我特意查看了一下 W3C 的 CSS2.1 标准，在此整理下： 百分比单位 乘以包含块的宽度 margin, padding, left, right, text-indent, width, max-width, min-width 乘以包含块的高度 top, bottom, height, max-height, min-height 关于包含块（containing block）的概念，不能简单地理解成是父元素。如果是静态定位和相对定位，包含块一般就是其父元素。但是对于绝...
/*1.设置一个值：四个角的圆角值都一样*/ /*border-radius: 10px;*/ /*2.设置两个值:第一个值控制左上/右下，第二个值控制右上/左下*/ /*border-radius: 10px 30px;*/ /*3.设置三个值：第一个值控制左上，第二值控制右上/左下，第三个值控制右下*/ /*border-radius: 10px 40px 60px;*/ /*4.设置四个值：左上 右上 右下 左下*/ /*border-radius:...
leftright原文：http://www.cnblogs.com/coderme/p/4111133.html
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="./source/fontImg/css/font-awesome.css" /> <style> body { font-size: 14px; } *{ margin:0px; padding: 0px; } /* 将list样式取消 */ li { lis...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title>隐藏导航练习</title><style type="text/css"> <style type="text/css"> * { margin:0px;padding:0px;} #aa {height:40px;width:90px;top:80px;left:200px;background...
html代码是这样的 <div class="arrow-up"><!--向上的三角--> </div> <div class="arrow-down"><!--向下的三角--> </div> <div class="arrow-left"><!--向左的三角--> </div> <div class="arrow-right"><!--向右的三角--> </div>下面用CSS3分别实现向上、下、左、右的三角形 /*箭头向上*/ .arrow-up {width:0;height:0;border-left:30px solid transparent;border-right:30px solid transparent;border-bottom:30px solid #fff; }/*...
CSS3 边框用CSS3，你可以创建圆角边框，添加阴影框，并作为边界的形象而不使用设计程序，如Photoshop。在本章中，您将了解以下的边框属性：border-radiusbox-shadowborder-image浏览器支持Internet Explorer 9+ 支持 border-radius 和 box-shadow.Firefox, Chrome, 和 Safari 支持所有最新的 border 属性.注意： 前缀是-webkit-的Safari支持阴影边框。前缀是-o-的Opera支持边框图像。CSS3 圆角在CSS2中添加圆角棘手。我们不得不在每...
原文名称:Creating Sexy Stylesheets原文地址:http://www.thinkvitamin.com/features/design/creating-sexy-stylesheets作为一个CSS方面的专家,所做的不只是记住选择符(Selectors)那么简单,提升样式表的效用和可维护性,以及设计蓝图和管理工作流程都是工作的一部分.在本篇文章中,Jina Bolton给出了10个CSS技巧提示,这些内容是由对12位顶尖的设计者的调查提炼而来.接下来,我将重点放在创建性感的样式表方法的讨论之上.一旦CSS被用来...
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time,...
正文自动给CSS文件添加不同浏览器的CSS3前缀：Autoprefixer安装只需兼容主流浏览器正常情况使用：（在书写完的CSS样式文件中，按F1，选择Autoprefixer CSS）这时候会添加最新需要兼容的css头（PS：现在基本上只考虑Safari和Chrome了）兼容其他浏览器但是，这往往不是我们需要的，有时候还需要兼容Firefox、Opera和IE，那么可以自定义VSCode的配置项：// autoprefixer配置"autoprefixer.browsers": ["ie >= 6", "firefox >= 8","chr...