Android program ape out of the Web, HTML (II)
1, inline style
<body>
<table align="center" >
<caption><h4 style="color: red; font-size: 20px">数字整理表格</h4></caption>
<tr>
<th>
数字整理
</th>
</tr>
<tr>
<td style="color: #669900">小数字</td>
<td>123</td>
</tr>
<tr>
<td>中数字</td>
<td>456</td>
</tr>
<tr>
<td>大数字</td>
<td>789</td>
</tr>
</table>
</body>
Enter the style in the Styles tab and enter the quotation marks in the style
css with ":"
2, internal style sheet
Tag in the head with the tab style by modifying the style selector
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/*选择器{属性值}*/
th{
color: blue
}
td{
font-size: 14px
}
tr{
height: 40px
}
</style>
</head>
<body>
<table align="center" >
<caption><h4 >数字整理表格</h4></caption>
<tr>
<th>
数字整理
</th>
</tr>
<tr>
<td >小数字</td>
<td>123</td>
</tr>
<tr>
<td>中数字</td>
<td>456</td>
</tr>
<tr>
<td>大数字</td>
<td>789</td>
</tr>
</table>
</body>
</html>
3, external style
1) Create a folder for storing css css document
2), the input selector} {styling css file modification
3), using the link tag in the html file html files associated with the operation css
<!-- html文件内代码 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<table align="center" >
<caption><h4 >数字整理表格</h4></caption>
<tr>
<th>
数字整理
</th>
</tr>
<tr>
<td >小数字</td>
<td>123</td>
</tr>
<tr>
<td>中数字</td>
<td>456</td>
</tr>
<tr>
<td>大数字</td>
<td>789</td>
</tr>
</table>
</body>
</html>
/*css文件内代码*/
th{
color: #889900
}
td{
color: #aa3344
}
4, category selector
Point above statement, call the following class
in style .suibian (just named) attributes and attribute values {}
class can be incorporated within the tag = "suibian" class
<!-- html文件内代码 -->
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.last{
color: blue
}
</style>
</head>
<body>
<div>我是类选择器</div>
<div>我是类选择器</div>
<div class="last">我是类选择器</div>
</body>
</html>
5. Exercise
<!-- html文件内代码 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
span{
font-size: 100px
}
.G{
color: #0E8CE8
}
.o1{
color: #E21918
}
.o2{
color: #FFCD41
}
.g{
color: #0188FB
}
.l{
color: #7FB546
}
.e{
color: #B83E1F
}
</style>
</head>
<body>
<div align="center">
<span class="G">G</span>
<span class="o1">o</span>
<span class="o2">o</span>
<span class="g">g</span>
<span class="l">l</span>
<span class="e">e</span>
</div>
</body>
</html>
6, the multi-class selector
1), a plurality of styles may be defined, while in the class label assigned to a I
2), when a different style, the presence of the same attribute, the style label to define the style style bottom.
7, id selector
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
span{
font-size: 100px
}
#G{
color: #0E8CE8
}
#o1{
color: #E21918
}
#o2{
color: #FFCD41
}
#g{
color: #0188FB
}
#l{
color: #7FB546
}
#e{
color: #B83E1F
}
</style>
</head>
<body>
<div align="center">
<span id="G">G</span>
<span id="o1">o</span>
<span id="o2">o</span>
<span id="g">g</span>
<span id="l">l</span>
<span id="e">e</span>
</div>
</body>
</html>
1), which is equivalent to the internal style ". Class Name" to "#id name"
2), within the tag to the class id.
Note: The value in the class can be used multiple times; values in the id can only be used once, the global time.
8, the selector Wildcard
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
color: red
}
</style>
</head>
<body>
<div>我是小狗</div>
<p>我是小猫</p>
<span>我爱汪汪汪</span>
<h1>我爱喵喵</h1>
</body>
</html>
Select all of the following labels
9, css property
1), font-size: font size
Unit: px: pixels
2), font-family: font
3）、font-weight: 字体加粗 参数为：bold 或者700
normal 或者 400： 去掉加粗
4）、font-style 字体风格
参数 ：normal 正常字体 ；italic 倾斜的
####5）、字体连写
font后面设置各种参数，但是有序的。
font： font-style（风格）、font-weight（是否加粗）、font-size（字体大小）\line-height（行高）、font-family（字体）
6）、行间距
line-height ： 设置行与行之间的距离
7）、文本水平对齐方式
text-align: center（居中）、left（左对齐）、right（右对齐）
8）、设置缩进
text-indent： 单位为：em
9）、文本修饰
text-decoration ：none 默认的，可以取消删除线
underline 下划线
overline：文本上面的先
line-through：穿过文本的线
10、符合选择器
1）、后代选择器
<!-- html文件内代码 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div p{
color: #669900
}
</style>
</head>
<body>
<div>王者荣耀</div>
<div>王者荣耀</div>
<div>王者荣耀</div>
<div>王者荣耀</div>
<div>王者荣耀</div>
<div>王者荣耀</div>
<div>
<p>小米枪战</p>
</div>
<div>
<p>小米枪战</p>
</div>
<div >
<p>小米枪战</p>
</div>
<div>王者荣耀</div>
<div>王者荣耀</div>
</body>
</html>
先写外层的，中间用空格分割，再写内层的。
外层标签class，内层class名称 标签
<!-- html文件内代码 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div p{
color: #669900
}
.xiaomi p{
color: #AE81FF
}
</style>
</head>
<body>
<div>王者荣耀</div>
<div>王者荣耀</div>
<div>王者荣耀</div>
<div>王者荣耀</div>
<div>王者荣耀</div>
<div>王者荣耀</div>
<div>
<p>小米枪战</p>
</div>
<div class="xiaomi">
<p>小米枪战</p>
</div #AE81FF>
<div>
<p>小米枪战</p>
</div>
<div>王者荣耀</div>
<div>王者荣耀</div>
</body>
</html>
div p > a
表示子代选择器，直系、不包含孙子。
2）、交集选择器
<!-- html文件内代码 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div.green{
color: green;
}
</style>
</head>
<body>
<div>小米超神</div>
<div class="green">小米超神</div>
<div>小米超神</div>
<p>王者荣耀</p>
<p>王者荣耀</p>
<p class="green">王者荣耀</p>
</body>
</html>
相同的类选择器，名称前面加标签即可，选谁谁有变化。
4）、并集选择器
<!-- html文件内代码 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div,p,span,a{
color: #998877
}
</style>
</head>
<body>
<div>小米超神</div>
<p>王者荣耀</p>
<span>小米枪战</span>
<a href="#">麻花藤</a>
</body>
</html>
多个标签具有相同样式时，可以用“，”进行分割，实现多个选择器一起更改属性。
5）、伪类选择器
链接伪类选择器：
:link 表示未访问的链接
:visited 表示已经访问的链接
:hover 表示鼠标移动的链接
:active 表示选定的链接
#连用时 顺序不可颠倒
11、显示模式
1）、块级元素——块级显示模式
One element per line, and can set the width, height, alignment and other attributes;
examples:
~
、
、
-
、
- Wait
-
、
2), the element row - line display mode
And adjacent elements in a row;
width and height is invalid, but the padding and margin may be provided in the horizontal direction, the vertical direction valid;
default width is the width of itself;
element can only receive the text line or other line elements within.
3), the elements in the block row - the row within the block display mode
Examples: ,,
both width and height and provided a plurality of elements may be placed in the same row;
4), three display modes conversion
Setting a display attribute in the appropriate style. Inline block-level value tag when the tag is converted into rows; row-level elements are converted into block-level element parameter value block; block-level element row is converted into the line block parameter is inline-block;
#Combined training:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.nav{
/*行内元素 行内块元素 可以当做文本*/
text-align: center;
}
.nav a{
width: 120px;
height: 50px;
background-image: url(images/bg.png);
display: inline-block;
text-align: center;
text-decoration: none;
color: #ffffff;
/*行高等于盒子的高度可以使一行文本居中*/
line-height:50px;
}
.nav a：hover{
background-image: url(images/bgc.png);
}
</style>
</head>
<body>
<div class="nav">
<a href="#">网络导航</a>
<a href="#">网络导航</a>
<a href="#">网络导航</a>
<a href="#">网络导航</a>
<a href="#">网络导航</a>
</div>
</body>
</html>