zoukankan      html  css  js  c++  java
  • 学点css基础

    中午时间学点css,附带http://www.w3cschool.cc/css/css-tutorial.html这个链接!

                                             中午的时间学了这些东西!如下图:

                                           

    附带代码:

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>css_1</title>
     6 </head>
     7 <style>
     8 p{    
     9     /*这是设置颜色的*/
    10 color: red;
    11   /*这是设置对齐方式的*/
    12 text-align: center;
    13 
    14 }
    15 /*CSS Id 和 Class */
    16 /*HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。ID属性不要以数字开头,数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。*/
    17 #para1
    18 {
    19     text-align: center;
    20     color: red;
    21 }
    22 /*class 选择器用于描述一组元素的样式,class 选择器有别于id选择器,class可以在多个元素中使用。*/
    23 
    24 /*class 选择器在HTML中以class属性表示, 在 CSS 中,类选择器以一个点"."号显示:    */
    25 .center
    26 {
    27     text-align: center;
    28 
    29 }
    30 
    31 /*-- 你也可以指定特定的HTML元素使用class。类名的第一个字符不能使用数字!它无法在 Mozilla 或 Firefox 中起作用。 */
    32 p.center
    33 {
    34     text-align:center;
    35 }
    36 /*多重样式:如果某些属性在不同的样式表中被同样的选择器定义,那么属性值将从更具体的样式表中被继承过来。/*/
    37 /*多重样式将层叠为一个:因此,内联样式(在 HTML 元素内部)拥有最高的优先权,这意味着它将优先于以下的样式声明: 标签中的样式声明,外部样式表中的样式声明,或者浏览器中的样式声明(缺省值)。*/
    38 
    39 </style>
    40 
    41 <body>
    42     <!-- 调用P这个selector -->
    43     <p>Hello World!</p>
    44     <p id="para1">Hello World!</p>
    45     <!-- 在以下两个的例子中,所有拥有 center 类的 HTML 元素均为居中。 -->
    46     <h1 class="center">标题居中</h1>
    47     <p class="center">段落居中</p>
    48     <!-- 在以下实例中, 所有的 p 元素使用 class="center" 让该元素的文本居中: -->
    49     <p class="center">This paragraph will be center-aligned</p>
    50     <p style="color: sienna;margin-left: 20px;" > This is a paragraph.</p>
    51 
    52 
    53 
    54 </body>
    55 </html>

    1 /*不要在属性值与单位之间留有空格。假如你使用 "margin-left: 20 px" 而不是 "margin-left: 20px" ,
    2 它仅在 IE 6 中有效,但是在 Mozilla/Firefox 或 Netscape 中却无法正常工作。*/
    3 hr{color: sienna;}
    4 p{margin-left: 20px;}
    5 body{border-image: url("/images/back40.gif");}
    ---- 动动手指关注我!或许下次你又能在我这里找到你需要的答案!ZZZZW与你一起学习,一起进步!
  • 相关阅读:
    Mac下截图快捷键
    在Mac下显示所有文件
    Mac 下格式化U盘
    在Mac OS X系统下 用dd命令将iso镜像写入u盘
    微信公众号全局返回码说明和接口频率限制说明
    Mac Git 学习笔记
    vim编程配置方法
    解决“Xlib.h not found when building graphviz on Mac OS X 10.8”错误
    Java-Session服务器端会话技术
    Java-记住上一次访问时间案例
  • 原文地址:https://www.cnblogs.com/zzzzw/p/4538228.html
Copyright © 2011-2022 走看看