CSS学习简记（更新中~）

CSS定义

层叠样式表（Cascading Style Sheets, 缩写为CSS）,是一种样式表语言，用来描述HTML文档的呈现（美化内容）

CSS书写规则
选择器 {
    属性名:属性值;
}

---

 CSS引入方式

• 内部样式表
  • CSS代码直接写在style标签内
• 外部样式表
  • CSS代码写在单独的CSS文件中，使用link标签引入
• 行内样式
  • CSS代码直接写在想要应用样式的标签中

    
    
    
    


    
这个段落应用外部引入CSS
    
这个标签应用行内样式引入CSS

---

选择器

• 标签选择器
  • 即选择同名标签设置相同样式
• 类选择器
  • 可以差异化设置标签的显示效果
  • 一个类选择器可以供多个标签使用
  • 一个标签也可以使用多个类选择器，类名之间用空格隔开即可

    
    
    
    


    
段落1
    
段落2
    
段落3
    
段落4

• id选择器
  • 查找标签，差异化设置标签的显示效果
  • id选择器一般配合JS使用
  • 同一个id在一个页面中只能使用一次

    
    
    
    


    
标题

•  通配符选择器
  • 查找页面所有标签，设置相同样式
  • 实际开发中用于清除默认样式

文字控制属性

•  font-size属性
  • 必须带单位px
  • 谷歌浏览器默认像素大小为16px
• font-weight
  • 属性值可以是数字正常是400，加粗是700
  • 也可以是关键字，正常是normal，加粗是bold
• font-style
  • 通常用于清除文字倾斜效果
  • 属性值正常是normal，倾斜是italic
• line-height
  • 设置多行文字的间距
  • 属性值通常是数字+px，或数字（表示当前标签font-size属性值的倍数）
  • 测量行高的方法：
    • 从一行文字的最顶（最底）测量到下一行文字的最顶（最底）
  • 单行文字垂直居中（只适用于单行文字）
    • 只需设置当前行高为盒子高度即可

    
    
    
    


    
文字

• font-family
  • 属性值为想要的字体
  • 属性值可以填写多个字体名，各个字体名之间使用逗号隔开，执行顺序按照从左到右，找到哪个用哪个
• font复合属性
  • 这是一种属性的简写方式，一个属性对应多个值的写法，各个属性值之间使用空格隔开
  • font: 是否倾斜 是否加粗 字号/行高 字体（必须按照顺序填写）
  • 字号和字体必须填写，否则效果不生效
• text-indent
  • 属性值可以是数字+px，或数字+em（1em=当前标签的字号大小）
  • 用于文字的缩进
• text-align
  • 控制内容的水平对齐方式
  • 属性值有三种：left,center,right分别对应左中右对齐
  • text-align本质是控制内容的对齐方式，属性要设置给内容的父级
  • 例如给div里的图片设置居中，那么需要将div的text-align设置为center
• text-decoration 
  • 该属性通常用于删除a标签的下划线
  • 属性值有none、underline、line-through、overline分别对应无、下划线、删除线、上划线
• color

---