html css 样式表

1.层叠样式表：

• 外部样式表 - link

<link rel="stylesheet" href="css/style.css">

• 内部样式表 - style

<style type="text/css">
			*{
				margin: 0px;  
				padding: 0px; 
			}</style>

• 行内样式表 - 不推荐使用

<div style="background-color: #006633;color: #00FFFF;" >请交作业</div>

2.选择器：

• 通配符选择器 - *

*{	}

• 标签选择器 - p

p{	}

• 属性选择器 - input[type=text]

input[type=text]{	}

• 类选择器 - .foo

.foo{	 }

• ID选择器 - #bar

#bar{  }

• 组合类型的选择器

  后代：p h1

  父子：p>h1

  兄弟：p~h1

  相邻兄弟：p+h1

p h1{  }  
p>h1{  }
p~h1{  }
p+h1{  }

3.三条原则：

• 重要性原则 - !important

p {
    background: red !important;
}

• 具体性原则 - # > . > tag[...] > tag > *
• 就近原则

4.常用属性：

• 颜色：color - red / rbg / rgba / hsl / hsla / hex code

p {
    color: red;
    color: #000000;
    color: rgb(0,0,0);
    color: rgba(111,111,111,0.5); /* 0.5是透明度 */
    color:hsla(120,65%,75%,0.3); /* HSL（色调，饱和度，明度）。色相是在色
轮上的程度（从0到360）-0（或360）是红色的，120是绿色的，240是蓝色的。饱和度是一个百分比值;0％意味着灰色和100％的阴影，是全彩。亮度也是一个百分点;0％是黑色的，100％是白色的。
α是Alpha参数定义的不透明度。 Alpha参数是一个介于0.0（完全透明）和1.0（完全不透明）之间的参数。 */
}

• 尺寸：width / height - px / cm / em / percentage

name	作用
height	设置元素的高度
	max-height
	max-width
	min-height
	min-width
	width

• 字体：font

@font-face {            /* 加载本地字体加载后命名为fatdog*/
				font-family:fatdog;
				src: url(fonts/chunkfive.ttf);
			}
h3{
				text-transform: uppercase;   /* 字母大写 */
				font-family: fatdog;  /* 使用字体fatdog*/				
			}
body {
				font-size: 80%;
				font-family: "Courier New", Courier, monospace;
	}			

• 文本：text-align / line-height / text-decoration / letter-spacing / vertical-align

	text-align:right;	/* center居中;left左对齐; */
	line-height:20px;	/* 行高 */
	text-decoration:underline; 	/* none	默认。定义标准的文本。
                                           underline 定义文本下的一条线。
                                           overline	定义文本上的一条线。
                                           line-through	定义穿过文本下的一条线。
                                           blink	定义闪烁的文本。 */
	letter-spacing: -3px  ;	/*字符间距 */
	vertical-align   	/*
baseline	默认。元素放置在父元素的基线上。
sub	垂直对齐文本的下标。
super	垂直对齐文本的上标
top	把元素的顶端与行中最高元素的顶端对齐
text-top	把元素的顶端与父元素字体的顶端对齐
middle	把此元素放置在父元素的中部。
bottom	把元素的底端与行中最低的元素的顶端对齐。
text-bottom	把元素的底端与父元素字体的底端对齐。
length	 
%	使用 "line-height" 属性的百分比值来排列此元素。允许使用负值 */

• 边框/轮廓：border / outline

border:5px solid red;      
border-style:dotted solid double dashed;
/* 上边框是点状
右边框是实线
下边框是双线
左边框是虚线 */
outline:green dotted thick;
/* thin	规定细轮廓。
medium	默认。规定中等的轮廓。
thick	规定粗的轮廓。
length	允许您规定轮廓粗细的值。 */

• 列表：list-style-type / list-style-image / list-style-position

list-style-type:none;/*
none	无标记。
disc	默认。标记是实心圆。
circle	标记是空心圆。
square	标记是实心方块。
decimal	标记是数字。
decimal-leading-zero	0开头的数字标记。(01, 02, 03, 等。)
lower-roman	小写罗马数字(i, ii, iii, iv, v, 等。)
upper-roman	大写罗马数字(I, II, III, IV, V, 等。) */
list-style-image:url('sqpurple.gif');
list-style-position: inside;
/*inside	列表项目标记放置在文本以内，且环绕文本根据标记对齐。
outside	默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外，且环绕文本不根据标记对齐。*/

• 表格：border-collapse / border-spacing / empty-cells / table-layout

table
{
    border-collapse:separate;
    border-spacing:10px 50px;
}
/*border-spacing:0; 可以用来合并边框效果超好 */
/*collapse	如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性
separate	默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性*/
empty-cells:hide;
/*empty-cells 属性设置是否显示表格中的空单元格（仅用于"分离边框"模式）。
hide	不在空单元格周围绘制边框。
show	在空单元格周围绘制边框。默认。
 */
table-layout:fixed;
/*automatic	默认。列宽度由单元格内容设定。
fixed	列宽由表格宽度和列宽度设定。*/

• 背景：background-color / background-image / background - CSS抠图

#img1{
				display: inline-block;
				width: 100px;
				height: 100px;
				background-image: url(images/icons.jpg);
				background-repeat: no-repeat no-repeat;
				background-position: -150px -80px;
			}

• 内外边距：margin / padding

#page {
				margin: 10px auto 10px auto;
				padding: 20px;

• 定位：position / z-index / float / clear

z-index:10;  图层可以是负数 值大的会覆盖值小的
float: left ;
clear:both;/*
left	在左侧不允许浮动元素。
right	在右侧不允许浮动元素。
both	在左右两侧均不允许浮动元素。
none	默认值。允许浮动元素出现在两侧。*/
h2
{
    position:absolute;
    left:100px;
    top:150px;
}
/* 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
absolute生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
fixed 生成固定定位的元素，相对于浏览器窗口进行定位。
relative生成相对定位的元素，相对于其正常位置进行定位。
因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
sticky粘性定位，该定位基于用户滚动的位置。

*/

• 其他：display / visibility / cursor

/* 隐藏 不占位置 */
display:  none  ;
/* 隐藏 占位置 */
 visibility: hidden;
/* visibility: inherit; */
cursor:wait;/*
url	需使用的自定义光标的 URL。
注释：请在此列表的末端始终定义一种普通的光标，以防没有由 URL 定义的可用光标。
default	默认光标（通常是一个箭头）
auto	默认。浏览器设置的光标。
crosshair	光标呈现为十字线。
pointer	光标呈现为指示链接的指针（一只手）*/

• 动画：@keyframes animation

5.伪类/伪元素

• :first-letter / :first-line

:first-letter 首字符
:first-line  首行

• :focus / :hover / :visited / :active

input:focus /* 输入框获得焦点,背景颜色改为黄色*/
{ 
background-color:yellow;
}
a:hover  鼠标移到链接上的样式
visited选择器样式链接到你已经访问过的页面。
active选择器样式触发时链接到链接页面

• :first-child / :last-child / :nth-child(n)