CSS基础
第一章
css基础语法
每个css样式由两部分组成，即选择符和声明，声明又分为属性和属性值。
属性必须放在花括号中，属性与属性值用冒号连接。每条声明用分号结束。属性值与属性值不分先后顺序。
选择符{属性：属性值;}
div{width:500px; height:500px;}
样式的建立：
1.内部样式(最好写在
中)内部样式表(嵌套到页面中)
语法：
css语句
background:背景色
div{width:500px;height:500px; background:#096}
2.外部样式
a).外部样式表的创建
b).外部样式表的导入
1.先创建css文件
2.
3.设置css文件的样式
3.内联样式
内联样式(表行间样式，行内校长，嵌入式样式)
语法：标签>
优先级： 内联样式--->(内部，外部)
第二章 css选择符(选择器)
选择符的定义：选择符表示要定义样式的对象，可以是元素本身，也可以是一类元素或者制定名称的元素。
常用的选择符有十种左右类型选择符，id选择符，class选择符，通配符，群组选择符，包含选择符，伪类选择符，伪对象选择符。
1.元素选择符/类型选择符/标签选择符(element选择器)
语法：元素名称{属性：属性值;}
类型选择符是根据html语言中的标记来直接定义
例：
div{ width:90px; height:90px; color:#000; background:#CF6;}
p{ color:#0C0;} //让全部P标签都变颜色
我是一个p标签！！！
我是一个pp标签！！！
2.id选择器
语法：#id名{属性：属性值;}
说明：
1.使用id选择符时，要为每个元素定义一个id属性
2.id选择符的语法格式是 #top{width:300px;height:300px;}
3.一个id名称只对应一个具体元素对象
例 ：
#top{ color:#906;font-size:36px;} //font-size:36px;放大
我是一个p标签！！！
3.class 选择器
语法： .class名{属性：属性值;}
说明：
1.当我们使用类选择符时，应先为元素定义一个名称。
2.类选择符语法格式是
用法：class选择符更适合定义一类样式
例：
.top{ color:#906;font-size:36px;} //可以放在一个或者多个
我是一个p标签！！！
4.群组选择器
语法：选择符1，选择符2，......{属性：属性值;}
说明：当有多个选择符应用相同的样式时，可以将选择符用" , " 分隔的方式，合并为一组。
.top,#nav,p{width:11px;}
例：
.top1{ color:#906;font-size:36px;}
#top{ color:#906;font-size:36px;}
p{ color:#0C0;}
p,.top1,#top{ font-size:60px;} //群组标签可以让多个标签一起共享属性
ccsfefs
我是一个p标签！！！
5.包含选择器
语法:选择符1(父) 选择符2(子) {属性：属性值;}
说明：选择符1和选择符2 用空格隔开，含义就是选择符1包含的所有选择符2.
div ul li{height:200px;}
例：
ul li{ color:#C0C;}
- 我是包含选择器
6.通配符选择器
语法：*{属性：属性值;}
说明：通配选择符的写法是" * "，其含义就是所有元素标签。
用法：常用来重置样式。
*{ margin:0;padding:0;} 外边距
例：
*{ color:#060; margin:0; padding:0;} //所有的标签
7.伪类选择器
a:link{color:red} //未访问的链接状态
a:visited{color:green;}//已访问的链接状态
a:hover{color:blue;} //鼠标滑过链接状态
a:active{color:yellow;}//鼠标按下去时的状态
说明：
1.当这4个超链接伪类选择符联合使用时，应注意他们的顺序，正常顺序为：a,a:link,a:visited,a:hover,a:active,错误的顺序会使超链接的样式失效。
2.为了简化代码，把伪类选择符中相同的声明提出来放在a选择符中 a{color:red;} a:hover{color:green;}:表示其他有一种状态都相同，只有鼠标划过变化颜色。
例：
a: link{ color:red;}
a: visited{ color:yellow;}
a: hover{ color:blue;}
a: active{ color:#0F0;}
或者 a{ color:red;}
a:hover{ color:yellow}
选择符的权重
内联样式选择符 > id选择符 > class选择符 = 属性选择符 = 伪类选择符 = 伪元素选择符 > 类型选择符 > 子选择符 > 继承选择符
包含选择符：为包含选择符之和。
如果权重相同时，则执行后写的样式。因为后写的样式覆盖了前面的
css的注释： /* */
第三章 css核心属性和浮动
css属性组成和作用
属性：属性值
1.每个css样式都必须由两部分组成：选择符(Selector)和声明(Decleration)声明又包括属性(Properyt)和属性值(Value)
2.css属性：属性是指定选择符具有的属性，他是css的核心，css2共有15多个属性
3.css属性值：属性仁包括法定属性值和常规的数值加单位,div{width:400px;}
一. 文本文字属性
1.文本大小 ：{font-size:12px/14px/16px}
说明：
属性值为数值型时，必须加单位，为0时除外。默认为16px;
2.字体的类型
{ font-family:字体1，字体2}
当字体是英文字体的时候加"宋体"
3.文本颜色 ：{color:颜色值;}{background:250，0，0，1} 第4个值是背景色的深浅度
二. 列表属性
1. 定义列表符号样式：{list-style-type;}
说明：取值：disc(实心圆) circle(空心圆) square(实心方块) none(去掉列表符号);
例：
ul li{list-style-type: square }
- 111
- 222
- 333
2.使用图片作为列表符号： {list-style-image:url(图像路径);}
说明：url(所使用图片的路径及全称)
例：
ul li{list-style-image: url(images/005EpFX5gy1g5h4jw2l7yj30tz1f7ao8.jpg); }
3.定义列表符号的位置： {list-style-position:;}
说明：取值： outside(外边) inside(里边)
例：
ul li{list-style-position:outside;}
4.取消列表符号 ： {list-style-none}
例：
ul li{list-style-type:none;}
三.css边框属性
语法:{border: ;}
说明：
属性1：边框样式border-style:solid/dashed/dotted/double solid:实线 ，dashed:虚线 ，dotted:点状线 double:双线， none/0：去掉边框
属性2：边框厚度 bosrder-width:取值;
属性3：边框颜色 border-color: 取值;
例：
div{ width:300px; height:300px; background:#09F;
border:2px dotted red; //第一个是线的宽度，第二个是边框的样式 ，第三个是边框的颜色
}// border: width style color;
1.单独设置某个方向的边框属性：
border-top:上边框
border-bottom:下边框
border-left:左边框
border-right:右边框
例：
border-top :2px dotted red; //这个是简写
border-top-style: dotted;
border-top-width: 2px;
border-top-color: red;
四. 背景图属性
背景颜色
语法：选择符{background-color:颜色值} 简写： background:color值;
1.背景图片的设置
语法:background-image:url(背景图片的路径及全称);
说明：
网页上有两种图片形式：插入图片，背景图;插入图片：属于网页内容，也就是结构。 背景图：属于网页的表现，背景图上可以显示文字，插入图片，表格等。
背景图片的显示原则：
容器等于图片，正好
容器大于图片尺寸，平铺
容器小于图片尺寸，只显示元素范围以内的图
加载背景图必须有容器区域。
2.背景图片平铺属性
语法：选择符{background-repeat:no-reat/repeat/repeat-x/repeat-y}
no-repeat:不平铺
repeat:平铺(默认)
repeat-x:横向平铺
repeat-y:纵向平铺
例：
div{width:900px; height:900px; border: 3px dotted red;
background-image:url(images/005EpFX5gy1g5h4k317zrj30u01br48t.jpg);
background-repeat:repeat;
}
3.背景图片的位置
语法：选择符{background-position:水平方向属性值 垂直方向}
水平方向值：left/center/right或数值
垂直方向值：top/center/botton或数值10
说明：
水平向右 垂直向下移动 是正数值
水平向左 垂直向上 是负数值
例：
background-position:left top; 向左向上
background-position:right botton; 向右向下
4.背景图片固定
语法：选择符{background-attachment:scrooll(滚动)/fixed(固定)}
说明：fixed 固定，不随内容一块滚动; scrooll:随内容一块滚动。
例：
body{background-image:url(images/005EpFX5gy1g5h4juu6dtj30u0190gtf.jpg);
background-repeat:no-repeat;
background-position:top right;
background-attachment: scroll;
}
div{ height:9000px; }
5.css浮动属性
float:定义网页中其它文本如何环绕该元素显示
有三个取值：
left:元素活动浮动在文本左面
right:元素浮动在右面。
none:默认值，不浮动。
浮动产生负作用
浮动产生负作用
1.背景不能显示 (overflow:hidden;)
由于浮动产生，如果对父级设置了(css background背景)CSS背景颜色或CSS背景图片，而父级不能被撑开，所以导致CSS背景不能显示。
2.边框不能撑开
如果父级设置了CSS边框属性(css border),由于子级里使用了float属性，产生浮动，父级不能被撑开，导致边框不能随内容而被撑开。
3.margin padding设置值不能正确显示
由于浮动导致父级子级之间设置了css padding, cssmargin 属性的值不能正确表达，特别是上下边的padding和margin不能正确显示。
例：
*{ margin:0; padding:0;} //取消设置 如 li 留下的那个实点
ul{ width:900px; border:3px dotted red; list-style:none; overflow: hidden;}//overflow:hidden :让行高自适应
.left{ width:300px; height:300px; background:#FF0; float:left;} //float:left设置浮动全部向左排
.chent{ width:300px; height:300px; background:#000; float:left}
.right{ width:300px; height:300px; background:red; float:left}
清除浮动
浮动的框可以向左向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。浮动框是脱离子普通的文档流。
清除浮动的方法
1.父级添加overflow:hidden:缺点：父级这个盒子不能放其他元素
2.clear:both清除浮动
3.万能清除浮动
五 CSS盒模型
盒模型的概念：盒模型是CSS布局的基石，它规定了网页元素如何显示以及元素间相互关系，CSS定义所有的元素都可以拥有像盒子一样的外形 和平面空间，即都包含内容区，补白(填充)，边框，边界(外边距)这就是盒模型。
*{margin:0; padding:0;}:消除内外边距
1.padding：内边距
padding是设定页面中一个元素内容到元素的边框之间的距离，也称补白.padding没有负值。
用法：
一个值：四个方向padding:2px: // padding-top:20px;上 botton：下 lefe:左 right:右
二个值：上下 左右{padding:10px 20px;}
三个值： 上 左右 下{padding:10px 20px 30pox;}
四个值： 上右下左{padding:10px;20px;30px;40px}
2.margin : 外边距
边界：margin，在元素外边的空白区域，称为边距。
和padding一样
margin:auto; 自适应 左右边距相等
例：
*{ margin:0; padding::0;}
div{width:300px; height:300px; border:3px solid red; background-image:url(images/005EpFX5gy1g5h4jw2l7yj30tz1f7ao8.jpg);
padding:20px 60px 90px 160px;
margin:auto ;
}
3.文本属性-容器溢出{ overflow:} 处理溢出的数据
{overflow:visible/hidden/scroll/zuto/inherit;}
visible:转变值，内容不会被修剪，会呈现在元素框之外。
hidden：内容会被修剪，并且其余内容是不可见的：
scroll：内容会被修剪，但是浏览器会显示流动条，以便查看其余的内容
auto:如果内容被修剪，则浏览器会显示流动条， 以便查看其他的内容
inherit:规定应该从父元素继承overflow属性的值。
例：
div{ width:300px; height:300px; border: 3px solid red;
overflow:auto;
}
rerrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrr霰肝散去腻肛菜
teeeeeeee
4.文本属性-空白空间(处理文字的换行和空白符) white-space:
{ white-space:normal/pre/nowrap/pre-wrap/pre-lin/inherit;}
normal:默认值，多余空白会被浏览器忽略只保留一个
pre:空白会被浏览器保留
pre-wrap:保留一部分空白符序列，但是正常的进行换行
pre-line:合并空白符序列，但是保留换行符
nowrap：文本不会换行，文本会在同一行上继续，直到遇到
标签为止。
5.文本属性-文本溢出 text-overflow (处理溢出的文本显示省略标记)
取值：
clip:不显示省略号(...),而是简单的裁切
ellipsis:当对象内文本溢出时，显示省略标记
6.文本属性-省略号设置
text-overflow仅是：当文本溢出时是否显示省略标记，并不具务其它的样式定义，要实现溢出时产生省略号的效果还需要定义：
1.容器宽度：width:value;( px,%,都可以)
2.强制文本在一行内显示shite-space:nowrap;
3.溢出内容为隐藏：overflow:hidden;
4.溢出文本显示省略号：text-overflow:ellipsis;
必须是单行文本才能设置文本溢出！！
例：
div{ width:300px; height:300px; border: 3px solid red; //1.要容器的宽度
white-space: nowrap;//2.把它们显示在一行
overflow: hidden;//3.溢出内容设置为隐藏
text-overflow: ellipsis;//4.溢出时显示省略号
}
rerrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrr霰肝散去腻肛菜
teeeeeeee
f
六 元素的类型
1.元素的分类
根据css显示分类，xhtml元素被分为三种类型：块状元素，内联元素，可变元素
块级元素特点
a).块状元素在网页中就是以块显示，就是元素显示为矩形区域
b).默认下，块状元素会占据一行。就是两个块状会按顺序自上而下排列。
C).块状元素都可以定义自己的宽度和高度。
D).块状元素一般作为其他元素的容器，它可以容纳其它内联元素和其它块状元素。可以叫做一个盒子。
常见的块级元素
块级元素
div : 最常用的块级元素
dl : 和dt-dd搭配使用的块级元素
form : 交互表单
h1-h6 : 大标题
hr : 水平分隔线
ol : 有序列表
p : 段落
ul : 无序列表
fieldset : 表单字段集
例：
div{ width:200px; height:30px; background:red;}
p{ width:200px; height:60px; background: #0CC;} //块元素就是可以自己占据一行，自己定义宽高
h1{ width:300px; height:90px; background:#C0C;}
我是段落p
我是标题hq
2.内联元素(行内元素)
a).内联元素的表现形式是始终以行内逐个进行显示
b).内联元素没有自己的形状，不能定义它的宽和高，它显示的宽度，高度和宽度来确定，它的只能根据所包含内容的高度最小内容单元也会呈现矩形形状
c).内联元素也会遵循模型基本规则，如可以定义padding.border,margin ,background等属性，但个别属性不能正确显示{padding-top:;margin-top/botton:;}
常见的内联元素：
行内元素：
a : 超链接(锚点)
br : 换行
i : 斜体
em : 强调
label : 表单标签
span : 常用内联容器，定义文本内区块
strong : 粗体强调
textarea : 多选文本输入框
u : 下划线
select : 项目选择
3.常见的行内块元素
img : 图片
input : 输入框
4.元素类型的转换
需要根据上下文关系确定该元素是块元素或者内联元素。
盒子模型可通过display属性来改变默认的显示类型。
元素的转变 {display:block}
display属性和属性值(18个属性值)
作用：该属性设置或检索对象元素应该生成的盒模型的类型
1.block块状，就是把内联元素转换成块级元素
2.inline ： 把块元素转换成内联元素。
3.当元素设置了float属性后，就相当于给该元素加了display：block;声明;
4.inline-block行内块元素显示：元素的内容以块状显示，行内的其他元素显示在同一行(只有这一个元素类型支持vertical-align属性)img,input(行内块元素)
5.none：此元素不会被显示。
6.list-item:将元素转换成列表,li的默认类型
5.图片文字的居中
text-align:center; 水平居中
vertical-align:middle; 垂直居中
例：
div{ width:200px; height:30px; background:red; display:inline;} #加display:inline让块元素元素变成内联元素
h1{ width:300px; height:90px; background:#C0C;}
a{ width:300px; height:300px; background:#999; display:block; text-align:center;}#加display:block让内联元素变成块元素，在用text-aling:center：水平居中
a span{ display:inline-block; width:0; height:100%; overflow:hidden; vertical-align: middle;} #设置垂直居中
a img{ display:inline-block} #把图片设置成内联
我是标题hq
我是一个a链接
七 CSS定位
1. position定位属性
statci：默认值。位置设置为static的元素会正常显示
absolute:相对于父级元素的绝对定位，浮出，脱离文档流，不占据空间，。若父级没有定位，则以html可直接指定 left top right botton
例：
.box1{ width:60px;height:60px; background:blue; position: absolute; left:100px; top: 50px;;}
.box2{ width:300px; height:200px; background:red; left:0px; top:0px;}
relative:是相对于默认位置的偏移定位，通过设置left,top right,botton值可将其移至相对于其正常位置的地方(相对于自己的开始位置发生的位置上的移动 )
fixed:相对浏览器的绝对定位，是相对于浏览器容器的指定坐标进行定位，些元素的位置可通过left top right botton来规定，不论容器滚动与否，元素都会留在那个位置。(如页面中的小广告一直跟容器滚动走)
z-index:1 :放在最上面
例：如果几个文本框在一起的话用 z-index:2 z-index3; 数量大的就在上面
*{ margin:0; padding:0}
.box1{ width:300px;height:200px; background:blue; position: absolute; z-index:2} //用position：absolute; 让文本框浮动在最上面和float:一样
.box2{ width:300px; height:200px; background:red; position: relative; right:100px;}//position:relative;只能在原定的文本框区浮动
.box3{ width:300px; height:200px; background:yellow; position:fixed; right:10px; bottom:20px;} //position:fixed；和网页小弹窗一样跟页面走
.box4{ height:9000px;}
2.让一元素始终在窗口水平，垂直位置居中。
例：
.box1{ width:300px; height:300px; background:blue; position:fixed; top:0px; right:0px; bottom:0px; left:0px; margin: auto;} //先用position:fixed让他浮动在上方。
或者： .box1{ width:300px; height:300px; background:blue;
position:fixed; left:50%; top:50%; margin:-150px 0 0 -150px;
}
八 命名锚点链接
命名锚点链接的应用
定义：是网页制作中超级链接的一种，又叫命名锚记。命名锚记像一个迅速定位器一样是一种页面内的超级链接运用相当普通：
应用：
命名锚点的作用： 在同一页面内的不同位置进行跳转。
制作锚标记：
1.给元素定义命名锚记名 语法：< 标记 id="命名锚记名"> 标记>
2.命名锚记连接 语法： < a href="#命名锚记名称">
例：
div{ height:2000px;}
001 //一定要记住加#号在前面 ，#命名锚记名称
九 CSS Sprites的原理
1.图片整合技术(就是把多个小图片搞成一张图片，在在那一张图片中选择小图片)
a).即将多张图片合为一张整图，然后用background-position 来实现 背景图片的定位技术。
b).图片整合的优势：通过图片整合来减少对服务器的请求次数，提高页面加载速度 通过整合图片来减小图片的体积。
例：
*{ margin:0; padding:0;}
ul{ list-style:none;}
ul li a{ display:block; width:40px; height:43px; line-height:50px; background: url(images/%E7%B2%BE%E7%81%B5%E5%9B%BE%E4%B8%8A.png); //图片一定要是png 和jpg
padding-left:42px;
}
.top2{ background-position:-120px;0px;}
2.滑动门技术
a).什么是滑动门
滑动门是一个形象的称呼，它复用CSS背景图像可层叠性，并允许彼此之上进行滑动来创建一些特殊动态效果。
b).滑动门特征：
通过滑动门技术，可以使CSS设计出来的导航菜单兼具传统布局的图像效果，与CSS布局的高效扩展性。
例：
*{margin:0;padding:0;}
ul{ list-style:none; background:red; height:30px;;}
ul li{ float:left;}
ul li a{ display:block; height:20px; line-height:20px; background:url(images/%E6%BB%91%E5%8A%A8%E9%97%A82.png) no-repeat; padding-left:4px;
}
ul li a span{ display:block; background:url(images/%E6%BB%91%E5%8A%A8%E9%97%A81.png) no-repeat top right; padding-left:6px; padding-right:10px;}
3. CSS圆角
圆角边框设置
CSS圆角设置：
border-:数值
border-radius:
例：border-radius:50px;
十 宽高自适应属性
1.网页布局中经常定义 元素的宽和高。
a).宽度自适应 元素宽度设置为100% 。(块元素宽度默认为100%)
div{ height:300px; background:red;}
b).高度自适应 元素的高度自适应：设置如：div{height:auto;}
body.html{ height::100%}
.top1{ background:red;}
2
窗口的高度自适应：
设置：body,html{height:100%;} div{height:30%;}
元素高宽最大，最小值设置
min-height(最小高度)
max-height(最大高度)
min-width(最小宽度)
max-width(最大宽度)
2.过滤器(fiter)
a).下划线属性过滤器
当在一个属性前面增加了一个下划线后(IE6以下)
语法：选择符{_属性：属性值;}
! important:最高权重
3.浮动元素高度自适应(高度塌陷)
a). 给父元素加 overflow:hidden;
b). 给父元素加 height
c).在浮动元素下方添加空div，并给该元素添加 声明: div{clear:booth;height:0;overflow:hidden;}
d). 万能清除浮动法
.clear:after{content:" ";display:block;width:100%;height:0; overflow:hidden; clear:both; visibility:hidden;}
4.伪对象选择器
a). ::after:与content属性一起使用，定义在对象后的内容。
语法：选择符: :after{content:" 文字" ;} 选择符: :after{content:url(图片路径);}
例：
.top1{ width:300px; height:300px; border:3px solid red;}
div:after{ content:'我是不可以选中,不可以复制的文字'}
b). ::before:与content属性一起使用，定义在对象前的内容。
div:before{content:"我是前面的文字"}
c). ::first-letter定义对象内第一个字符的样式。
说明： *(该伪元素只能用于块级元素)]
div:first-letter{ color:blue; font-size:32px;}
d). ::first-line:定义对象内第一行的样式。
说明：*(该伪元素只能用于块级元素。)
div:first-line{ color:yellow; font-size:20px;}
十一 浏览器兼容
IE6常见CSS解析BUG及hack
1.图片有边框BUG
Hack:给图片加border:0 或者 border:0 none;
例：
img{ border:0}
2.图片间隙
给div盒子里面嵌套标签会产出3-6的象素间隙
例1： 就是把它设置成块元素
div{border:3px solid red;}
div img{ display:block;}
例2：设置浮动
div{border:3px solid red;overflow:hidden}
div img{ float:left;}
3.双倍浮向(双倍边距)(只有IE6出现)
当ie6以下出现解析浮动时，会错误把浮向边边界(margin)加倍显示
给元素添加声明：_display:inline
div{width:300px; height:200px; border:3px solid red; background:blue; float: left; margin:50px; display: inline;}
4.默认高度(IE6,7)
部分块元素拥有默认高度(16px-20px)
给元素添加： *font-size:0px;
overflow:hidden;
5.表单元素行高对齐不一致
添加声明： float:left;
6.百分比bug
给右面的浮动元素添加声明：clear:right:清除右浮动
例：
.top1{ height:100px;width:50%;background:blue; float:left}
.top2{ height:100px; width:50%;background:red; float:left; clear:right;}
7.透明属性
兼容其他浏览器写法：opacity:value;(value的取值范围0-1)
IE浏览器写法： filter:alpha(opacity=value)1-100
.top1{ height:100px;width:50%;background:blue; opacity:0.51; filter:alpha(opacity=50);}
8.当前元素(父元素里面第一个子元素)与元素没有设置任何浮动的情况下，设置margin-top后，会错误的把margin-top加在父级元素上
1.给父级元素加overflow:hidden
十二 鼠标滑动属性 cursor：
auto:默认
crosshair：加号
text:文本
wait:等待
help:帮助
progress:过程
inherit:继承
move:移动
ne-resize:向上或向右移动
pointer:手形
5083
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
