HTML基础_2

HTML

HTML基础_2
这部分主要聊一聊css样式的一些知识

css样式：

1
2
3
4
5
6
7
8
9
10
11
<head>
     <style type="text/css">
     h1 {color: red}
     p {color: blue}
     </style>
</head>
     
   <body>
     <h1>header 1</h1>
     <p>A paragraph.</p>
   </body>

如何使用样式

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

外部表样式：

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

1
2
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

内部表样式：

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

1
2
3
4
5
6
<head>
   <style type="text/css">
    body {background-color: red}
    p {margin-left: 20px}
   </style>
</head>

内联样式：

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



HTML 链接 - target 属性

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


替换文本属性（Alt）

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

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



设置背景图片

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

文字中排列图像

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

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

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

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

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



div是一个块级元素

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

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

==到这里，HTML基础_2就结束啦==




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

本文标题:HTML基础_2

文章作者:Mr.AZ

发布时间:2020年04月15日 - 23时34分

最后更新:2020年04月16日 - 00时09分

原始链接:https://oldaz.github.io/2020/04/15/HTML%E5%9F%BA%E7%A1%80_2/

许可协议: "署名-非商用-相同方式共享 3.0" 转载请保留原文链接及作者。

文章目录
  1. 1. css样式：
    1. 1.1. 如何使用样式
      1. 1.1.1. 外部表样式：
      2. 1.1.2. 内部表样式：
      3. 1.1.3. 内联样式：
    2. 1.2. HTML 链接 - target 属性
    3. 1.3. 替换文本属性（Alt）
    4. 1.4. 设置背景图片
    5. 1.5. 文字中排列图像
    6. 1.6. div是一个块级元素
,