前端系列之CSS（选择样式）

最新推荐文章于 2024-05-23 15:23:28 发布

众拾达人

最新推荐文章于 2024-05-23 15:23:28 发布

阅读量1.2k

点赞数

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

本文链接：https://blog.csdn.net/wtdask/article/details/79098433

版权

前端专栏收录该内容

58 篇文章 5 订阅

订阅专栏

这里写图片描述

什么是CSS？
——CSS层叠样式表（Cascading Style Sheets）
——用于定义HTML内容在浏览器内的显示样式

——CSS简化HTML相关标签，网页体积小，下载快
——解决内容与表现分离的问题
——更好的维护网页，提高工作效率

一.CSS3基本语法

这里写图片描述

注：实际开发中推荐使用外部样式表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css使用方法</title>
    <!--2内部样式（嵌入样式）:对于低版本浏览器，不识别style标签，需要包含样式标签-->
    <style type="text/css">

        /*<!--p {-->*/
            /*<!--color: blue;-->*/
        /*<!--}-->*/

        /*4导入样式*/
        @import "css.css";
    </style>

    <!--3外部样式-->
    <!--<link href="css.css" rel="stylesheet" type="text/css">-->
</head>
<body>

<h1>CSS使用方法</h1>
<hr>

<!--1行内样式-->
<p style="color: red;font-size: 20px;">行内样式</p>

<!--2嵌入样式-->
<p>嵌入样式</p>

<!--3外部样式表，把CSS样式代码写在独立的一个文件中，拓展名：CSS文件名.CSS-->
<p>外部样式</p>

<!--4导入样式-->
<p>导入样式</p>
</body>
</html>

这里写图片描述

二.CSS选择器

这里写图片描述

伪类

这里写图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css选择器</title>
    <style type="text/css">
        a:link{color: blue;} /*未访问状态*/
        a:visited{color: gray;} /*已访问状态*/
        a:hover{color: green;}  /*鼠标悬浮状态*/
        a:active{color: orange;}  /*激活状态*/
    </style>
</head>
<body>
  <a href="http://www.baidu.com" target="_blank">css使用方法</a>
</body>
</html>

这里写图片描述

三.CSS继承，层叠，优先级

这里写图片描述

注意：不是所有属性都可以继承

这里写图片描述

四.CSS应用

这里写图片描述

众拾达人

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
前端系列之CSS（选择样式）

什么是CSS？ ——CSS层叠样式表（Cascading Style Sheets） ——用于定义HTML内容在浏览器内的显示样式——CSS简化HTML相关标签，网页体积小，下载快 ——解决内容与表现分离的问题 ——更好的维护网页，提高工作效率一.CSS3基本语法注：实际开发中推荐使用外部样式表<!DOCTYPE html><html lang="en"><head> <meta
复制链接

扫一扫

专栏目录