前端 - CSS基础知识

CSS文档

目录
  • CSS简介
    • CSS语法规范
  • CSS基础选择器
    • 标签选择器
    • 类选择器
      • 使用类选择器画盒子
    • id选择器
    • 通配符选择器
  • CSS设置字体
    • 字体
    • 字体大小
    • 字体粗细
    • 字体样式(斜体)
    • 字体复合属性
  • CSS文本属性
    • 文本颜色
    • 文本对齐
    • 装饰文本
    • 文本缩进
    • 行间距
  • CSS引入方式
    • 行内样式表(内联式)
    • 内部样式表(嵌入式)
    • 外部样式表
  • CSS复合选择器
    • 后代选择器
    • 子选择器
    • 并集选择器
    • 伪类选择器
      • 链接伪类选择器
      • focus伪类选择器
  • CSS元素显示模式
    • 块元素
    • 行内(内联)元素
    • 特殊元素
    • 显示模式转换
  • CSS的背景
    • 背景颜色
    • 背景图片
      • 背景图片平铺
      • 背景图片位置
        • 方位名词
        • 精确单位
        • 混合单位
      • 背景图像固定
    • 复合写法
    • CSS3背景颜色半透明效果
  • CSS三大特性
    • 层叠性
    • 继承性
      • 行高的继承
    • 优先级
      • 优先级需要注意的问题
      • 权重的叠加

CSS简介

层叠样式表 (Cascading Style Sheets，缩写为 CSS），是一种 样式表 语言，用来描述 HTML 或 XML（包括如 SVG、MathML、XHTML 之类的 XML 分支语言）文档的呈现。CSS 描述了在屏幕、纸质、音频等其它媒体上的元素应该如何被渲染的问题。

CSS主要用于HTML页面中的：

  • 文本内容：字体、大小、对齐方式等。
  • 图片的外形：宽高、边框样式、边距等。
  • 版面的布局和外观显示样式。

HTML负责结构呈现，CSS负责样式。

CSS语法规范

CSS规则由两个主要部分构成：选择器和一条或多条声明。




    
    
    
    Document
    


    

        Test CSS.
    

    

        Hello.
  • CSS可以写在中的

    Test CSS.

    Hello.

    注意：

    • 类名单词之间用-分割
    • 一个标签可以同时是多个类，多个类名之间用空格分割，例如class="video-desc report-wrap-module report-scroll-module"
    • 尽量使用纯英文命名类

    使用类选择器画盒子

    id选择器

    用来选择唯一的有特定id的HTML元素，用#表示。

    • 类选择器主要用来选择样式
    • id选择器用于选择页面上的唯一元素，经常搭配JS使用
    
    


    
     Hello

    通配符选择器

    CSS使用*表示选择页面中的所有元素，包括, 等。

    例如清除所有元素标签的内外边距：

    CSS设置字体

    CSS font属性可以用来定义字体、大小、粗细和文本样式(斜体)等。

    字体

    属性font-family定义字体。注意：

    • 各种字体用,隔开
    • 如果字体有空格，需要加引号

    字体大小

    属性font-size定义字体大小。注意：

    • px(像素)是最常用的单位
    • Chrome默认字体是16px，不同浏览器可能默认字体大小不一致，尽量写清字体的大小
    • 声明body的字体会改变整个页面文字的大小

      • 等标题标签除外，需要单独设置

    字体粗细

    属性font-weight定义字体的粗细。font-weight参考

    默认值为normal，不加粗，bold加粗。也可使用100～900的数值，其中400等同于normal,700等同于bold。

    字体样式(斜体)

    属性font-style定义字体是否倾斜，normal为正常，italic为倾斜。

    • 在实际开发中很少使用italic，更经常使用normal用来给标签的文字改为不倾斜。

    字体复合属性

    注意：

    • 必须严格按照顺序写，各个属性之间用空格隔开
    • 可省略一些属性(取默认值)，但必须保留font-size和font-family属性，否则font属性不起作用

    CSS文本属性

    文本颜色

    属性color定义文本的颜色。
    表示方式 属性值
    预定义颜色值 color:red;
    十六进制 color: #ff0000;
    RGB color: rgb(255, 0, 0);或color: rgb(100%, 0%, 0%);

    文本对齐

    属性text-align设置元素内文本的水平对齐方式。默认左对齐left、右对齐right、居中对齐center。

    装饰文本
    属性值 描述
    none 默认，没有装饰线(最常用)
    underline 下划线，标签自带下划线
    overline 上划线(不常用)
    line-through 删除线(不常用)

    文本缩进

    单位可以是像素px，也可以是相对大小em，即当前元素一个文字的大小。

    
    


    
    你好吗
    
    
    你好吗
    
    
    qweqwe

    行间距

    一行文字分为上间距、文本高度、下间距，如果font-size和line-height设置如下，则上间距为5px、文字高度为16px、下间距为5px。

    • 如果font-size和line-height的值相同，则上间距与下间距的值为0
    • 想实现文字垂直居中的效果，可以让行间距和高度的值相等，即height和line-height相等

    CSS引入方式

    行内样式表(内联式)

    • 在sytle属性中写CSS样式
    • 引号中的内容要符合CSS规范，即key: value;的格式
    你好吗你好吗你好吗
    

    qweqwe

    效果如下：

    你好吗你好吗你好吗 qweqwe

    内部样式表(嵌入式)

    这是之前一直在用的方式，将CSS代码单独放到一个