hmj1993
hmj1993

CSS基础

概念

CSS指层叠样式表(级联样式表)，作用是用来美化html标签

书写位置

选择器

选择器是一个选择谁的过程

  • 基础选择器
  1. 标签选择器
标签{
属性:值;
}
  1. 类选择器
.自定义类名{
属性:值;
}

特点：谁调用，谁生效
一个标签可以多个类选择器
多个标签可以调用同一个类选择器
命名规则：不能用纯数字或者数字开头来定义类名
不能使用特殊符号（_除外）来定义类名
不推荐使用汉字来定义类名
不推荐使用标签名，属性值，属性来定义

  1. id选择器
#自定义类名{
属性:值;
}

特点：谁调用，谁生效
一个标签只能调用一个id选择器
一个id选择器在一个页面只能调用一次

  1. 通配符
*{
属性:值;
}
  • 复合选择器
  1. 交集选择器
标签+类/id选择器{
属性:值;
}

特点：既是某个标签，而且这个标签调用了类／id选择器

  1. 后代选择器
选择器+空格+选择器{
属性:值;
}

后代选择器的基本要求：包含/嵌套关系
特点：父在前，子在后
无限制隔代
只要能代表这个标签，可以是标签选择器，类选择器，id选择器自由组合

  1. 子代选择器
选择器>选择器{
属性:值;
}

特点：选择的是直接下一代

  1. 并集选择器
选择器,选择器,选择器{
属性:值;
}

文本元素

  • 属性
    1.1 font-size：文字大小
    1.2 font-weight ：文字粗细 100-900 其中700为加粗；不推荐使用font-weight:bold；
    1.3 font-family：文字字体，如微软雅黑
    1.4 font-style：文字样式，normal正常（默认），italic斜体
    1.5 line-height：行高
    1.6 color：文本颜色（前景色）
    1.7 background-color：背景色
    1.8 text-align：内容的水平对齐方式，图片也适用，left／right／center
    1.9 text-indent：首行缩进，通常为2em

  • 文本属性连写
    font:italic 700 16px/40px 微软雅黑;(最好按照这个顺序书写属性值，其中连写时font-size和font-family必写)

  • font-family的表达方式
    1.直接写中文名称，如微软雅黑,宋体，黑体
    2.写字体的英文名称，如microsoft yahei，SimSun,SimHei
    3.unicode编码,如/5FAE/8F6F/96C5/9ED1,/5B8B/4F53,/9ED1/4F53，获取方法为在console面板中输入escape("XXX")即可获取，把获取到的值中’%u‘改为’／‘

样式表书写位置

  • 内嵌式写法