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

逃跑的火焰

CSS的基本使用

• 直接写在标签内
  

[AppleScript] 纯文本查看 复制代码

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

• 写在 style 标签内
• [AppleScript] 纯文本查看 复制代码

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

  
  

使用外部 .css 文件

• @import （不建议使用此方式）
• [AppleScript] 纯文本查看 复制代码

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

  
  

• link
  

[AppleScript] 纯文本查看 复制代码

<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，只匹配第一个
  • 同级 （符号“~”）：A~B   匹配所有在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-Yahei2. 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; 内联和块级切换/隐藏