Java EE入门（二）——CSS基础
iwehdio的博客园：https://www.cnblogs.com/iwehdio/
1、CSS基础
-
HTML 表格布局的缺陷：
- 嵌套层级太多，容易出现嵌套顺序错乱。
- 页面不够灵活，想更改某一部分就需要改变整个表格布局。
- 可以使用 DIV + CSS 来解决这些问题。
-
HTML 的块标签：div 和 span ：
- div 标签：
<div></div>，默认占一行，自动换行。 - span 标签：
<span></span>，内容显示在同一行。
- div 标签：
-
CSS：层叠样式表（Cascading Style Sheets），用来美化 HTML 页面，提高代码的复用性。（HTML决定网页骨架，CSS优化网页表现效果）
-
CSS简单语法：
-
在一个 style 标签中，去编写 CSS 内容，最好在 style 标签写在 head 标签中。语法结构：
<style> 选择器{ 属性名称1：属性的值1； 属性名称2：属性的值2； } </style>
-
-
选择器帮助找到所要修饰的标签或者元素。
-
元素选择器：
元素的名称{ 属性名称1：属性的值1； 属性名称2：属性的值2； } <head> <meta charset="utf-8"> <title></title> <style> div{ color: aquamarine; font-size: 50px; } </style> </head> <body> <div>AAAA</div> <div>BBBB</div> </body> -
ID 选择器：以 # 开头。ID 是指定的块标签的标识。ID 必须是唯一的，不然一般会默认设置第一个。
#ID{ 属性名称1：属性的值1； 属性名称2：属性的值2； } <head> <meta charset="utf-8"> <title></title> <style> #div1{ color: aquamarine; font-size: 50px; } </style> </head> <body> <div id="div1">AAAA</div> <div>BBBB</div> </body> -
类选择器：以 . 开头。class 是指定的块标签的类别，可以将一类的块标签的 class 属性指定为相同。
. 类名{ 属性名称1：属性的值1； 属性名称2：属性的值2； } <head> <meta charset="utf-8"> <title></title> <style> .part1{ color: aquamarine; font-size: 50px; } </style> </head> <body> <div class="part1">AAAA</div> <div>BBBB</div> <div class="part1">CCCC</div> <div>DDDD</div> </body> -
CSS 选择器分组：多个选择器用 逗号 ，分隔。
-
属性选择器：以标签类型开头，用 [ ] 中填写所指定的属性。然后样式会应用于具有这些属性的标签，同时也可以对这些属性指定值。
标签[属性]{ 属性名称1：属性的值1； 属性名称2：属性的值2； } <head> <meta charset="utf-8"> <title></title> <style> /* 只会改变AAA的颜色 */ a[href][title='a']{ color: crimson; } </style> </head> <body> <a href="#" title="a">AAA</a> <a href="#" title="b">BBB</a> </body> -
后代选择器：标签1和标签2由空格分隔，选择标签1下的标签2的后代的样式，标签2是标签1的后代，也就是说对于标签1下包含的所有标签2都会改变样式。如果是标签1 > 标签2，则只改变父代的直接子代，不改变其子代的子代。
祖先 子代{ 属性名称1：属性的值1； 属性名称2：属性的值2； } 父代 > 子代{ 属性名称1：属性的值1； 属性名称2：属性的值2； } <head> <meta charset="utf-8"> <title></title> <style> h1 em{ color: crimson; } </style> </head> <body> <h1> <p>AAAAA</p> <p>BBBBB</p> <em>CCCC</em> <p> <em>DDDDD</em> <!--如果是 > 则此项不变色--> </p> </h1> </body> -
伪类选择器：主要用于超链接 a 标签。
<head> <meta charset="utf-8"> <title></title> <style> a:link {color: black} /*未访问的链接*/ a:visited {color: pink} /*已访问的链接*/ a:hover {color: green} /*鼠标移动到链接上*/ a:active {color: blue} /*选定的链接*/ </style> </head> <body> <a href="#">BBBB</a> </body>
-
-
CSS 的引入方式：
-
外部样式引入：创建一个 .css 文件，将 style 标签中的内容粘贴到 .css文件中。然后再在原 style 标签的位置，用
<link>标签引入。rel 表示引入的类型，stylesheet 表示引入的是样式表。href 指向引入的 .css 文件的相对路径。
.part1{ color: aquamarine; font-size: 50px; }<head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="style1.css"/> </head> <body> <div class="part1">AAAA</div> <div>BBBB</div> <div class="part1">CCCC</div> <div>DDDD</div> </body> -
内部样式：直接在 style 标签内编写 CSS 样式。
-
行内样式：直接在标签中添加 style 属性，编写 CSS 样式。
<div style="color: aqua;">AAAA</div>
-
-
CSS 的浮动：
-
实现流式布局。不添加时会自动换行，添加后会自适应的显示在一行。
-
浮动的元素会脱离正常的文档流，在正常的文档流中不占空间。
-
通过指定 style 属性中的 float 属性，可以指定为 left 或 rigth。
<div style="float:left; 200px;height: 200px;background-color: aqua;"></div> <div style="float:left; 200px;height: 200px;background-color: red;"></div> <div style="float:left; 200px;height: 200px;background-color: blue;"></div> -
使用 clear 属性，可以清除浮动。指定为 both 是两边都不允许浮动，left 是左边不允许浮动，right 是右边不允许浮动。
-
如果想让下方的 div 不受上方浮动的影响，需要先添加一个空的 div 并指定 clear 属性，来清除浮动。
-
-
行高：指定 style 的 line-height 和 height 一致，就可以实现文字上下居中的效果。
-
CSS 选择器的优先级：
- 行内样式 > ID 选择器 > 类选择器 > 元素选择器。
- 优先级高的会覆盖优先级低的设置。
- 对于一个标签可以设置多个类，具体的效果遵循就近原则。也就是说与标签内的两个类顺序无关，选择距离近的类选择器效果。
-
盒子模型：外容器（也就是 boder 显示的边界）和容器中的内容之间存在内边距 padding 。外容器与其他盒子也存在外边距 margin 。可以通过修改边距改变盒子和内容的位置。
- 内边距：padding-top， padding-right， padding-bottom， padding-left。
- 外边距：margin-top， margin-right， margin-bottom， margin-left。
- 简易设置：padding 和 margin 属性。
- padding：10px； 上下左右都是10px。
- padding：10px 20px； 上下是10px，左右是20px。
- padding：10px 20px 30px； 上10px，右20px，下30px，左20px（默认与右边相同）。
- 总之默认从上开始顺时针方向。 margin 属性同理。
-
CSS 绝对定位：指定属性 position：absolute，开启绝对位置，然后设置 top、left 属性控制到顶部和左边的位置。
2、案例
-
案例1：网站首页的优化。
-
用类选择器优化首页的实现.
-
实现：
<head> <meta charset="utf-8"> <title></title> <style> /* logo、菜单、产品部分的样式 */ .logo{ float: left; 33%; height: 60px; line-height: 60px; /*行高*/ } .amenu{ color: white; text-decoration: none; /*去掉下划线*/ line-height: 50px; } .product{ float:left; text-align: center; 16%; height: 240px; } </style> </head> <body> <div> <!--第一部分 logo --> <div> <div class="logo"> <img src="../img/logo2.png" /> </div> <div class="logo"> <img src="../img/header.png" /> </div> <div class="logo"> <a href="#">登陆</a> <a href="#">注册</a> </div> </div> <div style="clear: both;"></div> <!--第二部分 菜单 --> <div style="background-color: black;height: 50px;"> <a href="#" class="amenu">首页</a> <a href="#" class="amenu">手机数码</a> <a href="#" class="amenu">零食烟酒</a> <a href="#" class="amenu">日用百货</a> </div> <!--第三部分 产品 --> <div> <img src="../img/1.jpg" width="100%"/> </div> <div> <div><h2>最新商品<img src="../img/title2.jpg" /></h2></div> <div style="float:left; 15%;height: 480px;"> <img src="../products/hao/big01.jpg" width="100%" height="100%"/> </div> <div style="float:left; 84%;height: 480px;"> <div style="height: 240px; 50%;float:left;"> <img src="../products/hao/middle01.jpg" width="100%" height="100%"/> </div> <div class="product"> <img src="../products/hao/small01.jpg" /> <p>榨汁机</p> <p style="color: red;">￥998</p> </div> </div> </div> </div> </body>
-