Java学习的第四天(前端：CSS+盒子模型)
2019-10-25 本文已影响0人
飞奔的嗨少
-
CSS（层叠样式表）
作用：布局控制和美化界面 -
为什么要用到CSS呢？？
首先HTML中的属性已经不足以完全满足目前的编程需要，例如HTML中的字体大小只有1-6；而CSS作为拓展HTML而存在，它内部包含各种功能强大的属性可以用来去制作网页，它的字体大小font-size：数字可以无限大。除此之外我们目前主要是通过CSS+div去控制页面布局（比表格进行布局方便的多） -
如何去理解HTML CSS JavaScript三者之间的关系
通常形象一点的表示就是我们可以把HTML当做一个没有化妆的女人，而CSS就是给这个女人画了一个好看的妆，而JavaScript就是让这个化妆的女人在舞台上跳舞。 -
那么我们如何去使用CSS呢？？
我们一般使用三种方式去使用CSS（内联样式，内部样式，外部样式）
1.内联样式
<标签 style="属性的名称：设置的值"></标签>
//实例1
<p style="font-size: 50px;color: yellow;text-align: center;line-height: 80px;">
层叠样式表
</p>
2.内部样式
<style>
标签{
样式（属性）
}
</style>
<标签></标签>
//实例2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
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; //高度
}
</style>
</head>
<body>
<center><p>层叠样式表</p></center>
</body>
</html>
3.外部样式
步骤：1.创建一个.css文件，将需要控制的样式放入.css文件中
2.创建一个.html文件，通过两个方式来引入.css文件
引入.css文件的两个方式：
1.<link href=".css文件存放的相对路径" rel="stylesheet" type="text/css"/>
2.<style>
@import url("../a1.css");
</style>
/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属性来引入外部样式表)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="../a1.css" rel="stylesheet" type="text/css"/>
<title></title>
</head>
<body>
<center><p>层叠样式表</p></center>
</body>
</html>
/外部样式2.html（通过@import来引入外部样式表）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
@import url("../a1.css");
</style>
<title></title>
</head>
<body>
<center><p>层叠样式表</p></center>
</body>
</html>
-
三种样式的优先级
就近原则(如果在某个具体的标签引用内联样式，那么这个优先级最高；而如果在头部同时引入内部样式和外部样式，那么body中的标签离哪个近，就应用相对应的样式)
//实例：如果通过存在三种方式作用在同一个标签上，那么应该是就近原则
/.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
font-size: 50px;
color: yellow;
text-align: center;
line-height: 80px;
border: 5px solid black;
width: 100%;
height: 985px;
}
</style>
<link href="../外部样式.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div style="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;">
我是内联样式
</div>
<div>我是内部样式</div>
<div>我是外部样式</div>
</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>曲项向天歌</p>
- 最常用的三种选择器
/元素选择器（标签选择器）
p{
color:red;
font-size:100px;
}
<p>曲项向天歌</p>
/id选择器（将id值加上#作为选择器的名字）
#a1{
color:red;
font-size:100px;
}
<p id="a1">曲项向天歌</p>
/类选择器（将class值加上小数点作为选择器的名字）
.c1{
color:red;
font-size:100px;
}
<p class="c1">曲项向天歌</p>
-
三种选择器的优先级
ID选择器>类选择器>元素选择器 - div块级元素
/div元素是一个块级元素，独占一行（会有自动换行的效果）
/span元素是一个行级元素，不会换行
/注意：根据元素的不同，div和span标签产生的width和height是会有不同的效果的
/块级元素：<p></p> <li></li> <tr></tr> <td></td>
/行级元素：<a></a> <input></input>
