CSS 选择器、字体/文本、背景

CSS的基本使用

• 直接写在标签内

<p style="color: red; font-size: 40px;">段落</p>

• 写在 style 标签内

<style type="text/css">
    span{
        color: aquamarine;
    }
</style>

• 使用外部 .css 文件
  • @import （不建议使用此方式）

<style type="text/css">
    @import "font_css.css";
</style>

- link

<link rel="stylesheet" href="font_css.css">

CSS选择器

• 优先级：id选择器 > class 选择器 > 标签选择器
• 标签选择器：标签名{}
• class选择器（“.”符号）：.class名{}
• id选择器（“#”符号，id 选择器唯一）：#id名{}
• 群组 选择器（“，”逗号分开）：
  • 群组选择器可以同时选择多个标签
  • p,div{...}
• 层次选择器
  • 子代 （符号“>”）：A>B   匹配所有A元素的子元素B
  • 后代 (空格)：A B   匹配所有属于A元素后代的B元素
  • 相邻 （符号“+”）：A+B   匹配紧随A元素之后的同级元素B，只匹配第一个
  • 同级 （符号“_”）：AB   匹配所有在A元素之后的同级B元素
• 伪类选择器（符号“:”）
  • link：未访问过的样式
    • a:link {...}
  • visited：访问过后的样式
    • a:visited {...}
  • hover：划过的样式
    • a:hover {...}
  • active：激活的样式
    • a:active {...}

字体

• 字体：font-family
• 字体大小：font-size
• 字体样式：font-style
• 字体粗细：font-weight
• 字体小大写：font-variant (将小写字母改为小型字体的大写字母)
• 复合样式：font (默认顺序：style variant weight size/height family)

文本

• 对齐方式：text-align
• 首行缩进：text-indent
• 文本线：text-decoration
• 字距：letter-spacing
• 词距：word-spacing
• 行高：line-height

背景

• 背景颜色：background-color
• 背景图片：background-image
• 背景铺盖：background-repeat
• 背景大小：background-size
• 背景定位：background-position
• 复合样式：background
  • backgroud：red url(" ") no-repeat center;

常用样式

1. font-family:字体，eg: Microsoft-Yahei
2. font-size/color:字号/颜色
3. font-weight:bold 粗体
4. font-style:italic 斜体
5. text-decoration:underline 下划线
6. text-decoration:line-through 删除线
7. text-indent:2em 缩进文字的2倍大小
8. line-height:1.5em 行间距: 1.5倍文字大小
9. letter-spacing:50px 字间距，字母间距
10.word-spacing:50px 单词与单词间距
11.text-align:center/left/right 居中/居左/居右
12.color：rgb(255,255,255); 参数是0-255的数，可自调颜色
13.backgroud-image:url("1.png"); 背景图
14.backgroud-repeat:repeat-y/repeat-x/no-repeat; 图片按列/行/角排
15.backgroud-position:right center/center center; 图片位置靠右居中
16.以上可缩写为: backgroud: red url("1.png") no-repeat center;
17.border:solid 1px red;边框属性
18.ul, ol{list-style: 。。。。}列表属性
19.display:block/inline/none; 内联和块级切换/隐藏