菜单

常用样式,H5学习02之标签类型和css属性

2020年1月26日 - 4166am金沙下载
常用样式,H5学习02之标签类型和css属性
一、背景相关
一,HTML有N多标签,根据显示的类型,主要可以分为3大类


二,行内元素与块级函数的三个区别

千一教程 从用出发

background-color :颜色名称/rgb值/十六进制值

三,属性分类


四,CSS常用属性:

从这一节开始,我们就分类地讲解样式表内容了,同样我们只讲解最常用的,对于不常用的属性和属性值,您也不用担心会漏掉,因为我们在最后一节安排有
CSS 样式表大全下载。

background-image :url(”)

字体属性:

1 字体样式 {font:font-style font-variant font-weight font-size
font-family}

6 字体颜色 {color:数值;}7 阴影颜色 {text-shadow:16位色值}8 字体行高
{line-height:数值|inherit|normal;单位:PX、PD、EM}9 字 间 距
{letter-spacing:数值|inherit|normal}10 单词间距
{word-spacing:数值|inherit|normal}11 字体变形
{font-variant:inherit|normal|small-caps }12 英文转换
{text-transform:inherit|none|capitalize|uppercase|lowercase}13 字体变形
{font-size-adjust:inherit|none}14 字体
{font-stretch:condensed|expanded|extra-condensed|extra-expanded|inherit|narrower|normal|
semi-condensed|semi-expanded|ultra-condensed|ultra-expanded|wider}15

字体
line-height 行高,常见属性值是 150% 表示 1.5 倍于字体的高度,也即
0.5 倍行距,请参见前一节的长度单位。
font-size 字体大小,请参见前一节的长度单位,如 div {font-size:14px;}
表示 div 内字体大小为 14 像素。
color 字体颜色,请参见前一节的颜色单位。
font-weight 字体粗细,常用可选值有:normal(正常)、bold(粗体)。
font-style
字体样式,常用可选值有:normal(正常)、italic(斜体)。
text-decoration
文字装饰,常用可选值有:none(无)、underline(下划线)。

文本样式(Text Style)

1 行 间 距 {line-height:数值|inherit|normal;}2 文本修饰
{text-decoration:inherit|none|underline|overline|line-through|blink}3
段首空格 {text-indent:数值|inherit}4 水平对齐
{text-align:left|right|center|justify}5 垂直对齐
{vertical-align:inherit|top|bottom|text-top|text-bottom|baseline|middle|sub|super}6
书写方式 {writing-mode:lr-tb|tb-rl}

文本
text-indent
首行缩进,一般两倍于字体大小,即缩进两个字符。这里不能用200% 表示,因为
200% 在这里表示两倍于一行的宽度,但可以用 2em 表示。
text-align
文本对齐方式,可选值有:left(居左)、center(居中)、right(居右)。两端对齐在目前的浏览器中不可用。

background-repeat : repeat-x(仅水平重复) repeat-y(仅垂直重复)
no-repeat(不重复)

背景属性: (background)

1 背景颜色 {background-color:数值}2 背景图片 {background-image:
url|none}3 背景重复
{background-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y}4 背景固定
{background-attachment:fixed|scroll}5 背景定位
{background-position:数值|top|bottom|left|right|center}6 背影样式
{background:背景颜色|背景图象|背景重复|背景附件|背景位置}框架样式(Box
Style)色彩background-color: #FFFFFF;图片background-image:
url();重复background-repeat: no-repeat;滚动background-attachment: fixed;
scroll;位置background-position: left top;简写方法 background:#000 url
repeat fixed left top;

背景
background-color 背景颜色。
background-image 背景图片,url(“背景图片地址“)。
background-position
背景图片位置,有两个值,第一个值有:top、center、bottom,第二值有:left、center、right。比如
background-position:bottom right,表示背景图像从右下角开始往左下角铺。
background-repeat 背景是否重复,默认情况下背景会往 x、y
两个方向重复的。可选值有:repeat(重复)、no-repeat(不重复)、repeat-x(背景只在
x 方向上重复)、repeat-y(背景只在 y 方向上重复)。

区块属性:

字间距letter-spacing: normal; 数值对刘text-align: justify; left; right;
center;缩进text-indent: 数值px;垂直对齐vertical-align: baseline; sub;
super; top; text-top; middle; bottom; text-bottom;词间距word-spacing:
normal; 数值空格white-space: pre; nowrap;显示display:block; inline;
list-item; run-in; compact; marker; table; inline-table;
table-raw-group; table-header-group; table-footer-group; table-raw;
table-column-group; table-column; table-cell; table-caption;

尺寸
width 宽度
height 高度

