CSS 20181011
css规则
选择器（即要改变样式的html元素）+声明（属性和属性值）；（分号表示结束一条声明）
h1 { color: blue;}
- id选择器
为一类样式取一个id（以#表示），将要使用这种样式的元素的id都命名成样式的id
<head>
<style>
#para1{ color: blue;}
</style>
</head>
<body>
<h1 id="para1">muhan</h1>
</body>
- class选择器
- 类选择器以一个点"."号显示
<head>
<style>
.center { text-align:center;}
</style>
</head>
<body>
<h1 class="center">muhan</h1>
<p class="center">muhan</p>
</body>
- 指定特定的HTML元素使用class
<head>
<style>
p.center { text-align:center;}
</style>
</head>
<body>
<h1 class="center">muhan</h1> /*该文字不会居中，不会显示center类的样式*/
<p class="center">muhan</p>
</body>
插入样式表
（在下文代码中注释，不单独说明）
- 外部样式表
- 内部样式表
- 内联样式
背景
<style>
h1 {background-color:#6495ed;} /*给元素设置不同背景色*/
p {background-color:#e0ffff;}
body {
background-color: #b0c4de; /*内部样式表，给整个网页设置背景色*/
background-image: url('https://wx2.sinaimg.cn/mw690/785731a4gy1fnjusmm1tej20mz0whakh.jpg'); }
/*给body设置背景图片，默认平铺重复显示*/
background-repeat: repeat-x; /*只在水平方向平铺，y垂直方向，no-repeat不平铺*/
background-position: right top; /*no-repeat下，设置图片位置，可以使用关键字或长度值px，cm，%*/
</style>
简写
<style>
body {background: #ffffff url('/statics/images/w3c/logo.png') no-repeat right top;}
/*属性值顺序如左，attachment在position左边*/
</style>
background-attachment 背景图片是否滚动，默认滚动，fixed固定
文本
<style>
h1{text-align:center} /*align文本对齐方式*/
p.date{text-align:right}
p.main{text-align:justify} /*每一行被展开为宽度相等，左，右外边距是对齐（如杂志和报纸）*/
a {text-decoration:none;} /*decoration，删除链接的下划线*/
p.uppercase {text-transform:uppercase;} /*单词字母大写*/
p.lowercase {text-transform:lowercase;} /*单词字母小写*/
p.capitalize {text-transform:capitalize;} /*单词首字母大写*/
p {text-indent:50px;} /*首行缩进*/
p { word-spacing:30px;} /*单词间距*/
h1 {letter-spacing:2px;} /*字母间距*/
p.small {line-height:70%;} /*行距*/
div.ex1 {direction:rtl;} /*文本从右边开始填充，但文字顺序没有变*/
h1 {text-shadow:2px 2px #FF0000;} /*文字阴影，相当于在原文本2px，2px处再粘贴一个*/
</style>
