html+css+js 学习笔记之css篇

css基础知识

CSS学习

层叠样式表（Cascading Style Sheets，缩写为 CSS）是一种样式表语言，用来描述 HTML 或 XML（包括如 SVG、MathML 或 XHTML 之类的 XML 分支语言）文档的呈现。CSS 描述了在屏幕、纸质、音频等其他媒体上的元素应该如何被渲染的问题。文件后缀 .css

• css规则: 选择器 + 一条或多条声明
  • 选择器: 需要改变样式的HTML元素
  • 声明: 由一个属性和一个值组成(属性和值用冒号分开)

css引入方式

内联样式(行内样式)

• 直接在标签内设置( style="...;...;" 中间用 ; 分开)

  <p style="color: blue; font-size: 20px;">CSS</p>
  

内部样式(不同页面需要重复写才能生效)

• 在 .html 文件中的 <header></header> 里面添加 <style></style> 来设置样式.

  <!--给p标签设置样式,将这个放在<header>内-->
  
  <style>
      p{
         
          color:blue;
          font-size: 10px;
      }
  </style>
  

外部样式(推荐使用)

• 当样式需要应用于多个页面时,使用外部样式可以用过改变一个文件来改变整个站点的外观,每个页面使用 <link> 标签链接到样式表, 该标签写在文档的头部,即 <header></header> 里.

  <link rel="stylesheet" type="text/css" href="xxx.css">
  

  • rel="stylesheet" 是默认的不许修改
  • href="xxx.css" 引入 .css 文件
  • type="text/css" 指示了被链接的文档是一个外部的样式表

选择器

• 内部和外部样式中不同样式书写方法

全局选择器

• 可以和任何元素匹配,优先级最低,一般做样式初始化

  *{
       
      margin: 0;
  }
  

元素选择器

• HTML文档中使用的各个元素(img|p|div|body|b)
• 标签选择器: 选择页面上所有这类型的标签,设置样式

  img{
       
      width: 20px;
  }
  

类选择器

• 规定用 class="类名" + .类名{} 搭配使用, 针对你想要的所有标签使用

  <p class="title">你好</p>
  
  <!--设置样式-->
  <style>
      .title{
         
          color: yellow;
          font-size: 20px;
      }
  </style>
  

  • 注意:
    • 类名不可以用数字开头
    • 同一个标签可以使用多个类选择器,用空格分开, 例如 class="classone classtwo"
    • 类选择器可被多个标签使用

ID选择器

• 针对某一个特定的标签使用,只能使用一次(css中用 # 来定义)

  <h1 id="title">hello</h1>
  
  <style>
      #title{
         
      border: 3px dashed green;
      }   
  </style>
  

  • ID是唯一的
  • ID不能用数字开头
  • 测试提示:要把<style></style>放在 <header></header> 内运行或者在 .css 中写入然后在 .html 中引入.

合并选择器

• 语法: 选择器1, 选择器2 {...}
• 提取共同样式,减少重复代码

  .header, .footer{
       
      height:200px;
  }
  

选择器的优先级

• 用数字衡量权重, 数字越大权重越高优先级也越高
• 优先级从高到低: 行内样式 > ID选择器 > 类选择器 > 元素选择器

选择器	权重	优先级
元素选择器	1	最低
类选择器	10	较低
ID选择器	100	较高
行内样式	1000	最高

字体属性

• 定义字体/颜色/大小/加粗/文字样式

color:

• 规定文本颜色
• • 表示方式
  • 英文表示: color: red;
  • 十六进制表示: color: #ff0000;
  • 红绿蓝表示: color: rgb(255, 0, 0);
  • 红绿蓝+透明度: color: rgba(255, 0, 0, 0.5);
    • 透明度0~1

color: red;   
color: #ff0000;
color: rgb(255, 0, 0);
color: rgba(255, 0, 0, 0.5);

font-size

• 设置大小,单位px
• 谷歌浏览器接受的最小字体是 12px

font-weight

• 设置文本的粗细
• 取值类型
  • bold: 粗体字体
  • bolder: 更粗字体
  • lighter: 更细字体
  • 100~900: 数值越大字体越粗, 默认400, 粗体字是700

font-weight: bold;   
font-weight: bolder;   
font-weight: lighter;   
font-weight: 300;   

font-style

• 指定文本的字体样式
• 取值类型
  • normal: 默认值
  • italic: 斜体

font-family

• 指定一个元素的字体
  • 常用
    • 宋体: "SimSun"
    • 新宋体："NSimSun"
    • 仿宋："FangSong"
    • 楷体："KaiTi"
    • 微软雅黑: "Microsoft Yahei"
    • 草书: "cursive"
    • 黑体："SimHei"

