样式

  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. [原创]jQuery的this和$(this)

    网上有很多关于jQuery的this和$(this)的介绍,大多数只是理清了this和$(this)的指向,其实它是有应用场所的,不能一概而论在jQuery调用成员函数时,this就是指向dom对象. ...

  2. MyEclipse7.0破解下载

    MyEclipse7.0 下载地址:downloads.myeclipseide.com/downloads/products/eworkbench/7.0M1/MyEclipse_7.0M1_E3. ...

  3. [AngularJS] Hijacking Existing HTML Attributes with Angular Directives

    Angular overrides quite a few existing HTML elements and attributes. This can be a useful technique ...

  4. Autolayout环境设置任意个数相等间距排列的按钮的方法

    摘要: 在storyboard中,想要用autolayout设置多个按钮按照相同的间距排列,并且自动根据屏幕宽度调整间距大小,就我了解的来说,没有直接的设置方法.我用storyboard+代码的方法实 ...

  5. C语言待研究问题

    1.内存分配 变量的静态分配和静态变量的区别: 变量的静态分配和动态分配 2.堆和栈的区别 3.CPU的并发性 4.变量和参数的区别

  6. MHA 安装过程 原创

    root@monitor yum.repos.d]# cat CentOS-Base.repo [base]name=CentOS-$releasever - Basefailovermethod=p ...

  7. (转)ASP.NET Identity登录原理 - Claims-based认证和OWIN

    在Membership系列的最后一篇引入了ASP.NET  Identity,看到大家对它还是挺感兴趣的,于是来一篇详解登录原理的文章.本文会涉及到Claims-based(基于声明)的认证,我们会详 ...

  8. qregularexpression和qregexp的区别

    QRegularExpression 是Qt 5.0才引进的,相对于QRegExp,QRegularExpression class修复了很多bug,提高了效率,提供了对Perl的RegEx几乎全面兼 ...

  9. 分布式缓存技术redis学习(四)——redis高级应用(集群搭建、集群分区原理、集群操作)

    本文是redis学习系列的第四篇,前面我们学习了redis的数据结构和一些高级特性,点击下面链接可回看 <详细讲解redis数据结构(内存模型)以及常用命令> <redis高级应用( ...

  10. 关于Android中获取Intent里的数据

    Intent获取数据和发送数据的办法: //直接通过Intent发送 intent.putExtra("name","wytings"); //直接通过Inte ...