码迷,mamicode.com
首页 > Web开发 > 详细

CSS学习笔记

时间:2015-05-11 10:46:53      阅读:153      评论:0      收藏:0      [点我收藏+]

标签:html   css   网页   

整理自某学习视屏(具体也忘了,或许是兄弟连,或许是其他人的)

<!--
CSS
    cascading style sheets层叠样式表
    CSS就是要对网页的显示效果实现与Word一样的排版控制
    一个样式表由演示规则组成
    HTML是为了将内容放到页面上,而CSS是为了样式
    任何一个标签都可以有四个属性:
        id class style name
    例1:一个段落,字体:红色;背景:黄色;有一个2个像素的实现边框,字体大小为4cm
    实现:style="color:red;backcolor:yellow;font-size:4cm;border:2px solid blue;text-align:center"
语法:
    格式:属性1:值;属性2:值;属性3:值……
          属性和值用冒号隔开;多个属性用分号隔开
        color,background-color,font-size,border边框,text-align
    单位:
        颜色:#rgb #8fa #aaffaa red(green) 数字(0-255)
        字符大小:em  元素的字体的高度
              px  像素(常用)
              上述是相对单位
              pt磅 cm mm in  绝对单位
              百分比:%  + -
        URL:
    注释:/*开始       */结尾
        注意: 注释里面不能再包含注释


四种设置
    内联样式表
        在任何一个标签中使用style指定样式,就是内联式
        如:<p style="color:red;font-size=4cm">
        灵活,但不利于更新,且标签不能共用一种样式
    嵌入样式表
        通过html的<style></style>将CSS嵌入到HTML里面
        <style>
            样式
        </style>
        可以控制当前页面的所有的样式
        但不能控制所有页面的样式
    外部样式表
        将样式单独定义在一个后缀名为.css的文档中,并且在HTML中通过link连接到HTML中使用
        所有的页面都可以使用该文档,也就使得所有的页面能够共享样式
        <link rel="stylesheet" type="text/css" href="css文件所在的文件夹">
        多个页面都可以使用
    输入样式表
        可以将一个css文件输入到另外一个样式文件中,获奖一个样式文件输入到<style></style>元素中
        可以将多个样式表组合成一个样式表,如何可以使用多个样式表
            使用@import url(css所在位置);导入其他的CSS文件
            在<style>中使用@import url(css所在位置)</style>
四种样式表的优先级
    内联样式表高于其他的
    嵌入样式表,外部样式表,输入样式表的优先级与加载的顺序有关
字体
    font-family 
        字体族科,宋体,楷体等,可以使用多个族科赋值,中间用逗号隔开,以防止选择不存在的字体族科
    font-size
        可以使用绝对大小,相对大小,长度,或百分比
    font-style
        normal(普通),Italic(斜体),oblique(倾斜)
    font-weight
        normal,bold,或者数字表示(1-500是窄字体),bolder,lighter

    font-variant
        normal,small-caps(大小写转换,对字母来说)  
    一行写时注意顺序:
        font:[<字体风格>||<字体变形>||<字体加粗>]?<字体大小>[</行高>]?字体族科
    color:
文本
    letter-spacing:字母间隔
    word-spacing:文字间隔
    text-decoration:设置下划线(underline) 删除线(line-through),上划线(overline)闪烁线(bink)
            这个属性可以去除超链接的下划线,如设置为none;
    text-indent:设置缩进,必须是长度或百分比
    text-transform:lowercase(小写成为大写)
    line-height:行高,上下居中时使用
    text-align:横向排列,left,right ,center,justify
背景
    background-color 背景颜色
    background-image:背景图像 默认平铺,x,y两个方向重复
        后加:url(图片地址)
    background-repeat 背景重复
        repeat,repeat-x ,repeat-y,no-repeat
    background-position 背景位置
        center,bottom或者百分比,长度
    background-attachment:背景附件 当拉动滚动条时,背景图片是否随着滚动条滑动
        fixed,scroll
    整合属性:
        background:<颜色><图像><重复><附件><位置>
    应用:
        多个图标放到同一个图片里,通过定义某区块的背景定位,调用同一个图片中不同位置上的小图标,好处是可以减少对服务器的请求次数,从而加快页面的访问速度
位置
边框
    边框属性是用于设置一个元素的边框分割,边框 宽度,边框颜色的略写,可以一起设置4边的边框,也可对上边框,下边框,左边框,右边框单独设置
    通过border-style设定上下左右边框的风格,该属性用于设置一个元素边框的样式,而且必须用于指定可见的边框。
    可以使用border-top-style,border-buttom-style,border-left-style,border-right-style单独设置各边的属性
    border-width:  以top,right,buttom,left的顺序指出
            也可以单独指出,利用border-top-width,border-right-width border-buttom-width border-left-width.
    border-color:指定颜色,用法如上
    属性值:
        none
        dotted,点线式
        dashed:破折线
        solid:实线