/* 仅有一个通用字体族名 */
font-family: serif;
font-family: sans-serif;
font-family: monospace;
font-family: cursive;
font-family: fantasy;
font-family: system-ui;
font-family: ui-serif;
font-family: ui-sans-serif;
font-family: ui-monospace;
font-family: ui-rounded;
font-family: emoji;
font-family: math;
font-family: fangsong;

背景属性

background-color

• 设置背景颜色
• 表示方式
  • 英文表示: color: red;
  • 十六进制表示: color: #ff0000;
  • 红绿蓝表示: color: rgb(255, 0, 0);
  • 红绿蓝+透明度: color: rgba(255, 0, 0, 0.5);
    • 透明度0~1

background-image

• 设置背景图片
  • background-image: url("[图片的路径]");

background-position

• 设置背景图片显示位置(起始位置), 默认 0% 0% (指得是图片显示的范围)
• 值的类型:
  • left top|center|bottom: 左上角|左中|左下
  • right top|center|bottom: 右上角|右中|右下
  • center top|center|bottom: 中上|中中|中下
  • x% y%: x%表示水平位置, y%表示垂直位置
    • 左上角是 0% 0%
    • 右下角是 100% 100%
    • 如果只指定一个, 默认另一个是50%
    • 都不指定, 默认为0% 0%

background-repeat

• 设置背景图片如何填充
  • repeat: 默认值
  • repeat-x: 只向水平方向平铺
  • repeat-y: 只向垂直方向平铺
  • no-repeat: 不平铺

background-size

• 设置背景图片大小属性
  • background-size: 值1, 值2;
    • 值的类型:
      • length: 宽度, 高度 (直接设置图片宽高, 如果值设置一个, 第二个值自动为auto)
      • percentage: 宽度, 高度 (计算相对位置区域的百分比, 如果值设置一个,第二个值自动为auto)
  • background-size: cover|contain;
    • 属性类型:
      • cover: 保持纵横比, 将图片缩放至完全覆盖背景区域的最小大小(容器会填满,但可能会导致图片被裁剪)
      • contain: 保持纵横比, 将图片缩放至适合背景定位区域的最大大小(保持图片完整,但容器区域可能不会填满)

文本属性

text-align

• 元素文本的水平对齐方式
  • text-align: center|left|right
  • 默认是 center 居中

text-decoration

• 规定添加到文本的装饰(下划线/上划线/删除线等)
  • text-decoration: underline|overline|line-through
  • underline|overline|line-through : 下划线|上划线|删除线
• 这里是利用 .css 来进行修饰, 直接采用 <del></del> 也可以定义删除字效果, 但是这是两种不同方法.

text-transform

• 控制文本的大小写
• text-transform: captialize|uppercase|lowercase
• captialize|uppercase|lowercase: 开头大写|全部大写|全部小写

text-indent

• 规定文本块中首行文本的缩进
  • text-indent: 30px
  • 正负均可, 如果是负值那就将第一行左缩进.

表格属性

表格边框

• border: 1px solid black;
  • 值:
    • 1px: 线的宽度
    • solid: 实线
    • black: 颜色

折叠边框

• border-collapse: collapse
  • 会把重复的边框折叠为一个

表格文字对齐

• 水平对齐

  td{
       
    text-align: left|center|right;
  }
  

• 垂直对齐

  td{
       
    vertical-align: middle|bottom;
  }
  

表格填充

• 指的是在表格内文字和表格边框之间的空白填充

  td{
       
    padding: 10px;
  }
  

表格颜色

• 可以对 td 设置 backgroun-color 改变背景颜色, 设置 color 改变文本颜色.

关系选择器

后代选择器

• 选择所有被A元素包含的B元素, 中间用空格隔开
  • A B{}
  • 只要是后代中的标签都会生效

    ul li{
           
      color: blue;
    }
    

子代选择器

• 对直接子元素生效

  div>p{
       color: red;}
  

  <!DOCTYPE html>
  <html>
      <head>
          <title>标题</title>
          <meta charset="utf-8"> 
          <style>
              div>p{
         
              color: red;
          }
          </style>
      </head>
      <body>
          <div>
              <p>这是div的直接子元素</p>
              <ul>
                  <il>
                      <p>这不是直接子元素</p>
                  </il>
              </ul>
          </div>
      </body>
  </html>
  

  • 对于上面测试, 只有直接子元素变为红色

相邻兄弟选择器

• 紧跟在E元素后的F元素, 用加号, 选择相邻的第一个兄弟元素
• 只可以向下选择

  div+p{
       color: red;}
  

  <!DOCTYPE html>
  <html>
      <head>
          <title>标题</title>
          <meta charset="utf-8"