层叠样式表

  CSS简介一种用来表现HTML文件样式的计算机语言

  CSS作用:定义网页的外观(字体、背景、文本、布局、边缘、列表及其他)

  所谓样式表:是样式化HTML的一种方法HTML是文档内容,而样式表是文档的表现,或者说是外观。

  所谓层叠,将一组样式一起层叠使用,控制某一个或多个HTML元素,按样式表中的属性依次显示

特点:

  控制页面中的每一个人元素

  对HTML语言处理样式最好的补充

  把内容处理相分离减少工作量

       使用css的样列:

<!DOCTYPE html>
<html>
<head>
  <title>第一个使用css的样列</title>
  <style> /*适应该标记将css嵌入到HTML中*/
     p {                   /*为段落b标记p定义样式,使用多个层叠样式*/
      font-size: 30px;                         /*设置段落中的字号为30像素*/
      color: yellow;                           /*设置段鸾中间的字体为黄色*/
      border: 2px solid blue;            /*设置段落边框为蓝色2像素*/
      text-align: center;                       /*设置段落中的字体居中*/
      background: green;              /*设置段落背景颜色为绿色*/
      }                                /*样式选择器的结束大括号*/
  </style>
</head>

        <!--HTML中可以使用空行调节编码格式-->

<body>
  <p>Linux</p>
  <p>Apache</p>      <!--使用段落标记显示一个字符串-->
  <p>PHP</p>

</body>
</html>

      css的规则组成:主要由选择器和声明俩部分组成;列子:p{text-indent:3em}           这个当中的选择器是p

      声明则是定义样式元素,他用于设置HTML元素的样式。形式:选择器{属性:值1;属性:值2;、、、、}声明和选择器一起使用。

      属性和值之间用:连接多个属性的复合样式声明之间应该用分号;隔开,最后一个属性的值后面可以不用分号

    如果在HTML中直接使用style属性声明样式,则不需要{}而是直接将多层叠样式元素声明在style属性的双引号即可:<h1 style="font-size:x-large;color:red;">html中直接加标签

      css注释/*******************/

  `  长度单位:em(font-size:2em)是一个与一个字符高度大致相同的单位

             px(font-size:12px)是一个像素单位

          pt(font-size:12pt)是一个磅的单位

          %(font-size:80%)是一个百分比

    颜色的单位和URL值

    颜色的值是一个关键字或一个RGB格式的数字,16个关键字:aqua、black、blue、fuchsia、gray、green、lime、maroon、navy、olive、purple、red、silver、teal、white、yellow、RGB颜色可以有以下四种形式:

        #rrggbb

        #rgb

        #rgb(x,x,x)x是一个0-255的整数、

        #rgb(y%,y%,y%)y是一个0.0到100.0的整数

指定背景图片需要使用URL值4种方式:

        body{bcakground:url(xsphp.gif)}不用引号

        body{background:url(http://www.lampborther.net/xsphp.gif)}完整的URL

        body{bcakground:url('xsphp.gif')}使用单引号

        body{background:ur("xsphp.gif")}使用双引号

      在HTML文档中放置css的几种方式

  内联样式表:使用style属性内联、可以应用于任何的body元素、除了basefont、papam和scrip标记。css声明当做自己的值,而每个值用分号;隔开

      列子:<p style="color:red;font-family:serif">这段样式是红色的serif字,如果字体可以用的话</p>

  嵌入一张样式表:

        使用style元素嵌入到HTML中使用<style>需要放在HTML文档的head部分

              <head>

                <style type="text/css" media=""screen">

                  body{ background:url(foo.gif) red;color:black}

                  p em{ background: yellow; color:black}

                  .note{ margin-left: 5em; margin-right:5em}

                </style>

            </head>

猜你喜欢

转载自www.cnblogs.com/dream2060/p/10020425.html