CSS基础学习笔记

CSS

导入方式

• head 里面使用style标签

• 引入CSS文件

  • 链接式 link标签
  • 导入式 @import（CSS2.1特有）

• 内部样式 使用style属性

• 优先级：就近原则

  <style type="text/css">
      h1{
          color: red;
      }
  </style>
  <link rel="stylesheet" type="text/css" href="css/style.css"/>
  <style type="text/css">
      @import url("css/style.css");
  </style>
  <h1 style="color: red;">我是标题</h1>
  

选择器

• 基本选择器

  • 标签选择器：会选择到页面上所有这个标签的元素
  • 类选择器：可以同一个标签归类
  • id选择器 id必须全局唯一
  • 优先级：id选择器>类选择器>标签选择器

  <style type="text/css">
      h1{
          color: red;
      }
      .h1{
          rcolor: green;
      }
      #h1{
          color: aqua;
      }
  </style>
  
  <h1>我是标题</h1>
  <h1 class="h1">我是标题</h1>
  <h1 id="h1">我是标题</h1>
  

• 层次选择器

  • body p{} 后代选择器：全局所有子标签
  • body>p{} 子选择器：只有一代
  • .p2 + p{} 相邻兄弟选择器：只有一个，相邻向下
  • .p2 ~ p{} 通用选择器:当前标签向下所有兄弟元素

  <style type="text/css">
  	body p{
      	background: red;
      }
  </style>
  
  			
  <p>1</p>
  <p class="p2">2</p>
  <p>3</p>
  <p>3</p>
  <ul>
  	<li><p>4</p></li>
  	<li><p>5</p></li>
  	<li><p>6</p></li>
  </ul>
  

• 结构伪类选择器

  • ul li:first-child 选中ul第一个li
  • ul li:last-child 选中ul最后一个li
  • p:nth-child(n) 选择当前p的父元素，选中父元素的第n个子元素，并且是p元素才生效，顺序
  • p:nth-of-type（n）选择当前p的父元素，选中父元素的第n个p元素

  <style>
      ul li:first-child{
          background: red;
      }
  </style>
  

• 属性选择器

  • 通配符 *包含，^开头，$结尾
  • a[id]{} 有id属性的a标签
  • a[id=first]{} id为first的a标签
  • a[class*=links]{} class带有links的a标签
  • a[href^=http] href以http开头的a标签
  • a[href$=pdf]{} href以pdf结尾的a标签

  <style>
      a[id]{
          background: red;
      }
  </style>
  

常用样式

• 文本

  • font-family:字体
  • font-size:字体大小
  • font-weight:字体粗细
  • color:字体颜色
    • RGB
    • RGBA A:0~1 透明度，越小越透明
  • line-height 行高，和div高度一样时可以上下居中
  • text-decoration 划线
    • overline 上划线
    • line-through 中划线
    • underline 下划线
    • none 无，可以取消a标签的默认下划线
  • vertical-align: middle; 图片文本水平对齐
  • text-indent:20px; 首行文本的缩进，允许使用负值。如果使用负值，那么首行会被缩进到左边。
  • text-shadow 文本阴影，属性：阴影颜色，水平偏移，锤子偏移，阴影半径

• 超链接伪类

  • a:link{} 未访问的链接
  • a:visited{} 已访问的链接
  • a:hover{} 鼠标悬停在超链接上
  • a:active{} 点击未释放的链接

• 列表

  • list-style
    • none 去掉原点
    • circle 空心圆
    • decimal 有序数字
    • square 正方形
    • url() 图片

• 盒子模型

  • margin 外边距 属性：上，右，下，左

  • padding 内边距 属性：上，右，下，左

  • border 边框，属性：粗细，样式（solid实线），颜色

    • border-radius 属性：左上，右上，右下，左下，等于宽度和高度则是圆

  • background-image: linear-gradient(115deg,#008000 0%,#6248FF 50%,#FF0000 100%); 背景颜色渐变轴为115度，三种颜色渐变，高度分别为0% 50% 100%

  • background-repeat 背景平铺样式

    • repeat 默认。背景图像将在垂直方向和水平方向重复。
    • repeat-x 背景图像将在水平方向重复。
    • repeat-y 背景图像将在垂直方向重复。
    • no-repeat 背景图像将仅显示一次。
    • inherit 规定应该从父元素继承 background-repeat 属性的设置。

  • 块级元素：独占一行，如h1~h6,p div ,列表

  • 行内元素：不独占一行，span,a,img,strong,button...

    • display属性可修改元素类型
      • block 块元素
      • inline 行内元素
      • inline-block 是块元素，但是可以内联，在一行
      • none 隐藏

  • float 浮动，常用来实现行内元素排列

    • left 左浮动

    • right 右浮动

    • clear 清除浮动效果

      • left 左侧不允许有浮动元素
      • right 右侧不允许有浮动元素
      • both 两侧不允许有浮动元素

    • overflow，下拉场景避免使用

      • hidden 溢出隐藏
      • scroll 添加滚动态

    • 固定浮动时推荐使用after伪类

  • 定位

    • position 相对位置
      • relative 相对于自己原来的位置，进行指定偏移，如top,right,bottom,left，并不影响原来位置
      • absolute 绝对定位，相对于父级元素或游览器
      • fixed 固定位置，一般用于广告位

  • 图层

    • z-index 最小为0，越大越在前面
    • opacity 0~1，透明度，越小越透明