资讯中心

CSS基础学习——简介和语法

来自:衡庐科技 发布时间:2019/11/16 14:30:53 浏览次数:

CSS 概述:CSS 是什么?

      CSS代表级联样式表。CSS是一种标准的样式表语言,用于描述网页的表示(即布局和格式)。

            样式定义如何显示 HTML 元素
            样式通常存储在样式表中
            把样式添加到 HTML 4.0 中,是为了解决内容与表现分离的问题
            外部样式表可以极大提高工作效率
            外部样式表通常存储在 CSS 文件中
            多个样式定义可层叠为一

      CSS优势:CSS 能做什么?

            1. CSS样式解决了一个普遍的问题
                  HTML 标签原本被设计为用于定义文档内容,通过使用如下标签来表达"这是标题”这是段落”之类的信息

实例:

 
      <h1>这是标题</h1>
      <p>这是段落</p>
      同时文档布局由浏览器来完成,而不使用任何的格式化标签。
      由于两种主要的浏览器(Netscape 和 Internet Explorer)不断地将新的 HTML 标签和属性添加到 HTML 规范中,创建文档内容清晰地独立于文档表现层的站点变得越来越困难。
      为了解决这个问题,万维网联盟(W3C)在 HTML 4.0 之外创造出样式(Style),所有的主流浏览器均支持层叠样式表。
      2. CSS 样式表极大地提高了工作效率
      样式表定义如何显示 HTML 元素,就像 HTML 3.2 的字体标签和颜色属性所起的作用那样。样式通常保存在外部的 .css 文件中。通过仅仅编辑一个简单的 CSS 文档,外部样式表使你有能力同时改变站点中所有页面的布局和外观。

css语法

      语法构成

            CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明
                  selector {declaration1; declaration2; ... declarationN }
 
            选择器主要是需要改变样式的 HTML 元素。
            每条声明是由一个属性和一个值组成。
            属性(property)是希望设置的样式属性(style attribute),每个属性有一个值。属性和值被冒号分开

      CSS示例

            实例:设置div的背景颜色为粉色
                  div{
                        background:pink;
                  }
            注:CSS声明总是以分号(;)结束,声明组以大括号({})括起来

实例:

            .test{
                  width:350px;
                  height: 250px;
                  background: red;
                  text-align: center;
                  line-height: 200px;
                  font-size: 40px;
            }
 
运行实例:
 
 

CSS 注释:

 
      注释是用来解释你的代码,并且可以随意编辑它,浏览器会忽略它。
      CSS注释以 "/*" 开始, 以 "*/" 结束,

实例:

            .test{
                  /*这是一个注释*/
                  width:600px;
                  height: 400px;
                  background: yellow;
                  text-align: center;
                  line-height: 300px;
                  font-size: 50px;
               }
运行实例:
 
 
售前咨询售后服务技术支持