• 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的内容都会自动居中了,如图

  • 相关阅读:
    实验 6 数组1输出最大值和它所对应的下标
    实验5第二题
    实验5第一题
    作业 3 应用分支与循环结构解决问题 判断是否闰年
    心得与体会1
    第七章
    第六章
    第五章
    第四章
    第一章
  • 原文地址:https://www.cnblogs.com/liugang/p/1646278.html
Copyright © 2020-2023  润新知