欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-03-21 17:34:20
CSS的基本使用 直接写在标签内 写在 style 标签内 使用外部 .css 文件 @import (不建议使用此方式) link CSS选择器 优先级:id选择器 class 选择器 标签选择器 标签选择器:标签名{} class选择器(“.”符号):.class名{} id选择器(“ ”符号, ......

css的基本使用

  • 直接写在标签内
<p style="color: red; font-size: 40px;">段落</p>
  • 写在 style 标签内
<style>
    span{
        color: aquamarine;
    }
</style>
  • 使用外部 .css 文件
    • @import (不建议使用此方式)
    <style>
      @import "font_css.css";
    </style>
    • link
    <link rel="stylesheet" href="font_css.css">

css选择器

  • 优先级:id选择器 > class 选择器 > 标签选择器
  • 标签选择器:标签名{}
  • class选择器(“.”符号):.class名{}
  • id选择器(“#”符号,id 选择器唯一):#id名{}
  • 群组 选择器(“,”逗号分开):
    • 群组选择器可以同时选择多个标签
    • p,div{...}
  • 层次选择器
    • 子代 (符号“>”):div>p{...}
    • 后代 (空格):div p {...}
    • 相邻 (符号“+”):#p_id~span {...}
    • 兄弟 (符号“~”):#p_id~p {...}
  • 伪类选择器(符号“:”)
    • 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; 内联和块级切换/隐藏