Css引入方式

1.内部样式：
一般写在Html的<head>标签内
<style type="text/css"> p{ color: red; span{ font-size: 40px; } } </style>

JS引入方式

1.内部样式
<script>标签
一般放在<body>标签内的最下方
2.外部引用：
<script type="text/javascript" src="index.js"></script>
写在Html的<head>标签内
<link rel="stylesheet" type="text/css" href="xxx.css">
3.内联样式：
在Html元素内使用，通过style标签引用
<p style="color: red; font-size: 10px;">内容</p>

Css的语法规则

1.选择器(多个选择器可用","来隔开)
2.属性(属性和值之前用":"来隔开)
3.值(值后以";"来结尾)
属性和值被称为"特性",多个"特性"用";"隔开,特性用"{}"来包裹。
若出现重复的属性设置,那么高优先级的覆盖低优先级,后面的属性将会覆盖前面的属性。

有关Css前缀

由于浏览器特性，有的新式Css不被所有浏览器所支持，书写这些Css时需要加前缀

Firefox: -moz-
Safari/Chrome: -webkit-
Opera: -o-
IE: -ms-

e.g
-webkit-transform:romate(-3deg); -moz-transform:rotate(-3deg);

Css的建议书写风格

1.统一使用小写
2.不使用内联样式书写Css
3.id和class的值使用有意义的单词，分隔符统一用“-”
4.尽量使用缩写
5.若属性的值为0，则省略单位
6.块内容缩进
7.属性名后的":"接一个空格

常用属性 <br />

定义元素的宽和高 width&height
选择器{ width: xxpx; height: xxpx; }
注意:宽高只对块级元素有效，行内元素的宽高只靠自身的内容来扩充。

文本的字体设置font属性
1.font-size: xxpx;字体大小
2.font-family: "Helvetica Neue", "Hiragino Sans GB", "微软雅黑";依次使用字体池
3.font-weight: bold/regular;设置字体的粗细
4.line-height行间距
5.font-style值有：italic斜体、normal
缩写示范
e.g
选择器{ font: bold 15px//字体大小 20px//行间距 Arial; }注意字体的值是必须的,Chrome等浏览器默认最新的字体大小值为12px.

文字的设置text属性
1.文字对齐text-align 值有:center、left、right、justify（两端对齐）
2.文字缩进text-indente.g:text-indent: 30px;2em 2em=字体的两倍大小，即首行空两个字
3.文字描述text-decoration值有:none、underline（下划线）、overline（上划）、line-through（删除线）
4.文字颜色color 颜色为rgb值,可用Chrome插件:ColorZilla拾取数值
5.文字方向direction值有:rtl(从右往左)、ltr(从左往右)
6.文本大小写text-transform值有:uppercase（大写）、lowercase（小写）、capitalize（首字母大写）
7.word-warp: break-word; 自动折行（默认的折行是按照单词）

背景设置 background
1.设置图片为背景background-img: url(图片地址);
2.背景图片重复（比如引用图片无法填满显示区域，可参考壁纸设置）background-repeat
值有:repeat、no-repeat、repeat-x（x轴重复）、repeat-y（y轴重复）
3.设置图片位置background-position
值有: 1.top、center、bottom、left、right
2.XXpx、YYpx(可参考pocessing坐标)
3.x%,y%(百分比位置)
4.设置图片是否按页面滚动而滚动background-attachment值为:fixed(固定)、initial（滚动）
以上可缩写为
e.g
选择器{ background:#f00 url(xxxx) no-repeat fixed 0 0; }

边框设置 border属性
1.边框线的性质border-style值为solid(实线)、dashed（虚线）
2.边框颜色border-color
3.边框宽度border-width: xpx;
4.边框角度border-radius: xpx;
缩写e.g
border: solid #1222 1px;

引用选择器的时候，“#”对应“ID”，“.”对应"CLASS"
to be continue
p.s markdown比想象中好用