文章目录
Front End Development Certification
HTML5 & CSS
注释
<!--
-->
style 的组织方式
- inline
<h2 style="color:blue">
xxx
</h2>
- CSS (Cascading Style Sheets) selectors
记住这里的冒号和分号
<style>
h2 {
color: red;}
</style>
<h2>
xxx
</h2>
- CSS Class Selector
定义的时候前面必须加 .
,使用的时候不要加 .
;这是为了在定义的时候区分自定义 CSS Class 和内置
<style>
.red-text {
color: red;
}
</style>
<h2 class="red-text">
xxx
</h2>
style 的种类
- color
- font-size:
font-size: 16px;
- font-family:
font-family: Sans-serif;
字体 - width
- background-color
- text-align
- style
关于字体
可以使用 font-family
修改字体,例如
- Sans-serif
- Monospace
- Lobster (需要在页面最前面添加
<link href="https://fonts.gdgdocs.org/css?family=Lobster" rel="stylesheet" type="text/css">
)
h2 {
font-family: Lobster, Monospace;
}
image image 是自关闭元素,不需要在结尾
<img src="..." alt="xxx">
将多个 class 应用于同一个元素 <img class="class1 class2">
alt 在图片不能显示的时候进行显示
border 边框
<style>
.thin-red-border {
border-color: red;
border-width: 5px;
border-style: solid;
border-radius: 10px;
}
</style>
CSS 边框的属性有style(样式)、color(颜色)、width(宽度)、height(高度)等。
border-radius
也可以使用 xx%
link
<a href="http://freecodecamp.cn"> link to FreeCodeCamp中文社区 </a>
在不知道应该 link 到什么链接到时候,可以使用 #
可以使用 <a></a>
去嵌套 <img>
unordered list
<ul>
<li>milk</li>
<li>cheese</li>
</ul>
ordered list
<ol>
<li>Garfield</li>
<li>Sylvester</li>
</ol