锚点、内部样式引入、选择器、css选择器的优先级与语法

最新推荐文章于 2024-03-04 10:45:03 发布

曲靖花式通幽处

最新推荐文章于 2024-03-04 10:45:03 发布

阅读量264

点赞数

文章标签：前端 html

本文链接：https://blog.csdn.net/weixin_69474097/article/details/125750381

版权

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>

内部样式引入

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

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

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

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

选择器

1.标签选择器

标签选择器：直接以标签的名字命名，会选中页面中所有对应的标签
div标签--作为 标签选择器：  div{}
p标签--作为 标签选择器：  p{}
h2标签--作为 标签选择器：  h2{}
span标签--作为 标签选择器：  span{}

权重（权值）：1

权值越大，优先级越高，谁的优先级高，会优先显示谁的样式

标签选择器要慎用，因为会选择页面中所有对应的标签


div:选择器
选择页面中所有div标签，设置以下样式


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


/* 给页面中所有的h2标签设置样式 */
h2 {
color: purple;
}

2、通配符选择器

 通配符选择器：*
    作用:会选择页面中所有的标签
    一般用于清除浏览器的默认样式
    *{
      外间距
      margin:0;
      内间距
      padding:0;
    }
    权重：0

3、class选择器


    class选择器
    类选择器

    权重：10
    
    在开始标签写一个class属性
    给标签起一个类名

    在结构（开始标签上）：
    以class='类名'来设置

    在css中以.+类名来设置
class选择器在css中以.来表示


    起类名的一些注意点：
    1.不要以汉字为class命名  class='你'  错误
    2.不要以纯数字为class命名  class='1'  错误
    3.不要以数字开头为class命名  class='1a'  错误

    class='a1'  正确


a {
      color: red;
    }

    .b {
      color: orange;
    }

    .c {
      color: yellow;
    }

    .d {
      color: green;
    }


<p class="a">西游记--吴承恩</p>
  <p class="b">红楼梦--曹雪芹</p>
  <p class="c">水浒传--施耐庵</p>
  <p class="d">三国演义--罗贯中</p>

css选择器的优先级

通配符选择器  权重：0
    标签选择器  权重：1
    class选择器 权重：10

    当多个一个标签有多个选择器设置样式的时候,谁的权重大，谁的优先级越高，就优先选择谁的样式
    被划掉的样式--优先级低，被优先级高的选择器覆盖了
    

 * {
      color: tomato;
    }

    h1 {
      color: yellow;
    }

    .box {
      color: yellowgreen;
    }

<h1 class="box">h1标签</h1>

css语法

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

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

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

css语法案例：

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