• CSS基本知识汇总


    1、CSS 简介

      CSS 指层叠样式表 (Cascading Style Sheets),是一种用来表现 HTML 文档样式的语言,样式定义如何显示 HTML 元素,是能够真正做到网页表现与结构分离的一种样式设计语言。样式通常存储在样式表中,外部样式表通常存储在 CSS 文件中,多个样式定义可层叠为一。

      HTML 标签被设计为用于定义文档内容,也就是文档结构,为了增强代码的可读性,实现网页结构与表现相分离的原则,万维网联盟(W3C),肩负起了 HTML 标准化的使命,并在 HTML4 之外创造出样式(Style)。CSS 目前最新版本是 CSS3,相对于传统 HTML 的表现而言,CSS 能够对网页中对象的位置排版进行像素级的精确控制,拥有对网页对象编辑的能力,易于维护和改版,提高页面浏览速度,使用 CSS 布局页面更符合 W3C 标准,他是目前基于文本展示最优秀的表现设计语言。

      CSS 样式表极大地提高了工作效率:样式通常保存在外部的 .css 文件中,通过仅仅编辑一个简单的 CSS 文档,外部样式表有能力同时改变站点中所有页面的布局和外观。

    2、CSS 语法

      CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明。如下:

    1 p{
    2      color:red;
    3      text-indent:2em; /* 段落缩进2个字,即段落开头空2个汉字的位置。 */
    4  }
    View Code

    3、创建 CSS

      当读到一个样式表时,浏览器会根据它来格式化 HTML 文档。CSS 创建样式表有三种方法:内联样式、内部样式、外部样式。

      (1)、内联样式

      内联样式也叫行内样式或者行间样式,即在相关标签内使用样式(style)属性定义。如下:

    1 <div style="200px;height:100px;border:1px solid black;"></div>
    View Code

    由于要将表现和内容混杂在一起,内联样式会损失掉样式表的许多优势。因此需要慎用这种方法,例如当样式仅需要在一个元素上应用一次时,可以使用内联样式。要使用内联样式,需要在相关的标签内使用样式属性定义,style 属性可以包含任何 CSS 属性。

      (2)、内部样式

      内部样式也叫内嵌样式,即在文档中创建内嵌的样式表,需要使用 <style> 标签在文档头部定义内部样式表,如下:

     1 <head>
     2 <style>
     3 div{
     4     width:200px;
     5     height:100px;
     6     border:1px solid black;
     7 }
     8 p{
     9     color:blue;
    10     font-size:14px;
    11 }
    12 span{
    13     color:black;
    14     font-weight:bold;
    15 }
    16 </style>
    17 </head>
    View Code
  • 相关阅读:
    奇虎董事长周鸿祎:谁说没钱不能创业
    分析.NET基础库源码,学习Stream类及相关类
    Why need two IF in singleton pattern in the multiple threads scenario
    It's bad design that leveraging singleton design pattern in db connection
    Asp.net mvc 3 JSONResult return array
    System.Web.HttpContext.Current vs. ControllerContext.HttpContext (almost the same)
    Nhibernate HQL example paging and avoid sql injection
    Asp.net mvc 3 JSON complext object mapping
    Nhibernate configuration in app.config with log4net enabled 0 of 4
    Setup and run a simple nhibernate example
  • 原文地址:https://www.cnblogs.com/xinhuawei/p/5653710.html
Copyright © 2020-2023  润新知