学习笔记-《零基础学习HTML5—html+css基础 》4.CSS基础样式(上)

时间:2022-07-04 20:26:18

1.div 双标签

        语义:无意义

        它不是任何东西的缩写,它的作用就是来划分区域


2.css的语法

       属性名:属性值;

<div style="height:100px;width:200px;background:yellow;">我是身体</div>


3.css的引入方式

style="height:100px;width:200px;background:yellow


(1)行间样式的引入

          写法:在标签中,写一个style的属性,比如:style="......."在引号当中,写相应的css样式

                 <div style="height:100px;width:200px;background:yellow;">我是身体</div>

                缺点: 当描述的样式很多时,这种会累死,别外不利于维护

                优点:优先级最高

(2)内部样式表的的引入

         写法:在head标签里,写一个style的标签,通过选择器来控制样式

选择器?    div{  }

这个div和之前的div完全不一样,之前的是标签,这个是选择器

        标签名选择器

                 写法:

                         div{

                                  ........  css的样式

                               }


         ID选择器

                   写法:首先在相应标签中设置词一个ID的属性

                               如:id="id名“

                               在样式表中,通过

                           # + id名 {

                              .........css的样式

                                }

温馨小提示:

id名要以英文字母开头,不能用数字或汉字开头

id名不能重复,是唯一的

       

                  class选择器

                   写法:首先在相应标签中设置词一个class的属性

                               如:class="class名“

                               在样式表中,通过

                           . + class名 {

                              .........css的样式

                                }

温馨小提示:

class名要以英文字母开头,不能用数字或汉字开头

class名能重复,不是唯一的


4.优先级

标签名选择器 < class选择器  <  ID选择器  < 行间样式


(3)外部样式表的的引入