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> ...
随机推荐
- Fibers in JVM
转载: Fibers in JVM
- AxureRP8实战手册(基础21-30)
AxureRP8实战手册(基础21-30) 本文目录 基础21. 设置元件默认选中/禁用 基础22. 设置单选按钮唯一选中 基础23. 设置元件不同状态时的样式 基础24. ...
- css学习笔记 4
伪类可以用来指定一个或多个与其相关的选择符的状态,如a:link a:active a:hover a:visited :ie7及以下不支持. 注意:上面与超链接相关的伪类的顺序必须是:LVHA. 伪 ...
- 设计模式学习笔记-Adapter模式
Adapter模式,就是适配器模式,使两个原本没有关联的类结合一起使用. 平时我们会经常碰到这样的情况,有了两个现成的类,它们之间没有什么联系,但是我们现在既想用其中一个类的方法,同时也想用另外一个类 ...
- JS学习笔记01
文章转载pigpigpig4587 的 1.Javascript是区分大小写的语言.也就是说.关键字.变量,函数和所有的标识符都必须采取一致的大小写形式.因为html不严格区分大小写,所以在html中 ...
- angularJs,ionic字符串操作
1.首先我们需要把一段"文本或字符串"中的我们想进行操作的"字符串","字"筛选出来,代码如下: app.filter('replaceCo ...
- Oracle表的建立条件
约束:1.非空约束a.字段不能为nullb.null 不等于 ''空字符串,oracle不允许把''写入到非空字符串型字段中2.主键约束a.指定某一列或某几列为主键列b.主键列必须具有非空约束c.主键 ...
- 【MCU】【STM32】1.cube MX库使用笔记
STM32Cube 是一个全面的软件平台,包括了ST产品的每个系列.(如,STM32CubeF4 是针对STM32F4系列). 平台包括了STM32Cube 硬件抽象层和一套的中间件组件(RTOS, ...
- 实验四 简单的PV操作
实验四 简单的PV操作 专业 网络工程 姓名 方俊晖 学号 201406114309 一. 实验目的 1.掌握临界区的概念及临界区的设计原则: 2.掌握信号量的概念.PV操作的含义以 ...
- 基于Jforum开源项目的论坛网站
基于Jforum开源项目的论坛网站 开发原因: 刚完成了以wordpress及其插件simple-press为基础的论坛网站,因为一直从事java方面开发, 所以尝试一下使用java开源项目Jforu ...