H5C3-day03

最新推荐文章于 2024-07-16 17:18:30 发布

迷失555

最新推荐文章于 2024-07-16 17:18:30 发布

阅读量541

点赞数 17

文章标签：前端 html5

本文链接：https://blog.csdn.net/qq_62012576/article/details/136885422

版权

H5新增的表单类型

<form action="https://www.baidu.com" method="get">
      <!-- 1、邮箱 -->
      <div>
        <label for="">邮箱：</label>
        <input type="email" required />
      </div>
      <!-- 2、网址 -->
      <div>
        <label for="">网址：</label>
        <input type="url" />
      </div>
      <!-- 3、数字 -->
      <div>
        <label for="">数字：</label>
        <input type="number" />
      </div>
      <!-- 4、搜索框 -->
      <div>
        <label for="">搜索：</label>
        <input type="search" />
      </div>
      <!-- 5、范围 -->
      <div>
        <label for="">范围：</label>
        <input type="range" />
      </div>
      <!-- 6、时间 -->
      <div>
        <label for="">时间：</label>
        <input type="time" />
      </div>
      <!-- 7、日期 -->
      <div>
        <label for="">日期：</label>
        <input type="date" />
      </div>
      <input type="submit" value="我是提交按钮" />
    </form>

CSS初始与样式表

一、为什么要使用CSS？

      1、为了美化网页
      2、标签的属性不能满足所有样式的需求
      3、标签的属性使页面结构变得臃肿
      4、为了实现结构与样式的相分离

二、什么是CSS Cascading Style Sheets 层叠样式表、级联样式表、网页的美颜相机

三、如何去使用CSS

      1、行内样式表（内联样式表）<开始标签 style="CSS的属性名A:CSS的属性值A;CSS的属性名B:CSS的属性值B;">
          特点：
              a:只能作用于单个的标签   b:没有实现结构与样式的相分离
      2、内部样式表
          <style>
            选择器 {
              CSS的属性名A:CSS的属性值A;
              CSS的属性名B:CSS的属性值B;
              ……
            }
          </style>
          特点：
              a:只能作用域选择器相同的标签 b：部分实现了结构与样式的相分离
      3、外部样式
          <link rel="stylesheet" href="">
          rel:链接文件的类型 href:地址
          特点：
              a：作用于整个的站点    b：完全实现了结构与样式的相分离

<head>
<style>
     p {
       color: red;
       font-size: 50px;
     }
     aside {
       color: blue;
     }
   </style>
   <link rel="stylesheet" href="./style.css" />
 </head>
 <body>
   <header>
     <h1 style="color: red">我是头部标签的标题一</h1>
     <h1>我是头部标签二</h1>
     <h1>我是头部标签二</h1>
     <h1>我是头部标签二</h1>
     <h2 style="color: blue">我是头部标签二</h2>
   </header>
   <section>
     <p >我是段落标签</p>
     <aside>我是侧边栏</aside>
   </section>
   <p>我是垃圾铁柱</p>
   <footer>
     <article>我是文章标签1</article>
     <article>我是文章标签2</article>
   </footer>
 </body>

字体样式

CSS的属性样式:字体属性、外观属性、背景属性、尺寸属性、盒子模型、浮动、定位、过渡、动画

一、字体大小

      1、普通的标签默认字体大小16px(像素)
      2、font-size
      3、一般用偶数，像素不低于12px

二、字体家族

      1、默认字体家族是宋体
      2、font-family
      3、属性值可以是汉字、英文、Unicode编码

三、字重属性

      1、默认字重是400=normal
      2、font-weight
      3、属性值可以是整百值、英文。   bold=700=bolder

四、字体倾斜

      1、默认是normal
      2、font-style
      3、属性值是italic、oblique

五、字体综合设置：

      font:倾斜 加粗 大小 家族

