css

最新推荐文章于 2025-06-13 08:24:12 发布

weixin_33910759

最新推荐文章于 2025-06-13 08:24:12 发布

阅读量141

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/xin521/p/11014897.html

版权

本文全面解析了CSS中的各种样式属性，包括边框样式、文本样式、背景样式、布局属性等，详细介绍了每种样式的使用方法及其兼容性。同时，文章还涵盖了HTML的基本结构和常用标签，如表格、列表、链接、图像、表单等，是一份详尽的前端开发资源。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<div class="border-item" style="border-style:none"> none：无轮廓。border-color与border-width将被忽略 </div>
<div class="border-item" style="border-style:hidden"> hidden：隐藏边框。IE7及以下尚不支持 </div>
<div class="border-item" style="border-style:dotted"> dotted：点状轮廓。IE6下显示为dashed效果 </div>
<div class="border-item" style="border-style:dashed"> dashed：虚线轮廓。 </div>
<div class="border-item" style="border-style:solid"> solid：实线轮廓 </div>
<div class="border-item" style="border-style:double"> double：双线轮廓。两条单线与其间隔的和等于指定的border-width值</div>
<div class="border-item" style="border-style:groove"> groove： 3D凹槽轮廓。 </div>
<div class="border-item" style="border-style:ridge"> ridge： 3D凸槽轮廓。 </div>
<div class="border-item" style="border-style:inset"> inset： 3D凹边轮廓。 </div>
<div class="border-item" style="border-style:outset"> outset： 3D凸边轮廓。 </div>

HTML选择器(标签选择器):
		标签名{css code}
		div{css code}
	ID选择器:
		#ID名{css code}
		#header{css code}
	class选择器:
		.class名{css code}
		.box{css code}
	关联选择器:
		selector1 selector2{css code}
	组合选择器:
		selector1,selector2{css code}
	子类选择器:
		selector1>selector2{css code}
	伪类选择器:
		a:link{css code}未访问链接
		a:hover{css code}鼠标划过链接
		a:active{css code}鼠标按下时
		a:visited{cdd code}已经访问过的

font-family:字体1,字体2
	font-size:字体大小
	font-weight:字体加粗 bold | normal | lighter
	font-style:字体风格  italic | normal | oblique
	font-variant:字体变形 small-caps|normal

	font:[字体风格][字体加粗][字体变形]<字体大小>[/行高]<字体族科>

background-color:颜色 #ffffff
	background-image:图片 url(../images/icon.png)
	background-repeat:重复方式 no-repeat | repeat-x | repeat-y | repeat
	background-attachment:背景附件 scroll | fixed
	background-position:位置 left|center|right top|center|bottom

	background:<color>|<image> [repeat][attachment][position]

text-align:left | center | right | justify(两端对齐)
	text-decoration:文字修饰
		underline		下划线
		overline		上划线
		line-through		删除线
		none			没有线
	letter-spacing:字母间隔
	color:颜色
	word-spacing:词的间隔(通过空格识别)
	text-indent:文本首行缩进
	line-height:行高
	white-space:nowrap 强制不换行
	word-wrap:break-word;word-break:normal 自动换行

border-color:颜色
	border-style:风格
		solid:实线
		dashed:虚线
		dotted:点线
		groove:巢状线
		ridge:脊线
		double:双实线
		inset:内嵌效果
		outset:外凸效果
	border-width:宽度
	border-radius:圆角
	border:width color style

margin-top:
	margin-left:
	margin-right:
	margin-bottom:
	margin:上下左右
	margin:上下 左右
	margin:上 左右 下
	margin:上 右 下 左
	padding:类似margin
	盒子的总宽:width + border + padding
	盒子的总高:height + border + padding
	盒子居中:
		设置属性:margin:0 auto;

position:定位
		absolute:绝对定位 ,默认基于body定位,可以同relative更改定位点
		relative:相对定位,也可以用作设置定位点
		fixed:固定定位
		static:静态定位(默认)
	定位需配合一下属性使用:
	top
	left
	right
	bottom

	z-index:显示层级调整

display:显示状态
		none:不显示(不占位)
		block:转换为块级元素
		inline:转换为行级元素
		inline-block:转换为行内块级元素
	visibility:元素显示状态
		inherit:继承(默认)
		hidden:隐藏
		visible:显示可见

overflow:
		hidden:隐藏
		visible:强制显示
		scroll:出现滚动条
		auto:自动

float:
		left
		right
	特性:
		设置浮动 脱离普通文档流
		浮动的元素都会变为块级元素
		如果不设置宽度，会尽可能的窄
		属性值:left  right
	clear:清除浮动
		left
		right
		both
	

鼠标光标

