zoukankan      html  css  js  c++  java
  • 第三节课(a标签以及锚点 css 选择器)

    a:超链接标签 <a href="" target="" title="">内容</a>  href如果不写,点击内容只会刷新页面,

      1. href 写跳转地址,如果跳转网站,前面写协议,<a href="https://www.baidu.com"></a>,也可以放图片地址,点击之后页面就是该图片。

      没有点击超链接时,a 标签内字体颜色为蓝色,点击完之后为字体变成紫色。

           2.target写跳转到的网页具体位置

         默认值为:_self   跳转到当前页面,跳转的网页覆盖原先网页

          其他值:_blank 跳转到新窗口,跳转的网页在新窗口打开,原先网页不受影响

    在head 里有个单标签 <base target=""> 统筹规划网页跳转的,也是_self  _blank 两种值,

      3.锚点(a标签与其它标签:# 与 id          a标签 与 a 标签:#与name,跳转到顶部按钮),

                                        1.<a href="#eminem">my idol</a>

                 <p id="eminem">时光匆匆 不由我</p>

                                        2.<a href="#eminem"></a>    

               <a href=""   name="eminem"></a>

         4.title 起提示作用,鼠标放上去会显示titl里的信息内容。

    <p style="color:blue"></p>  行内样式会使代码显得臃肿,不利于维护,可以使用内部样式,开发中不会使用内部样式而是外部样式,外部样式是在外部建个css文件然后供引用,引用方式是在head里使用link 标签(单)<link rel="stylesheet" href="">,外部css 文件不用写style,且注意外部css 文件头部 写:@charset "utf-8";注意尾部写分号,防止乱码内部样式存放在head 标签里的style标签里面,样式由  选择器{属性:属性值;} 决定

    写在标签里 叫标签属性,写在{}中是css属性,属性值结束用;

    css 注释方式 /*123*/,

    css 为什么叫层叠样式表,因为如果声明同一种标签元素内部同类样式,后面的会覆盖前面的,且还存在优先级问题,优先级高的覆盖优先级低的。

    <style>

    p{color:red;} /*p 是选择器*/

    p{color:blue} /*后面覆盖前面的*/

    </style>

    <head>

      <style>

      /*

        p{

          color:red;

          background-color:black;

        }

         */

      <link rel="stylesheet" href="">  //rel 是文件类型

      </style>      

    </head>

    选择器:(命名必须   “见名知意”,只能用合理的英文,特殊字符也不行,要以英文小写开头,可以使用数字,box-1,不要使用下划线_,,还有驼峰命名,boxStart,第二个单词首字母大写,js常用驼峰命名,不要使用广告词汇 如 ad ,以防浏览器当垃圾过滤)

    使用选择器规范:网页部分大盒子用id ,内部的小盒子用class

       1.标签选择器 eg: p{}

       2.id 选择器,id 唯一,不能声明相同的id,  用#

        #abc{

                         color:red;

                         }

        <p id="box"></p>

         3.类选择器,class 名字可重复,且可以有多个类名,会对相同类名的标签都产生作用,用.

       .box{

          color:red;

    }

      <p class="box  box1"></p>

      <p class="box"></p>

            4. *   会选中全部标签

        选择器优先级:选择范围越小,优先级越高。id>class>tagname. 如果控制相同标签的相同属性,优先级高的覆盖优先级低的。行内样式优先级>高于内部样式=外部样式。

        组合选择器:p span{}     后代选择器   指的是p的后代span,p 与span 间可以有其他标签

           p>span{}    子元素选择器  指的是p 的儿子 span,p 与span 间没其他标签

           p + span     毗邻元素选择器,选中p 的兄弟 span,,选中p元素后面紧挨着的一个兄弟标签span,只会选中1

                                                                                                              p + p{} /*会选中到 2 4 5*/(选中的p 上面必须要有一个p)

                /*1                                                          /*2

                 <p></p>                                                     <p>,</p>

                 <span></span>/*1*/                                   <p>2</p>

                <span></span>/*2*/                                    <a href="">

                                                                                                                 <p>3</p>

                                                                                                                 <p>4</p>

                                                                                                                 <p>5</p>

                        p ~ span{} 兄弟元素选择器  会选中所有p 的兄弟,1中会选中 2 与 3

           p,span{},组合选择器,p 与 span 没关系,分别控制声明同类样式

                                                                                                                */

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          

                */                 

                

      

       

      

      

  • 相关阅读:
    Java 类和对象12
    Java类和对象11
    java 类和对象10
    Java类和对象9
    Java类和对象8
    Java 类和对象7
    包装与方法
    JAVA链表
    泛型
    多态 接口
  • 原文地址:https://www.cnblogs.com/yzdwd/p/12079508.html
Copyright © 2011-2022 走看看