CSS----笔记
CSS能够为每个块做细小的布局，并进行染色，再做一些简单的交互处理。
一、CSS样式：内联式、嵌入式、外联式（优先级：内联式 > 嵌入式 > 外联式）
内联式：(也叫行内样式)嵌入到各个网页元素中，在HTLM的标签中使用style属性来设置css属性值。特点：仅作用于本标签
格式： 被修饰的内容
例: 在HTML中如何使用css样式
嵌入式：(内页样式)在网页上创建嵌入的样式表，在head标签中使用。特点：作用于当前整个页面。
格式：
例:
外联式：(外部样式)将网页链接到外部样式表(两种方法)，一、在head标签中使用标签导入一个css文件，在作用于本页面，实现css样式设置（推荐使用），二、import(不介绍)。特点作用于整个网站。
二、CSS选择器(注意不同选择器的嵌套)：高级语法、派生选择器、id选择符、类选择器。(优先级：从大到小 [ID选择符]->[class选择符]->[html选择符]->[html属性])。
CSS主要部分：
selector {property: value}
选择器 属性 值
高级语法(html属性)：
选择器分组
h1,h2,h3,h4,h5,h6{color:red;} 多个元素加入同一个样式继承关系(父子继承关系)
body{
color:red;
} /*body标签下的所有子标签继承color属性。“注：选择器的优先级”*/派生选择器(html选择器)：根据元素再其位置的上下关系来定义样式。
div a{ /*div下的a*/
color:red;
}id选择器：id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。id 选择器以 "#" 来定义。
1.定义： #id名{样式.....}
2.使用：...
3.注意：id选择符的名字只在网页中使用一次.
类选择器(class)：class类选择符 (使用点.将自定义名（类名）来定义的选择符)
1.定义： .类名{样式....}
2.使用：...
.mc{color:blue;} /* 凡是class属性值为mc的都采用此样式 */
p.ps{color:green;} /*只有p标签中class属性值为ps的才采用此样式*/
注意：类选择符可以在网页中重复使用
三、CSS颜色属性：HSL颜色、HSLA颜色、RGB颜色、RGBA颜色、十六进制色彩的表示方式、英文单词表示
HSL颜色与HSLA颜色：通过对色调(H)、饱和度(S)、亮度(L)、透明度(A)四个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色。
H:Hue(色调)：0(或360)表示红色，120表示绿色，240表示蓝色，也可取其他数值来指定颜色。取值为0-360 。
S:Saturation(饱和度)：取值为：0.0% - 100.0%。
L:Lightness(亮度)：取值为：0.0% - 100.0%。
A:Alpha透明度：取值0~1之间。
RGB颜色与RGBA颜色：红(R)、绿(G)、蓝(B)、透明度(A)四个颜色通道的变化。
以上RGB三个个参数，正整数值得取值范围为：0-255，百分比数值的取值范围为：0.0%-100.0%
超出范围的数值将被截至其最接近的取值极限。如：rgb(300,0,0)会被解析rgb(255,0,0)
A透明度为0~1。如：color: rgba(0,0,0,0.5);
十六进制色彩表示方式
颜色构成：红绿蓝
取值范围：0-9 a-f
如：#FFFFFF;#1a097d /*两个为一种颜色*/
英文单词表示
颜色构成：red blue green
如：color:red;
详细英文颜色对照表：http://www.w3school.com.cn/cssref/css_colornames.asp四、CSS字体属性(color设置字体颜色)
1.font-size:设置字体尺寸,字体大小。例(常用)：font-size:14px;
2.font-family:设置文本的字体名称序列。一般字体引用可以不加引号，如果字体名包含了空格、数字或者符号（如连接符）则需加上引号，避免引发错误。例(常用)：font-family:Arial;
3.font-style：设置或检索对象中的文本字体样式。
1.normal指定文本字体样式为正常的字体。 例：font-style:normal;
2.italic指定文本字体样式为斜体。 例：font-style:italic;
3.oblique指定文本字体样式为倾斜的字体。 例：font-style:oblique;
4. font-weight：设置文本字体的粗细。
1.normal:正常的字体，相当于数字值400。 例：font-weight:normal;
2.bold:粗体，相当于数字值700。 例：font-weight:bold;
3.bolder:定义比继承值更重的值。 例：font-weight:bolder;
4.lighter:定义比继承值更轻的值。 例：font-weight:lighter;
<字体值>:用数字表示文本字体粗细。取值范围：100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 例：font-weight:700;
5.font-variant:设置文本是否为小型的大写字母。
值：
normal:正常的字体
small-caps:小型的大写字母字体(英文显示效果)
如：font-variant:small-caps;/*小型的大写字母*/6. white-space:nowrap; 设置文本字体的粗细。
五.CSS文本属性
text-indent: 首行缩进：text-indent:30px;
overflow:auto 滚动条(超出了div边框才会出现)overflow-x横向; overflow-y纵向
white-space:nowrap 文字强制不换行
text-align: 文本的位置：left center right
cursor:pointer 鼠标光标形状变成小手
text-decoration: 字体画线：none无、underline下画线，line-through贯穿线
text-shadow: 文本的文字是否有阴影及模糊效果
direction： 文字流方向。ltr | rtl
letter-spacing: 文字或字母的间距
word-spacing： 单词间距
line-height： 行高
color： 字体颜色
例子：
文本属性
文本属性-段落标签
超链接下划线的去除
- 文字的模糊
/*style.css文件内容*/
p{
color:red;
text-indent:30px;
text-align:center;
text-decoration:line-through;
word-spacing:30px;
letter-spacing:30px;
direction:ltr;
width:200px;
height:30px;
background:green;
white-space:nowrap;
text-overflow:ellipsis;
overflow:hidden;
}
a{
text-decoration:none;
}
ul li{
text-shadow:0px 0px 3px #ff0000;
font-size:35px;
line-height:20px;
}六、 CSS边框属性
注：以下属性都具备，提供的参数根据顺时针方向重复旋转赋值。
1、border:复合属性(设置对象边框特征)
用法：border:边框宽度 边框样式 边框颜色;
如：border:1px solid red;
2、border-color:设置或检索对象的边框颜色
如：border-color:red;
3、border-style:设置或检索对象的边框样式
如：border-style:dashed;
取值：dotted:点状轮廓。
dashed:虚线轮廓。
solid:实线轮廓。
double:双线轮廓。(两条单线与其间隔的和等于指定的border-width值)
groove:3D凹槽轮廓。
ridge:3D凸槽轮廓。
inset:3D凹边轮廓。
outset:3D凸边轮廓。
4、border-width:设置或检索对象的边框宽度
如：border-width:2px;
5、border-radius: 设置或检索对象使用圆角边框(边框范围还是原来的范围)
注：为正方形，值与边长一半就能画圆。
如：border-radius:40px;
例子：
css边框属性
块元素
块元素
行元素
加粗
/*CSS文件内容*/
div{
width:200px;
height:200px;
background-color:#fff;
border:5px solid green;
border-color:green yellow pink;
border-style:ridge groove outset inset;
border-width:10px 20px 30px 40px;
}
.ad{
width:200px;
height:200px;
border:5px solid green;
border-radius:50%;
}
七、 CSS定位属性
定位属性：为了调整元素所存在的位置。(默认左上角加载)
块元素：div、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为一块内容，即“块框”。
行内元素：span 和 strong 等元素称为“行内元素”，这是因为它们的内容显示在行中，即“行内框”。
一、定位方式(position)
absolute(绝对定位)、fixed(固定定位)、relative(相对定位)“定位参考，可对内部相对absolute定位”
二、定位属性值
1.z-index:
层叠顺序，值越大越在上方。层级关系最里层在最上边。
2.top:
检索或设置对象与其最近一个定位的父对象顶部相关的位置
3.right:
检索或设置对象与其最近一个定位的父对象右边相关的位置(绝对定位下控制浏览器窗口时跟随浏览器移动)用的少
4.bottom:
检索或设置对象与其最近一个定位的父对象下边相关的位置
5.left:
检索或设置对象与其最近一个定位的父对象左边相关的位置(绝对定位下控制浏览器窗口时浏览器下面会出滚动条)
例子：
定位属性
/*CSS代码*/
.ad{
width:200px;
height:200px;
border:1px solid red;
/*
position:absolute; 绝对定位
top:50px;
left:50px;
*/
position:fixed; /*固定定位*/
top:200px;
}
.ae{
width:50px;
height:50px;
background:green;
/*
position:relative; 相对定位
top:50px;
left:50px;
*/
}
八、 CSS浮动属性
作用：当需要两个DIV在同一排时，浮动属性很好的起到作用。
css浮动属性
float 浮动
float:left 左浮动
float:right 右浮动
对齐操作
1.水平对齐(margin)/*盒子模型的形况下对齐*/
margin-left:auto;
margin-right:auto;
2.左右对齐(position)/*定位的情况下对齐*/
position:absolute;
left:0;
right:0;
3.左右对齐(float)/*浮动情况下对齐*/
float:left;
float:right;九、 CSS盒子模型
div-内填充-边框-外填充
1、内填充padding
padding: /*设置对象是四边的内部边距*/
padding-top: /*设置对象顶部的内部边距*/
padding-right: /*右部*/
padding-bottom: /*下部*/
padding-left: /*左部*/2、外填充margin(没有颜色属性)
margin: /*设置对象四边的外延边距*/
margin-top: /*顶部*/
margin-right: /*右部*/
margin-bottom: /*下部*/
margin-left: /*左部*/十、 CSS伪类元素
a:link{
color:red;/*未访问的链接的颜色*/
}
a:hover{
color:green;/*鼠标滑过链接的颜色*/
}
a:active{
color:pink;/*鼠标点击的效果的颜色*/
}
a:visited{
color:blue;/*访问过的链接的颜色*/
}
十一、 背景属性
background-color: /*背景颜色*/
background-image:url("背景图片的url")
/*注意：背景图像上能继续放图片，而img图片上不能*/
background-position: /*图片的位置*/
/*两个值，第一个值代表x轴，第二个值代表y轴*/
background-repeat: /*图片是否平铺值*/
图片是否平铺值：
Repeat 默认 x轴 y轴 都平铺
No-repeat 不平铺
Repeat-x x轴平铺 y轴不平铺
Repeat-y y轴平铺 x轴不平铺
详细教程：http://www.w3school.com.cn/css/index.asp