zoukankan      html  css  js  c++  java
  • Web基础及常用CSS(层叠样式表) 属性

    1. XHTML 3种定义:严格的(strict)、过渡的(transitional)、框架的(frameset)。

     
    2. DOCTYPE — 文档类型声明
        head — 文件头部
        boby — 文件主体 
     
    3. 网页结构的标签
    • 文档标签 <html></html>
    • 页面的头标签 <head></head>
    • 页面的标题标签 <title></title>
    • 主题标签 <boby></boby>
     
    4. HTML 标签
    • 标题标签 <hn></hn>
    • 段落标签 <p></p>
    • 换行标签 <br/>  (单标签)
    • 水平线标签 <hr/> (单标签)
    • 原样显示标签 <pre></pre>
    • 居中对齐标签 <center></center>
    • 文字格式标签 <font></font>
    • 注释标签 <!-- 注释内容 -->
    • 滚动标记 <marquee></marquee>
    • 物理类型标签、逻辑类型标签 及 特殊符号
     
    5. 列表
    •  无序列表 <ul></ul>
    • 有序列表 <ol></ol>
    • 定义性列表 <dl></dl>
          同时使用<dt></dt>、<dd></dd>标签。术语由<dt>标签指定,说明由<dd>标签指定。
     
    6. 表格 <table>
    • <tr> 行
    • <td> 列
      • colspan 属性规定单元格可横跨的列数;
      • rowspan 属性规定单元格可横跨的行数;

    7. CSS样式表

    • 行间样式表:是指将 CSS样式编码写在 XHTML标签中;
    • 内部样式表:将 CSS写在<head>与</head>之间,
      • 基本语法如下:
        <style type="text/css" >
        . .
        . .
        . .
        </style>
    • 外部样式表
      • 基本语法如下:
        /*在 CSS文件中*/
        @charset "utf-8"
        /* CSS DOcument */
        /*在 HTML文件中*/
        <link rel="stylesheet" type="text/css" href="路径/名称.css">

         

    CSS 尺寸属性

    • width:元素宽度,一定要加 px 单位。
    • height:元素高度,一定要加 px 单位。
     
    CSS 字体属性
    • font-size:文字大小。如:font-size:14px;
    • font-family:字体。如:font-family:"微软雅黑";
    • font-style:斜体,取值:italic。如:font-style: italic;
    • font-weight:粗体,取值:bold。如:font-weight: bold;
     
    CSS 文本属性
    • color:文本颜色。
    • text-decoration:文本修饰线,取值:none(无)、underline(下划线)、overline(上划线)、line-through(删除线)。
    • text-align:文本水平对齐方式,取值:left(左)、center(中)、right(右)。
    • line-height:行高,可以用固定值。也可以用百分比。如:line-height:24px;  line-height:150%;
    • text-indent:首行缩进。如:text-indent :28px;
    • letter-spacing:字间距。
     
    CSS列表属性
    • link-style:列表样式,取值 none。去掉项目前面的各种符号。
     
    CSS 边框属性
    • border:同时给四个边加边框线。
      • border-top:上边框线;
      •  border-bottom:下边框线;
      • border-left:左边框线;
      • border-right:右边框线;
    • 格式:border:线的粗细 线型 线的颜色
      • 线型:none(无线)、solid(实线)、dashed(虚线)、dotted(点状线) 等;
     
    CSS内外边距
    • 内边距:padding  边框线到内容间的距离
      • 缩写形式:
        • padding:10px;  //四个边的内填充分别为10px;
        • padding:10px 20px;  //上下为10px,左右为20px;
        • padding:10px 20px 30px;  //上为10px,左右为20px,下为30px;
        • padding:10px 20px 30px 40px;  //上为10px,右为20px,下为30px,左为40px(上右下左);
        • padding: 0px auto;  //上下内边距为0px,左右内边距自动。
    • 外边距:margin  边线往外的距离(属性同上)。

    8. CSS伪类选择器:(给超链接加的样式)

      一个超链接有四种状态:
    • 正常状态( link ):鼠标没放上链接之前的样式;
    • 放上状态( hover ):鼠标放到链接上时的样式;
    • 激活状态( active ):按住鼠标左键不松开的样式(这个状态特别短暂);
    • 访问过的状态( visited ):按下鼠标左键并弹起的样式;
     例如:
    a:link,a:visited{color:#222;text-decoration:none;} //将"正常状态"和"访问过的状态"合二为一(依情况而定);
    a:hover{color:#666;text-decoration:underline;} //"鼠标放上"时的效果;
  • 相关阅读:
    JavaScript学习心得(六)
    JavaScript学习心得(五)
    JavaScript学习心得(四)
    JavaScript学习心得(三)
    JavaScript学习心得(二)
    JavaScript学习心得(一)
    socket异步接收信息
    DataTable将行转成列
    highcharts的柱状图边线
    w3cSchool jquery学习
  • 原文地址:https://www.cnblogs.com/wq-code/p/6631491.html
Copyright © 2011-2022 走看看