css基础知识

css的引入方式

在HTML中引入css有三种方式：

　　1.行内样式　

 <div>
    <p style="color: green">我是一个段落</p>
 </div>

　　2.内接样式

<style type="text/css">
    /*写我们的css代码*/
        
    span{
    color: yellow;
    }

</style>

　　3.外接样式
　　　　1.连接式

<link rel="stylesheet" href="./index.css">

　　　　2.导入式

<style type="text/css">
        @import url('./index.css');
</style> 

CSS：层叠样式表，CSS就是给HTML的标签页中添加各种样式，定义网页的显示效果。

HTML的缺陷

　　1、不能适应多种设备
　　2、要求浏览器必须智能化足够庞大
　　3、数据和显示没有分开
　　4、功能不够强大

CSS的优点：

　　1、使数据和显示分开
　　2、降低网络流量
　　3、使整个网站视觉效一致
　　4、使网站的开发效率变高了(耦合性降低)

CSS的选择器

CSS的选择器包括
　　1、标签选择器
　　2、id选择器
　　3、类选择器

标签选择器：可以选中标签元素，比如div p ul li a.....等等，不管标签隐藏的多深，都能选中，选中的是所有的，而不是某一个，所以说“共性”而不说“特性”。

body{
    color:gray;
    font-size: 12px;
}
/*标签选择器*/
p{
    color: red;
font-size: 20px;
}
span{
    color: yellow;
}

id选择器：#id 这样可以选中一个Id，，在同一个页面中，id不能重复，任何标签都可以设置id。

　　　　id命名规范，字母数字下划线，大小写严格区分。

#box{
    background:green;
}
            
#s1{
    color: red;
}

#s2{
    font-size: 30px;
}

类选择器：类就是class，class与id非常相似，任何的标签都可以加类，但是类是可以重复的，属于类的概念。

同一个标签可以携带多个类名，用空格隔开。

.lv{
    color: green;

}
.big{
    font-size: 40px;
}
.line{
    text-decoration: underline;
}

<!-- 公共类    共有的属性 -->
    <div>
        <p class="lv big">段落1</p>
        <p class="lv line">段落2</p>
        <p class="line big">段落3</p>
    </div>

高级选择器