HTML 样式属性

 1 @charset "utf-8";
 2 /* CSS Document */
 3 <style>
 4 p{
 5     /*背景与前景*/
 6 background-color:#000;/*背景色,样式表优先级高*/
 7 background-image:none;/*设置背景图片(默认)*/
 8 background-attachment:fixed;/*背景是固定的,不随字体滚动*/
 9 background-repeat:no-repeat;/*不平铺,regeat 平铺,regeat-x-y横向平铺 纵向平铺*/
10 background-position:center;/*背景图居中,设置背景图位置时,regeat必须为no-regeat*/
11 background-position:right top;/*背景图放右上角(防卫可以自己更改)/
12 background-position:left 100px top 200px;/*离左边100像素,离上边200像素(可以设为负值)*/
13 /*字体*/
14 font-family:"新宋体";/*字体,常用微软雅黑.宋体*/
15 font-size:18px;/*字体大小.常用像素12px,14px,18px,还可以用"em","2.5em"即默认字体的2.5倍,还可以用百分比*/
16 font-weight:bold;/*加粗,normal正常*/
17 font-style:italic;/*倾斜,normal不倾斜*/
18 color:#000;/*颜色*/
19 text-decoration:underline;/*下划线,overline上划线,line-through删除线,none去下划线*/
20 text-align:center;/*(水平对齐)居中对齐,left左对齐,right右对齐*/
21 text-indent:28px;/*首行缩进量*/
22 vertical-align:middle;/*(垂直对齐)居中对齐,top上对齐,bottom底部对齐,一般设置行高后使用*/
23 line-height:24px;/*行高,一般为1.5-2倍字体大小*/
24 display:none;/*不显示*/
25 display:inline-block;/*,inline-block 显示为块,不自动换行,宽高可设*/
26 display:block;/*显示为块,自动换行*/
27 display:inline;/*效果同span标签,不自动换行,宽高不可设*/
28 visibility:hidden;/*可视性,hidden隐藏但是占空间,visible 显示*/
29 /*边界与边框*/
30 /*border(表格边框,样式等)margin(表外间距)padding(内容与单元格间距)*/
31 border:5px solid blue;/*四边框,5像素,实线,蓝色*/
32 border-width::5px;/*边框5像素*/
33 border-style:solid;/*实线边框*/
34 border-color:blue;/*蓝色*/
35 border-top:5px solid blue;/*上边框:5像素,实线,蓝色(分写同上)*/
36 border-bottom:5px solid blue;/*下边框:5像素,实线,蓝色(分写同上)*/
37 border-left:5px solid blue;/*左边框:5像素,实线,蓝色(分写同上)*/
38 border-right:5px solid blue;/*右边框:5像素,实线,蓝色(分写同上)*/
39 margin:10px;/*四边外边框宽度为10px,auto 居中*/
40 margin-top:10px;/*上边外边框宽度为10px,其他三遍类似*/
41 margin:20px 0px 20px 0px;/*上-右-下-左.内容与边框的四边距顺时针顺序*/
42 padding:10px;/*内容与边框的四边间距为10px*/
43 padding-top:10px;/*内容与边框的上间距为10px,其他三遍类似*/
44 padding::20px 0px 20px 0px;/*上-右-下-左,内容与边框的四边间距顺时针顺序*/
45 /*列表与方块*/
46 /*width,height(top,bottom,left,right)只有在绝对坐标情况下才有用*/
47 list-style:none;/*取消序号*/
48 list-style:circle;/*序号变为圆圈,样式相当于无序*/
49 list-style-image:url;/*图片做序号*/
50 list-style-position:outside;/*序号在内容外*/
51 list-style-position:inside;/*序号跟内容一起*/
52
53
54 }
55 </style>
时间: 2024-10-10 00:38:36

HTML 样式属性的相关文章

为什么我们要使用min-height和max-height样式属性?

http://www.divcss5.com/rumen/r422.shtml 为什么我们要使用min-height和max-height样式属性? Css min-height应用地方解释 我们有时设置一个对象盒子时候避免对象没有内容时候不能撑开,但内容多少不能确定所以又不能固定高度,这个时候我们就会需要css来设置min-height最小高度撑高对象盒子.当内容少时候最小高度能将内容显示出,如果内容多余最小高度能装下时候,对象也会再随内容增多而增高. Css max-height最大高度应用

样式表分类及样式属性

