zoukankan      html  css  js  c++  java
  • CSS 入门

    简介
    Cascading Style Sheets(级联样式表),是一种用来表现HTML或XML等文件央视的计算机语言。


    选择器
    id 选择器
         id 选择器可以为标有特定id的HTML 元素指定特定的样式。HTML元素以id属性来设置id选择器,CSS 中 id 选择器以“#” 来定义。以下的样式规则应用于元素属性 id="para1"
       

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

     
    class 选择器
         class 选择器用户描述一组元素的样式,class 选择器可以在多个元素中使用。class 选择器在HTML中以class属性表示,在CSS中,类选择器以一个点“.”号表示:
         所有拥有center类的HTML元素均居中: .center {text-align:center;}
         所有拥有center类的P元素均居中: p.center {text-align:center;}


    引入方式
    行内式:即在表示的style属性中设定CSS样式。这种方式本质上没有体现出CSS得优势,不推荐。

     <html>
           <head>
                  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
                  <title>Text Demo</title>
           </head>
           <body>
                  <h1 style=color:white;background-color=blue;>
                  This is a line of Text.
                  </h1>
           </body>
     </html>

    内嵌式:将对页面中各元素的设置几种写在<head>和</head>之间。对单一网页,还比较方便

    <html>
           <head>
                  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
                  <title>Text Demo</title>
                  <style type="text/css">
                  h1{
                         color:white;
                         background-color:boue;
                         }
                  </style>
           </head>
           <body>
                  <h1>This is a line of Text.</h1>
                  <h1>This is another line of Text.</h1>
           </body>
           </html>

    导入式:将一个独立的css文件导入HTML文件中

    <style type="text/css">
         @import"mystyle.css";
    </style>

    链接式:将一个独立的css文件导入HTML文件中
    <link href="mystyle.css" rel="stylesheet" type="text/css" /> 

  • 相关阅读:
    广通软件招聘-北京广通信达软件股份有限公司杭州分公司招聘-拉勾网
    广通软件
    Django – vicalloy's trac
    MyCAT常用分片规则之分片枚举
    django-extensions 文档 — django-extensions 1.2.5 文档
    Samba服务搭建 | Charlie's Blog
    Centos搭建Samba
    sqlite常用的命令-增删改查
    Win7 NFS 设置详解 | X-Space
    LabF nfs window client
  • 原文地址:https://www.cnblogs.com/dw729/p/3540912.html
Copyright © 2011-2022 走看看