当前位置： 移动技术网 > IT编程>网页制作>CSS > 2.1 CSS简介

2.1 CSS简介

2020年07月22日  | 移动技术网IT编程  | 我要评论

2.1 CSS简介

介绍

      CSS：层叠样式表，用于设置网页中元素的样式。

使用方式

  1. 内联样式
    在标签内部通过style属性来设置元素的样式。
  2. 内部样式表
    将样式编写到head中的style标签中，通过CSS选择器来选中元素，再设置样式。
  3. 外部样式表
    将css样式编写到一个外部的css文件中，然后通过link标签来引入外部的CSS文件

示例代码
html文件

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>CSS简介</title>
    <!--
        第二种使用css的方式（内部样式表）
            - 将样式编写到head中的style标签中
            - 通过CSS选择器来选中元素，再设置样式。p属性选择器
            - 可以同时为多个相同标签设置同一样式
            - 问题
                只能对一个网页起到设置作用，不能跨页面进行复用
    -->
        <style>
            p{
                color: blue; 
                font-size: 22;
            }
        </style>
    
    <!--
        第三种使用CSS的方式(外部样式表)
            - 可以将css样式编写到一个外部的css文件中
                然后通过link标签来引入外部的CSS文件
            - 使样式可以在不同页面中进行复用
            - 将样式编写到外部的css文件中，可以使用到浏览器的缓存机制
                从而加快网页的加载速度，提高用户的体验（外部资源会被缓存）
    -->
        <link rel="stylesheet" href="./style01.css">
    </head>
    
    <body>
    <!--
        css -- 层叠样式表
            css用来设置网页中元素的样式

        第一种使用css的方式(内联样式)
            - 在标签内部通过style属性来设置元素的样式
            - 问题
                使用内联样式，样式只能对一个标签生效；维护不方便
            - 注意
                开发时不要使用内联样式
    -->
        <p style="color: red; font-size: 20;">月上柳梢头，人约黄昏后。</p>

        <p>落霞与孤鹜齐飞，秋水共长天一色。</p>
    </body>
</html>

外部style01.css文件

p{
    color: greenyellow;
    font-size: 24;
}

结果总结
      外部样式表对内部样式表起到了效果覆盖的作用，但无法影响内联样式的效果。

基本语法

      注释语法；CSS代码 选择器 加 声明块 结构。
示例代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>CSS基本语法</title>

        <style>
            /* 
             CSS中的注释使用方法。
             
             CSS基本语法：
                选择器 声明块
                选择器：通过选择器可以选中页面中的指定元素
                    比如 p 的作用是选中页面中的所有p元素
                声明块：通过声明块来指定要为元素设置的样式
                    声明块由一个一个的声明组成
                    声明是一个名值对结构：
                        样式名+:+样式值+;
            */
            p{
                color: red;
                font-size: 30;
            }
            h1{
                color: blue;
                font-size: 10;  /*事实证明，这样设置font-size对h1无效*/
            }
        </style>
    </head>
    <body>
        <h1>展示</h1>
        <p>我是无情的示例</p>
    </body>
</html>

本文地址：https://blog.csdn.net/qq_37665301/article/details/107453346

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网