以下是本人初学时的笔记,不足之处,望猿友们指出
css基础
1、CSS层叠样式表(Cascading Style Sheets)
2、CSS的样式表
A、内部样式表
<style type=”text/css”>
Css属性及属性值
</style>
B、内联样式表
<div style=”color:red;”></div>
C、外部样式表
<link rel=”stylesheet” type=”text/css” href=”路径”>
<style type=”text/css”>
@import url(路径);
</style>
3 两种引用外部样式表的区别(link与@import的区别)
1、link是XHTML定义的,@import是CSS提供的,link可以加载其他的文件,如RSS,@import只能加载css样式
2、加载顺序的区别:link的css样式和html一起加载,@import是等html全部加载完成之后再加载
3、兼容性的区别:@import是在ie5以上的版本生效,link无此要求
4、使用dom时区别:使用js控制dom时@import不能控制dom而link可以
4 样式表的优先级
内联样式优先级最高,外部样式与内部样式取决于他们的书写顺序,谁在后面谁生效
5 CSS中的选择器
类型选择器 p{属性:属性值;}
Id选择器 #id名{属性:属性值;} 需要引用 id=“id名”
类选择器 .类名{属性:属性值;} class=“类名”
群组选择器 选择器1,选择器2,…{属性:属性值;}
伪类选择器 a标签的四个伪类 (注意他们之间的顺序,若在使用时某个状态失效,先检查是否是顺序问题)
A:link 初始状态
A:visited 访问过后的状态
A:hover 鼠标划过的状态
A:active 鼠标点击时的状态
伪对象 选择符:after{content:“”;}
包含选择器 p b{属性:属性值;}
6 选择器是权重
Id>class>类型>继承
内联权重1000
Id的权重100
Class的权重 10
类型的权重 1
包含的权重是其选择器的和
继承是权重为0
7 注释
Html:<!---->
Css:/**/(不要用//方式)
CSS核心属性
1 文字的属性font
字体font-family
当字体是中文时需要加双引号,只有一个英文单词时直接写,当有一组或多个英文单词组成时需要加双引号。
字体可以引用多个中间用逗号隔开,当第一字体系统没有时,解析第二个,第二没有时解析第三,以此类推,如果都没有用系统默认字体
字体的大小font-size
单位:px p t(印刷字体单位)em 1em=16px 0.75em=12px
xx-small
文字颜色color
可以用6个16进制数表示#ff0000(#号必须要有)当他们两两相同时可以简写#f00
Color:rgb(0,255,255)
Color:rgba(0,255,255,0.2)a代表透明度(css3.0)
加粗font-weight(bold加粗 normal正常)
倾斜font-style(italic倾斜 normal正常)
英文小写变大写font-variant(small-caps小写变大写 normal正常)
文字的复合式写法
font:style variant weight size family
如果仅使用大小 字体行间距时 font:size/line-height family
2 文本设置text
水平对齐方式text-align(left、right、center、
justify)
垂直对齐方式vertical-align(top、bottom、middle)只能与图片连用时生效
行间距line-height
当只有一行文本时行间距等于实际高度可以实现文本的垂直居中
大于实际高度时文本会处于靠下的位置
小于实际高度时文本会处于靠上的位置
文本修饰text-decoration
没有none 上划线overline、 下划线underline 中划线line-through
首行缩进text-indent(取值是根据文字大小可以设置负值)
字符间距letter-spacing
词间距word-spacing
文本流控制
文本大小写text-transform(capitalize首字母大写uppercase全大lowercase全小写)
文本的阴影text-shadow(水平偏移 垂直偏移 模糊值 颜色)
3 列表的设置
列表符号list-style-type(disc实心圆 circle空心圆 square实心方块 decimal数字 none没有)
列表符号是图片list-style-image:url(图片路径)
列表符号的位置list-style-position(inside outside)
去掉列表符号list-style:none
4 边框设置border:粗细 颜色 线型(solid实线 dashed虚线 dotted点状线 double双实线)3个属性直接没有顺序要求
可以分别设置不同方向的边框border-top(left、right、bottom)
可以单独设置不同方向的粗细border-top-width
可以单独设置不同方向的线型border-top-style
可以单独设置不同方向的颜色border-top-color
5 背景background
背景颜色background-color
背景图片background-image
背景重复background-repeat(repeat、no-repeat、repeat-x、repeat-y)
背景的位置background-position:左右 上下(具体数值)m m
背景的固定background-attachment:scroll(滚动)/fixed(固定)
6 浮动float(left、right、none)
7 清除浮动clear(left、right、both)
盒模型盒模型的组成:外边距margin 边框border 内边距padding 内容
盒子的实际宽度:
margin-left+border-left+padding-left+width+padding-right+border-right+margin-right
盒子的实际高度:
margin-top+border-top+padding-top+height+padding-bottom+border-bottom+margin-bottom
margin padding的值(margin可以设负值padding不可以)
一个值代表4个方向都是一样
两个值代表上下 左右
三个值代表上 左右 下
四个值代表上 右 下 左
margin-top不生效的解决办法
A、 给父元素设置边框
B、 给父元素设置padding
C、 给自身或者父元素添加float
两个盒子之间的外边距:
左右边距是他们的和
上下:当两个盒子都没有浮动的时候(上边设置margin-bottom下边设置margin-top)上下之间的距离是取最大值;当两个盒子都浮动的时候是两个之和;一个浮动另一个清除浮动时取浮动的值
溢出
容器溢出:overflow
Visible:默认的,内容会超出容器的边界显示
Hidden:超出隐藏,且不显示
Scroll:超出以滚动条形式显示
Auto:自适应,超出显示滚动条,不超出没有滚动条
Inherit:继承父元素的overflow的属性
文本溢出:text-overflow
Clip:溢出后直接剪切
Ellipsis:溢出后显示省略号
如果想超出的内容显示省略号的条件:
宽度width:value
强制文本在一行显示white-space:nowrap
超出隐藏overflow:hidden
文本溢出text-overflow:ellipsis
空白空间white-space
pre:保留文本间的空白且遇到边界不换行
pre-wrap:保留文本间的空白遇到边界会换行
pre-line:保留文本换行但是不保留文本间的空白
normal:正常的
nowrap:强制文本在一行显示知道文本结束或者是遇到br
Inherit:继续父元素的white-space属性(只有ie浏览器支持)
元素的类型
元素的分类:块状元素 内联元素 可变元素
块状元素与内联元素的区别(div与span的区别)
块状元素可以设置宽、高,内联元素不可以;
块状元素自上而下独占一行显示,内联元素自左向右一行显示直到宽度不够时才会换行显示;
内联元素遵从盒模型但是有些属性值不能正常显示
内联元素的宽度高度是其内容的宽高,块状元素显示独占一行;
元素类型的转化display(18个属性值)
Block:将元素转化成块状
Inline:将元素转化成内联元素
Inline-block:将元素转化成行内块元素(只有行内块元素支持vertical-align)img input
List-item:列表元素 li的默认元素类
None:隐藏
大多数块元素的元素类型为block,li的默认元素类型为list-item
大多数内联元素的元素类型为inline,img input的默认元素类型为inline-block
常用的块元素:div dl dt dd ul ol h1~h6
常用的内联元素:a span b br em strong i u
兼容性
浏览器的兼容
最早的浏览器网景领航者简称NN;(1994-2008)
五大浏览器内核以及代表作
Trident(三叉线):IE、360、遨游等市场份额占有率最大的,不是开源的
Gecko(壁虎):火狐跨平台,开源的
Presto(迅速的):Opera 渲染速度最快的
Webkit:谷歌开源的
Blink:由谷歌和opera共同开发的
常见的兼容性问题
图片的间隙
将</div>与img写在一行(ie6下有效)
将图片转换成块状元素:display:block
dl li 里的图片间隙为图片添加声明display:block
ie6的双边距问题
给浮动元素添加声明display:inline
Ie6的默认高度(8px)
添加font-size:0 或者overflow:hidden
表单行高不一致问题
给表单元素添加float
按钮大小不一致问题
用a标签代替按钮
在表单元素外部添加一个标签,将表单的样式清空
直接用图片作为按钮的背景
百分比问题
当左右两边都是50%的宽度时给右边的添加清除浮动效果
鼠标指针异常cursor:pointer(鼠标变成小手型)
透明度问题(ie7)
filter:alpha(opacity=value)value的取值是0-100
opacity:value value、的取值是0-1
下划线_(在属性前加下划线ie6识别)
*(在属性前加*ie6、ie7都识别)
+(在属性前加*ie6、ie7都识别)
\9(在属性值后添加\9 ie10以下版本都识别)
\0(在属性值后添加\0 ie8以上版本都识别)
关键字!important在属性值后边添加关键字表示将此属性的优先级设置为最大
定位
一、 position(static、absolute、relative、fixed)(使用定位的时候宽度一定要有)
static:默认的 静态的
absolute:绝对定位如果父元素有定位那么他是根据父元素进行的偏移;如果父元素没有定位,那么他是根据浏览器进行的偏移
relative:相对定位 是根据自己所以在位置进行偏移
fixed:固定定位 无论窗口如何变动都不会改变
一个固定宽度的div如何实现水平垂直居中:
A、绝对定位
width:200px; height:100px; position:absolute; top:50%; left:50%; margin-top:-50px; margin-left:-100px;
B、固定定位
width:200px; height:100px; position:fixed; top:50%; left:50%; margin-top:-50px; margin-left:-100px;
如果想子元素根据父元素进行定位那么需要给父元素添加position:relative(将父元素作为包含块)
锚点的应用
<div id=”锚点名称”></div>
<a href=”#锚点名称></a>”
圆角:border-radius(c3属性)
滚动条overflow、overflow-x、overflow-y(visible、hidden、scroll、auto)
hack当网页出现横向的滚动条而并非需要的,由于网页基本完成很难找出是由于哪个元素导致的时候,
可用overflow-x:hidden;来隐藏滚动条
常用于小图标icon,优势在于减少服务器对图片的请求次数,加快加载速度
宽度自适应
元素宽度设为:100% (块元素宽度默认100%)
元素具备最小高度自适应
min-heigh最小高度
IE6不能识别min-(IE6下div默认有一定的高度)
hack1:min-heigh:value;_height:value;
hack2: min-height:value;height:auto!important;height:value;
高度自适应
元素高度自适应
设置方法html,body{height:100%;}
需要自适应的元素height:100%;
浮动元素父元素高度自适应(即高度塌陷)
hack1:给父元素添加声明overflow:hidden;zoom:1;兼容IE6
hack2:在浮动元素后添加空div给该div声明:clear:both;height:0;overflow:hidden;/font-size:0;
hack3:通用解决方法
:after{content:".";display:block;height:0;visibility:hidden;clear:both;}
visibility:hidden;与display:block;的区别
都能使对象不可见,但前者使对象在页面中所占的空间没有改变
后者使对象隐藏,不在网页上留下空间