前端之CSS介绍(层叠样式表)

web 文章 2022-07-20 10:03 366 0 全屏看文

AI助手支持GPT4.0

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. 颜色标识:rgbgba
    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标签布局

 

-EOF-

AI助手支持GPT4.0