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>

CSS中的继承

  1. 利用继承可以将一些通用的样式统一设置到共同的祖先元素上,这样该样式只需设置一次。
  2. 并不是所有的样式都会被继承。比如 背景相关(背景颜色、背景图片),布局相关等的样式不会被继承。

示例代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>css的继承</title>
        <style>
            /*
                样式的继承,我们为一个元素设置的样式同时也会应用
                    到后代元素
                利用继承可以将一些通用的样式统一设置到共同的祖先元素上,
                    这样该样式只需设置一次
                注意:并不是所有的样式都会被继承
                    - 比如 背景相关的,布局相关等的样式不会被继承
            */
            p{
                color: red;
            }
            div{
                background-color: red;
                /*
                    div中子元素span同样会显示为red,span并没有继承red,
                        span保持了原有的透明背景,使底层red显示了出来
                */
            }
        </style>
    </head>
    <body>
        <p>
            我是一个p元素
            <span>我是p中的span元素,p中不要有块元素</span>
        </p>
        <div>
            我是div
            <span>
                我是div中的span
                <em>我是div中的span中的em</em>
            </span>
        </div>
    </body>
</html>
©️2020 CSDN 皮肤主题: 技术黑板 设计师:CSDN官方博客 返回首页