用java编写盒子模型,Java学习的第四天(前端：CSS+盒子模型)

CSS(层叠样式表)

作用：布局控制和美化界面

为什么要用到CSS呢？？

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

如何去理解HTML CSS JavaScript三者之间的关系

通常形象一点的表示就是我们可以把HTML当做一个没有化妆的女人，而CSS就是给这个女人画了一个好看的妆，而JavaScript就是让这个化妆的女人在舞台上跳舞。

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

我们一般使用三种方式去使用CSS(内联样式，内部样式，外部样式)

1.内联样式

标签>

//实例1

层叠样式表

2.内部样式

标签{

样式(属性)

}

标签>

//实例2

p{

font-size: 50px; //字体的大小

color: yellow; //字体的颜色1

text-align: center; //字体的对齐方式

line-height: 80px; //行高

background:url(../../day3/img/5.jpg); //背景图片

border: 5px solid black; //5像素的黑色的实线框

width: 50%; //宽度

height: 485px; //高度

}

层叠样式表

3.外部样式

步骤：1.创建一个.css文件，将需要控制的样式放入.css文件中

2.创建一个.html文件，通过两个方式来引入.css文件

引入.css文件的两个方式：

1.

2.

@import url("../a1.css");

/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来引入外部样式表)

@import url("../a1.css");

层叠样式表

三种样式的优先级

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

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

/.html

div{

font-size: 50px;

color: yellow;

text-align: center;

line-height: 80px;

border: 5px solid black;

width: 100%;

height: 985px;

}

我是内联样式

我是内部样式

我是外部样式

/../外部样式.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进行页面布局