HTML 样式属性
@charset "utf-8";
/* CSS Document */
<style>
p{
/*背景与前景*/
background-color:#000;/*背景色,样式表优先级高*/
background-image:none;/*设置背景图片(默认)*/
background-attachment:fixed;/*背景是固定的,不随字体滚动*/
background-repeat:no-repeat;/*不平铺,regeat 平铺,regeat-x-y横向平铺 纵向平铺*/
background-position:center;/*背景图居中,设置背景图位置时,regeat必须为no-regeat*/
background-position:right top;/*背景图放右上角(防卫可以自己更改)/
background-position:left 100px top 200px;/*离左边100像素,离上边200像素(可以设为负值)*/
/*字体*/
font-family:"新宋体";/*字体,常用微软雅黑.宋体*/
font-size:18px;/*字体大小.常用像素12px,14px,18px,还可以用"em","2.5em"即默认字体的2.5倍,还可以用百分比*/
font-weight:bold;/*加粗,normal正常*/
font-style:italic;/*倾斜,normal不倾斜*/
color:#000;/*颜色*/
text-decoration:underline;/*下划线,overline上划线,line-through删除线,none去下划线*/
text-align:center;/*(水平对齐)居中对齐,left左对齐,right右对齐*/
text-indent:28px;/*首行缩进量*/
vertical-align:middle;/*(垂直对齐)居中对齐,top上对齐,bottom底部对齐,一般设置行高后使用*/
line-height:24px;/*行高,一般为1.5-2倍字体大小*/
display:none;/*不显示*/
display:inline-block;/*,inline-block 显示为块,不自动换行,宽高可设*/
display:block;/*显示为块,自动换行*/
display:inline;/*效果同span标签,不自动换行,宽高不可设*/
visibility:hidden;/*可视性,hidden隐藏但是占空间,visible 显示*/
/*边界与边框*/
/*border(表格边框,样式等)margin(表外间距)padding(内容与单元格间距)*/
border:5px solid blue;/*四边框,5像素,实线,蓝色*/
border-width::5px;/*边框5像素*/
border-style:solid;/*实线边框*/
border-color:blue;/*蓝色*/
border-top:5px solid blue;/*上边框:5像素,实线,蓝色(分写同上)*/
border-bottom:5px solid blue;/*下边框:5像素,实线,蓝色(分写同上)*/
border-left:5px solid blue;/*左边框:5像素,实线,蓝色(分写同上)*/
border-right:5px solid blue;/*右边框:5像素,实线,蓝色(分写同上)*/
margin:10px;/*四边外边框宽度为10px,auto 居中*/
margin-top:10px;/*上边外边框宽度为10px,其他三遍类似*/
margin:20px 0px 20px 0px;/*上-右-下-左.内容与边框的四边距顺时针顺序*/
padding:10px;/*内容与边框的四边间距为10px*/
padding-top:10px;/*内容与边框的上间距为10px,其他三遍类似*/
padding::20px 0px 20px 0px;/*上-右-下-左,内容与边框的四边间距顺时针顺序*/
/*列表与方块*/
/*width,height(top,bottom,left,right)只有在绝对坐标情况下才有用*/
list-style:none;/*取消序号*/
list-style:circle;/*序号变为圆圈,样式相当于无序*/
list-style-image:url;/*图片做序号*/
list-style-position:outside;/*序号在内容外*/
list-style-position:inside;/*序号跟内容一起*/
}
</style>
HTML 样式属性的更多相关文章
- 原创:新手布局福音!微信小程序使用flex的一些基础样式属性
来源:新手布局福音!微信小程序使用flex的一些基础样式属性 作者:Nazi Flex布局相对于以前我们经常所用到的布局方式要好的很多,在做微信小程序的时候要既能符合微信小程序的文档开发要求,又能 ...
- 一起学HTML基础-CSS样式表常用样式属性
样式属性 背景与前景: background-color:#F90; /*背景颜色,样式表优先级最高*/ background-image:url(路径); /*设置背景图片(默认)*/ backgr ...
- 使用jquery修改css中带有!important的样式属性
当CSS中含有!important的样式属性时,普通的修改方式是会出现失败的.如下: <div class="test">使用jquery修改css中带有!import ...
- HTML_css样式表 样式属性 格式布局
CSS(Cascading Style Sheet,叠层样式表),作用是美化HTML网页. /*注释区域*/此为注释语法 一.样式表 (一)样式表的分类 1.内联样式表 和HTML联合显示,控制精确, ...
- 纯css3样式属性制作各种图形图标
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- ActionBar官方教程(11)自定义ActionBar的样式(含重要的样式属性表及练习示例)
Styling the Action Bar If you want to implement a visual design that represents your app's brand, th ...
- hack:选择符前缀法,样式属性前缀法
选择符前缀法 <style> *html .test{width:100px;} /*only for IE6*/ *+html .test{width:100px;}/*for IE6 ...
- 10 GridView 样式属性
GridView 样式属性: 1,android:numColumns="auto_fit" 显示的列数 如果android:numColumns不设置那么自动每行1列 如下图 2 ...
- js中获取css样式属性值
关于js中style,currentStyle和getComputedStyle几个注意的地方 (1)用js的style只能获取元素的内联样式,内部样式和外部样式使用style是获取不到的.针对css ...
- 【3-24】css样式表分类、选择器、样式属性
一.css样式表分类: (一)内联样式表:代码写在标签内的样式表 控制精确 代码重用性差 优先级最高 格式:<p style="样式属性">内容</p> ...
随机推荐
- C#面向对象特征的具体实现及作用详解
转自:http://www.jb51.net/article/42390.htm 众所周知,面向对象编程的特点为:封装.继承.多态.C#是一门完全面向对象的语言,由于比Java推出的时间还要晚,所以对 ...
- js--内容判断(依赖于jq)
/** * 判断是否为空 * @param {Object} $element */ function nullVerify($element) { if(!$element.val() && ...
- 重写TextField Rect 改变显示位置
很简单很常用的一些东西,希望给需要的人帮助. 效果图如下: 自定义textField init() { super.init(frame: CGRect(x: , y: , width: yourWi ...
- PL/SQL导出到execl中,数据前面的0发生丢失的解决办法
ERR出现的场景再现: 使用 PL/SQL导出按钮,选择‘CSV文件’,保存为1.csv,后用execl打开,复制到VuGen中作为login脚本的参数化文件username. ERR及发现过程: 在 ...
- 即时聊天IM之三 XMPP协议客户端库的和Android端框架概述
合肥程序员群:49313181. 合肥实名程序员群:128131462 (不愿透露姓名和信息者勿加入) Q Q:408365330 E-Mail:egojit@qq.com smack ...
- 【教程】16岁黑客如何把Windows 95装进智能手表?【转】
来自美国佐治亚州的16岁黑客Corbin Davenport十分喜欢摆弄电子产品,最近他刚到手了一台三星Gear Live,并开始把玩起来.他发现Android Wear作为Android系统的改版并 ...
- biweb后台添加上传下载功能
1.数据库对应表添加字段 file varchar(100) 2.对应的后台 模块名/admin/addinfo.php里添加如下代码: //文件上传 if ((($_FILES[&quo ...
- 不同json如何使用jsonArray以及ajax如何取,实现读取新闻
jsp界面 <%@ page contentType="text/html;charset=gb2312"%><%@page import="org.j ...
- dom事件与event对象总结
1 事件:就是文档或浏览器窗口中发生的一些特定的交互瞬间. tips:js和xhtml的交互是通过当用户或浏览器操作网页时发生的事件来处理的. 1.1 事件流:即事件的顺序. 事件 ...
- 转: Rest简介及Spring实现
一 Roy Fielding 2000年Rest被Roy Fielding提出来的,我对Roy Fielding的印象有以下几个. 一是RoyFielding做为Http协议的起草者,在Http协议发 ...