样式表分类 1 内联式    在head后加style   在style里写选择器 2 外部式    创建css文本 ,在文本里写样式  用link连接将样式套入 3内嵌式   独立写个样式在必须head后 选择器 1 标签选择器 用表签名做选择器 2  class选择器 都是.{}开头 3 ID选择器       都是以#开头 4  复合选择器    用,隔开表示并列 5  后代选择器     用空格隔开表示后代 6  筛选选择器    用.开头 样式属性 1   <del></del

CSS控制列表样式属性list-style有哪些?怎么用?

CSS列表样式属性list-style有哪些类型?不同类型CSS控制列表样式使用时该注意什么? 这是W3Cschool用户Shirley于2016-11-10在W3Cschool编程问答提出的问题.云南小天使的回答很好的帮助了众多遇到同样问题的网友原文地址http://www.w3cschool.cn/css3/question-10231611.html 以下为回答原文: 一.什么是CSS列表? CSS列表是HTML里一种很有用的显示方式,可以把相关的并列内容整齐地垂直排列,使网页显得整洁专业

标签、样式属性

寻找标签 第一种 class选择器 .c1{} <div class='c1'>aaa</div> <div class='c1'>aaa</div> 第二种 标签选择器,为某一类标签(全部)定义 a{ color:red; } #这是为所有a标签,html中所有的a标签,全部红色字体 #div,span,select等等都行 # input 特殊 input[type='text']{ } #为input中所有type='text'的标签加一个样式 第三种

原创:新手布局福音!微信小程序使用flex的一些基础样式属性

来源:新手布局福音!微信小程序使用flex的一些基础样式属性 作者:Nazi Flex布局相对于以前我们经常所用到的布局方式要好的很多,在做微信小程序的时候要既能符合微信小程序的文档开发要求,又能使用不同以往的居中方式并减少css的相关样式声明. 先来看看关于flex的一张图: 从上面可以看到一些flexbox的相关信息, main axis 和 cross axis 指的是flexbox内部flex项目(flex item)的排列方向,通俗点说就是,里面的flex项目是按照横轴或者纵轴排列的顺

快速记住CSS样式属性单词及输入HTML+CSS的方法

快速记住CSS样式属性单词及输入HTML+CSS的方法,DIVCSS5介绍一种快速输入HTML代码.快速输入CSS样式英文单词与样式值输入方法.降低英文单词代码输入错误概率,提升输入代码速度.DW软件输入CSS和HTML的终极用法(非面板输入法). DIVCSS5教大家一种快速记住CSS样式属性单词及用法的方法,告别死记硬背才是硬道理. CSS样式布局中使用的CSS样式英文单词,不需要死记硬背,会使用认识,知道长什么样即可.在DIV CSS布局开发中对于是否会拼写CSS属性单词关系不大,会使用.

纯css3样式属性制作各种图形图标

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="

11-18网页基础--样式属性

第一课:样式属性 style 样式:style样式不仅可以直接在<body>中设置成整个网页的样式.格式:为了将样式.格式多样化,也可以将style单独抽出来,作为一个独立的个体,放在<head>..</head>中来分别设置不同元素.标签的格式和样式. 这样做出来的效果和在<body>中设置的格式是一样的,但有所区别的是单独把style写出来的样式可以只对某个或某几个标签有效,有效防止编写重复.费时和修改麻烦等: 还可以在style中对设置的格式的标签进行

如何为要被打印的内容设置CSS样式属性

如何为要被打印的内容设置CSS样式属性:有时候我们要打印的内容也是需要美观度的,并不希望太原汁原味了,所以要对其进行一下样式设置,本章节就简单介绍一下,如何利用CSS设置要被打印内容的样式,方式有多种,下面一一做一下简单介绍.一.使用link引入外部样式表: <link rel="stylesheet" href="css/style.css" media="screen" /> 以上代码的CSS样式用于屏幕显示效果,对于打印无效.关

4.3 常用的样式属性

CSS的属性非常庞大,庞大得好几本书都写不完,不过,没关系,我们可以从网上搜索相关资料或者查阅相关专著.这里只列出常用的且实用的CSS属性.下面我们就先来学习文本属性. 本节单词记忆:属性 1.background-color 2.background-image 3.text-align 4.background-repreat 5.margin 6.padding 7.border 网页学习网提示:html语言非常简单,不需要逻辑理解,而绝大部分朋友觉得它难以掌握,90%的原因在于英语单词不