background-position :  数字+单位/center/top/bottom/left/right 同上。
例如:50px 50px

方框属性:

width:; height:; float:; clear:both; margin:; padding:; 顺序:上右下左

布局
float 浮动,table、div 之类的块级元素,一行只能显示一个 table 或 div
的,要让一行显示两个 table 或
div,就得用浮动,我们会在后面的讲解中给出具体示例。
clear 使当前元素不受前面浮动元素的影响。
display
当前元素是否可显,常用属性值有:block(可显)、none(不可显)。
visibility
当前元素是否可见,常用属性值有:visible(可见)、hidden(不可见)。visibility
不可见时,元素的空间还保留,就如同一个人穿了“隐形衣”一样,虽然不可见,但它仍然占有空间,而
display 不仅不可见,它也不会占有任何页面空间。
overflow 当内容超过 HTML
元素指定的宽度或高度时怎么办。常用可选值有:visible(自动增加 HTML
元素的宽度或高度)、auto(显示滚动条)、hidden(不显示超过宽度或高度的内容)、scroll(不管是否超过指定宽度或高度均显示滚动条)。

边框属性:

1 边界留白 {margin:margin-top margin-right margin-bottom margin-left}2
补 白 {padding:padding-top padding-right padding-bottom padding-left}3
边框宽度 {border-width:border-top-width border-right-width
border-bottom-width border-left-width} 宽度值: thin|medium|thick|数值4
边框颜色 {border-color:数值 数值 数值 数值}
数值:分别代表top、right、bottom、left颜色值5 边框风格
{border-style:dotted; dashed; solid; double; groove; ridge; inset;
outset;}6 边 框 {border:border-width border-style color}上 边 框
{border-top:border-top-width border-style color}右 边 框
{border-right:border-right-width border-style color}下 边 框
{border-bottom:border-bottom-width border-style color}左 边 框
{border-left:border-left-width border-style color}7 宽 度
{width:长度|百分比| auto}8 高 度 {height:数值|auto}9 漂 浮
{float:left|right|none}10 清 除
{clear:none|left|right|both}简写方法border:width style color;

外边距、内边距、边框 我们已经在第三节作了介绍,请点这里查看。

background-attachment :  fixed(不滚动) scroll(滚动)

列表属性: (List-style)

类型list-style-type: disc; circle; square; decimal; lower-roman;
upper-roman; lower-alpha; upper-alpha;位置list-style-position: outside;
inside;图像list-style-image: url;

列表
list-style-type 列表项前面的引导标记,默认是一个实心圆点。
list-style-image
不使用系统确定的列表项前面的引导标记,而使用自定义图像,属性值为:url(“图像地址“)。

dmeo:

定位属性:

Position: absolute; relative; static;visibility: inherit; visible;
hidden;overflow: visible; hidden; scroll; auto;clip:
rect(12px,auto,12px,auto)

下面详细讲解一下:

表格
border-collapse
相邻的单元格边框是合在一起还是独立,可选值有:separate(独立)、collapse(共同使用一个边框)。

设置页面的body背景:

CSS文字属性:

color : #999999; /文字颜色/font-family : 宋体,sans-serif;
/文字字体/font-size : 9pt; /文字大小/font-style:itelic;
/文字斜体/font-variant:small-caps; /小字体/letter-spacing : 1pt;
/字间距离/line-height : 200%; /设置行高/font-weight:bold;
/文字粗体/vertical-align:sub; /下标字/vertical-align:super;
/上标字/text-decoration:line-through; /加删除线/text-decoration:
overline; /加顶线/text-decoration:underline;
/加下划线/text-decoration:none; /删除链接下划线/text-transform :
capitalize; /首字大写/text-transform : uppercase;
/英文大写/text-transform : lowercase; /英文小写/text-align:right;
/文字右对齐/text-align:left; /文字左对齐/text-align:center;
/文字居中对齐/text-align:justify;
/文字分散对齐/vertical-align属性vertical-align:top;
/垂直向上对齐/vertical-align:bottom;
/垂直向下对齐/vertical-align:middle;
/垂直居中对齐/vertical-align:text-top;
/文字垂直向上对齐/vertical-align:text-bottom; /文字垂直向下对齐/

光标
可以为光标指定样式,请参见:CSS
光标属性一览

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<style>
    body{ background-color: aquamarine;
         background-image: url("cool.jpeg");
         background-repeat:repeat-y ;
         background-position: top;
         background-attachment: fixed;

    }
</style>
<body>
</body>
</html>
CSS边框空白

padding-top:10px; /上边框留空白/padding-right:10px;
/右边框留空白/padding-bottom:10px; /下边框留空白/padding-left:10px;
/*左边框留空白

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图