W3CSchool实战闯关笔记（HTML/CSS）

HTML更换文本的颜色：通过修改元素的style样式实现

<h2 style="color:red">html编程入门教程</h2>

使用CSS选择器定义标签：上面再标签内部添加属性的方式是“内联样式”，CSS则是在外部定义标签元素属性

<style>
    h2{ color : blue;}
</style>
<h2>html编程入门教程</h2>
<!--
所有的CSS属性定义代码写在style标签内部
<style>    
  选择器 {属性名称: 属性值;}       
</style>
-->

使用CSS Class给标签定义style：在style标签里定义类，在HTML标签元素中使用class属性连接对应的类

注意：在CSS样式元素中，类选择器应该添加.为前缀。而在HTML元素的类声明中，类属性不能添加.为前缀

<style>
.red-text {
color: red;
}
</style>

<h2 class="red-text">html编程入门教程</h2>

<p>
在大家心目中，也许编程是一件非常困难的事情，其实也是一件非常有乐趣的事情，只要掌握好编程入门的方法，就能慢慢进入一个全新的创造世
</p>

HTML为多个元素使用CSS类定义样式：在CSS中定义的类可以同时被多个HTML标签元素连接使用

<style>
.red-text {
color: red;
}
</style>

<h2 class="red-text">html编程入门教程</h2>

<p class="red-text">
在大家心目中，也许编程是一件非常困难的事情，其实也是一件非常有乐趣的事情，只要掌握好编程入门的方法，就能慢慢进入一个全新的创造世
</p>

HTML设置标签的字体大小：font-size

<style>
  .red-text {
    color: red;
    font-size: 16px;
  }
    p {
       font-size: 16px; 
    }
</style>

<h2 class="red-text">我家的猫咪</h2>

<p class="red-text">在大家心目中，猫是慵懒的可爱的化身，它可以睡饱了再起来吃饭，可以逗趣小耗子，可以卖得了萌，使得了坏，这样百变的小怪兽就集结在一只宠物上，怎能不惹人怜爱。</p>
<p>
    养动物有的时候，就是介于爱与恨之间，当你钦羡别人萌宠这么可爱的时候，你一定没有想过，狗狗和猫猫会到处拉屎，甚至会屯老鼠，啃鞋子，用爪子爬门，你不理它，它就挠你，你要对它发脾气，它会比你更来劲。所以，狗猫慎入，没有一定的准备，切勿随便去侍养动物。它们一旦认定你了，你就是它们的主人，如果你抛弃它们，它们必定心中重创。
</p>

HTML设置字体样式：font-family

<style>
.red-text {
color: red;
}

p {
font-size: 16px;
font-family: Monospace;
}
</style>

<h2 class="red-text">CatPhotoApp</h2>

<p class="red-text">在大家心目中，也许编程是一件非常困难的事情，其实也是一件非常有乐趣的事情，只要掌握好编程入门的方法，就能慢慢进入一个全新的创造世界。</p>
<p>可以学习的编程语言有很多，我们这个编程训练营里面有大量的编程实战实验，包括Html、css、Javascript、jquery、bootstrap等等前端编程实战课程，请大家耐心按阶段不断向前学习和通过一轮一轮的挑战，相信很快您的编程技术会得到很大的提升，为找到一份好的编程工作做好准备。</p>

引入字体（google为例）：<link>自闭和标签

<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
.red-text {
color: red;
}

p {
font-size: 16px;
font-family: Monospace;
}

h2 {
    font-family: Lobster;
}
</style>

<h2 class="red-text">CatPhotoApp</h2>

<p class="red-text">在大家心目中，也许编程是一件非常困难的事情，其实也是一件非常有乐趣的事情，只要掌握好编程入门的方法，就能慢慢进入一个全新的创造世界。</p>
<p class="red-text">可以学习的编程语言有很多，我们这个编程训练营里面有大量的编程实战实验，包括Html、css、Javascript、jquery、bootstrap等等前端编程实战课程，请大家耐心按阶段不断向前学习和通过一轮一轮的挑战，相信很快您的编程技术会得到很大的提升，为找到一份好的编程工作做好准备。</p>

处理多个字体降级：

　　在所有浏览器中都有几种可用的默认字体。这些包括 Monospace 、Serif 和 Sans-Serif。

当某种字体不可用时，你可以让浏览器将其 “降级” 为另一种字体。

　　例如，如果你希望元素使用 Helvetica 字体，但是当 Helvetica 不可用时也会降级为Sans-Serif 字体，则可以使用此CSS样式：

p {    
  font-family: Helvetica, Sans-Serif;    
}

HTML给页面添加图片：

