Web前端，理解 CSS的作用，了解 CSS语法规则和引入方式及其区别-CFANZ编程社区

Web前端，理解 CSS的作用，了解 CSS语法规则和引入方式及其区别

前言

持续总结输出中，今天讲的是Web前端，理解 CSS的作用，了解 CSS语法规则和引入方式及其区别。

CSS初识

CSS的介绍

CSS:层叠样式表(Cascading style sheets)
CSS作用是什么?
• 给页面中的HTML标签设置样式
在这里插入图片描述

CSS 语法规则

写在哪里?
• css写在style标签中，style标签一般写在head标签里面，title标签下面

怎么写?
在这里插入图片描述

CSS 初体验

常见属性:

css常见属性	作用
color	文字颜色
font-size	字体大小
background-color	背景颜色
width	宽度
height	高度

代码:

<!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>
    <style>
        /* css注释 */
        /* 这里写的都是css */
        /* 选择器 {css属性} */
        /* 选择器: 查找标签 */ 
        p {
            /* 文字颜色变红色 */
            color: red;
            /* 字变大 px:像素 */
            font-size: 30px;
            /* 背景颜色 */
            background-color: green;
            /* width  height; */
            width: 400px;
            height: 400px;
        }
    </style>
</head>
<body>
    <p>这是一个p标签</p>
</body>
</html>

注意点:

CSS引入方式

**内嵌式:**CSS 写在style标签中
提示:style标签虽然可以写在页面任意位置，但是通常约定写在 head 标签中

**外联式:**CSS 写在一个单独的.css文件中
• 提示:需要通过link标签在网页中引入

**行内式:**CSS 写在标签的style属性中
• 提示:基础班不推荐使用，之后会配合js使用

总结

CSS的中文名称叫做什么呢?
• 层叠样式表

CSS的作用是什么呢?
• 给页面中的HTML标签设置样式

CSS的语法规则是什么?
请添加图片描述
CSS常见三种引入方式有哪些?
• 内嵌式
• 外联式
• 行内式

CSS常见三种引入方式的特点区别有哪些(书写位置、作用范围、使用场景) ?

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

今天的分享就到这里了！！！感谢大家支持，大家的支持是我努力的动力💪💪💪

0 条评论