css中a标签锚点、内部样式引入详解，css语法简单介绍

最新推荐文章于 2024-04-22 22:01:16 发布

给予546

最新推荐文章于 2024-04-22 22:01:16 发布

阅读量2.3k

点赞数

文章标签： html css

本文链接：https://blog.csdn.net/weixin_69474694/article/details/125945137

版权

1.a标签锚点

 利用a标签的锚点来跳转到指定锚点处
    href:写锚点名称

    1.定义锚点（不用a标签来定义锚点，用id属性来定义锚点名称 id="box1"  box1就是锚点名称）
    2.引用锚点（用a标签的href属性来引用锚点，#锚点名称 href="#box1" #box1

案例：

<!-- 2.引用锚点 -->

  <a href="#box1">零食区</a>
  <a href="#box2"> 服装区</a>
  <a href="#box3"> 鞋类区</a>


  <!-- 1、定义锚点 -->

  <div id="box1" style="width: 600px;height: 600px; background-color: tomato;">
    零食区
    薯片
    鸡爪
    辣条
    可乐
    泡面
    雪糕
    奥利给
    果冻
    海苔
    鸡爪
    锅巴
  </div>



  <div id="box2" style="width: 600px;height: 600px; background-color: green;">
    服装区
    短袖
    短裤
    防晒衣
    紧身裤
    黑丝
    白丝
    巴黎世家
  </div>
  <!-- 点击会跳转到页面顶部 -->
  <a href="#">返回顶部</a>

  <div id="box3" style="width: 600px;height: 600px; background-color: yellow;">
    鞋类区
    皮鞋
    高跟鞋
    运动鞋
    漏洞鞋
    拖鞋
    板鞋
    长靴
    短靴
    豆豆鞋
  </div>

2.内部样式引入

内部引入
位置：写在head标签中
用style标签对包住

<style>
    里面写样式
</style>

一般写在head标签中title标签的下面

<head>
    
    <style>
    里面写样式
    </style>
    
</head>

3.css语法

css注释:ctrl+/
起代码说明作用，注释不会在网页中显示

css语法：
由选择器和声明组组成
选择器：标签选择器、类选择器、id选择器等等
声明组：{}
声明组由声明语句组成
{
width：100px;
height:100px;
}
声明语句由属性名和属性值组成
属性名与属性值用：隔开
多条声明语句用分号隔开

width：100px;---声明语句
width-----属性名
100px---属性值

css语法案例：

div {
height: 100px;
background-color: tomato;
}