FCC HTML5 and CSS5 标记

来源:互联网 发布:淘宝上的狗狗疫苗 编辑:程序博客网 时间:2024/06/17 10:16

1.可以通过删除<!---->来删除注释。

2. 修改文本颜色(用样式) <h2 style="color: blue">CatPhotoApp</h2>    //修改h2的颜色为蓝色   这是在h2中添加了一个内联样式

3. 内联样式是为元素添加样式的最简单有效的方式,但是更易于维护的方式是使用层叠样式表CSS(Cascading Style Sheets)。 元素选择器

     <style>
  选择器 {属性名称: 属性值;}
  h2 {color: red;}
</style>

用CSS来选择和控制样式元素

4. 类选择器

<style><h2 class="blue-text">CatPhotoApp</h2> 通过类选择器更好的控制元素
  .blue-text {
    color: blue;
  }
</style>  

类选择器的使用

5.你可以在 HTML 元素的开始标记中通过使用class="your-class-here"来将 class 附加到相关元素中。

6.文本文字大小控制  

字号是由样式属性font-size来控制的, 如下:

h1 {
  font-size: 30px;
}
7.设置元素字体 font-family属性来设置元素的字体。
8. 设置图片大小   CSS包含一个控制元素宽度的width属性。像控制字体一样,我们使用px(像素)来指定图片的宽度。
例如,如果我们想要创建一个名为larger-image的类选择器,把HTML元素的宽度设定为500像素,我们使用:
<style>
  .larger-image {
    width: 500px;
  }
</style>
9.添加元素边框 CSS 边框的属性有style(样式)、color(颜色)、width(宽度)、height(高度)等。
添加元素边框
10. a元素,也叫anchor(锚点)元素,既可以用来链接到外部地址实现页面跳转功能,也可以链接到当前页面的某部分实现内部导航功能。
元素连接外部或者内部导航
11.给图片添加一个Alt属性 alt属性,也被称为alt text, 是当图片无法加载时显示的替代文本。alt属性对于盲人或视觉损伤的用户理解一幅图片中所描绘的内容非常重要,搜索引擎也会搜索alt属性。

你可以像下面例子中一样为img元素添加一个alt属性:

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

12. 创建一个无序列表

HTML有一个特殊元素,用于创建unordered lists(无序列表), 或带项目符号的列表。

无序列表以<ul>元素开始,并包含一个或多个<li>元素。

13.创建一个有序列表   方法上同

14.创建一个文本输入框   <input type="text">

15.给元素设置ID属性 <h2 id="cat-photo-app">

16.在你的 style 元素内部,定义类选择器必须添加 . 为前缀,定义ID选择器必须添加 # 为前缀。  

17.调整元素的填充(padding)

设置元素的填充

18. 如果你将一个元素的margin 设置为负值,元素将会变大。

19. 

padding: 10px 20px 10px 20px;

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



原创粉丝点击