可以使用 img 元素（自闭和标签）将图片添加到您的网站，并使用 src 属性指向一个图片的具体地址，img 元素具有 alt 属性。alt 属性中的文本用于屏幕阅读器以提高可访问性，并且如果图像无法加载，则会显示

<img src="/statics/codecamp/images/relaxing-cat.jpg" alt="your-image">

调整网页图片大小：width，height

<style>
.smaller-image {
    width: 100px;
}
</style>
<img src="/statics/codecamp/images/relaxing-cat.jpg" class="smaller-image">

HTML给标签增加边框：

CSS 边框具有 style(样式)、color(颜色)、width(宽度) 等属性

注意：可以应用多个class到一个元素，只需要在多个class之间用空格分开即可

<style>
.smaller-image {
width: 100px;
}
.thick-green-border {
  border-width:10px;
  border-style:solid;
  border-color:green;   
}
</style>

<img class="smaller-image thick-green-border" src="/statics/codecamp/images/relaxing-cat.jpg">

给标签增加圆角边框：border-radius

<style>
.smaller-image {
width: 100px;
border-radius: 10px;
}
</style>

<img class="smaller-image thick-green-border" src="/statics/codecamp/images/relaxing-cat.jpg">

给图像设置圆角边框：百分比、border-radius

<style>
.thick-green-border {
border-color: green;
border-width: 10px;
border-style: solid;
border-radius: 50%;
}
.smaller-image {
width: 100px;
}
</style>

<img class="smaller-image thick-green-border" src="/statics/codecamp/images/relaxing-cat.jpg">

 设置链接锚元素外部页面：<a></a>理解起来跟超链接差不多

<a href="http://freecatphotoapp.com">cat photos</a>

在p标签内设置锚链接：也就是标签的嵌套

<p>View more <a href="https://www.w3cschool.cn">cat photos</a></p>

使用#设置固定链接：

有时你想要在你的网站上添加一个 a 元素，但你还不知道将它链接到哪里，这时你可以使用固定连接。当你使用 jQuery 更改链接的行为时，这也很方便

把 a 元素的 href 属性的值替换为一个 #（# 也称为哈希符号），将其转换为一个固定链接。

<p>Click here for <a href="#">cat photos</a>.</p>

为图片设置超链接：通过将某元素(图片,按钮或其他)嵌套在a元素中使其变为一个链接

<a href="#"><img src="/images/relaxing-cat.jpg"></a>

 为图片添加alt描述:

alt 属性， 是当图片无法显示时的替代文本,alt 属性是一个必需的属性，为页面上的图片都加上 alt 属性是好习惯

<img src="www.your-image-source.com/your-image.jpg" alt="your alt text">

创建项目符号无序列表:<ul></ul>

<ul>    
  <li>milk</li>    
  <li>cheese</li>    
</ul>

创建有序列表:<ol></ol>

<ol>    
  <li>Garfield</li>    
  <li>Sylvester</li>    
</ol>

创建文本输入框:<input>自闭和标签

<input type="text">

为文本输入框设定预设值:placeholder,就是用户还没输入的时候文本框显示的文字,输入框接受到输入之后就隐藏起来,输入框清空又显现.

<input type="text" placeholder="cat photo URL">

添加表单:

可以使用HTML来构建跟服务器交互的Web表单。你可以通过在form元素上添加一个action属性来执行此操作,action属性的值指定了表单提交到服务器的地址

<form action="/submit-cat-photo">
    <input type="text" placeholder="cat photo URL">
</form>

为表单添加提交按钮:我们在form中添加一个 submit (提交)按钮。点击此按钮，表单中的数据将会被发送到你使用表单 action 属性指定的地址上,在你的 form 元素中添加一个提交按钮，并以类型为 submit

<form action="/submit-cat-photo">
    <input type="text" placeholder="cat photo URL">
    <button type="submit">Submit</button>
</form>

把表单设置为必填项:如果你想要一个文本输入框设置为必填项，你可以在 input元素中加上 required 属性

<input type="text" required>

添加单选框:可以使用单选按钮来解决你希望用户只给出一个答案的问题,单选按钮是 input 输入框的一种类型,每个单选按钮都应该嵌套在自己的 label(标签) 元素中,所有关联的单选按钮应具有相同的 name 属性

<label><input type="radio" name="indoor-outdoor">indoor</label>
<label><input type="radio" name="indoor-outdoor">outdoor</label>

添加复选框:checkboxes（复选按钮）通常用于可能有多个答案的问题的形式,每一个复选按钮都应嵌套在其自己的 label元素中,所有关联的复选按钮输入应该具有相同的 name属性

