css

CSS：层叠样式表（Cascade Style Sheet）

分类：
一：位置
1.行内样式表: 标签/元素上 style="样式属性1:值1;样式属性2:值2…"属性，修改html元素的样式
2.内嵌样式表: 写在head里 创建 可以写注释 /**/
3.外联样式表: 创建一个css文件(直接的样式作用) 将样式引入到目标页面

总结：行内》》》内嵌/外联 ，内嵌/外联 就近原则 ※：样式遵从就近原则：谁离作用标签近就选谁。

二：类型
1.id 通过id值来访问标签，改变标签的样式 #id值 来访问
2.类 class .class值 来访问
3.标签 标签名 来访问

id>>>类>>>标签
补充:样式共用
并列使用,将一个样式作用在多个标签上。
包含使用[空格] 将样式批量作用。

---

字体：
font-size ：（1~900px）font-family：字体样式（微软雅黑）
font-style：normal italic oblique 正常 斜体 倾斜
font-weight: 100~900(+100) bold bolder lighter
font-variant:small-caps:小写字母边大写 并写的小一点

背景:
background-image:url(…/images/06.jpg); 背景图
background-repeat:no-repeat; 是否重复
background-attachment:scroll; 是否滚动
background-position:50% 50%; 设置相对位置

文本：
word-spacing:单词距离 汉字不支持
letter-spacing:字母距离 中文支持
text-decoration: •none •underline(下划线) •overline（上划线） •line-through（中划线）
•blink
text-transform:none capitalize(单词首字母大写) uppercase（所有单词大写）
lowercase（所有单词小写） inherit（遵从父类）
text-align:left right center justify inherit
vertical-align: top bottom middle

超链接的伪类

•a:link - 普通的、未被访问的链接
•a:visited - 用户已访问的链接
•a:hover - 鼠标指针位于链接的上方
•a:active - 链接被点击的时刻

作业：制作表格 利用样式修改它们的水平 垂直排列方式

---

margin：外边距:当前标签的边和父标签内容的距离
margin: 合并属性 1个值:全部（上下左右） 2个值 （A 上下 B左右）
3个值（A上 B左右 C下） 4个值（A 上 B右 C下 D左）
padding:内边距 父标签的内边框和子标签的外边框
合并属性同上

float:滑动 left right

一切皆为框:
div、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为一块内容，即“块框”。
与之相反，span 和 strong 等元素称为“行内元素”，这是因为它们的内容显示在行中，
即“行内框”。

position属性：元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
1.absolute 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
2.fixed 生成绝对定位的元素，相对于浏览器窗口进行定位。
3.relative 生成相对定位的元素，相对于其正常位置进行定位。
4.static 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
5.规定应该从父元素继承 position 属性的值。
例子:
table{
position:relative;
left:450px;/本身的属性是可以起作用的/
}

使用 margin 属性来水平对齐
margin-left:auto;
margin-right:auto;
使用 position 属性进行左和右对齐
right:0px;
width:300px;
使用 float 属性来进行左和右对齐
float:right;
width:300px;

?list-style-type:none - 删除圆点。导航栏不需要列表项标记。
?把外边距和内边距设置为 0 可以去除浏览器的默认设定。

list-style-type:none;
margin:0;
padding:0;

IE9, Firefox, Chrome, Opera 和 Safari 使用属性 opacity 来设定透明度。opacity 属性能够设置的值从 0.0 到 1.0。值越小，越透明。

IE8 以及更早的版本使用滤镜 filter:alpha(opacity=x)。x 能够取的值从 0 到 100。值越小，越透明。

img
{
opacity:0.4;
filter:alpha(opacity=40); /* 针对 IE8 以及更早的版本 /
}
img:hover
{
opacity:1.0;
filter:alpha(opacity=100); / 针对 IE8 以及更早的版本 */
}

延申：
修改所有图片的颜色为黑白 (100% 灰度):
img {
-webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
filter: grayscale(100%);
}

阴影:
img {
-webkit-filter: drop-shadow(8px 8px 10px red); /* Chrome, Safari, Opera */
filter: drop-shadow(8px 8px 10px red);
}

将图像转换为灰度图像:
img {
-webkit-filter: grayscale(50%); /* Chrome, Safari, Opera */
filter: grayscale(50%);
}

反转输入图像:
img {
-webkit-filter: invert(100%); /* Chrome, Safari, Opera */
filter: invert(100%);
}

转换图像饱和度:
img {
-webkit-filter: saturate(800%); /* Chrome, Safari, Opera */
filter: saturate(800%);
}

box-shadow: inset 0 0 1px #fff, inset 4px 4px 20px rgba(255,255,255,0.33),
inset -2px -2px 10px rgba(255,255,255,0.25);所表示的含义是，无偏移1像素模糊白色阴影重叠于左上角4像素偏移20像素模糊透明度0.33的白色内阴影再重叠于右下角偏移2像素，模糊10像素，透明度0.25的白色内阴影。