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> ...
随机推荐
- No package mysql-server available.
Centos 7 comes with MariaDB instead of MySQL. MariaDb is a open source equivalent to MySQL and can b ...
- Bug总结流程
小明入职已有两年,期间测试能力已不知不觉成长许多,得到了Leader大熊的高度认可.回首这两年间,小明对"Bug总结流程"印象最为深刻,他对这个流程的认识在不断改变着:从最初的好奇 ...
- openxml(二) 添加页眉,页脚
openxml 中 word 文档的结构是如下图: 其中,页眉是 header,属于headerpart 部件,页脚是footer,属于footerpart 部件,图上还有其他的东西,之后会一一介绍. ...
- PHP global 关键字
global关键字用于在函数内部访问全局变量. <?php $x = 5; $y = 10; function myTest(){ global $x,$y; $x = $x+$y; } myT ...
- H5如何实现一行三列布局
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF ...
- performSelector和performSelectorInBackground
前者是在主线程下完成的, 不会自动创建一个线程. 后者会创建一个新的线程.
- [原创]C#应用WindowsApi实现查找\枚举(FindWindow、EnumChildWindows)窗体控件,并发送消息。
首先介绍基本WindowsApi: public static extern IntPtr FindWindow(string lpClassName, string lpWindowName); 函 ...
- ASP.NET MVC 多语言实现——URL路由
考虑实现一个完整的基于asp.net mvc的多语言解决方案,从路由到model再到view最后到数据库设计(先挖好坑,后面看能填多少). 我所见过的多语言做得最好的网站莫过于微软的msdn了,就先从 ...
- C# 将容器内容转成图片导出
/// 将容器内容转成图片导出,这里的controller就是this /// </summary> private void OutTheContro ...
- [CentOS] 指定命令别名:Alias & 软链接生成命令 ln -s
参考:CentOS里alias命令详解 每天一个linux命令(35):ln 命令 1. Alias命令 功能描述:我们在进行系统的管理工作一定会有一些我们经常固定使用,但又很长的命令.那我们可以给这 ...