Web前端日记_01

6月30日:

             DOM:文档对象模型.

    CSS能控制以下样式:

• 颜色 color
• 背景 background
• 字体 font
• 位置 position
• 显示 display
• 边框 border
• 内边距 padding
• 外边距 margin
• 行高 line-height
• 装饰 text-decoration
• 过渡 transtion
• 变化 transform
• 动画 animation

    CSS 样式主要有三种方式：

• 内联样式--你可以直接在 HTML 元素里使用style属性。
• 内部样式--你可以在style标签里面声明样式规则。
• 外部样式--你可以创建一个.css文件，然后在文件中编写样式规则，最后在文档中引用该文件。

   选择器:

          CSS 的class具有可重用性，可应用于各种 HTML 元素。

          一个 CSSclass声明示例，如下所示：

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

           可以看到，我们在<style>样式声明区域里，创建了一个名为blue-text的class选择器。

          你可以将 CSSclass选择器应用到一个HTML元素里，如下所示：

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

          注意：在style样式区域声明里，class需以.开头。

          通过 CSS class 选择器，多个 HTML 元素可以使用相同的 CSS 样式规则。

 

字体大小由font-size属性控制，如下所示：

h1 {
  font-size: 30px;
}

 

通过font-family属性，可以设置元素里面的字体样式。

如果你想设置h2元素的字体为sans-serif，你可以用以下的 CSS 规则：

h2 {
  font-family: sans-serif;
}

 

所有浏览器都有几种默认字体。这些通用字体包括monospace，serif和sans-serif。

当字体不可用，你可以告诉浏览器通过 “降级” 去使用其他字体。

例如，如果你想将一个元素的字体设置成Helvetica，当Helvetica不可用时，降级使用sans-serif字体，那么可以这样写：

p {
  font-family: Helvetica, sans-serif;
}

通用字体名字不区分大小写。同时，也不需要使用引号，因为它们是 CSS 关键字。

CSS 的width属性可以控制元素的宽度。图片的width宽度类似于字体的px（像素)值。

 CSS 边框具有style，color和width属性。

图片边角很尖锐，我们可以使用border-radius属性来让它变得圆润。border-radius可以用px像素单位来赋值,除像素外，也可以使用百分比来指定border-radius的值。

background-color属性可以设置元素的背景颜色。