微动学习Day090315
本笔记于在freecodecamp与w3c学习所记
1.Prioritize One Style Over Another
class 覆盖了 body 元素的 CSS 声明
<style>
body {
color: green;
}
.pink-text {
color: pink;
}
</style>
<h1 class="pink-text">Hello World!</h1>
浏览器读取 CSS 的顺序是从上到下，这意味着，在发生冲突时，浏览器会使用最后的 CSS 声明。
Override Class Declarations by Styling ID Attributes 你声明的这个 CSS 在 pink-text类选择器的上面还是下面是无所谓的，因为 id 属性总是具有更高的优先级。
Override Class Declarations with Inline Styles 行内样式将覆盖style 中定义的所有 CSS。 Override All Other Styles by using Important
<style>
body {
color: green;
}
#orange-text {
color: orange;
}
.pink-text {
color: pink !important;
}
.blue-text {
color: blue;
}
</style>
<h1 id="orange-text" class="pink-text blue-text" style="color: white">Hello World!</h1>
2.Color
Use Hex Code for Specific Colors
在 CSS 中，我们可以使用 6 位十六进制数字来表示颜色，每 2 位分别表示红色 R)、绿色 (G) 和蓝色 (B) 成分。例如，#000000 是黑色，同时也是可能的数值中最小的。
红，hex code 是 #FF0000 ，可被缩写成 #F00。也就是说，一位表示红，一位表示绿，一位表示蓝。
Use RGB values to Color Elements
body {
background-color: #000000;
background-color: #F00;
background-color: rgb(0, 0, 0);
}
3.HTML（块） <div> 和 <span>
HTML 块元素
大多数 HTML 元素被定义为块级元素block level element或内联元素 inline element。
块级元素在浏览器显示时，通常会以新行来开始（和结束）。
例子：<h1>, <p>, <ul>, <table>
HTML 内联元素
内联元素在显示时通常不会以新行开始。
HTML <div> 元素
HTML <div> 元素是块级元素，它是可用于组合其他 HTML 元素的容器。
<div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。
HTML <span> 元素
HTML <span> 元素是内联元素，可用作文本的容器。
<span> 元素也没有特定的含义。
当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。
4.HTML 类
对 HTML 进行分类（设置类），使我们能够为元素的类定义 CSS 样式。
为相同的类设置相同的样式，或者为不同的类设置不同的样式。
分类块级元素
HTML <div> 元素是块级元素。它能够用作其他 HTML 元素的容器。
设置 <div> 元素的类，使我们能够为相同的 <div> 元素设置相同的类。span同理
5.布局,摘自W3C
摘自W3C
<!DOCTYPE html>
<html>
<head>
<style>
#header {
background-color:black;
color:white;
text-align:center;
padding:5px;
}
#nav {
line-height:30px;
background-color:#eeeeee;
height:300px;
width:100px;
float:left;
padding:5px;
}
#section {
width:350px;
float:left;
padding:10px;
}
#footer {
background-color:black;
color:white;
clear:both;
text-align:center;
padding:5px;
}
</style>
</head>
<body>
<div id="header">
<h1>City Gallery</h1>
</div>
<div id="nav">
London<br>
Paris<br>
Tokyo<br>
</div>
<div id="section">
<h2>London</h2>
<p>
London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.
</p>
<p>
Standing on the River Thames, London has been a major settlement for two millennia,
its history going back to its founding by the Romans, who named it Londinium.
</p>
</div>
<div id="footer">
Copyright ? W3Schools.com
</div>
</body>
</html>
6.HTML 响应式 Web 设计,摘自W3C
<!DOCTYPE html>
<html lang="en-US">
<head>
<style>
.city {
float: left;
margin: 5px;
padding: 15px;
width: 300px;
height: 300px;
border: 1px solid black;
}
</style>
</head>
<body>
<h1>W3School Demo</h1>
<h2>Resize this responsive page!</h2>
<br>
<div class="city">
<h2>London</h2>
<p>London is the capital city of England.</p>
<p>It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>
</div>
<div class="city">
<h2>Paris</h2>
<p>Paris is the capital and most populous city of France.</p>
</div>
<div class="city">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.</p>
</div>
</body>
</html>
7.HTML 框架
在同一个浏览器窗口中显示不止一个页面。
竖切
<html>
<frameset cols="25%,50%,25%">
<frame src="#">
<frame src="#">
<frame src="#">
</frameset>
</html>
横切
<html>
<frameset rows="25%,50%,25%">
<frame src="#">
<frame src="#">
<frame src="#">
</frameset>
</html>
8.背景
颜色背景（略）
图片背景
背景属性将背景设置为图像。属性值为图像的URL。如果图像尺寸小于浏览器窗口，那么图像将在整个浏览器窗口进行复制。
URL可以是相对地址，如第一行代码。也可以使绝对地址，如第二行代码。
<body background="clouds.gif">
<body background="http://www.w3school.com.cn/clouds.gif">
关于图片占画面大小问题？
1787
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
