CSS

目录

CSS

前端三要素

  • HTML：结构
  • CSS：表现
  • JavaScript：交互

基础

  • 如果和HTML写在一起，<style>写在<head>里

  • 基本语法：

    • 选择器{

      ​ 声明1；

      ​ 声明2；

      }

  • 每个声明最好使用分号结尾

  • HTML和CSS分离

    • <link rel="stylesheet" href="css/style.css">

  • 三种样式：行内样式、内部样式、外部样式

  • 外部导入方式：link标签、style标签中使用@import url("")

选择器

  • 选择页面上的某一个或某一类元素

基本选择器

  • 标签选择器：标签名
  • 类选择器：.class
  • id选择器：#id

优先级

  • id选择器>class选择器>标签选择器

层次选择器

  • 后代选择器

    • body p{}

  • 子选择器

    • body>p{}

  • 相邻兄弟选择器：只选择下面一个

    • .class + p{}

  • 通用兄弟选择器：选择下面所有

    • .class~p{}

结构伪类选择器

  • 基本选择器+冒号
  • 常用：
    • first-child
    • last-child
    • nth-child(n)：当前元素的父元素的第n个子元素，并且是当前元素，若不是则无视
    • nth-of-type(n)：当前元素的父元素的第n个该类型子元素

属性选择器

  • []里写属性名，属性名=属性值(正则)
    • =绝对等于，*=包含，^=以这个开头，$=以这个结尾

美化网页元素

span标签

  • 重点突出的字用span标签套起来

字体样式

  • font-family、font-size、font-weight、color

文本样式

  • 颜色：color，单词、RGB、RGBA(透明度)
  • 对齐方式：text-align
  • 首行缩进：text-indent，2em
  • 行高：line-height
  • 装饰：text-decoration：underline、line-through...
  • 文本图片水平对齐：vertical-align
  • 文本阴影：text-shadow

超链接伪类

  • 鼠标悬浮：a:hover
  • 鼠标按住未释放：a:active
  • 未点击：a:link
  • 已点击：a:visited

背景

  • 背景颜色：background-color

  • 背景图片：background-image：url("")

    • background-repeat：repeat-x、repeat-y、no-repeat

  • 渐变：linear-gradient

盒子模型

  • margin：外边距
    • top、bottom、left、right
    • auto居中
  • border：边框
    • 粗细、样式、颜色
  • padding：内边距
    • top、bottom、left、right

圆角边框

  • border-radius
  • 坐上、右上、右下、左下

阴影

  • box-shadow

浮动

  • div块元素、span行内元素
  • display：block块元素 、inline行内元素、inline-block有行内特性的块元素 、none消失
  • float：左右浮动

父级边框塌陷

  • clear：某侧不允许有浮动元素
  1. 增加父级元素高度
  2. 增加一个空的div，clear:both，内外边框为0
  3. 在父级元素增加overflow：滚动条，hidden
  4. 在父类添加一个伪类after，自动添加display:block; content:''; clear:both

定位

  • 相对定位：position:relative
    • 相对于自己原来的位置，上下左右进行偏移
    • 在标准文档流中，原来的位置会被保留
  • 绝对定位：position:absolute
    • 没有父级元素定位的前提下，相对于浏览器定位
    • 假设父级元素存在定位(相对定位)，则基于父级元素进行偏移
    • 在父级元素范围内移动
    • 不在标准文档流中，原来的位置不会被保留
  • 固定定位：position:fixed
    • 浏览器滚动，位置不变
  • z-index
    • z轴层级，数字越大越上面
    • opacity调整透明度
posted @ 2021-01-20 23:10  一天到晚睡觉的鱼  阅读(58)  评论(0)    收藏  举报