第三节课(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 没关系,分别控制声明同类样式

                                                                                                            */

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      

            */                 

            

  

   

  

  

原文地址:https://www.cnblogs.com/yzdwd/p/12079508.html