Day02.HTML和CSS实现标题样式

新闻标题样式排版

知识点一：

CSS引入方式：

• 行内样式：写在标签的style属性中（不推荐）

<h1 style="xxx: xxx; xxx: xxx;">中国新闻网</h1>

• 内嵌样式：写在style标签中（可以写在页面任何位置，但通常约定写在head标签中）

<style>
  h1 {
     xxx: xxx; 
     xxx: xxx;
  }
</style>

• 外联样式：写在一个单独的.css文件中（需要通过 link 标签在网页中引入）

h1 {
   xxx: xxx; 
   xxx: xxx;
}

<link rel="stylesheet" href="css/news.css">

举例说明:(调节标题颜色三种方式）

注意：使用外联样式时一定要写一个单独的.css文件，如下图

在css文件夹中创建.css文件

最后效果展示：

知识点二：

1.CSS选择器：用来选取需要设置样式的元素(标签)

• 元素选择器：标签名 { … }
• id选择器：#id属性值 { … } 类选择器：
• .class属性值 { … }
• 优先级：id选择器 > 类选择器 > 元素选择器

2.<span>标签：

• <span> 是一个在开发网页时大量会用到的没有语义的布局标签
• 特点：一行可以显示多个(组合行内元素)，宽度和高度默认由内容撑开

3.CSS属性

• color：设置文本的颜色
• font-size：字体大小 （注意：记得加px）

最后页面展示：