zoukankan      html  css  js  c++  java
  • 关于html、css那些事

    html :不是一种编程语言、而是一种标记语言、

    html:是通过 <h1> - <h6> 等标签进行定义的

    例如:

    <h1>This is a heading</h1>
    <h2>This is a heading</h2>
    <h3>This is a heading</h3>
    html 段落是通过 <p> 标签进行定义的、

    这个 <p> 元素定义了 HTML 文档中的一个段落。

    这个元素拥有一个开始标签 <p>,以及一个结束标签 </p>。

    例如:
    <p>This is a paragraph.</p>
    <p>This is another paragraph.</p>
    html 链接是通过 <a> 标签进行定义的
    例如:
    <a href="http://www.w3school.com.cn">This is a link</a>
    html 图像是通过 <img> 标签进行定义的
    <img src="w3school.jpg" width="104" height="142" />
    <body> 元素定义了 HTML 文档的主体。

    这个元素拥有一个开始标签 <body>,以及一个结束标签 </body>。

    元素内容是另一个 HTML 元素(p 元素)。
    列表定义

    <p>无序列表</p>

    <ui>

       <li>编写文件</li>

    </ui>

    <p>有序列表</p>

    <ol>

       <li>编写文件</li>

    </ol>

    <p>定义列表</p>

    <dl>

    <dt>猫</dt>

    <dd>一个奴役自己的动物</dd>

    </dl>

    表格

    表格由 <table> 标签来定义。每个表格均有若干行(由 <tr> 标签定义),每行被分割为若干单元格(由 <td> 标签定义)表格的表头使用 <th> 标签进行定义

    例如:

    <table border="1">
    <tr>
    <th>Heading</th>
    <th>Another Heading</th>
    </tr>
    <tr>
    <td>row 1, cell 1</td>
    <td>row 1, cell 2</td>
    </tr>
    <tr>
    <td>row 2, cell 1</td>
    <td>row 2, cell 2</td>
    </tr>
    </table>

    CSS 语法

    CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明

    id 选择器

    id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。

    id 选择器以 "#" 来定义

    注意:id 属性只能在每个 HTML 文档中出现一次

    和 id 一样,class 也可被用作派生选择器

    外部样式表

    当样式需要应用于很多页面时,外部样式表将是理想的选择。在使用外部样式表的情况下,你可以通过改变一个文件来改变整个站点的外观。每个页面使用 <link> 标签链接到样式表。<link> 标签在(文档的)头部:

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

    当单个文档需要特殊的样式时,就应该使用内部样式表。你可以使用 <style> 标签在文档头部定义内部样式表,就像这样:

    <head>
    <style type="text/css">
      hr {color: sienna;}
      p {margin-left: 20px;}
      body {background-image: url("images/back40.gif");}
    </style>
    </head>
    
    链接的四种状态:

    a:link - 普通的、未被访问的链接

    a:visited - 用户已访问的链接

    a:hover - 鼠标指针位于链接的上方

    a:active - 链接被点击的时刻

    要修改用于列表项的标志类型,可以使用属性 list-style-type

    表格宽度和高度

    通过 width 和 height 属性定义表格的宽度和高度。

    table
      {100%;
      }
    
    th
      {height:50px;
      }
    
    text-align 属性设置水平对齐方式,比如左对齐、右对齐或者居中
    vertical-align 属性设置垂直对齐方式,比如顶部对齐、底部对齐或居中对齐
    CSS 框模型
    元素框的最内部分是实际的内容,直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距,外边距默认是透明的,因此不会遮挡其后的任何元素

    内边距、边框和外边距都是可选的,默认值是零。但是,许多元素将由用户代理样式表设置外边距和内边距。可以通过将元素的 margin 和 padding 设置为零来覆盖这些浏览器样式。这可以分别进行,也可以使用通用选择器对所有元素进行设置:

    * {
      margin: 0;
      padding: 0;
    }
    
    CSS 框模型实例
    #box {
       70px;
      margin: 10px;
      padding: 5px;
    }

    CSS 浮动实例 2 - 向左浮动的元素
    在 CSS 中,我们通过 float 属性实现元素的浮动。

     

  • 相关阅读:
    gin解决CORS跨域问题
    线程Demo演示
    委托调用匿名方法
    扩展的使用
    DataGridView使用技巧(七、设定列宽和行高自动调整).NET
    url post 请求方法
    记录系统日志方法
    TSQL查询进阶理解SQL Server中索引的概念,原理以及其他
    MongoDB单节点转换成复制集
    MySQL主从架构小版本升级
  • 原文地址:https://www.cnblogs.com/sun1990/p/3655526.html
Copyright © 2011-2022 走看看