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

  • 相关阅读:
    字体向上滚动
    地图改变图层
    移动地图
    [转] nodejs安装不了和npm安装失败的解决方法
    git回滚merge
    处理网站缓存问题
    webpack初学笔记 之 小案例篇demo1
    正则表达式整理
    关于返回值为图片 音频 视频的处理
    jquery ui datepicker 插件如何设置只能选择日期 禁止输入日期
  • 原文地址:https://www.cnblogs.com/liugang/p/1646278.html
Copyright © 2011-2022 走看看