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

• 字体：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)