<div class="cursor-item" style="cursor:auto"> auto</div>
<div class="cursor-item" style="cursor:default">default </div>
<div class="cursor-item" style="cursor:none "> none</div>
<div class="cursor-item" style="cursor:context-menu">context-menu </div>
<div class="cursor-item" style="cursor:help "> help</div>
<div class="cursor-item" style="cursor:pointer">pointer</div>
<div class="cursor-item" style="cursor:progress "> progress</div>
<div class="cursor-item" style="cursor:wait "> wait</div>
<div class="cursor-item" style="cursor:cell "> cell</div>
<div class="cursor-item" style="cursor:crosshair">crosshair </div>
<div class="cursor-item" style="cursor:text "> text</div>
<div class="cursor-item" style="cursor:vertical-text">vertical-text </div>
<div class="cursor-item" style="cursor:alias ">alias </div>
<div class="cursor-item" style="cursor:copy "> copy</div>
<div class="cursor-item" style="cursor:move ">move </div>
<div class="cursor-item" style="cursor:no-drop ">no-drop </div>
<div class="cursor-item" style="cursor:not-allowed">not-allowed </div>
<div class="cursor-item" style="cursor:e-resize ">e-resize </div>
<div class="cursor-item" style="cursor:n-resize ">n-resize </div>
<div class="cursor-item" style="cursor:ne-resize ">ne-resize </div>
<div class="cursor-item" style="cursor:nw-resize ">nw-resize </div>
<div class="cursor-item" style="cursor:s-resize "> s-resize</div>
<div class="cursor-item" style="cursor:se-resize ">se-resize </div>
<div class="cursor-item" style="cursor:sw-resize ">sw-resize </div>
<div class="cursor-item" style="cursor:w-resize ">w-resize </div>
<div class="cursor-item" style="cursor:ew-resize ">ew-resize </div>
<div class="cursor-item" style="cursor:ns-resize "> ns-resize</div>
<div class="cursor-item" style="cursor:nesw-resize "> nesw-resize</div>
<div class="cursor-item" style="cursor:nwse-resize ">nwse-resize</div>
<div class="cursor-item" style="cursor:col-resize "> col-resize </div>
<div class="cursor-item" style="cursor:row-resize ">row-resize </div>
<div class="cursor-item" style="cursor:all-scroll">all-scroll </div>

html整体结构

<!DOCTYPE html>
<html>
	<head>
		<title>标题</title>
		<meta charset="utf-8"/>
		<meta http-equiv="content-type" content="text/html; charset=utf-8">
		<meta name="keywords" content="8-12个以英文逗号分隔的单词或者词语"/>
		<meta name="description" content="80字以内的一段话，与网站内容有关"/>
		<link rel="shortcut icon" type="image/x-icon" href="./favicon.ico"/>
		<meta name="author" name="author"/>
		<meta name="copyright" content="2008-2015版权所有"/>
		<meta http-equiv="refresh" content="3;url=https://www.baidu.com/"/>
		<base href="http://www.baidu.com" target="_blank">
		<link rel="stylesheet" type="text/css" href="css.css">
		<script type="text/javascript" src="js.js"></script> 
	</head>
	<boyd>
	</boyd>
</html>

格式标签:

hr：水平线
br：换行
p：段落
pre：按照原文输出，不支持标签直接输出
center：居中
ol：有序列表
ul：无序列表
li：列表中的项目

文本标签

u：下划线
i：斜体
b：粗体
s：中划线
em：斜体(强调)
strong：粗体(强调)
big：大的
small：小的
sub：下标
sup：上标
tt：打印机字体
cite：牵引
h1-h6：标题
font=>color,size=1-7：字体设置

表格标签

结构
table=>caption+tr=>td|th
table：表格
	width：宽度
	height：高度
	border：边框
	bgcolor：背景颜色
	background：背景图片
	cellspacing：单元格间距(外间距)
	cellpadding：单元格与内容间距(内间距)
	align：当对于外边的水平对齐方式
caption：表格标题
tr
	height：高度
	bgcolor：背景颜色
	align：水平对齐方式  left|center|right
	valign：垂直对齐方式 top|middle|bottom
td|th
	width：宽度
	height：高度
	bgcolor：背景颜色
	align：水平对齐方式	  left|center|right
	valign：垂直对齐方式  top|middle|bottom
	colspan：合并列
	rowspan：合并行
注意：tr没有宽度

a标签

a
	href：跳转的url地址
	target：打开方式    _self|_blank|_top|_parent|framename(自定义)
	title：鼠标停留时的提示文字
	name：名字(定义锚点时配合#用)

img标签

img
	src：图片的url地址
	width：宽度
	height：高度
	border：边框
	alt：当图片不正常显示时的代替文字

form表单相关标签

结构：
form=>input|select=>option|textarea
form
	action：数据接受的url文件地址
	method：提交的方式	get|post
	enctype="multipart/form-data"	//上传文件时定义
input
	type：类型
	name：名字
	value：值
	size：大小(可以设置text框的长度)
	disabled：禁止(无值属性)
	checked：选中(无值属性)
	readonly：只读(无值属性)
	placeholder：提示文字(html5)

其中type属性的值：
	text：文本框
	password：密码框
	radio：单选框	  同一组radio的name值必须相同
	checkbox：复选框  name的值后面要加[]
	submit：提交按钮  有提交功能
	button：普通按钮  没有提交功能
	image：图片按钮   有提交功能
	reset：重置按钮
	file：文件域
	hidden：隐藏域    传递不让用户看见的数据
	email：邮箱 (html5)

select：下拉框
	name：名字
	size：显示的选项数量
	multiple：设置可以多选(无值属性)
	disabled：禁止(无值属性)
option：选项
	value：值
	disabled：禁止(无值属性)
	selected：选中(无值属性)
textarea：多行文本域
	name：名字
	cols：列数
	rows：行数
	disabled：禁止(无值属性)
	readonly：只读(无值属性)
	maxlength：最大可输入长度

frameset框架

结构:
frameset=>frame
frameset
	cols：分列的定义 可以用百分比或者像素，值用英文的逗号隔开(,) *表示剩下的所有
	rows：分行的定义
	border：边框
	frameborder：是否显示边框 yes|no
frame
	href：显示的页面url地址
	name：名字
	scrolling：是否显示滚动条 yes|no
	noresize：禁止拖动

注意事项：frameset不能和body标签一起使用。

转载于:https://www.cnblogs.com/xin521/p/11014897.html