• H5/


    • 1、value:
    • 2、selected="selected"
    • 设置selected="selected"属性,则该选项就被默认选中。
    • 下拉列表也可以进行多选操作,在<select>标签中设置multiple="multiple"属性,就可以实现多选功能,在 widows 操作系统下,进行多选时按下Ctrl键同时进行单击(在 Mac下使用Command +单击),
    • 语法

      <input   type="submit"   value="提交">
      
      

      type:只有当type值设置为submit时,按钮才有提交作用

      value按钮上显示的文字
    • 语法

      <input type="reset" value="重置">

      type:只有当type值设置为reset时,按钮才有重置作用

      value按钮上显示的文字

    • 语法:

      <label for="控件id名称">
      
      

      注意:标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同。

     
     
     
    • 外部式css样式(也可称为外联式)就是把css代码写一个单独的外部文件中,这个css样式文件以“.css”为扩展名,在<head>内(不是在<style>标签内)使用<link>标签将css样式文件链接到HTML文件内,如下面代码:

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

      注意:

      1、css样式文件名称以有意义的英文字母命名,如 main.css。

      2、rel="stylesheet" type="text/css" 是固定写法不可修改。

      3、<link>标签位置一般写在<head>标签之内。
    • <!DOCTYPE HTML>
    • <html>
    • <head>
    • <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    • <title>嵌入式css样式</title>
    • <link href="style.css" rel="stylesheet" type="text/css" />
    • </head>
    • <body>  
    •   <p>慕课网,<span>超酷的互联网</span>、IT技术免费学习平台,创新的网络一站式学习、实践体验;<span>服务及时贴心</span>,内容专业、<span>有趣易学</span>。专注服务互联网工程师快速成为技术高手!
    • </p>
    • </body>
    • </html> 
    • 每一条css样式声明(定义)由两部分组成,形式如下:

      选择器{
          样式;
      }
      
      
      在{}之前的部分就是“选择器”,“选择器”指明了{}中的“样式”的作用对象,也就是“样式”作用于网页中的哪些元素。
    • 在很多方面,ID选择器都类似于类选择符,但也有一些重要的区别:

      1、为标签设置id="ID名称",而不是class="类名称"。

      2、ID选择符的前面是井号(#)号,而不是英文圆点(.)

      右侧代码编辑器中就是一个ID选择符的完整实例。

       

      任务

      我也来试试,为第二段文字中的“公开课”三个文字使用ID选择器的方式设置为绿色

      1.在右边编辑器的第16行,输入:

      <span id="setGreen">公开课</span>
      
      

      2.在右边编辑器的第10-12行,输入:

      #setGreen{
         color:green;
      }
    • # 是id  .是class
    • 还有一个比较有用的选择器子选择器,即大于符号(>),用于选择指定标签元素的第一代子元素。如右侧代码编辑器中的代码:

      .food>li{border:1px solid red;}
      
      
      这行代码会使class名为food下的子元素li(水果、蔬菜)加入红色实线边框。
    • 通用选择器

      通用选择器是功能最强大的选择器,它使用一个(*)号指定,它的作用是匹配html中所有标签元素,如下使用下面代码使用html中任意标签元素字体颜色全部设置为红色:

      * {color:red;}
      
      

      伪类选择符

      更有趣的是伪类选择符,为什么叫做伪类选择符,它允许给html不存在的标签(标签的某种状态)设置样式,比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色:

      a:hover{color:red;}
      
      

      上面一行代码就是为 a 标签鼠标滑过的状态设置字体颜色变红。这样就会使第一段文字内容中的“胆小如鼠”文字加入鼠标滑过字体颜色变为红色特效。

      关于伪选择符:

          关于伪类选择符,到目前为止,可以兼容所有浏鉴器的“伪类选择符”就是 a 标签上使用 :hover 了(其实伪类选择符还有很多,尤其是 css3 中,但是因为不能兼容所有浏览器,本教程只是讲了这一种最常用的)。其实 :hover 可以放在任意的标签上,比如说 p:hover,但是它们的兼容性也是很不好的,所以现在比较常用的还是 a:hover 的组合。

      分组选择符

      当你想为html中多个标签元素设置同一个样式时,可以使用分组选择符(,),如下代码为右侧代码编辑器中的h1、span标签同时设置字体颜色为红色:

      h1,span{color:red;}
      
      

      它相当于下面两行代码:

      h1{color:red;}
      span{color:red;}
      
      
       
              
     
     
  • 相关阅读:
    利用LibreOffice进行WORD转PDF
    SpringBoot实践
    Solr学习笔记(一)
    HashMap原理(转)
    PDF.js展示本地文件
    设计模式之代理模式
    (一)DUBBO基本学习
    如何架构一个框架
    冒泡排序
    js 函数传数组参数
  • 原文地址:https://www.cnblogs.com/xsyl/p/5868030.html
Copyright © 2020-2023  润新知