zoukankan      html  css  js  c++  java
  • CSS声明1

    border

    box

    背景图片

    背景色

    以上四个CSS基础知识简介总结过

    文本格式化:

    控制字体

    控制文本格式

    表格样式:

    表格常用样式属性

    表格特有样式属性

    控制字体

    font-famaily:value1,value2;

    字体大小:

    font-size:value;

    字体加粗:

    font-weight:normal;

    控制文本格式:

    文本颜色:

    color:value;

    文本排列:

    text-align:left/right/center;

    文字修饰:

    text-decoration:none/underline

    行高:

    line-height:value(1.6em)

    有行文本缩进:

    text-indent:value(2em)

    <!doctype html>
    <html>
      <head>
        <title>文本格式化</title>
        <meta charset="utf-8"/>
        <style type="text/css">
          body {
            font-family: '微软雅黑','文泉驿正黑','黑体';
          }
          h1 {
            font-size:50px;
          }
          p {
            font-weight: bold;
          }
          h1 {
            text-align: center;
          }
          p {
            text-decoration: underline;
            line-height: 1.6em;
            text-indent: 2em;
          }
          p {
            height:50px;
            border:1px solid red;
            line-height: 50px;
          }
        </style>
      </head>
      <body>
        <h1>小泽老师</h1>
        <p>小泽,IOS美女老师。</p>
      </body>
    </html>
    

      

    表格样式:

    表格样式常用属性:

    表格同样可以使用box模型以及文本格式化属性

    表格特有样式属性:

    border-collapse属性:合并相邻的边框

    设置表格边框合并为单一边框

    border-collapse;separate/collapse;

    <!doctype html>
    <html>
      <head>
        <title>表格样式</title>
        <meta charset="utf-8"/>
        <style type="text/css">
          #t1 {
            200px;
            border:1px solid #f00;
            padding:10px;
            margin:30px auto;
            border-collapse: collapse;
          }
          #t1 td {
            border:1px solid #00f;
            padding:10px;
          }
        </style>
      </head>
      <body>
        <h1>1.表格适用box模型</h1>
        <table id="t1">
          <tr>
            <td>aaa</td>
            <td>bbb</td>
          </tr>
          <tr>
            <td>ccc</td>
            <td>ddd</td>
          </tr>
        </table>
      </body>
    </html>
    

      

  • 相关阅读:
    立体匹配算法(转载)
    校招总结
    tcpip概述
    Matlab2014a 提示未找到支持的编译器或 SDK的解决方法
    CSS3 实现简单轮播图
    css3实现switch开关效果
    Sass的使用和基础语法
    Git的安装和使用记录
    jQuery淡入淡出效果轮播图
    JavaScript焦点轮播图
  • 原文地址:https://www.cnblogs.com/xiaziteng/p/4862280.html
Copyright © 2011-2022 走看看