<!--大小-->

width:宽度

height:高度

<!--背景与前景-->

"background-color:#0F0;   背景颜色

background-image:url(../%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/psb.jpg);  背景图片

background-attachment:fixed; 背景不随字体滚动,是固定的;

background-attachment:scroll; 背景随字体滚动;
background-size:300px 300px;背景图片的大小;
 
background-repeat: no-repeat; 背景图片的平铺;一般为norepeat


背景图片的位置

background-position:center;  居中

background-position:top left  居上居左
background-position:top 200px left 200px;居上200像素 居左200像素

<!--字体-->

style="font-family:微软雅黑;  字体类型

font-size:12px; 字体大小

font-weight: bold; 文字加粗

font-style:italic; 文字倾斜

color:red;  文字颜色

text-decoration:underline; 下划线

text-decoration:overline;上划线

text-decoration:line-through;删除线

text-decoration:none  去掉下划线

text-align:center; text-align:left; text-align:right; 水平居中,水平居左,水平居右
vertical-align:middle; line-height:40px;垂直居中,设置行高,两个一般同时出现

text-indent:20px;首行缩进20px;

超链接的样式:

<style>
#d1{
width:100px; height:30px;
background-color:red; color:#FFF; text-decoration:none}
</style>
</head>

<body>

<a id="d1" href="http://www.baidu.com">百度一下</a>

</body>

按钮效果:

<style>
#anniu{
    width:104px; height:40px; background-color:#0CF;
    color:#FFF; font-size:16px; text-align:center; vertical-align:middle; line-height:40px;}

</style>
</head>

<body>

<div id="anniu">百度一下</div>

</body>

 边距 间距:margin与padding

<style>
/* *{ margin:0px auto; padding:0px}网页都需要写,把每个元素的边距和间距都去掉,auto是把所以网页中的<div>居中。*/
#wai{
    width:300px;
    height:300px;
    background-color:red}
#nei{
    float:left;
    width:200px;
    height:200px;
    background-color:blue;
    margin:10px 20px 30px 40px;/*距wai的边距*/
    padding: 10px 20px 30px 40px;/*距li的边距*/}
#li{
        width:100px;
        height:100px;
        background-color:#FF0}
</style>
</head>

<body>
<div id="wai">
<div id="nei">
<div id="li"></div>
</div>
</div>
</body>

 <!--边界 边框-->

<style>
.bb{ border:1px solid red; width:300px; height:300px}
.aa{
    border-bottom:100px solid #96C;
    border-left:100px solid #C3F;
    border-top:100px solid #FC0;
    border-right:100px solid #00C}

</style>
</head>

<body>
<div class="bb"><div class="aa"></div></div>
</body>

 列表 方块

html部分---样式属性;的更多相关文章

  1. 原创:新手布局福音!微信小程序使用flex的一些基础样式属性

    来源:新手布局福音!微信小程序使用flex的一些基础样式属性 作者:Nazi   Flex布局相对于以前我们经常所用到的布局方式要好的很多,在做微信小程序的时候要既能符合微信小程序的文档开发要求,又能 ...

  2. 一起学HTML基础-CSS样式表常用样式属性

    样式属性 背景与前景: background-color:#F90; /*背景颜色,样式表优先级最高*/ background-image:url(路径); /*设置背景图片(默认)*/ backgr ...

  3. 使用jquery修改css中带有!important的样式属性

    当CSS中含有!important的样式属性时,普通的修改方式是会出现失败的.如下: <div class="test">使用jquery修改css中带有!import ...

  4. HTML_css样式表 样式属性 格式布局

    CSS(Cascading Style Sheet,叠层样式表),作用是美化HTML网页. /*注释区域*/此为注释语法 一.样式表 (一)样式表的分类 1.内联样式表 和HTML联合显示,控制精确, ...

  5. 纯css3样式属性制作各种图形图标

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. ActionBar官方教程(11)自定义ActionBar的样式(含重要的样式属性表及练习示例)

    Styling the Action Bar If you want to implement a visual design that represents your app's brand, th ...

  7. hack:选择符前缀法,样式属性前缀法

    选择符前缀法 <style> *html .test{width:100px;} /*only for IE6*/ *+html .test{width:100px;}/*for IE6 ...

  8. 10 GridView 样式属性

    GridView 样式属性: 1,android:numColumns="auto_fit" 显示的列数 如果android:numColumns不设置那么自动每行1列 如下图 2 ...

  9. js中获取css样式属性值

    关于js中style,currentStyle和getComputedStyle几个注意的地方 (1)用js的style只能获取元素的内联样式,内部样式和外部样式使用style是获取不到的.针对css ...

  10. 【3-24】css样式表分类、选择器、样式属性

    一.css样式表分类: (一)内联样式表:代码写在标签内的样式表  控制精确 代码重用性差  优先级最高 格式:<p style="样式属性">内容</p> ...

随机推荐

  1. struts2的 result 通配符 OGNL

    result: 1). result 是 action 节点的子节点 2). result 代表 action 方法执行后, 可能去的一个目的地 3). 一个 action 节点可以配置多个 resu ...

  2. Android双击返回按钮退出程序

    //双击退出事件 @Override public boolean onKeyDown(int keyCode, KeyEvent event) { if(keyCode == KeyEvent.KE ...

  3. 常用控件产品官方文档/手册/API列表 c#控件文档API列表 asp.net控件产品技术文档中文版

    .netCHARTING报表图表控件 文档帮助手册Ab3d.PowerToys 文档帮助手册Ab3d.Reader3ds 文档帮助手册ABViewer 文档帮助手册 (工程图纸文档管理系统)Activ ...

  4. [处理器、单片机]ARM

    1.ARM简介: ARM是Advanced RISC Machines的缩写.1985年4月26日,第一个ARM原型在英国剑桥的Acorn计算机有限公司诞生,由美国加州San Jose VLSI技术公 ...

  5. SharePoint 2013 开发——APP安全模型

    博客地址:http://blog.csdn.net/FoxDave 除非开启了SharePoint网站的匿名访问,否则对于入站的请求,必须要有一个身份验证的过程(Authentication),这个 ...

  6. linux 杀死进程的方法

    # kill -pid 注释:标准的kill命令通常都能达到目的.终止有问题的进程,并把进程的资源释放给系统.然而,如果进程启动了子进程,只杀死父进程,子进程仍在运行,因此仍消耗资源.为了防止这些所谓 ...

  7. 一看就会之—利用IIS服务发布网站(实践篇)上

    转自:http://blog.csdn.net/zwk626542417/article/details/9796259 概述 IIS全称为互联网信息服务,是由微软公司提供的基于运行Microsoft ...

  8. Ubuntu 14.10 下awk命令详解

    简介 awk是一个强大的文本分析工具,相对于grep的查找,sed的编辑,awk在其对数据分析并生成报告时,显得尤为强大.简单来说awk就是把文件逐行的读入,以空格为默认分隔符将每行切片,切开的部分再 ...

  9. leetcode 229 Majority Element II

    这题用到的基本算法是Boyer–Moore majority vote algorithm wiki里有示例代码 1 import java.util.*; 2 public class Majori ...

  10. 【LeetCode OJ】Binary Tree Maximum Path Sum

    Problem Link: http://oj.leetcode.com/problems/binary-tree-maximum-path-sum/ For any path P in a bina ...