zoukankan      html  css  js  c++  java
  • CSS基础知识点记录

    CSS参考手册

    一、CSS(层叠样式表):描述元素的皮肤,美化页面。

    二、CSS使用方式:内联、页面嵌入和外部引用。

    2.1、内联

    <input type ="text" style="background-color: Red;border-color: Green" />
    

    2.2、页面嵌入

    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    	input{background-color: Red;border-color: Green}
    </style>
    </head>
    

    所有input标签都被设置成该样式。

    2.3、外部引用

    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="css1.css">
    </head>
    

    三、CSS计量单位:px(像素)、30%(百分比)、em(相对单位)等。

    四、将光标设置成图标样式。图标格式必须是".cur"或"ani"格式才行。

    例如:

    <body style="cursor:url(tt.ani)"></body>
    

    五、样式选择器:标签选择器、class选择去器、id选择器。

    对于非元素内联的样式需要定义样式选择器。

    5.1、标签选择器(对于指定的标签采用统一的样式)

    例如:

    input{border-color: Yellow;color: Red;}
    

    5.2、class选择器

    定义一个命名的样式,然后在用到它的时候设置元素的class属性为样式的名称,还可以同时设置多个class,名称之间加空格。

    例如:

    <!--定义-->
    .warning{backgroud: Yellow;}
    .highlight{font-size: xx-large;cursor: help;}
    <!--使用-->
    <div class="warning">你好</div>
    <div class="warning highlight">我好</div>
    <div class="highlight">大家好</div>
    

    标签+class选择器

    class选择器也可以针对不同的标签,实现同样的样式名对于不同的标签有不同的样式,只要在样式名前加标签名即可。

    例如:

    <!--定义-->
    input.accountno{text-align: right;color: Red;}
    label.accountno{font-style: italic;}
    <!--使用-->
    <input class="acountno"  type="text" value="111"/>
    <label class="acountno">222</label>
    

    5.3、id选择器

    为指定id的元素设置样式,id前加#。

    例如:

    <!--定义-->
    #username
    {
    	font-size: xx-large;
    }
    <!--使用-->
    <input id="username"  type="text" value="liujf"/>
    

    5.4、其他选择器(不常用)

    • 关联选择器:

    例如:
    P strong{background-color: Yellow;}
    表示P标签内的strong标签内的内容使用的样式。

    • 组合选择器:

    同时为多个标签设置一个样式。
    例如:
    h1,h2,input{background-color: Green;}

    • 伪选择器:

    为标签的不同状态设置不同的样式。
    a:visited:超链接点击过的样式 。
    a:active:选中超链接时的样式。
    a:link:超链接未被访问时的样式。
    a:hover:鼠标移到超链接时的样式。
    例如:

    a:visited{text-decoration: none;}
    a:active{text-decoration: none;}
    a:link{text-decoration: none;}
    a:hover{text-decoration: underline;}

    作者:liujf
    出处:http://www.cnblogs.com/liujf5566/
    本文版权归作者和博客园所有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文链接,否则保留追究法律责任的权利~

  • 相关阅读:
    [转载]写作经验谈--如何写一本书?
    决定写一本书
    c中自定义函数通过sizeof来输出数组的长度为何不正确?【原创】
    [转]关于PHP的漏洞以及如何防止PHP漏洞?
    [转]PHP安全之防止你的源代码或重要配置信息暴露在外
    PHPUnit 单元测试框架(鸡肋)
    [转]避免PHP-FPM内存泄漏导致内存耗尽
    [转]PHP ffmpeg截取视频指定帧为图片,获取rotation信息并旋转
    ThinkPHP 缓存 以及Zend OPCache提升PHP性能
    简单测漏 语句
  • 原文地址:https://www.cnblogs.com/liujf5566/p/4211952.html
Copyright © 2011-2022 走看看