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> ...
随机推荐
- block,inline和inlinke-block细节对比
block,inline和inlinke-block细节对比 display:block block元素会独占一行,多个block元素会各自新起一行.默认情况下,block元素宽度自动填满其父元素宽度 ...
- ON DUPLICATE KEY UPDATE重复插入时更新
mysql当插入重复时更新的方法: 第一种方法: 示例一:插入多条记录 假设有一个主键为 client_id 的 clients 表,可以使用下面的语句: INSERT INTO clients (c ...
- 内存分配与Segmentation fault
为了方便使用,我做了如下结构体的嵌套使用: struct operation{ int num; char name[100]; char owner[100]; char msg[100];}; s ...
- trim(),正则表达式中文匹配
^[/u4E00-/u9FA5]+$ 匹配中文 验证Email地址:“^w+[-+.]w+)*@w+([-.]w+)*.w+([-.]w+)*$” 验证InternetURL:“^http://([ ...
- Android genymotion安装输入法不兼容
genymotion 此应用与您的手机不兼容 http://blog.csdn.net/caiwenfeng_for_23/article/details/41692923
- Oracle 游标
游标的简介 游标的概念 游标是从数据表中提取出来的数据,以临时表的形式存放在内存中,在游标中有一个数据指针,在初始状态下指向的是首记录,利用fetch语句可以移动该指针,从而对游标中的数据进行各种操作 ...
- @@identity的使用
-- ============================================= -- Author: Qiuhua,Huang -- Create date: 08/09/2012 ...
- android xfermode绘图
1.fermode:是来自 transfer-modes,在画笔中设置xfermode后,画笔在使用的时候就会应用设置的像素转换模式.就类似于ps中的选取功能,留下的选取是从原选区中去除还是合并,取交 ...
- css外边距margin
- spark 1.5.2配置记录
1)slaves # A Spark Worker will be started on each of the machines listed below. dataNode 2)spark-env ...