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> ...
随机推荐
- linux主要的发行版及其区别和联系
1. 主要发行版 linux主要发行版有3类: (1).Debian (2).Slackware (3).Redhat (1)Debian Ubuntu 针对桌面和服务器 knopix 以安全著称 ( ...
- jmeter for循环嵌套if学习1
测试计划组成: vcondition的值都是tom. 执行结果:
- php 使用curl模拟登录discuz以及模拟发帖
<?php$discuz_url = 'http://127.0.0.1/discuz/';//论坛地址$login_url = $discuz_url .'logging.php?action ...
- java异常处理的设计
有一句这样话:一个衡量Java设计师水平和开发团队纪律性的好方法就是读读他们应用程序里的异常处理代码. 本文主要讨论开发Java程序时,如何设计异常处理的代码,如何时抛异常,捕获到了怎么处理,而不是讲 ...
- Python 五个常用模块资料 os sys time re built-in
1.os模块 os模块包装了不同操作系统的通用接口,使用户在不同操作系统下,可以使用相同的函数接口,返回相同结构的结果. os.name:返回当前操作系统名称('posix', 'nt', ' ...
- mongo virtual
var options={"upsert":false,"multi":false,'new':false}; 不存是否插入,更新是否批量,返回内容是更新前还是 ...
- Bootstrap <基础二十五>警告(Alerts)
警告(Alerts)以及 Bootstrap 所提供的用于警告的 class.警告(Alerts)向用户提供了一种定义消息样式的方式.它们为典型的用户操作提供了上下文信息反馈. 您可以为警告框添加一个 ...
- Eclipse 项目中有红色感叹号,怎么办?
/** * JDK1.5中增加了自动拆装箱的语言特性,在基本类型和包装类型之间可以相互地转换和运算. * 大家也都知道Java中==运算符是比较两个对象间的引用是否相同.在自动拆装箱与“==”运算符之 ...
- 在PHP中如何实现在做了么个操作后返回到指定页面
我们经常会碰到类似用户在没有登录的情况下进行提问.评论,需要用户登录后返回刚才浏览的网页,这种功能用cookie保存当前url地址来实现.我用的是jquery,读者需要懂点jquery中的ajax请求 ...
- json处理总结(前端js和后端java)
前端(js): json是以文本,即字符串的形式传递的,而JS操作的是JSON对象,所以,JSON对象和JSON字符串之间的相互转换是关键,下面将介绍两者之间的相互转换. json字符串:var st ...