<label><input type="checkbox" name="personality">Rugdoll1</label>
<label><input type="checkbox" name="personality">Rugdoll2</label>
<label><input type="checkbox" name="personality">Rugdoll3</label>

设置单选框和复选框默认被选中:在 input 元素中添加属性checked

<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
<label><input type="checkbox" name="personality" checked> Loving</label>
<label><input type="checkbox" name="personality"> Lazy</label>
<label><input type="checkbox" name="personality"> Energetic</label>

在div元素中嵌套多个元素:

div 元素，也被称作division(层)元素，是一个盛装其他元素的通用容器,

div 元素是最常用的HTML元素。所以可以利用CSS的继承关系把 div 上的CSS传递给它所有子元素

<div>
<p>Things cats love:</p>
<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
<li>flea treatment</li>
<li>thunder</li>
<li>other cats</li>
</ol>
</div>

为div元素设置背景颜色:

<style>
.gray-background {
    background-color: gray;
}
</style>

<div class="gray-background">
<p>Things cats love:</p>
<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
<li>flea treatment</li>
<li>thunder</li>
<li>other cats</li>
</ol>
</div>

为标签添加ID属性:

除了 class属性之外，每一个 HTML 元素也可以具有 id 属性,

id 属性应该是唯一的。虽然浏览器不会强制唯一，但这是被广泛认可的。所以请不要给一个以上的元素相同的 id 属性,

<h2 id="cat-photo-app">

使用ID属性设置标签样式:

关于id属性的一个很酷的事情是，像类选择器一样，你可以使用CSS来设计样式

注意:在你的 style 元素中，定义类选择器必须添加 . 为前缀，定义ID选择器必须添加 # 为前缀

<style>
#cat-photo-form {
    background-color: green;
}
</style>

<form action="/submit-cat-photo" id="cat-photo-form">
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
<label><input type="checkbox" name="personality" checked> Loving</label>
<label><input type="checkbox" name="personality"> Lazy</label>
<label><input type="checkbox" name="personality"> Energetic</label>
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>

使用padding布局页面标签:

所有的 HTML 元素本质上都是一些小矩形块,

有三个重要的属性控制每个HTML元素的布局：padding(内边距)、margin(外边距)、border(边框)

元素的 padding 控制元素与其边框 border 之间的距离

<style>
.injected-text {
margin-bottom: -25px;
text-align: center;
}

.box {
border-style: solid;
border-color: black;
border-width: 5px;
text-align: center;
}

.yellow-box {
background-color: yellow;
padding: 10px;
}

.red-box {
background-color: red;
padding: 20px;
}

.green-box {
background-color: green;
padding: 20px;
}
</style>
<h5 class="injected-text">margin</h5>

<div class="box yellow-box">
<h5 class="box red-box">padding</h5>
<h5 class="box green-box">padding</h5>
</div>

使用margin布局页面标签:

元素的 margin （外边距）控制元素 border （边框）和周围元素实际所占空间的距离

<style>
.injected-text {
margin-bottom: -25px;
text-align: center;
}

.box {
border-style: solid;
border-color: black;
border-width: 5px;
text-align: center;
}

.yellow-box {
background-color: yellow;
padding: 10px;
}

.red-box {
background-color: red;
padding: 20px;
margin: 20px;
}

.green-box {
background-color: green;
padding: 20px;
margin: 20px;
}
</style>
<h5 class="injected-text">margin</h5>

<div class="box yellow-box">
<h5 class="box red-box">padding</h5>
<h5 class="box green-box">padding</h5>
</div>

使用负值设置页面的margin属性:

将一个元素的 margin 设置为负值，则元素将会变大

<style>
.injected-text {
margin-bottom: -25px;
text-align: center;
}

.box {
border-style: solid;
border-color: black;
border-width: 5px;
text-align: center;
}

.yellow-box {
background-color: yellow;
padding: 10px;
}

.red-box {
background-color: red;
padding: 20px;
margin: -15px;
}

.green-box {
background-color: green;
padding: 20px;
margin: -15px;
}
</style>

<div class="box yellow-box">
<h5 class="box red-box">padding</h5>
<h5 class="box green-box">padding</h5>
</div>

为不同方向padding设置不同值:

CSS 允许你使用 padding-top、padding-right、padding-bottom 和 padding-left属性来控制元素四个方向的 padding

<style>
.injected-text {
margin-bottom: -25px;
text-align: center;
}

.box {
border-style: solid;
border-color: black;
border-width: 5px;
text-align: center;
}

.yellow-box {
background-color: yellow;
padding: 10px;
}

.red-box {
background-color: red;
padding-top: 40px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 40px;
}

