css标签和html标签

HTML与CSS基础详解

一,html
标题标签:h1,h2,h3,h4,h5,h6
段落标签:<p></p>
水平线标签:<hr />
换行标签:<br />
水平线标签:
size----水平粗细线
width----水平线宽度
align----水平线对齐方式
Color----水平线颜色
字体标签(funt)
size----文字大小
color----字体颜色
Face----文字的字体
图片标签:
src----连接到图片的位置
alt----图片替代文字
title----鼠标停在图片上会提示文字
width----图片宽
Height----图片高
超链接标签:<a href = ""></ a>
排序列表:<ol></ol>
无序列表:<ul></ul>
排序,无序列表均为:<li></li>
定义列表:<dl></dl>
定义列表包含:描述<dt></dt>;主体:<dd></dd>
input控件
type属性:
text:单行文本输入框
password:密码输入框
radio:单选按钮
checkbox:复选框
button:普通按钮
submit:提交按钮
reset:重置按钮
image:图像形式的提交按钮
file:文件域
下拉菜单:<select>
<option></option>
</select>
二.Css

css字体样式属性:

font-size:字体大小
font-family:字体
font-weight:字体粗细
font-style字体风格

css外观属性

color:文本颜色
lint-height:行间距
text-align:水平对齐方式
text-indent:首行缩进
text-decoration:文本的装饰

标签显示模式转换 display
快转行内:display:inline
行内转块:disolay:block

Css背景
background-color:背景颜色
background-image:背景图片地址
background-repeat:是否平铺
background-position:背景位置
background-attachment:背景固定还是滚动

背景图片
语法:background-image : none | url (url) 
none : 无背景图(默认的)url : 使用绝对或相对地址指定背景图像 
background-image 属性允许指定一个图片展示在背景中(只有CSS3才可以多背景)可以和 background-color 连用。 如果图片不重复地话,图片覆盖不到地地方都会被背景色填充。 如果有背景图片平铺,则会覆盖背景颜色。

背景平铺
语法:background-repeat : repeat | no-repeat | repeat-x | repeat-y 
repeat:背景图片像在纵向和横向上平铺(默认的)
no-repeat:背景图像不平铺
repeat-x:背景图片在横向平铺
repeat-y:背景图片在纵向平铺

盒子边框
none:没有边框(默认的)
solid:边框为单实线
dashed:边框为虚线
dotted:边框为点线
double:边框为双实线

盒子边框总写法:
上边框:border-top-style:样式; border-top-width:宽度;
border-top-color:颜色;border-top:宽度 样式 颜色;

下边框:border-bottom-style:样式;border- bottom-width:宽度;
border- bottom-color:颜色;border-bottom:宽度 样式 颜色;

左边框:border-left-style:样式; border-left-width:宽度;
border-left-color:颜色;border-left:宽度 样式 颜色;

右边框:border-right-style:样式;border-right-width:宽度;
border-right-color:颜色;border-right:宽度 样式 颜色;

样式综合设置:border-style:上边 [右边 下边 左边];
(none无(默认)、solid单实线、dashed虚线、dotted点线、double双实线)

宽度综合设置:border-width:上边 [右边 下边 左边];(像素值)

颜色综合设置:border-color:上边 [右边 下边 左边];(十六进制;rgb)

边框综合设置:border:四边宽度 四边样式 四边颜色;

内边距(padding)
padding-top:上内边距
padding-right:右内边距
padding-bottom:下内边距
padding-left:左内边距

外边距(margin)
margin-top:上外边距
margin-right:右外边距
margin-bottom:下外边距
margin-left:上外边距
margin:上外边距 右外边距 下外边距 左外边

浮动(float)
float-left:元素向左浮动
float-right:元素向右浮动
float-元素不浮动(默认的)

定位(position)
top:顶端偏移量,定义元素相对于其父元素上边线的距离
tottom:底部偏移量,定义元素相对于其父元素下边线的距离
left:左侧偏移量,定义元素相对于其父元素左边线的距离
right:右侧偏移量,定义元素相对于其父元素右边线的距离

static:自动定位(默认定位方式)
relative:相对定位,相对于其原文档流的位置进行定位
absolute:绝对定位,相对于其上一个已经定位的父元素进行定位
fixed:固定定位,相对于浏览器窗口进行定位
static:静态定位
relative:相对定位
absolute:绝对定位
display:显示
display : none 隐藏对象 与它相反的是 display:block 除了转换为块级元素之外,同时还有显示元素的意思。
overflow溢出
visible : 不剪切内容也不添加滚动条。
auto :  超出自动显示滚动条,不超出不显示滚动条
hidden : 不显示超过对象尺寸的内容,超出的部分隐藏掉
scroll : 不管超出内容否,总是显示滚动条

鼠标样式:cursor
cursor :  default  小白 | pointer  小手  | move  移动  |  text  文本

vertical-align:垂直对齐

word-break:自动换行
normal 使用浏览器默认的换行规则。
break-all 允许在单词内换行。
nowrap : 强制在同一行内显示所有文本,直到文本结束或者遭遇br标签对象才换行。
可以处理中文
text-overflow:文字溢出

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值