4.26笔记

 css引入方式

  01: 行间样式(行内式) (最不推荐)

  02: 内部样式(样式写在html文档中) => 在head标签内写style标签, style标签内写样式.

  03: 外部样式(用独立的css文件写样式) => 通过link标签引入css文件

样式三大系统

  基本的修饰样式.(文本类,背景类,其他)

  盒模型

  弹性盒模型

  定位

    /* 字体颜色 */

      color: red;

      字号大小,px => 像素

      /* 默认字号是16px.最小是12px */

      /* font-size: 50px; */

      /* 字体，默认字体是微软雅黑 */

      font-family: 微软雅黑;

      /* 加粗字体 */

      font-weight: bold;

      /* 文字水平居中 */

      /* text-align: center; */

      /* 文字修饰线 */

      /* 不需要任何修饰线 */

      /* text-decoration: none; */

      /* text-decoration: line-through; */

      /* text-decoration: underline; */

      /* text-decoration: overline; */

      /* 缩进的长度 */

      text-indent: 25px;

      /* 行高 */

      /* line-height: 200px; */

      /* 永远不换行 */

      /* white-space: nowrap; */

      /* 如何可以换行,如何换行 */

      /* word-break: break-all; */

   

    <!-- 长度单位

  01: px(像素)

  02: 百分比 (有些样式不能设)

  03: em 根据当前标签的字号,来确认长度. (相对单位)

  04: rem 根据html标签的字号来确认长度 (用于实现移动端适配)

  05: vh 视口的高 (移动端适配)

  06: vw 视口的宽 (移动端适配)

  -->

  <!-- 视口 => 网页呈现的区域大小 -->

  颜色写法

  01: 预设的单词

  02: rgb => 红绿蓝三原色,颜色取值是0-255

  03: rgba => 带透明通道的rgb色

  04: 16进制颜色 => 0-9,a-f中的6个字符组成的16进制表示. 前面固定有一个# (最常用)

  05: hsl => 色相,饱和度,亮度模式 (色域远比rgb要大)

  06: hsla => 带透明的hsl

      background-image: url(./img/2222.png);

      /* 水平方向可以重复 */

      /* background-repeat: repeat-x; */

      /* 垂直方向可以重复 */

      /* background-repeat: repeat-y; */

      /* 水平方向和垂直方向，都不允许重复 */

      background-repeat: no-repeat;

      /* 设置背景图片的大小， 宽高都是300px */

      /* background-size: 300px 300px; */

      /* 按当前标签的宽高算图片的宽高，按百分比计算 */

      /* background-size: 100% 100%; */

      /* 宽度300px，高度自适应，（等比例缩放） */

      /* background-size: 300px auto; */

      /* 高度300px， 宽度自适应 */

      /* background-size: auto 300px; */

      /* 一定会铺满元素. 图片比例也是对的，图片有可能显示不全 */

      /* background-size: cover; */

      /* 图片比例也是对的，图片一定显示全，不一定铺满元素 */

      /* background-size: contain; */

      /* 设置坐标, 可以移动到任意位置 */

      background-position: -10px -10px;

    * 直接设置图片的中心和div的中心重合 */

      background-position: center;

      * 设置光标样式 */

      cursor: pointer;

      /* cursor: move; */

      /* cursor: copy; */

      /* 整个标签都设置透明度,(包括颜色和内容) */

      /* opacity: .5; */

      /* 把超出元素区域的内容隐藏 */

      /* overflow: hidden; */

      /* 自动出现滚动条 */

      overflow: auto;

      /* 取消轮廓线 */

      outline: none;

      /* 取消默认的点和序号 */

      list-style: none;

      <!-- 块级元素 => 默认占一行的元素 例如: div,h1-h6,p, 所有的列表标签，所有的布局标签 -->

  <!-- 默认宽是父元素的宽,高是内容的高 -->

  <!-- 可以设置宽高 -->

  <!-- 行内元素 => 默认不占一行, 例如:span,a,img,strong,em,所有的表单标签 -->

  <!-- 默认宽高都是内容的宽高 -->

  <!-- 不能设置宽高 -->

  <!-- 行内块元素 => 同时具备行内元素和块级元素的特征 => 不独占一行, 可以设置宽高 -->

   span{

      /* 设span为块级元素 */

      /* display: block; */

    }

    span{

      /* 设span为行内块元素 */

      display: inline-block;

      width: 100px;

      height: 100px;

    }

    span{

      /* 隐藏元素, 不占页面的位置 */

      /* display: none; */

      /* 隐藏元素, 占页面位置 */

      /* visibility: hidden; */

      /* 完全透明,不算隐藏 */

      opacity: 0;

    }

   

    <!-- css => 层叠样式表 -->

  <!-- 如何知道一个标签层叠了多少样式? -->

  <!-- css三大特性 -->

  <!-- 01: 层叠性 => 多个样式表可以同时作用于同一个标签上. -->

  <!-- 02: 继承性 => 祖先元素的某些样式也对所有的后代元素生效-->

  <!-- 可以继承的样式是 => 文本类样式,list-style -->

  <!-- 03: 优先级 -->

 !important > 行内 > id > 类(属性) > 标签 > * > 浏览器样式 > 继承样式

  ！important 后门

  <!-- 先数id选择器的个数 => 再数类选择器个数(属性选择器个数) => 最后数标签选择器的个数 -->

   body会有默认的8px外边距

  <!-- 浏览器会默认给a标签添加字体颜色,光标形状,下划线这些样式 -->

  <a href="#">百度一下</a>

  <!-- ul会有list-style-type这样的默认样式,一级内外边距的默认样式 -->

  <!-- p标签会有默认的外边距样式 -->