Java学习的第四天(前端：CSS+盒子模型)

• CSS（层叠样式表）
  作用：布局控制和美化界面

• 为什么要用到CSS呢？？
  首先HTML中的属性已经不足以完全满足目前的编程需要，例如HTML中的字体大小只有1-6；而CSS作为拓展HTML而存在，它内部包含各种功能强大的属性可以用来去制作网页，它的字体大小font-size：数字可以无限大。除此之外我们目前主要是通过CSS+div去控制页面布局（比表格进行布局方便的多）

• 如何去理解HTML CSS JavaScript三者之间的关系
  通常形象一点的表示就是我们可以把HTML当做一个没有化妆的女人，而CSS就是给这个女人画了一个好看的妆，而JavaScript就是让这个化妆的女人在舞台上跳舞。

• 那么我们如何去使用CSS呢？？

我们一般使用三种方式去使用CSS（内联样式，内部样式，外部样式）
1.内联样式
<标签 style="属性的名称：设置的值">
//实例1

    层叠样式表


2.内部样式

<标签>
//实例2


    
        
        
        
    
    
        
层叠样式表
    


3.外部样式
步骤：1.创建一个.css文件，将需要控制的样式放入.css文件中
       2.创建一个.html文件，通过两个方式来引入.css文件
引入.css文件的两个方式：
1.
2.

/a1.css
 p{
    font-size: 50px;
    color: yellow;
    text-align: center;
    line-height: 80px;
    background:url(../day3/img/5.jpg);
    border: 5px solid black;
    width: 50%;
    height: 485px;
  }
/外部样式1.html(通过link属性来引入外部样式表)


    
        
        
        
    
    
        
层叠样式表
    

/外部样式2.html（通过@import来引入外部样式表）


    
        
        
        
    
    
        
层叠样式表
    

• 三种样式的优先级
  就近原则(如果在某个具体的标签引用内联样式，那么这个优先级最高；而如果在头部同时引入内部样式和外部样式，那么body中的标签离哪个近，就应用相对应的样式)

//实例：如果通过存在三种方式作用在同一个标签上，那么应该是就近原则
/.html


    
        
        
        
        
    
    
        

                我是内联样式
            
        
我是内部样式
        
我是外部样式
    

/../外部样式.css
div{
    font-size: 50px;
    color: yellow;
    text-align: center;
    line-height: 80px;
    border: 5px solid black;
    width: 80%;
    height: 285px;
}

a4.png

• 选择器的介绍（指定的要修饰的一类标签）

/此处的p就是下方的p标签的名字，而上面的这个p就叫做选择器,
p{
  color:red;
  font-size:100px;
}
曲项向天歌

• 最常用的三种选择器

/元素选择器（标签选择器）
p{
  color:red;
  font-size:100px;
}
曲项向天歌

/id选择器（将id值加上#作为选择器的名字）
#a1{
  color:red;
  font-size:100px;
}
曲项向天歌

/类选择器（将class值加上小数点作为选择器的名字）
.c1{
  color:red;
  font-size:100px;
}
曲项向天歌

• 三种选择器的优先级
  ID选择器>类选择器>元素选择器
• div块级元素

/div元素是一个块级元素，独占一行（会有自动换行的效果）
/span元素是一个行级元素，不会换行
/注意：根据元素的不同，div和span标签产生的width和height是会有不同的效果的
/块级元素：
 
  
/行级元素： 

下一节内容讲解利用HTML+CSS进行页面布局