<head>
<style>
    p {
      font-size: 20px;
      /* font-family: '楷体'; */
      /* font-family: Microsoft YaHei; */
      font-family: \9ED1\4F53;
      /* font-weight: 900; */
      /* font-weight: bold; */
      /* font-weight: bolder; */
      font-weight: normal;
      /* font-style: normal; */
      /* font-style: italic; */
      font-style: oblique;
    }
    span {
      /* font-size: 30px; */
      font-size: 8px;
    }
    aside {
      font: italic bolder 40px '黑体';
    }
  </style>
</head>
<body>
  <p>
    字体属性、外观属性、背景属性、尺寸属性、盒子模型、浮动、定位、过渡、动画
  </p>
  <span>我是span</span>
  没有添加标签
  <b>我是加粗的标签</b>
  <aside>我是侧边栏标签</aside>
</body>

基础选择器

一、选择器：通过特定的符号选择指定的元素

二、CSS2选择器分类：

   基础选择器：通配符选择器、标签选择器、类名选择器、多类名选择器、ID选择器
   复合选择器：
   伪类选择器：

三、类名/ID的命名规范：

    1、见名知意
    2、一般是英文、或者是英文+数字、或者是英文_数字
    3、类名可以重复、ID不能重复

<head>
  <style>
    * {
      font-size: 40px;
    }
    aside {
      font-weight: bold;
    }
    /* .类名 */
    .list_2 {
      font-weight: normal;
      font-family: '楷体';
    }
    .bot {
      font-style: italic;
    }
    /* #ID名 */
    #navigitor {
      font-weight: bolder;
      font-style: oblique;
    }
  </style>
</head>
<body>
  <header>我是头部区域标签</header>
  <section>
    <nav id="navigitor">我是导航标签</nav>
    <aside>我是侧边栏</aside>
  </section>
  <footer class="list_2 bot">我是底部区域标签</footer>
  <aside class="list_2">我是第二个侧边栏</aside>
</body>

外观属性

一、文本颜色 color

    英文、rgb 0-255、十六进制 0-9 a-f  #rrggbb

二、首行缩进 text-indent

em

三、文字间距 letter-spacing

px

四、文本描述 text-decoration

    underline:下划线  overline:上划线  line-through:删除线

五、文本水平位置 text-align 文本内容相对于标签的宽度水平位置

    left:居左   center：居中   right:居右

六、文本垂直位置 line-height 文本内容相对于标签的高度垂直位置

    属性值小于高度值靠上，等于高度值居中，大于高度值靠下

<head>
<style>
    h1 {
      /* color: red; */
      /* color: rgb(255, 255, 0); */
      color: #000000;
    }
    .pro-1 {
      text-indent: 2em;
    }
    .pro-2 {
      letter-spacing: 10px;
    }
    #link {
      font-size: 40px;
      color: #ff3456;
      /* text-decoration: underline; */
      /* text-decoration: overline; */
      text-decoration: line-through;
    }
    aside {
      font-size: 40px;
      text-align: right;
      /* 宽高属性  width/height */
      width: 800px;
      height: 150px;
      line-height: 200px;
    }
  </style>
</head>
<body>
  <h1>我是标题一</h1>
  <p class="pro-1">
    一般情况下，行距比字号大7.8像素左右就可以了一般情况下，行距比字号大7.8像素左右就可以了一般情况下，行距比字号大7.8像素左右就可以了一般情况下，行距比字号大7.8像素左右就可以了一般情况下，行距比字号大7.8像素左右就可以了一般情况下，行距比字号大7.8像素左右就可以了一般情况下，行距比字号大7.8像素左右就可以了
  </p>
  <p class="pro-2">
    一般情况下，行距比字号大7.8像素左右就可以了一般情况下，行距比字号大7.8像素左右就可以了一般情况下，行距比字号大7.8像素左右就可以了一般情况下，行距比字号大7.8像素左右就可以了一般情况下，行距比字号大7.8像素左右就可以了一般情况下，行距比字号大7.8像素左右就可以了一般情况下，行距比字号大7.8像素左右就可以了
  </p>
  <nav id="link">我是导航标签</nav>
  <aside>我是侧边栏</aside>
</body>