【学习】CSS基础（二）

CSS基础（二）

本文参考http://www.w3school.com.cn/css/index.asp

---

背景

• 可以设置任何标签的背景（包括整个页面）

background-color: grey; //背景色

background-image: url(); //背景图片，括号内部填写地址

//可以在.css文件中设置背景

padding: 20px; // 周围留下20px的边界

//如果不管是否重复，背景会自动复制填满整个标签内部

background-repeat: repeat-y; //只在y方向复制，同理有只在x方向复制

background-repeat: no-repeat; //不复制

background-position: center; //位置居中，同时还有top、bottom、left、right，也可以成对出现，还可以写成px和cm

background-position: 40% 60%; //x方向左数40%，y方向上数60% 

background-attachment: fixed; //背景的位置固定，不随着滑轮滚动而变

---

文本

color：red； //设置文本颜色

background-color: yellow; //设置文本的背景色

word-spacing： 5px; //字间距

letter-spacing: 10px; //字符间距

//标准的行高认为是字的110%-120%
//可以用百分比、像素值、数值等设置行高

line-height: 90%; //行间距为-10%

line-height: 200%; //行间距100%

text-align：center; //文本对齐方式设为居中，还有left、right

text-decoration: overline; //overline上划线、line-through中划线、underline下划线、blink（说是会一闪一闪，但是我没看到）、none去掉装饰（超链接的下划线可以去掉）

text-indent: 1cm; //首行缩进

text-transform: uppercase; //字母全部变大写，lowercase全部变小写，capitalize每个单词的首字母大写

---

字体

font-family//字体
font-style//风格 normal正常 italic斜体 oblique倾斜，后两个差不多
font-varitant: small-caos; //大写变小的大写
font-weight: normal;//bold加粗 500正常 100最细 900最粗
font-size: 20px//文本大小，也可以用em（16px），100%

---

链接

a:link {color:#FF0000;text-decoration:none;}        /* 未被访问的链接 */
a:visited {color:#00FF00;background-color:#B2FF99;} /* 已被访问的链接 */
a:hover {color:#FF00FF;}    /* 鼠标指针移动到链接上 */
a:active {color:#0000FF;}   /* 正在被点击的链接 */