Getting Started with Java EE (b) - CSS foundation
iwehdio the blog garden: https://www.cnblogs.com/iwehdio/
1, CSS foundation
HTML table layout of the drawbacks:
- Nesting level too much, prone to nesting order disorder.
- Page is not flexible enough, want to change a part of the need to change the entire layout of the table.
- DIV + CSS can be used to solve these problems.
Block HTML tags: div and span:
- div tag:
<div></div>default per line, word wrap. - span tags:
<span></span>，the content displayed on the same line.
- div tag:
CSS: Cascading Style Sheets (Cascading Style Sheets), HTML pages used to beautify and improve the reusability of code. (HTML page skeleton decision, CSS optimized website performance results)
CSS syntax is simple:
In a style tag, to write CSS content, the best writing in the style tag in the head tag. grammar structure:
<style> 选择器{ 属性名称1：属性的值1； 属性名称2：属性的值2； } </style>
Selector to help find a label to be modified or elements.
Element selector:
元素的名称{ 属性名称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 selectors: start with #. ID is specified tag identification block. ID must be unique, otherwise it will generally default settings first.
#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 selector: to begin with. class is specified category of block tags, the block can specify a class, a class of tag is the same.
. 类名{ 属性名称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 selectors group: Used to select a plurality of comma separated.
Attribute selector: beginning tag type, with [] properties specified fill. Then applies style labels having these properties, but can also specify values for these properties.
标签[属性]{ 属性名称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>Descendant selectors: labels 1 and 2 separated by a space, select the offspring that tags 1 in 2 styles, the label 2 is a descendant of the label 1, meaning that for all the labels under the label 1 2 will include changes in style. If label 1> tag 2, changing only the direct parent of the progeny, progeny without changing its progeny.
祖先 子代{ 属性名称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>Pseudo class selector: a hyperlink tags mainly used.
<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 manner of introduction:
External style introduction: Create a .css file, paste the contents of the .css style tag file. Then the position of the original style tag, with
<link>the introduction of tags.rel indicates the type introduced, stylesheet redistributes the stylesheet. href relative path to the file .css introduced.
.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>Internal Style: Writing CSS styles directly in a style tag.
Inline style: Add style properties directly in the label, written in CSS styles.
<div style="color: aqua;">AAAA</div>
CSS float:
Achieve flow layout. Automatically wrap is not added, the adaptive post-added will appear in a row.
Floating element will be out of the normal flow of the document, it does not occupy space in the normal flow of the document.
By specifying the style attribute float property, or can be specified as a left rigth.
<div style="float:left;width: 200px;height: 200px;background-color: aqua;"></div> <div style="float:left;width: 200px;height: 200px;background-color: red;"></div> <div style="float:left;width: 200px;height: 200px;background-color: blue;"></div> </body> </html>The clear property, you can clear float. Is designated as both sides are allowed to float, left is allowed to float left, right is on the right are not allowed to float.
If you want the div below the float is not affected by the above, you need to add an empty div and specify clear property to clear the float.
Line-height: Specify the style of line-height and height consistent with the text up and down centering effect can be achieved.
CSS selector priority:
- Inline style> ID selector> selector class> element selectors.
- A higher priority overrides the lower priority setting.
- Tag may be provided for a plurality of classes, following the principle of proximity effect. That is regardless of the order of two classes within the tag, selected from the class selector near effect.
Box Model: padding padding exists (i.e. the boundary boder shown) between the container and the contents of the outer container. Outer container there is a box with other margins margin. Margins can change the position of the box and by modifying the content.
- 内边距：padding-top， padding-right， padding-bottom， padding-left。
- 外边距：margin-top， margin-right， margin-bottom， margin-left。
- Easy Setup: padding and margin properties.
- padding: 10px; all up and down about 10px.
- padding: 10px 20px; vertical is 10px, it is about 20px.
- padding: 10px 20px 30px; on 10px, and right 20px, lower 30px, 20px left (the right side of the same by default).
- In short default from the clockwise direction. margin property empathy.
CSS absolute positioning: Specify property position: absolute, absolute open position, then set the top, left property to control the position of the top and left.
2, case
Case 1: Optimizing Web site home page.
With a class selector optimized to achieve first page.
achieve:
<head> <meta charset="utf-8"> <title></title> <style> /* logo、菜单、产品部分的样式 */ .logo{ float: left; width: 33%; height: 60px; line-height: 60px; /*行高*/ } .amenu{ color: white; text-decoration: none; /*去掉下划线*/ line-height: 50px; } .product{ float:left; text-align: center; width: 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;width: 15%;height: 480px;"> <img src="../products/hao/big01.jpg" width="100%" height="100%"/> </div> <div style="float:left;width: 84%;height: 480px;"> <div style="height: 240px;width: 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>
iwehdio the blog garden: https://www.cnblogs.com/iwehdio/