zoukankan      html  css  js  c++  java
  • CSS快速入门学习一

    一、CSS语法:

    h1 {color:blue;font-size:12px;}

    h1就是HTML的标签,又叫选被器,是被选择样式化的对象,color:blue;就是效果一,font-size:12px;效果二

    二、来个例子:

    p {color:red;text-align:center}
    或者这样,更方便读取
    p
    {
    color:red;
    text-align:center;
    } 
    

    放到HTML里的代码就是:

    <html>
    <head>
    <style type="text/css">
    p
    {
    color:red;
    text-align:center;
    } 
    </style>
    </head>
    
    <body>
    <p>Hello World!</p>
    <p>This paragraph is styled with CSS.</p>
    </body>
    </html>
    
    看看效果图:
    
    

    三、CSS注释用/* 这里是被注释的内容 */

    /*This is a comment*/
    p
    {
    text-align:center;
    /*This is another comment*/
    color:black;
    font-family:arial
    }

    四、CSS的id和Class选择器来控制样式

    id可以用作样式化一个单独的对象,比如我们要对某一个P元素做个效果,而其他的默认效果。

    id在CSS中的定义方式就是:

    #para1
    {
    text-align:center;
    color:red
    }
    

    这里的para1就是HTML文件中某一个元素的id,看个例子

    <html>
    <head>
    <style type="text/css">
    #para1
    {
    text-align:center;
    color:red
    } 
    </style>
    </head>
    
    <body>
    <p id="para1">Hello World!</p>
    <p>This paragraph is not affected by the style.</p>
    </body>
    </html>
    
    看效果图,只有id为para1的P元素有效果。
    

    Class也就是类选择器,可以表示一组元素的样式,id只对一个有效

    <html>
    <style>
    .cen {text-align: center}
    </style>
    
    <body>
    
    <h1 class="cen">
    This heading will be center-aligned
    </h1>
    
    <p class="cen">
    This paragraph will also be center-aligned.
    </p>
    </body>
    
    </html>
    

    这样h1和p的内容都会自动居中了,如图

  • 相关阅读:
    [原创]Java在线编辑word文档调用PageOffice实现并发控制
    [原创]Java动态填充word文档并上传到服务器
    mysql数据类型
    mysql 数据增删改查基本语句
    MYSQL中char 与 varchar 的区别
    MYSQL 同时执行多条SQL语句
    关于MyEclipse10编辑JSP卡顿现象
    鼠标悬停放大图片效果
    简单实现 飘浮 广告层特效
    简单实现 特效(董侨JonneyDong)
  • 原文地址:https://www.cnblogs.com/liugang/p/1646278.html
Copyright © 2011-2022 走看看