·       double:双线式
        groove:槽线式
        ridge:脊线式
        inset:内嵌效果
        outset:突起效果
    注意:如果统一制定四个边框,可以使用<border-width><border-style><border-color>的顺序给出三个值;如border:14px solid red
鼠标
        cursor:值
        属性值:help,pointer,move,text,hand,wait,crosshair
列表
    list-style-type
        针对无序列表
            circle 
            square
            none
        针对有序列表
            lower-roman
            upper-roman
            lower-alpha
            upper-alpha
            默认数字
    list-style-image
        url()
    list-style-position
样式选择器
    定义
        secletor{
            property:value
            ……
        }
        当定义一条规则时,必须制定受这条样式规则作用的元素,在一条规则中定义的网页元素就是selector(选择器),也就是选择该样式规则作用于的网页元素
    形式:
        .nvv{}
        #nvv{}
        a,b,h1,#one{}
        a b h1 #one{}
        a:hover,a:link{}
    类别
        HTML选择器
            HTML有标签,CSS就用选择器
            选择符就是赋予内部或外部样式表的名字
            HTML标签就是用来改变一个指定标签的样式
            任何一个HTML元素都可以是一个CSS选择器
            如:p{} div{} ul{} b{} table{} input{} select{}
        类选择器
            同一个选择器能有不同的类,因而允许同一个元素有不同的样式
            定义的方式
            [tag].类名{}
            如此实现同一个元素有不同的表现
            例:定义p.cla1{} p.cla2{} p.cla3.{}
                使用<p class="cla1">……</p> <p class="cla2">……</p>
            同一个元素可以使用多个类,类名之间用空格隔开
            注:如果tag省略,则任何一个元素都可以使用这个类,实现多个元素共享同一个类
            综上可知:即可以实现一个元素使用不同的样式类,又可以实现不同的元素使用同一个样式类
        ID选择器
            在HTML页面中,ID属性指定了某个单一元素,id属性用来对单一元素定义单独的样式
            注意: 一个HTML中,id属性值要唯一
            定义:
                #idname{}(idname是自定义的名称)
            用法: <tag id="idname">
        关联选择器
            只不过是一个用空格隔开的两个或多个的单一选择器组成的字符串
            因为层叠顺序的规则,所以他们的优先权比单一的选择符要大
            因为按关联关系使用,不能有反顺序
            只要能保持关联关系就可以,不管是在多少层
        组合选择器
            为了减少样式表的重复声明,组合是允许的
            定义:
                只要使用英文逗号隔开每一个选择符
        伪元素选择器
            对同一个HTML元素在不同的状态下的一种定义方式
            目前只有a和p两处HTML元素可以使用
            定义:
                标签:伪元素  标签[.类名]:伪元素
            使用: 
                a:link  ,没有任何动作的状态 
                a:hover   光标移动到超链接上的状态
                a:active  选中超链接的状态
                a:visited 访问过超链接的状态
                注意:a:hover必须位于a:link和a:visited之后
                      a:active必须位于a:hover之后
                p:first-letter   一个段落中首个字母的状态 
                p: first-line   一个段落中首行的状态
    样式的继承
        所有嵌套在某个HTML标签中的HTML标签都会去继承外层标签中设置的样式规则
    样式规则的优先级

        关联 > ID > class > HTML
DIV+CSS
    准备软件
        IETEST
        FirFox
        FirFox的组件FireBug组件
    要安装多种浏览器,以利于调试
    注意:就算在不同的浏览器中效果不完全一致,也要做到大概一致
    “无意义”的div 和span标签
        div:会自动换行
        span:不自动换行
        div,大容器;span,小容器
    盒子模型
        每一个HTML元素都可以看成一个装了东西的盒子,盒子具有宽度,和高度,盒子里面的内容到盒子的边框之间的距离即填充,盒子本身有边框,而盒子边框外和其他合资之间,还有边界
    布局中的主要样式
        font                        width
        line-height                 height
        color                       float
        margin                      clear
        padding                     displayhttp://localhost:8088/test.php
        border
        text-align
        background
        定位属性
        position    用于定义一个元素是否absolute relative static  fixed
        top     层距离顶点纵坐标的距离     
        left        层距离定点横坐标的距离
        width       层的宽度
        height      层的高度
        z-index     决定层的先后顺序和覆盖关系,值高的元素会覆盖掉比较低的元素
        display     block,以块显示,在元素后添加换行符,其他元素不饿能够在其后并列显示
                inline,内联显示,在元素后面删除换行符,多个元素可以在一行并列显示
                none,将关闭指定元素及其子元素的显示
        visible
        overflow
    区块模型
        margin
-->

CSS学习笔记

标签:html   css   网页   

原文地址:http://blog.csdn.net/havedream_one/article/details/45641161

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!