.green-box {
background-color: green;
padding-top: 40px;
padding-left: 40px;
padding-bottom: 20px;
padding-right: 20px;
}
</style>
<h5 class="injected-text">margin</h5>

<div class="box yellow-box">
<h5 class="box red-box">padding</h5>
<h5 class="box green-box">padding</h5>
</div>

你还可以集中起来指定它们，如下所示：

padding: 10px 20px 10px 20px;

四个值以顺时针方式排列：顶部、右侧、底部、左侧，简称：上右下左。

CSS样式的继承:

 每一个HTML页面都有一个body元素,通过在<style>标签内对body元素样式进行设置可以证明

<style>
body {
    background-color: black;
}
</style>

CSS继承body元素样式:

可以像任何其他HTML元素一样对你的body元素应用样式，并且所有其他元素都将继承你的body元素的样式

<style>
body {
background-color: black;
color: green;
font-family: Monospace;
}

</style>
<h1>Hello World</h1>

CSS样式的覆盖:

优先级关系:   !important   >>>  内联样式   >>>   id   >>>   class  >>>   对标签设置样式

有时HTML元素会得到多个相互冲突的样式,可以在<style>中创建一个class设置样式,设置HTML元素的class名调用该样式.(这种方式优先级比直接对元素设置样式高,class的样式会覆盖后者的样式)

<style>
body {
background-color: black;
font-family: Monospace;
color: green;
}

.pink-text {
    color: pink;
}
</style>

<h1 class="pink-text">Hello World!</h1>
<!--最后h1文本呈现的颜色为粉色,因为pink-text的优先级更高-->

CSS多个class处理样式覆盖:

<style>标签中的class样式会从上往下按顺序执行,后面的样式会覆盖前面的,所以当一个HTML元素调用了多个class时,总是采用<style>中被调用的class中排在最后的class的样式.(HTML元素中class的顺序没有影响)

<style>
body {
background-color: black;
font-family: Monospace;
color: green;
}
.pink-text {
color: pink;
}

.blue-text {
    color: blue;
}
.white-text {
    color: white;
}
<!--只调用了两个class,以style标签中排在最后的class为基准-->
</style>
<h1 class="blue-text pink-text">Hello World!</h1>

通过ID的样式属性覆盖class类的声明:

先给HTML元素一个id,然后在style标签内对id进行样式化声明(id声明的位置没有影响),这种方式优先级比class声明更高,会覆盖该元素调用的所有class样式

<style>
body {
background-color: black;
font-family: Monospace;
color: green;
}
.pink-text {
color: pink;
}
#orange-text {
    color: orange;
}
.blue-text {
color: blue;
}

</style>
<h1 id="orange-text" class="pink-text blue-text">Hello World!</h1>

通过内联样式覆盖class类声明:

直接在HTML元素内部设置style属性,优先级比id样式声明更高,

<style>
body {
background-color: black;
font-family: Monospace;
color: green;
}
#orange-text {
color: orange;
}
.pink-text {
color: pink;
}
.blue-text {
color: blue;
}
</style>
<h1 id="orange-text" class="pink-text blue-text" style="color:white;">Hello World!</h1>

使用important覆盖其他所有样式:

在许多情况下，您将使用CSS库。这些可能会意外覆盖您自己的CSS。所以当你绝对需要确定一个元素具有特定的CSS时，可以使用 !important

<style>
body {
background-color: black;
font-family: Monospace;
color: green;
}
#orange-text {
color: orange;
}
.pink-text {
color: pink !important;
}
<!--!important用法如上-->
.blue-text {
color: blue;
}
</style>
<h1 id="orange-text" class="pink-text blue-text" style="color: white">Hello World!</h1>

CSS使用十六进制码设置特定颜色:

hex code（十六进制代码） 遵循 red-green-blue（红-绿-蓝），或者叫 rgb 格式。hex code 中的前两位表示颜色中红色的数量，第三四位代表绿色的数量，第五六位代表蓝色的数量。

所以要得到绝对的纯红色，你只需要在第一和第二位使用 F （最大可能的数值），且在第三、第四、第五和第六位使用 0 （最小可能数值）.

红色的十六进制码 #FF0000 可以缩短为 #F00。这个缩写形式给出一个数字为红色，一个数字为绿色，一个数字为蓝色

常用的颜色:

RGB	十六进制码	颜色
rgb(0,0,0)	#000000	黑色
rgb(255,255,255)	#FFFFFF	白色
rgb(255,0,0)	#FF0000	红色
rgb(0,255,0)	#00FF00	绿色
rgb(0,0,255)	#0000FF	蓝色
	#808080	灰色
	#111111	深灰色