CSS基础语法学习——样式表，标签显示模式，复合选择器，背景

一、样式表

  1. 内部样式表

    • 内部样式表将CSS代码写在HTML头部标签中，并且用style标签定义
      1
      2
      3
      4
      5
      <head>
          <style type="text/css">
              选择器：{  属性名：属性值 }
          </style>
      </head>

  2. 行内样式表（内联样式表）

    • 是通过标签的style属性来设置元素的样式
      1
      <标签名 style="属性名:属性值;属性名2:属性值2"> </标签名>

  3. 外部样式表（外链式）

    • 从外部引入CSS文件通过link标签将外部样式文件链接到HTML文件中,link标签为但标签
    • rel：表示当前文件与被链接文档之间的关系。指定为”stylesheet“,表示被链接的文档为一个样式表
      1
      2
      3
      <head>
          <link href="css文件路径/外部链接网址" type="text/css"  rel=""stylesheet />
      </head>

  4. 各种样式表之间的比较

    样式表 优点 缺点 使用情况 控制范围
    行内样式表 书写方便，权重高 没有实现样式和结构相分离 较少 控制一个标签（少）
    内联样式表 部分结构和样式分离 没有彻底分离 较多 控制一个页面（中）
    外部样式表 完全实现样式与结构分离 需要引入 最多，比较推荐使用 控制整个站点（多）

二、标签显示模式

  1. 块级元素（block-level）
    • 每个块元素通常会独自占用一整行，可以对其设置宽度，高度，对齐等属性，常用于网页布局和网页结构搭建，
    • <h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等
    • 特点：
      • 总是从新行开始
      • 宽度、高度、内边距和外边距都是可以控制的
      • 宽度默认为容器的100%
      • 可以容纳内联元素和其他元素
  2. 行内元素（inline-level）
    • 行内元素(内联元素）不占有独立的区域，仅仅靠自身的字体大小和图像尺寸来支撑结构，一般不可以设置宽度、高度、对齐等属性，常用于控制页面中文本的样式。
    • <a> <strong> <b> <em> <i> <del> <span> <s> <ins> <u>
    • 特点：
      • 和相邻行内元素在一行
      • 高、宽无效，但水平方向的padding和margin可以设置，垂直方向的无效
      • 默认宽度就是它本身内容的宽度
      • 行内元素只能容纳文本或则其他行内元素
  3. 行内块标签（inline-level）
    • 在行内元素中有几个特殊的标签，可以对它们设置宽高和对齐属性
    • <input/> <img/> <td>
    • 特点：
      • 和相邻行内元素在一行上，但是之间会有空白间隙
      • 默认宽度就是它本省内容发宽度
      • 高度、行高、外边距以及内边距都可以控制
  4. 标签显示模式转换
    • 块转行内：display:inline
    • 行内转块：display:block
    • 块、行内元素转换为行内块： display:inline-block

三、CSS复合选择器

  1. 复合选择器：复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的,目的是为了可以选择更准确更精细的目标元素标签。
  2. 交集选择器
    • 是并且的意思，即……又…..关系p.class
  3. 并集选择器
    • 减少重读工作，有需要相同样式的标签：div,p,.btn
  4. 后代选择器
    • 后代选择器又称为包选择器。用来选择元素或元素组的后代。
    • 把外层标签写在内层标签前面，中间以空格隔开。
    • div p 选择div下面的p标签
  5. 子元素选择器
    • 只能选择作为某个元素子元素的元素，其写法为父标签在前。子标签在后，中间以>号隔开
  6. 属性选择器
    • 属性选择由中括号来表示，如a[title]表示选中a标签中带有title属性的标签
    选择器 示例 含义
    E[attr]**** a[title] 存在attr属性即可
    E[attr=value]*** input[type=text] 存在attr属性，且attr属性值等于value
    E[attr*=value]*** div[class*=jd] 属性值中包含value字符，并且在任意位置
    E[attr^=value]*** div[class^=at] 属性值中包含value字符，并且在开始位置
    E[attr$=value]*** div[class$=24] 属性值中包含value字符并且在结束位置
  7. 伪元素选择器
    • E::first-letter 文本的第一个单词或则第一个字
    • E::first_line 文本第一行
    • E:：selection 可该表选中文本的样式
    • E::before 在E元素内部的开始位置创建一个元素，该元素为行内元素。且必须结合content属性使用
    • E::after 在E元素内部的结束位置创建一个元素
      1
      2
      3
      4
      5
      6
          	.bottom::before{
      	content: "加在前面";
      }
      .bottom::after{
      	content: "加在结尾";
      }

四、CSS背景（background）

  1. 背景图片位置（image）

    • background-reapet 图片是否平铺
    • background-position 可以设置图片的位置left top center right，也可为数字，百分比，两个数字前一个表示X,后一个表示Y

  2. 背景附着：设置或检索背景图片随对象内容固定还是滚动的

    • background-attachment:scroll||fixed
    • scroll:背景图像随对象内容滚动
    • fixed:背景图像固定

  3. 背景简写(类似font)

    • background: 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置
      1
      2
      3
          div{
      	background: #008000 url(./img/time.png) no-repeat fixed center center;
      }

  4. 背景透明（CSS3）

    • background : rgba(0,0,0,0.5)

  5. 背景缩放（CSS3）background-size

    • background-size用于设置背景图片的尺寸，和设置img的大小一样。尽量只改一个值，防止缩放失真。
    • 可以设置长度单位px或者百分比
    • 设置cover时自动调整缩放比例，保证图片始终填满背景区域，如有溢出部分则会被隐藏。
    • 设置为contain会自动调整缩放比例，保证图片始终完整的显示在背景区域。

  6. 多背景（CSS3）

    • 以逗号隔开可设置多张背景，可用于自适应布局
    • 为了避免背景色将图像覆盖，通常设置背景色在最后一组
    • 多重阴影也可以设置：
      1
      text-shadow: -2px -2px 3px white,1px 1px 1px #091921