前端之CSS介绍（层叠样式表）

发布时间：2022-08-10 文章分类：编程知识 投稿人：李佳 字号： 默认 | 大 | 超大 打印

Cascading Style Sheets（CSS）

1.CSS就是在HTML文档中，如何显示HTML标签，元素，以及他们的样式布局，前端页面的展示形式均由CSS来布局.

2.如何使用CSS

  1. 内部样式表
    1. head标签里<style></style>
    2. 内联样式，在HTML标签里面直接写style
  2. 外部样式表
    1. 内容
    2. 表现---可以直接引入写好的CSS样式文件（.css）,提高效率
    3. 存储--存储在CSS文件中
  3. 基本语法
    1. 通过xxx{属性：值}，等同于xxx{key:value}
  4. 选择器
    1. 基本选择器
      1. 元素选择器（名称选择器）---标签的名称:h1{key:value}
      2. 属性选择器---id=“属性名称”，一般由#号后面跟属性名称，
      3. 类选择器---class选择器，class关键字，用来描述一类样式的元素---.类名{key:value}
    2. 高级选择器
      1. 分组选择器（组合选择器）---小组1,小组2,小组3...
      2. 通用选择器---*{margin:0;padding:0}
      3. 后代选择器---选择器1 选择器2 选择器3...比如：h1 p{}
      4. 兄弟选择器
      5. 子元素选择器---比如:ul>li{}
      6. 伪类选择器---a:hover{},a:active{}.a:visited{}
  5. CSS注释---/**/
  6. 常见的属性
    1. 宽高
      1. width
      2. hegiht
    2. 颜色
      1. color--值
        1. 颜色名称：red
        2. 颜色进制：#000000
        3. 颜色标识：rgb/rgba
    3. 背景
      1. background-color
      2. background-image
      3. background-repeat
      4. background-postion
    4. 字体
      1. font-size---修改字体大小
      2. font-family---使用哪种字体
      3. font-style:normal
      4. font-weghit:normal bold
    5. 文本
      1. text-align：center,left,right
    6. 链接
      1. a标签：link,active,hover,visited
    7. 列表
      1. 有序列表
        1. list-style:图片，原点，小三角，矩形，星号...
      2. 无序列表
    8. 表格
      1. table---表格
        1. tr
        2. th
          1. background-color
        3. td
          1. text-align
          2. vertical-align
      2. table-collapse
    9. 轮廓
      1. outline
        1. outline-color
        2. outline-style
  7. 盒子模型
    1. 盒模型
    2. 边框
    3. 外边框
    4. 内边框
  8. 定位和浮动
    1. float：涉及元素的排列方式---left,right
    2. position
      1. fixed(固定)
      2. absolute(绝对定位)
      3. relative(相对定位)
  9. DIV标签布局
标签 , , ,