前端基础-css（一）

「已注销」

已于 2022-10-17 19:19:59 修改

阅读量381

点赞数 1

分类专栏：前端 css 文章标签： css 前端 html

于 2022-10-09 16:21:28 首次发布

本文链接：https://blog.csdn.net/deartors/article/details/127224327

版权

本文介绍了CSS的基础知识，包括link标签的内部样式、style标签的外部和行内样式、各种选择器如标签选择器、类选择器、id选择器、通配符和伪类选择器的用法。强调了选择器的权重和如何清除超链接a的默认样式。

摘要由CSDN通过智能技术生成

css全称是cascading style sheet层叠样式表
用来修饰网页信息的显示样式
css样式可以放在head标签内也可以放在body标签内，但都需要用一个双标签，<style></style>包裹，最常用的方法就是新建一个标签页然后再head部分引入css部分。
css的样式表有三种，内部样式，外部样式，行内样式

link标签（内部样式）

默认属性有rel（关联性定义，关联stylesheet样式表），type（引入css文件），href（css文件路径）三种。

<link rel="stylesheet" type="text/css" href="/css/a.css">

style标签（外部样式）

再style双标签内引入@import utl(文件地址);

<style>
        @import url(/css/a.css);
    </style>

1.两者的区别本质上link属于html标签，@import属于css提供的一种外部引入。
2.加载顺序的差别link标签作为html的标签在加载html的同时会被加载，@import作为外部标签会等html全部被加载完再进行加载，网速慢的时候会比较明显，没有css样式。
3.兼容性上@import是css2.1才提出了的，属于老的浏览器不支持，仅支持ie5及以上的标签。

style标签（行内样式）

直接在标签内添加style样式

<h1 style="color: red;">111</h1>

标签优先级：行内样式>内部样式>外部样式

标签选择器

对于特定类型的标签进行添加样式，直接将标签名引入进css中为所有的当前标签设置统一的样式
HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        @import url(/css/a.css);
    </style>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"

最低0.47元/天解锁文章

「已注销」

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
前端基础-css（一）

css全称是cascading style sheet层叠样式表用来修饰网页信息的显示样式css样式可以放在head标签内也可以放在body标签内，但都需要用一个双标签，包裹，最常用的方法就是新建一个标签页然后再head部分引入css部分。css的样式表有三种，内部样式，外部样式，行内样式。
复制链接

扫一扫

专栏目录