手把手教你写CSS行内样式与内联样式

style行内样式表，写在标签内部；
行内样式表里面的属性也是成对出现的，每一对属性之间用分号分隔（英文的）。
学会了一些属性如:
boder-radius，可以使按钮的四个角变为圆弧;
text-decortation文本下划线;
text-align文本的位置;
line-height行高等属性;

下面是行内样式表的写法：

这一部分学习运用CSS和div将html区块化，以下是做的一个小练习

内联样式: 由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。要使用内联样式，你需要在相关的标签内使用样式（style）属性。

1. 直接在元素上通过 :style 的形式，书写样式对象

这是一个善良的H1

  

        
        
这是一个善良的h1
    
    
    
    

2. 将样式对象，定义到 data 中，并直接引用到 :style 中

• 在data上定义样式：

data: {
h1StyleObj: { color: 'red', 'font-size': '40px', 'font-weight': '200' }
}

• 在元素中，通过属性绑定的形式，将样式对象应用到元素中：

这是一个善良的H1

3. 在 :style 中通过数组，引用多个 data 上的样式对象

• 在data上定义样式：

data: {
h1StyleObj: { color: 'red', 'font-size': '40px', 'font-weight': '200' },
h1StyleObj2: { fontStyle: 'italic' }
}

• 在元素中，通过属性绑定的形式，将样式对象应用到元素中：

这是一个善良的H1
    
        
    

          
            
这是一个善良的h1