1.标题标签：<h1> </h1>

2.段落标签：<p> </p>

3.水平线标签：<hr/>

一.CSS 介绍

CSS 可以对网页（html）进行修饰,美化，改变字体大小颜色，间距和加入边框等。

文章目录

一、写在前面

如果要给一个html标签添加样式，使其变个更加美观。那么就要先选中它。否则鬼才知道你要给谁加样式呢。

在设计器中，大家拾取网页元素后，在右侧的属性栏里都会有一个叫“查找路径”的选择框，一般也很少有人用到，打开后里面显示了一堆‘@ #￥#%#￥@ *T&’的玩意 ，那么这个“查找路径”到底是个什么呢？有何用途？

设计器中的“查找路径”中显示的其实就是 cssSelector，是一种常用的选择器。简而言之，可以理解为通过 cssSelector 定位到你需要找到的页面元素。当然，一个页面元素（比如本例中的百度按钮）肯定不止一种方式的 cssSelector，通过上图可以发现有好几个，那么这些代码具体分别代表什么意思，继续往下看！

CSS也是我们常叫的样式表、通俗叫切图和静态网页布局。我们知道HTML网页是由若干标签和内容组成。标签包括了div标签、span标签、a锚文本标签、strong加粗标签、b加粗标签、p段落标签、br换行标签等组成。而好看的网页样式却是CSS控制得出。一个完整漂亮网页，就是由html标签与控制这些标签布局和美化功能CSS组成。

一、什么是节点

 回顾概念:
 文档:document
 元素:页面中所有的标签,元素---element, 标签----元素---对象
 节点:页面中所有的内容(标签,属性,文本(文字,换行,空格,回车)),Node
 根元素:html标签

在正式演示文本段落组件Span之前，我想建立一个列表导航页面，方便随时跳转到相应的组件演示页面。

1.建立页面导航

将上一小节演示Text组件的index.ets页面复制粘贴为TextSample.ets页面。修改index.ets页面的代码为：

@Extend(Text) function li() {
  .fontColor($r("app.color.fgLevel1"))
  .fontSize($r("app.float.fontSizeSubTitle1"))
  .fontWeight(Number($r("app.float.fontWeightSubTitle1")))
}

@Entry
@Component
struct Index {
  build() {
    Column({space:8}) {
      Text('第3章 基础组件')
        .fontColor($r("app.color.fgLevel1"))
        .fontSize($r("app.float.fontSizeH6"))

      Navigator({ target: 'pages/TextSample', type: NavigationType.Push }) {
        Text('1.Text组件').li()
      }
      Navigator({ target: 'pages/SpanSample', type: NavigationType.Push }) {
        Text('2.Span组件').li()
      }
    }
    .width('100%')
    .height('100%')
    .padding({top: $r("app.float.spaceTop"), bottom:$r("app.float.spaceBottom"), left:$r("app.float.spaceLeft"), right: $r("app.float.spaceRight")}) // 屏幕边缘间隔
    .backgroundColor($r("app.color.appBg")) // App背景颜色
    .alignItems(HorizontalAlign.Start)
  }
}

在以往的页面布局中，可能我们使用像素（px）这个长度单位是最多的。但是随着Web技术的发展，出现了移动端页面，因此需要找寻既适应PC端又需要在移动端完美展示的解决方案，这样对于网页的设计就有了更高的要求，于是响应式布局也出现了，它的出现使得我们设计的网页可以适配多种设备，例如：电脑、手机、平板等等。如果没有合理的使用长度单位，那么不同设备之间的展示效果会完全不一样，甚至可能会造成页面错乱，所以，也深入的了解了一下相关的长度单位在页面中的作用，在这里做了一下总结。

一、什么是节点

 回顾概念:
 文档:document
 元素:页面中所有的标签,元素---element, 标签----元素---对象
 节点:页面中所有的内容(标签,属性,文本(文字,换行,空格,回车)),Node
 根元素:html标签