css基础

时间:2024-11-11 19:46:49

文章目录

  • 基础
  • 外部引入样式方式
  • 样式表的优先级
  • 基本选择器
    • 通配选择器

基础

配置网页的cion图标
在网站根目录下放置 favicon.ico 文件,浏览器在加载网页的时候会自动加载的。这个图片只能是 ico 格式,并且只能叫这个名字

如: css项目的根目录下
在这里插入图片描述
刷新网站没有生效,需要强制刷新,shift + 刷新
在这里插入图片描述

外部引入样式方式

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- rel: 指定引入文件和当前html的关系类型,如果不指定有些浏览器则不识别 -->
    <link rel="stylesheet" href="./position.css">
</head>

position.css

img {
    width: 100px;
    height: 100px;
}

优势:样式复用,html结构清晰,可触发浏览器缓存提高加载css速度

样式表的优先级

样式优先级: 行内样式 > 内部样式 = 外部样式,内部样式和外部样式按照加载顺序覆盖(后来者居上)

在这里插入图片描述
在这里插入图片描述

基本选择器

通配选择器

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            color: red;
        }
    </style>

</head>

<body>
    <h1>与天奋斗,与地奋斗,与人奋斗,其乐无穷</h1>
    <p>学习CSS</p>
</body>

在这里插入图片描述