样式

  1. 行间样式:在标签里

    <div style="width:400px; height:200px; background:red;">块</div>
  2. 内部样式:用<style></style>标签包裹
    <style>
    #box{width:400px; height:200px; background:red;}
    </style>
  3. 外部样式:<link />标签
    <link href="style.css" rel="stylesheet"/>

常见样式:[属性:属性值;]

  1. width 宽度
  2. height 高度
  3. background 背景
  4. border 边框
  5. padding 内边距
  6. margin 外边距

复合属性:一个属性多个属性值。background,border,padding,margin

  1. background

    <style>
    #bg{
    background:url(bg.jpg) center 0 no-repeat gray fixed;
    /*
    background-attachment: fixed; 背景是否滚动
    background-color: gray; 背景颜色
    background-image: url(bg.jpg); 背景图
    background-repeat: no-repeat; 背景图是否重复
    background-position: center 0px; 背景图位置
    */
    }
    /*
    复合属性:一个属性多个属性值; background 背景
    repeat 重复
    10px(X轴) 50px(Y轴)
    fixed 固定
    */
    </style>
  2. border
    <style>
    #box{
    border:1px dotted blue;
    /*
    宽度
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    样式
    border-top-style: dotted;
    border-right-style: dotted;
    border-bottom-style: dotted;
    border-left-style: dotted;
    颜色
    border-top-color: blue;
    border-right-color: blue;
    border-bottom-color: blue;
    border-left-color: blue;
    */
    }
    /*
    边框样式:
    solid 实线
    dashed 虚线
    dotted 点线(IE6不兼容)
    */
    </style>
  3. padding
    <style>
    #box{padding:30px 30px 10px 30px;}
    /*
    padding: top right bottom left; padding-top:30px;
    padding-right:30px;
    padding-bottom:30px;
    padding-left:30px; padding:30px;上右下左都一样
    padding:30px 25px;上下一样,左右一样
    padding:30px 5px 25px;左右一样 注意:内边距相当于给一个盒子加了填充厚度会影响盒子大小。
    */
    </style>
  4. margin
    <style>
    #box1{ margin: 20px 20px 20px 20px;}
    /*
    margin 外边距(跟padding一样)
    外边距复合:margin: top right bottom left; 外边距的问题:
    1、上下外边距会叠压;
    2、父子级包含的时候子级的margin-top会传递给父级;(内边距替代外边距)
    */
    </style>

常见样式文本:

  1. font-size 文字大小(一般均为偶数)

  2. font-family 字体(中文默认宋体)
  3. color 文字颜色(英文、rgb、十六位进制色彩值)
  4. line-height 行高
  5. text-align 文本对齐方式
  6. text-indent 首行缩进(em缩进字符)
  7. font-weight 文字着重
  8. font-style 文字倾斜
  9. text-decoration 文本修饰
  10. letter-spacing 字母间距
  11. word-spacing 单词间距(以空格为解析单位)

font:font-style | font-weight | font-size/line-height | font-family;

xhtml+css基础知识1的更多相关文章

  1. (转)第一天 XHTML CSS基础知识 文章出处:标准之路(http://www.aa25.cn/div_css/902.shtml)

    欢迎大家学习<十天学会web标准>,也就是我们常说的DIV+CSS.不过这里的DIV+CSS是一种错误的叫法,建议大家还是称之为web标准. 学习本系列教程需有一定html和css基础,也 ...

  2. DIV+CSS专题:第一天 XHTML CSS基础知识

    欢迎大家学习<十天学会web标准>,也就是我们常说的DIV+CSS.不过这里的DIV+CSS是一种错误的叫法,建议大家还是称之为web标准.   学习本系列教程需有一定html和css基础 ...

  3. Web标准:一、xhtml css基础知识

    说明:这些知识是我看<十天学会DIV+CSS教程完整版 完美整理+完整代码>这篇文章后记下来的一些内容,包括少部分不懂得地方去百度到的一些解释等,该文章的地址: http://wenku. ...

  4. 前端开发:css基础知识之盒模型以及浮动布局。

    前端开发:css基础知识之盒模型以及浮动布局 前言 楼主的蛮多朋友最近都在学习html5,他们都会问到同一个问题 浮动是什么东西?  为什么这个浮动没有效果?  这个问题楼主已经回答了n遍.今天则是把 ...

  5. CSS基础知识之float

    前段时间写过一篇CSS基础知识之position,当时对float的理解不太准确,被慕课网多名读者指出(原文已修正,如有误导实在抱歉).现对float进行更深入的学习,在此把学习心得分享给大家. 浮动 ...

  6. CSS基础知识之position

    最近在慕课网学习了 网页布局基础 和 固定层效果 ,都是由声音甜美的 婧享人生 老师所录制,视频详细讲解了CSS中position的用法,在此把学习笔记分享给大家. CSS定位机制 标准文档流(Nor ...

  7. 【CSS】 CSS基础知识 属性和选择

    css基础知识 html的基本标签都是千篇一律的,为了能够个性化外观,就需要进行样式的调整,而css就是专门用来维护,管理样式的一种格式.在html中定义css有三种方法 1. 为标签添加style属 ...

  8. CSS基础知识01

    一.CSS基础知识介绍 1.css是cascading style sheet层叠式样式表的简写 2.css小用法 加粗:font-weight:bold;             正常用:norma ...

  9. 〖前端开发〗HTML/CSS基础知识学习笔记

    经过一天的学习,把慕课网的HTML/CSS基础知识学完了,笔记整理: 1. 文件结构: HTML文件的固定结构: <html> <head>...</head> & ...

随机推荐

  1. javac 命令

    HelloWorld.java:1: 需要为 class.interface 或 enum 锘缝ublic class HelloWorld{ ^ 1 错误 这个错误出现的原因主要是在中文操作系统中, ...

  2. Using Eclipse With CloudStack

    As part of switching to Apache Maven for building CloudStack, the .classpath and .project files used ...

  3. poj3250 Bad Hair Day

    Description Some of Farmer John's N cows (1 ≤ N ≤ 80,000) are having a bad hair day! Since each cow ...

  4. HttpRequest类

    一.HttpRequest的作用 HttpRequest的作用是令到Asp.net能够读取客户端发送HTTP值.比如表单.URL.Cookie传递过来的参数. 返回字符串的那些值就不说了,那些基本上都 ...

  5. Codeforces Gym 100803G Flipping Parentheses 线段树+二分

    Flipping Parentheses 题目连接: http://codeforces.com/gym/100803/attachments Description A string consist ...

  6. Codeforces Round #339 (Div. 2) A. Link/Cut Tree 水题

    A. Link/Cut Tree 题目连接: http://www.codeforces.com/contest/614/problem/A Description Programmer Rostis ...

  7. Codeforces Good Bye 2015 C. New Year and Domino 前缀和

    C. New Year and Domino 题目连接: http://www.codeforces.com/contest/611/problem/C Description They say &q ...

  8. cdoj 03 BiliBili, ACFun… And More! 水题

    Article Time Limit: 20 Sec  Memory Limit: 256 MB 题目连接 http://acm.uestc.edu.cn/#/problem/show/3 Descr ...

  9. 【JavaScript】JavaScript的Function与Object浅析

    前言: JavaScript的面向对象是基于原形的,所有对象都有一条属于自己的原型链.Object与Function可能很多看Object instanceof Function , Function ...

  10. Android端百度地图API使用详解

    百度地图API简介 百度地图移动版API(Android)是一套基于Android设备的应用程序接口,通过该接口,可以轻松的访问百度服务和数据,构建功能丰富.交互性强的地图应用程序. 百度地图移动版A ...