Day20_9 前端入门之CSS样式

最新推荐文章于 2024-07-20 18:16:53 发布

浮生丶如梦

最新推荐文章于 2024-07-20 18:16:53 发布

阅读量535

点赞数 3

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

本文链接：https://blog.csdn.net/weixin_43717536/article/details/126958200

版权

一、CSS样式的概述

解析：

1.CSS的定义为：层叠样式表（Cascading style sheets）

2.CSS的主要作用：给页面中的HTML标签设置样式

3.样式通常存储在样式表中

4.外部样式表可以极大提高工作效率

5.外部样式表通常存储在 CSS 文件中

6.多个样式定义可层叠为一个

二、CSS样式的使用

CSS的引入方式

引入方式如下表：

引入方式	书写位置	作用范围	使用场景
内嵌式	CSS写在style标签中	当前页面	小案例
外联式	CSS写在单独的CSS文件中，通过link标签引入	多个页面	项目中
行内式	CSS写在标签的style属性中	当前标签	配合js使用

使用演示如下代码所示：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 3.外部（外链）样式 -->
    <link rel="stylesheet" href="css/index.css">
    <!-- 2.内嵌式 -->
    <style>
        h2 {
            color: bisque;
            font-size: 50px;
        }
    </style>
</head>

<body>
    <!-- 
    1.行内样式-----写在标签的style属性中
    2.内部（内嵌）样式
    3.外部（外链）样式

    css样式属性：
    （1）文本样式属性
       1)color 字体颜色 
           值的表示
               方式1----- 16进制--#f00----推荐使用;
               方式2----- 颜色的英文单词--red;
               方式3----- rgb三原色--rgb(255,0,0);

     -->
    <!-- 1.行内样式 -->
    <h1 style="color:#f00 ;font-size: 50px;">标题1</h1>
    <h1 style="color:red ;font-size: 50px;">标题2</h1>
    <h1 style="color:rgb(255, 0, 0) ;font-size: 50px;">标题3</h1>
    <!-- 2.内嵌式 -->
    <h2>标题4</h2>
    <!-- 3.外部（外链）样式 -->
    <h3>标题5</h3>
</body>

</html>

<!-- 3.外部（外链）样式 css文件代码 -->
/* h3 {
    font-weight: normal;
    color: #f00;
    font-family: "宋体";
} */

HTML的基础选择器

1.标签选择器：

解析：

结构：标签名{ CSS属性名：属性值；}

作用：通过标签名，找到页面中所有这类标签，设置样式

特别注意：

1. 标签选择器选择的是一类标签，而不是单独某一个

2

最低0.47元/天解锁文章

浮生丶如梦

关注

3
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
Day20_9 前端入门之CSS样式

解析：1.CSS的定义为：层叠样式表（Cascading style sheets）2.CSS的主要作用：给页面中的HTML标签设置样式3.样式通常存储在样式表中4.外部样式表可以极大提高工作效率5.外部样式表通常存储在CSS 文件中6.多个样式定义可层叠为一个。
复制链接

扫一扫