前端入门-- CSS

CSS 是什么？

用来定义页面元素的样式

• 设置字体和颜色
• 设置位置和大小
• 添加动画效果

 

 

 

选择器 Selector
找出页面中的元素，以便给他们设置样式
使用多种方式选择元素
按照标签名、类名或 id
按照属性
按照 DOM 树中的位置
通配选择器 ：*
<h1>This is heading</h1>
<p>this is some paragraph.</p>

<style>
* {
  color: red;
  font-size: 20px;
}
</style>
1
2
3
4
5
6
7
8
9
运行效果：

2. 标签选择器：通过标签名选择元素。

<h1>This is heading</h1>
<p>this is some paragraph.</p>

<style>
h1 {
  color: orange;
}

p {
  color: gray;
  font-size: 20px;
}
</style>
 

3. id 选择器：通过id属性选择元素，id值必须是唯一的，#id。

<header>
  <h1 id="logo">
    <img src="/h5.png" width="64"
      alt="HTML5 logo">
    HTML5 文档
  <h1>
</header>
<style>
  #logo {
    font-size: 60px;
    font-weight: 200;
  }
</style>
1
2