CSS CSS：基础知识

Posted 2021-05-23

/*
 * The Basics
 ********************************************************************/
body { font: 1em/1.5 Arial, sans-serif; }

	/* linking */
	a { }
	a:visited { }
	a:hover { }

	a img { }
	a:visited img { }
	a:hover img { }

	/* the usual */
	p { }
	p+p { margin: 1em 0; }
	img { }

	/* lists */
	ul { }
	ol { }
	menu { }
	ul, ol { list-style: none; }
	li { }
	dl { }
	dd { }
	dt { }

	/* table */
	table { border-collapse: collapse; border-spacing: 0; }
	tr { }
	th { }
	td { }
	caption { }

	/* quotation */
	q { }
	cite { }
	blockquote { }
	blockquote p.quotation { }
	blockquote p.testimonial { }
	blockquote p cite { }


	/* headings */
	h1, h2, h3, h4, h5, h6 { }
	h1 { }
	h2 { }
	h3 { }
	h4 { }
	h5 { }
	h6 { }

	/* form */
	form { }
	fieldset { }
	legend { }
	label { }
	input, textarea, select { font: 1em/1.5 Arial, sans-serif; }
	input { }
	input[type="text"] { }
	input.text { }
	input[type="button"] { }
	input.button { }
	input[type="submit"] { }
	input.submit { }
	input[type="reset"] { }
	input.reset { }
	input[type="file"] { }
	input.file { }
	input[type="radio"] { }
	input.radio { }
	input[type="checkbox"] { }
	input.checkbox { }
	input[type="password"] { }
	input.password { }
	select { }
	select option { }
	select optgroup { }
	textarea { }
	button { }

	/* type format */
	abbr { }
	acronym { }
	address { }
	small { }
	pre { }
	pre p { }
	sub { vertical-align: sub; }
	sup { vertical-align: sup; }
	var { }
	code { }
	strong { }
	b { }
	em { }
	i { }
	del { }
	dfn { }
	ins { }
	kbd { }
	samp { }

	/* generic */
	div { }
	span { }

	/* externals */
	object { }
	iframe { }

	/* html5 */
	article { }
	area { }
	aside { }
	audio { }
	canvas { }
	command { }
	datalist { }
	details { }
	dialog { }
	embed { }
	figure { }
	footer { }
	header { }
	hgroup { }
	keygen { }
	mark { }
	meter { }
	nav { }
	output { }
	progress { }
	rp { }
	rt { }
	ruby { }
	section { }
	source { }
	time { }
	video { }

/*
 * CSS Utility Classes
 ********************************************************************/

	/* clearing */	
        .clear-hack             { display: inline-block; *zoom: 1; *display: block; }
        .clear-hack:after       { content: "clear"; clear: both; display: block; visibility: hidden; height: 0; }
				/* See: http://www.positioniseverything.net/easyclearing.html 
				 * if you care about IE/Mac
				 */
	.clear			{ clear: both; }
	.clear-left		{ clear: left; }
	.clear-right		{ clear: right; }

	/* justification */
	.text-left		{ text-align: left; }
	.text-right		{ text-align: right; }
	.text-center		{ text-align: center; }
	.text-justify		{ text-align: justify; }

	/* additional type style */
	.bold			{ font-weight: bold; }
	.italic			{ font-style: italic; }
	.underline		{ text-decoration: underline; }
	.highlight		{ background: #ffc; }
	.teletype 		{ font-family: monospace; }
	.big 			{ font-size: bigger; }
	.blink 			{ text-decoration: blink; }
	.strike 		{ text-decoration: line-through; }
	.compact		{ display: compact; }

	/* image alignment */
	img.align-right 	{ float: right; margin: 0 0 0 1em; }
	img.align-left 		{ float: left; margin: 0 1em 0 0; }
	img.align-center 	{ display: block; margin: 0 auto; }

	/* lists, etc */
	.nopadding		{ padding: 0; }
	.noindent		{ margin-left: 0; padding-left: 0; }
	.nobullet		{ list-style: none; list-style-image: none; }
	.inline 		{ display: inline; }

	/* floating */
	.left			{ float: right; }
	.right			{ float: left; }