css-三种嵌入方式_css嵌入式-CSDN博客

本文链接：https://blog.csdn.net/KIKI_20170120/article/details/124434664

css，全称cascading style sheet，层叠样式表。用来修饰HTML文件，是HTML的化妆品。基于html生存。

在HTML中怎么嵌入css样式呢？

第一种：内联定义
第二种：定义内部样式块对象
第三种：链入外部样式表文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css-1</title>
    <!--style样式块通常写到head标签中-->
    <!--2、定义内部样式块对象
    语法格式：
    选择器{样式名:样式值;
          样式名:样式值;
          样式名:样式值;
          样式名:样式值;}
    css中常见的选择器有3种：标签选择器，id选择器，class选择器
    1、标签选择器作用于所有的同名标签
    2、id选择器作用于某一个标签
    3、class选择器作用于所有具有相同class属性的标签
    -->
    <style>
        span{
         width: 400px;
         height:200px;
         background-color:pink;
        }

        #ipt{
            width: 100px;
            height:20px;
            background-color:yellow;
        }

        .cls1{
            width: 50px;
            height:20px;
            background-color:purple;
        }
    </style>


    <!--3、链入外部样式表文件
    语法格式：
    <link rel='stylesheet' type='text/css' href='1.css'/>
    -->
    <link rel='stylesheet' type='text/css' href='1.css'/>

</head>
<input>
    <!--1、内联定义方式
    语法格式：
    <标签 style='样式名:样式值;
                样式名:样式值;
                样式名:样式值;
                样式名:样式值;'>
    -->
    <div id="div1" style="width: 400px;height:200px;background-color: #97cc66;">
        我是一个div，我跟span都是图层，但是我会独占一行；span不会</div>
    <span style=''> 我是一个span，我跟div都是图层，但是我不会独占一行；div会</span>
    <!--2-->
    <input id="ipt" type="text" value="12345"/>
    <input class="cls1" type="text" value="12345"/>
    <input class="cls1" type="text" value="54321"/>
    <br>
    <!--3-->
    <div1>我用的样式来自于外部文件</div1>
</body>
</html>

1.css文件内容

div1{
    width: 200px;
    height: 100px;
    background-color: yellowgreen;
}