一、css简介
1、css是什么?
css(Cascading Style Sheet)是层叠的样式表。用于控制网页样式,并允许将样式信息与网页内容分离的一种标记性语言。
2、css三种控制方式
行内样式 引入方式 style=””
内嵌式 引入方式 <style></style>
链接式 引入方式 <link rel=”stylesheet”type=”text/css” href=””>
导入式 引入方式 <style>@import url(“”)</style>
二、CSS 基本语法
1、css选择器
1)标签选择器 p{ color:red;}
2)类别选择器 .c1{ color:green;} 可被多次调用
3) ID选择器 #d1{ color:blue;} 独有
4)派生选择器: #d1 p 表示id为d1的标签下面的p标签
集体声明:
h1, h2, h3, h4, h5, p{ /* 集体声明 */
color:purple; /* 文字颜色 */
font-size:15px; /* 字体大小 */
}
优先级 ID>class>标签选择器
4)css继承
子标记会继承父标记的所有样式,并可以自己修改,但不会影响父标记。
三、文字效果
字体:font-family 字号:font-size 颜色:color 粗体:font-weight 下划线:text-decoration:underline ( 删除线:line-through; 顶划线:overline; 去掉下划线:none ) 单词首字母大写:text-transform:capitalize 全部大写:uppercase;全部小写:lowercase) 字符间距:letter-spacing 水平位置:text-align 垂直位置:line-hight:与div的高度一致
例1:字符间距:letter-spacing 和 用于文本样式:span
html:
<p><span class="g1">G</span><span class="o1">o</span><span class="o2">o</span><span class="g2">g</span><span class="l">l</span><span class="e">e</span></p>
css:
p{
font-size:80px;
letter-spacing:-10px; /* 字母间距 */
font-family:Arial;
}
.g1, .g2{ color:#184dc6; }
.o1, .e{ color:#c61800; }
.o2{ color:#efba00; }
.l{ color:#42c34a; }
四、图片效果
1、图片边框
border-style:dotted 点划线 dashed虚线 solid 实线 border-color:边框颜色 border-边框粗细 以上三个属性等价于 border: solid 1px red;
2、背景
背景颜色:background-color:#00FF00;
背景图片:background-image:url(路径);
背景重复:background-repeat:no-repeat;(不重复:no-repeat;横向重复:repeat-x;纵向重复:repeat-y)
背景固定:Background-attachment:fixed;
背景方位:background-position:5px 10px;(左边、上边)
组合:Background:blue url(xx.jpg) no-repeat fixed 5px 10px;
五、表格样式
1、表格边框:
border: solid 1px red; 等价于边框样式:border-style:solid;(实线:solid;虚线:dashed;点划线:dotted) 边框粗细:border-1px; 边框颜色:border-color:red;
2、表格标题:<caption> 属性:caption-side:bottom; (标题位于表格下方)
3、边框重叠:border-collapse:collapse;(表格间距合并)
4、行列表头:th scope=”row” (行的表头) th srope=”col” (列的表头)
六、CSS与表单
1、*浏览器样式显示有差异是因为各浏览器对部分CSS属性的默认值不同导致的,通畅的解决办法就是指定该值,而不是让浏览器使用默认值。
例:
input{ /* 所有input标记 */
color: #00008B;
}
input.txt{ /* 文本框单独设置 */
border: 1px inset #00008B;
background-color: #ADD8E6;
}
input.btn{ /* 按钮单独设置 */
color: #00008B;
background-color: #ADD8E6;
border: 1px outset #00008B;
padding: 1px 2px 1px 2px;
}
2、文字一样的按钮
.btn{
background-color:transparent; /* 背景色透明 */
border:0px; /* 边框取消 */
}
3、直接输入EXCEL表格
table input{
200px;
padding:1px 3px 1px 3px;
margin:0px;
border:none; /* 输入框不要边框 */
font-family:Arial;
}
七、超链接
1)去掉超链接下划线
Text-decoration:none;
1)效果
a:link 正常浏览状态的样式
a:visited 被点击过的超链接样式
a:hover 鼠标经过时的样式
2)鼠标经过时手指
A:hover
{
Cursor:pointer;
}
八、行内元素与块级元素的区别
1、行内元素默认情况下不单独沾满一行,不换行,但块级元素单独沾满一行,自动换行。
2、行内元素的高度宽度不会受到属性height、width的影响,只受到里面内容多少的影响。但块级元素大小会受到属性height、width的影响。
行内元素: span、br、a、b、u、img
块级元素: h1-h6、hr、div、table、ul、ol
块级元素的特点:默认情况下单独沾满一行、里面的内容、背景图片默认显示在块的左上角。
九、浮动:float
通过漂浮,让块级元素实现并排 float:left、right、none;
如果div左边或者右边的块存在浮动,会对此div产生影响,此时需要清除左右方的浮动
清除浮动:clear:left(清除左边div的浮动)或right(清除右边div的浮动)或both(同时清除两侧的浮动)
简单说明:想显示在一行就使用浮动(float:left) ,想换行就清除浮动(直接用 clear:both 即可,不用管左右)
十、菜单制作
1、不显示项目符号 list-style-type:none
2、区块显示 display:none,通过display:block语句超链接被设置成了块元素,当鼠标进入该块的任何部分时候都会被激活,而不是仅仅在文字上方时才被激活。
十一、盒子模型
1、border:边框 border-top:上边框 border-left:左边框 border-right:右边框 border-bottom:下边框
2、padding:内边距(框内文字距离框线的间距)有3种写法
第一种:上下左右 padding:10px; 第二种:上下 左右 padding:10px 20px; 第三种:上 右 下 左 padding:10px 20px 10px 15px;
第四种:上 左右 下 padding:10px 20px 10px;
3、margin:外边距(边框对边框外其他内容的间距)有3种写法
第一种:上下左右 margin:10px; 第二种:上下 左右 margin:10px 20px; 第三种:上 右 下 左 margin:10px 20px 10px 15px;
第四种:上 左右 下 margin:10px 20px 10px;
注意:在设定好宽度时,padding会把盒子撑开,此时可以通过减小width、height的值来保持盒子原大小
*{ padding,margin:0px;}:默认网页里所有的标签都内外间距为0
十二、绝对定位 & 相对定位:
1、绝对定位:position:absolute;
当设置一个块级元素为绝对定位的时候,它就脱离了文档流,浮动就不会对它有影响
此时对它设置top、left、right、bottom,就是针对窗体的距离
2、相对定位:position:relative;
当设置一个块级元素为相对定位的时候,它没有脱离文档流,浮动对它是有影响的
此时对它设置top、left、right、bottom,是针对上一级容器的距离
【注意】当相对定位的前面有块级元素占据位置时,则实际距离=设置距离+占位块级元素宽或高
3、overflow:hidden(超过部分隐藏)/auto(超过时出现滚动框)/scroll(一直有滚动条)
4、z-index:值越大越在上面;
十三、兼容性问题
1、关于兼容性非常好的介绍文章:http://www.cnblogs.com/zhutianxiang/archive/2012/01/19/2320349.html
例子:
1)上下块级元素margin重合:以较大值为准,相当于两者重叠了(左右不受影响)
2)上下块级元素和行内元素margin重合:可在行内元素display设置为block。 { display:block; }
3)块级元素不靠边:*{ marin:0px; padding:0px}
4)ul在不同浏览器靠边问题:在IE中,ul的默认边距是margin,在Firefox中,ul的默认边距是padding,所以设置时margin和padding都设为0px
5)行内元素的上下margin撑不开自己所在的块级元素的高度:需在行内元素上下各加一个<div style="height:0px;overflow:hidden"></div>辅助撑开6) 超链接访问后hover样式不出现:必须要遵守lovehate原则:即link、visited、hover、active。这四个超链接属性必须按顺序写。