HTML|基础篇（二）

快来打我* 2022-05-21 05:29 179阅读 0赞

### HTML|基础篇（二） ###

<a>标签基础的扩展  
   <a>超链接标签默认蓝色带下划线样式 设置不带下划线样式  
 //鼠标没有放上去的样式，不带下划线

a:link{
        text-decoration:none;
     }
     a:hover{
        color:red;
     }

通过<a>标签跳到自身页面的某个内容点,引用id跳到  
 <a href="\#content"></a>  
 .......  
 <a id="content"></a>

<a>超链接不仅可以设置文本链接，也可是设置图片链接

<a>超链接跳转窗口的五种方式，  
 设置target属性与值默认值\_self  
 一、在本窗口自身的框架集打开，  target="\_self"  
 二、在新的窗口打开； \_blank  
 三、在父类的框架集中打开 \_parent  
 四、在整个窗口打开 \_top

五、framename 指定框架集打开

发送电子邮件  
      <a href="mailto:邮件地址？subject=邮件主体&body=邮件的主体内容" rel="nofollow"></a>  
      抄送：cc  ，密送： bcc  
      <a href="mailto:邮件地址？cc=抄的电子邮件地址" rel="nofollow"></a>

html样式CSS  
   CSS的简单介绍

CSS ： 指层叠样式表，语法 : 选择器 声明  属性 属性值 分号结束 ，多个属性之间分号分开  
  例:body\{  
     color:red;  
      text-anlign:center;  
  \}  
   CSS可以定义在html文档的头部head内；也可以定义在行内样式，  
      当你需要定义大量的CSS样式时通过前端资源模块的打包工具打包成CSS文件然后link引用,定义在html头部head

插入CSS样式的三种方式：内部样式，行内样式，外部样式

头部定义即内部样式  
 <head>                               
     <style>  
  body\{  
     color:red;  
      text-anlign  
  \}  
     </style>  
  </head>  
    行内定义  
 <body style="color:red; text-align:center;"></body>  
    外部引用样式  
 <link rel="stylesheet" type="text/css" href=".../外部CSS样式的路径/myCss.css">

CSS常用的选择器：  
        id选择器： \#id名\{属性：值;...\}  例： \#div\{color:red; \}   <div id="div">内容.....<div> id名不要以数字开头，数字开头的id在某些浏览器不支持  
 类选择器: .类名\{属性：值;...\}   例： .class\{color:red; \} <div class="class">内容.....<div> 类名也不要以数字开头  
 元素选择器: 元素名\{属性：值;...\} 例： p\{color:red;\}  所有的p段落标签的文本变成红色  
 通配选择器： \*\{属性：值;...\}

组合写法  
 子集选择器: \#div>p\{属性：值;...\}  例: \#div>p\{color:red; \}   <div id="div"><p>内容.....</p><div>  
 同胞选择器：h1+p\{属性：值\}  
 关联选择器：两个以上的选择器组合，优先级等于权重之和  
 群组选择器：相当于属性相同的选择器并列写在一起  
   
 不常见选择器：伪选择器

权重标签： html文档中用来突出关键字或主题的标签，例<strong><b><em><i><h1>--<h6><ins><del><u>等

CSS中权重的计算与比较  
       第一步比较: id class html 选择器的数量  
       第二步： 如果权重一样，后面出现的会覆盖前面的  
       第三步： 看选择器是否选中目标元素，如果没有选中则权重为0  
       第四步：如果都没有选择目标元素，则谁近就听谁

![70][]

[70]: /images/20220521/d366fe382fed4681985e67bd75e858fc.png