爱站程序员基地基础知识
1.css：样式表的定义
2.css：（Cascading Style Sheets）层叠样式表。
位置
1.内部样式head区域style标签里面
<head><style type=\"text/css\" ></style></head>
2.外部样式-link调用,外部样式表可以极大提高工作效率,外部样式表通常存储在 CSS 文件中：
<link rel=”stylesheet” type=”text/css” href=”my.css”(href表示路径)>
3.内联样式-标签元素里面：
<p style=\"color:red;\"></p>
4.优先级：外部样式表 < 内部样式表 < 内联样式。
注释
1.
/*注释内容*/
语法
1.CSS规则由两个主要的部分构成：要添加样式的盒子名或者标签名、和要添加的样式。
例：
h1{color:blue;font-size:12px}
几种颜色的表示方法
1.颜色名表示:aqua, black, blue, fuchsia, gray, green, lime, maroon, navy,olive, orange, purple, red, silver, teal, white, yellow.
2.十六进制的颜色值:16进制颜色
3.rgb(r,g,b)函数：
rgb
4.rgba(r,g,b,a)函数：
a表示的是改颜色的透明度，取值范围是0~1，0代表完全透明。
css选择器
1.选择器：css选择器就是要改变样式的对象。
选择器{属性:值;属性:值;}
（1）标签选择器：页面中所有的标签都是一个选择器
p{color:red;}
（2）ID选择器：选择id命名的元素 以 # 开头
#p1{color:#0f0;}
（3）类选择器：class选择器，选择clas命名的元素 以.开头
.first{color:#00f;}
（4）群组选择器：选择多个元素,以逗号隔开
#main,.first,span,a,h1{color:red;}
（5）包含选择器：选择某元素的后代元素，也称后代选择器，父类与子类间以空格隔开
p span{color:red;}
（6）属性选择器：选择包含某一属性的元素：
a[title]{color:red;}
选择包含title的a标签
a[title][href]{color:red;}
选择包含title和href的a标签。
（7）> + 选择器子类选择器：只选择子元素（只选择儿子）（相当于包含元素）
p > span{color:red;}
（8）相邻兄弟选择器：只选择后面的相邻兄弟元素
p + span{color:red;}
伪类选择器
1.同一个标签，根据其不同的种状态，有不同的样式。这就叫做“伪类”：
静态伪类：只能用于超链接的样式。如下：
:link 超链接点击之前
:visited 链接被访问过之后
动态伪类：针对所有标签都适用的样式。如下：
:hover “悬停”：鼠标放到标签上的时候
:active “激活”： 鼠标点击标签，但是不松手时。
:focus 是某个标签获得焦点时的样式（比如某个输入框获得焦点）。
2.
<a>
伪类选择器：
a:link {color:#FF0000;}
/ 未访问的链接 / （只用于a标签）
a:visited {color:#00FF00;}
/ 已访问的链接 / （只用于a标签）
a:hover {color:#FF00FF;}
/* 鼠标移动到链接上
/（可和其他标签结合一起用）
a:active {color:#0000FF;}
/ 选定的链接 /
3.输入伪类选择器（针对表单）：
input:focus{color:red;}
/ 键盘输入焦点 /
4.其他伪类选择器：
p:first-child{color:red;}
/ 第一个p */
:before
在元素之前添加内容。
:after
在元素之后添加内容。
5.优先级：内联样式表-> ID 选择器—> Class 类选择器->标签选择器。
背景属性
1.背景颜色的添加:
background:red;backgronnd-color:red;
2.背景图片的添加：
background:url(“images/1.jpg”);backgronnd-image:url(“images/1.jpg”);
3.背景的平铺：平铺就是图片重复出现。
不平铺：
background-repeat:no-repeat;
水平方向平铺：
background-repeat:repeat-x;
垂直方向平铺：
background-repeat:repeat-y;
完全平铺：默认为完全平铺。
4.背景图片的定位：可以设置显示背景图片的位置，通过属性background-position来实现：
（1）background-positon的英文单词取值：
top left top center top right
center left center center center right
bottom left bottom center bottom right
（2）background-positon的数值取值：
background-position:x y;
（3）positon的百分值取值：
background-position:x% y%;
5.背景图片的大小：可以通过属性background-size来设置。
background-size的数值取值
background-size:x y;
在这里插入代码片
background-size的百分值取值
background-size:x% y%;
6.背景图片的滚动：是否随着内容的滚动而滚动由background-attachment设置：
background-attachment:fixed;
固定，不随内容的滚动而滚动。
background-attachment:scroll;
滚动，随内容的滚动而滚动。
文字文本属性
1.文字属性：
color:red
; 文字颜色
font-size:12px
; 文字大小
font-weight:“bold”
文字粗细(bold/normal)
font-family:“宋体”
文字字体
font-variant:small-caps
小写字母
2.文本属性：
text-align:center
; 文本对齐(right/left/center)
line-height:10px
; 行间距(可通过它实现文本的垂直居中)
text-indent:20px
; 首行缩进
text-decoration:none
;
文本线(none/underline/overline/line-through)
letter-spacing
: 字间距
盒子模型
1.盒子模型就是一个有高度和宽度的矩形区域。
2.组成部分：
自身内容：
width
、
height
宽高
内边距：
padding
盒子边框：
border
边框线
与其他盒子距离：
margin
外边距
内容+内边距+边框+外边距=面积。
3.border 边框：
（1）常见写法
border:1px solid #f00;
（2）单独属性：
border-width:
border-style:
dotted 点状虚线
dashed（虚线）
solid（实线）
double（双实线）
border-color
(颜色)
4.padding 内边距：像素/厘米等长度单位、百分比。
（1）方向问题
padding:10px
; 上下左右
padding:10px 10px
; 上下 左右
padding:10px 10px 10px
; 上 左右 下
padding:10px 10px 10px 10px
; 上 右 下 左（设置4个点–>顺时针方向）
（2）单独属性：
padding-top:padding-right:padding-bottom:padding-left:
（3）当设置内边距的时候会把盒子撑大，为了保持盒子原来的大小，应该高度和宽度进行减小，根据width和height减小。
5.margin 外边距：
值：与padding相同
单独属性：与padding相同
外边距合并：两个盒子同时设置了外边距，会进行一个外边距合并。
块元素、行元素与溢出
1.块级元素：
（1）默认情况下独占一行的元素，可控制宽高、上下边距；两个块级元素连续编辑时，会在页面自动换行显示。块级元素一般可嵌套块级元素或行内元素
（2）块级元素一般作为容器出现，用来组织结构，但并不全是如此。有些块级元素，如只能包含块级元素
（3）DIV 是最常用的块级元素，元素样式的
display:block
都是块级元素。它们总是以一个块的形式表现出来，并且跟同级的兄弟块依次竖直排列，左右撑满。
2.行内元素：
（1）默认情况下一行可以摆放多个的元素，不可控制宽高和上下边距
（2）行内元素一般都是基于语义级(semantic)的基本元素，只能容纳文本或其他内联元素，常见内联元素 “a”。
（3）比如 SPAN元素，IFRAME元素和元素样式的
display : inline
的都是行内元素。例如文字这类元素，各个字母 之间横向排列，到最右端自动折行。
3.行块转换：
display:none
; 不显示
display:block
; 变成块级元素
display:inline
; 变成行级元素
display:inline-block
; 以块级元素样式展示，以行级元素样式排列。
4.溢出：
overflow:hidden
; 溢出隐藏
overflow:scroll
; 内容会被修剪，浏览器会显示滚动条
overflow:auto
; 如果内容被修剪，则产生滚动条
5.文本不换行：
white-space:nowrap
6.长单词换行：
word-wrap:break-word
7.block（块）元素的特点:
①、总是在新行上开始；
②、高度，行高以及外边距和内边距都可控制；
③、宽度缺省是它的容器的100%，除非设定一个宽度。
④、它可以容纳内联元素和其他块元素。
8.inline(行）元素的特点：
①、和其他元素都在一行上；
②、高，行高及外边距和内边距不可改变；
③、宽度就是它的文字或图片的宽度，不可改变
④、内联元素只能容纳文本或者其他内联元素。
9.对行内元素，注意:
（1）设置宽度width 无效。 设置高度height无效，可以通过line-height来设置。 设置margin
（2）只有左右margin有效，上下无效。
（3）设置padding只有左右有效，上下则无效。元素范围是增大了，但是对元素周围的内容是没影响的。
常见的块状元素
address
– 地址
blockquote
– 块引用
center
– 举中对齐块
dir
– 目录列表
div
– 常用块级容易，也是CSS layout的主要标签
dl
– 定义列表
fieldset – form
控制组
form
– 交互表单
h1 – 大标题
h2 – 副标题
h3 – 3级标题
h4 – 4级标题
h5 – 5级标题
h6 – 6级标题
hr – 水平分隔线
isindex – input prompt
menu
– 菜单列表
noframes – frames
可选内容，（对于不支持frame的浏览器显示此区块内容
noscript
– 可选脚本内容（对于不支持script的浏览器显示此内容）
ol
– 有序表单
p
– 段落
pre
– 格式化文本
table
– 表格
ul
– 无序列表
常见的行内元素
a
– 锚点
abbr
– 缩写
acronym
– 首字
b
– 粗体(不推荐)
bdo – bidi override
big
– 大字体
br
– 换行
cite
– 引用
code
– 计算机代码(在引用源码的时候需要)
dfn
– 定义字段
em
– 强调
font
– 字体设定(不推荐)
i
– 斜体
img
– 图片
input
– 输入框
kbd
– 定义键盘文本
label
– 表格标签
q
– 短引用
s
– 中划线(不推荐)
samp
– 定义范例计算机代码
select
– 项目选择
small
– 小字体文本
span
– 常用内联容器，定义文本内区块
strike
– 中划线
strong
– 粗体强调
sub
– 下标
sup
– 上标
textarea
– 多行文本输入框
tt
– 电传文本
u
– 下划线
可变元素
1.可变元素为根据上下文语境决定该元素为块元素或者内联元素。
applet – java applet
button
– 按钮
del
– 删除文本
iframe
– inline frame
ins
– 插入的文本
map
– 图片区块(map)
object
– object对象
script
– 客户端脚本
定位
1.static静态定位：默认值。没有定位，元素出现在正常的流中。
2.fixed固定定位：生成固定定位的元素，相对于浏览器窗口进行定位。 元素的位置通过 “left”, “top”, \”right\”以及 “bottom\”属性进行规定。
3.relative（相对定位 ）（参照物以他本身）：生成相对定位的元素，相对于其正常位置进行定位。
如果对一个元素进行相对定位，它将出现在它所在的位置上。
通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动
4.absolute（绝对定位）：除了static都可以，找到参照物–>与它最近的已经有定位的父元素进行定位，元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
元素的位置相对于最近的已定位祖先元素，如果元素没有已定位 的祖先元素，它的位置相对于最初的包含块。
5.z-index：属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
框架
1.
<frameset>
框架：用来定义一个框架；双标签 不能和 一起使用.
2.rows、cols属性:
<rows>
定义行表示框架有多少行（取值 px/%/ * ）
<cols>
定义列表示框架有多少列（取值px/ %/ * ）
3.frame子框架:
<frame>
—- 表示框架中的某一个部分；单标签，要跟结束标志
src 显示的网页的路径
name 框架名
frameborder 边框线（取值 0 / 1）
<noframes>
属性
<noframes>
提供不支持框架的浏览器显示body的内容；双标签.
<frameset><frame src=“” /><frame src=“” /><frame src=“” /><noframes><body>内容</body></noframes></frameset>
4.
<iframe>
内联框架:iframe元素会创建包含另外一个文档的内联框架（即行内框架）允许和 body 一起使用
width 宽（取值 px / %）
height 高（取值 px / %）
name 框架名
frameborder 边框线（取值 0 / 1）
src 显示的网页的路径.
css高级属性
1.
opacity
透明属性:对于IE6/7/，使用filter:alpha(opacity:值;) 值为0-100,对于Webkit，Opera，Firefox，IE9+，使用opacity:值; 值为0-1。
2.
border-radius
圆角边框属性
3.
box-shadow
阴影属性
