咱们一起来聊一聊HTML基础_2

HTML基础_2

  • css样式:
    • 如何使用样式
      • 外部表样式:
      • 内部表样式:
      • 内联样式:
    • HTML 链接 - target 属性
    • 替换文本属性(Alt)
    • 设置背景图片
    • 文字中排列图像
    • div是一个块级元素

咱们一起来聊一聊HTML基础_2_第1张图片
这部分主要聊一聊css样式的一些知识

css样式:

        
        
        
        
        

header 1

A paragraph.

如何使用样式

当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化。有以下三种方式来插入样式表:

外部表样式:

当样式需要被应用到很多页面的时候,外部样式表将是理想的选择。使用外部样式表,你就可以通过更改一个文件来改变整个站点的外观。

    
    

内部表样式:

当单个文件需要特别样式时,就可以使用内部样式表。你可以在 head 部分通过 style 标签定义内部样式表

<head>
   <style type="text/css">
    body {background-color: red}
    p {margin-left: 20px}
   </style>
</head>

内联样式:

    <p style="color: red; margin-left: 20px">
         This is a paragraph
    </p>



HTML 链接 - target 属性

使用 Target 属性,你可以定义被链接的文档在何处显示。
设置为 targrt="_blank"
下面的这行会在新窗口打开文档:
<a href="http://www.baidu.com.cn/" target="_blank">Visit W3School!</a>


替换文本属性(Alt)

alt 属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。

  <img src="boat.gif" alt="Big Boat">



设置背景图片

<body background="/i/eg_background.jpg"></body>

文字中排列图像

请注意,bottom 对齐方式是默认的对齐方式
align 属性设置为 “left”。图像将浮动到文本的左侧。
align 属性设置为 “right”。图像将浮动到文本的右侧。

 <p>图像 <img src="/i/eg_cute.gif" align="bottom"> 在文本中</p>

通过改变 img 标签的 “height” 和 “width” 属性的值,您可以放大或缩小图像。

 <img src="/i/eg_mouse.jpg" width="50" height="50">

图片也可以嵌套为连接使用。



div是一个块级元素

作用的样式可以以块为单位

HTML  元素是行内元素,能够用作文本的容器。
设置  元素的类,能够为相同的  元素设置相同的样式。
  <style>
            span.red {color:red;}
  </style>
      ...
        <body>
             <h1>My <span class="red">Important</span> Heading</h1>
        </body>

到这里,HTML基础_2就结束啦




大家可以点个赞或者去我的github博客支持一下博主。
感谢浏览!

你可能感兴趣的:(HTML)