css知识

css和html相结合的第一种方式：1，每一个html标签中都有一个style样式属性，该属性就是css代码 例：<div style="color:#F00">这是一个div区域</div>2，使用style样式属性，该属性的值就是css代码。一般定义在head标签中，首先加载 例：<style type="text/css"> div{ color:#F23; } </style>3，将上面style标记里的内容写在文件div.css中，再导入。div.css放在同一个文件夹中 <strle type="text/css"> @import url(div.css); </style>4.直接导入css样式 <link rel="stylesheet" href="div.css" />(rel表示与页面的关系)css代码格式： 选择器名称{属性名:属性值;属性名:属性值;...} 1,html标签选择器 2,class选择器 例：div.biaoqian{}只适用于<div class="biaoqian">div区域1</div> .biaoqian{}适用于所有的<class="biaoqian"></> 3,id选择器(id值在页面中是唯一的，id通常都是为了去表示页面的一些特定区域使用的) 例：div.#id1{}只适用于<div id="id1">div区域2</div> #id2{}适用于所有的<id="id2"></> 优先级：html标记 < class选择器 < id选择器标记 < 标记内属性 4,扩展选择器 1,关联选择器(选择器中的选择器) 例：div b {}只适用于<div><b></b>此区域</div> 2,组合选择器(对多个标签都这样设置) 例：body,div,{background-color:#36F;color:#F23;} 3,伪元素选择器 例：超链接的状态 a:link{}//未访问 a:hover{}//鼠标移到上面的效果 a:action{}//点击效果 a:visited{}//访问后效果 p:first-line 段落的第一行文本 p:first-letter{}段落中的第一个字母 input:focus具有焦点的元素布局：float定位：position： 属性：relative相对定位是按照原来的位置进行定位，他原来的位置还在 相对定位向下向右是正方向 绝对定位：相对于离他最近的有定位属性的父级，他原来占有的位置没有了z-index层级属性没有单位css文字属性： font-size 可以设置字体的尺寸em字符的倍数单位ex一半px像素值 text-align设置文本对齐方式left左对齐，right右对齐 center居中对齐，justify两端对齐 line-height设置元素的行高 text-indent首行缩进 font-weight文本的粗细设置normal按标准显示，bold加粗显示 font-style设置文本显示风格 normal按标准显示 italic倾斜显示 text-decoration设置文本修饰风格underline下划线 overline上划线，line-through删除线 none去除文本修饰风格。 font-variant字体是否大写 small-caps为大写normal为标准小写 color设置字体颜色 font-family 文字字体 padding 内边距 如果有两个参数，一上下二左右 如果三个参数 一上二左右三下 四个参数上右下左 padding-top padding-left padding-right padding-bottom margin外边距 上下谁的外边距大就是谁的值 左右外边距为两者外边距之和 margin:0 auto;上下外边距0像素，左右自动，相当于居中适用于块级元素，行内元素的margin只有左右，没有上下 margin可以设置为负值，padding不可以 块级元素不设置具体的宽度，默认100% 如果不设置固定的高度，那么元素的高度会根据内容来变换 块级标签转化为行级标签 p{display:inline;} 行级标签转化为块级标签a{display:block;}行级元素不能设置宽高 行级元素不能使用margin: 0 auto;居中要转化为块级元素 overflow:hidden;将溢出的文字隐藏 可以解决div嵌套加float的bug overflow:scroll;添加滚动条 overflow:auto;自动选择 clear:left;左边清除浮动background-image属性：背景图片，不影响文字的显示 background-image:url(dog.jpg);设置背景图 background-repeat:;控制背景图的重复方式 background-position:100px 300px;控制背景的位置，第一个参数代表距离元素左侧的距离，第二个参数代表距离元素顶部的距离 同时设置多个元素：顺序为背景颜色 背景图片 背景图重复方式 背景图距离左侧距离 背景图距离顶部位置 background-attachment:fixed;对背景图固定css精灵sPRite技术：让某个有固定大小的元素只显示背景的一部分 例：background:url(dogs.jpg) no-repeat -370px -230px;鼠标样式cursor：hand是手型 pointer手型兼容性强 crosshair是十字型 text 使移动到文本上的那种效果 wait是等待的那种效果 default是默认效果 help是问号 e-resize是向右的箭头 ne-resize是向右上的箭头 nresize向上的箭头 nw-resize是向左上的箭头 w-resize是向左的箭头 sw-resize向左下的箭头 s-resize向下的箭头 se-resize向右下的箭头 auto由系统自动给出的效果 visibility属性用来控制元素的隐藏和显示状态visible当前元素为显示状态 hidden当前元素为隐藏状态 此属性隐藏元素。位置还在display：none;相当于没有写这个元素，位置也没有了 opacity:0-1;(w3c标准) filter:alpha(opacity=0-100); (IE)list-style取消li中的远点命名规范:id名字必须具有唯一性 class可以有多个 有父子关系的样式，应通过命名体现 合理注释 驼峰命名法：use_name_box或use-name-box 优先级：标签选择器<类选择器<id选择器<id选择器<后代选择器<行内样式 white-space:nowrap;在添加浮动时让同一个标签在一行显示，也就是强制不换行