css知识_html/css_WEB-ITnose

css和html相结合的第一种方式：
1，每一个html标签中都有一个style样式属性，该属性就是css代码
    例：

这是一个div区域

2，使用style样式属性，该属性的值就是css代码。一般定义在head标签中，首先加载
    例：
3，将上面style标记里的内容写在文件div.css中，再导入。div.css放在同一个文件夹中
   
    @import url(div.css);
    
4.直接导入css样式
    (rel表示与页面的关系)
css代码格式：
    选择器名称{属性名:属性值;属性名:属性值;...}
    1,html标签选择器
    2,class选择器
        例：div.biaoqian{}只适用于

div区域1

        .biaoqian{}适用于所有的>
    3,id选择器(id值在页面中是唯一的，id通常都是为了去表示页面的一些特定区域使用的)
        例：div.#id1{}只适用于

div区域2

            #id2{}适用于所有的>
        优先级：html标记     4,扩展选择器
       1,关联选择器(选择器中的选择器)
       例：div b {}只适用于

此区域

       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   
优先级：标签选择器white-space:nowrap;在添加浮动时让同一个标签在一行显示，也就是强制不换行