CSS学习(从菜鸟教程学习)(一)

时间:2024-05-19 14:21:47

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

 

 CSS学习(从菜鸟教程学习)(一)

   选择器通常是您需要改变样式的HTML元素。

   每条声明由一个属性和一个值构成。

   属性(property)是您希望设置的样式属性(style attribute)。每个属性有一个值。属性和值被冒号分开。

2. CSS声明总是以分号 ; 结束,声明组以大括号 {} 括起来:

     p {color:red;text-align:center;}

3. CSS 注释

    注释是用来解释你的代码,并且可以随意编辑它,浏览器会忽略它。

    CSS注释以 “/*”开始,以"*/"结束。

4. id 选择器

    id选择器可以为标有特定id的HTML元素指定特定的样式。

    HTML元素以id属性来设置选择器,css中id选择器以‘#’来定义。

    以下的样式规则应用于元素属性 id="para1":

     CSS学习(从菜鸟教程学习)(一)

     <p id="para1">Hello css</p>

     注意:id属性不要以数字开头,数字开头的id在Mozilla/Firefox浏览器中不起作用

5. class选择器

    class 选择器用于描述一组元素的样式,class选择器有别于id选择器,class可以在多个元素中使用。

    class选择器在HTML中以class属性表示,在CSS中,类选择器以一个点"."号显示。

    在以下的例子中,所有拥有 center 类的 HTML 元素均为居中。

    CSS学习(从菜鸟教程学习)(一)

6. CSS创建

    当读到一个样式表时,浏览器会根据它来格式化HTML文档。

    1)外部样式表

          当样式需要应用于很多页面时,外部样式表将是理想的选择。在使用外部样式表的情况下,你可以通过

          改变一个文件来改变整个站点的外观。

          每个页面使用<link>标签链接到样式表。<link>标签在(文档的)头部:

          CSS学习(从菜鸟教程学习)(一)

          浏览器会从文件 mystyle.css中读到样式声明,并根据它来格式文档。

          外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 HTML 标签。

          样式表应该以 .css 扩展名进行保存。

          CSS学习(从菜鸟教程学习)(一)

          注意:不要在属性值与单位之间留有空格(如: "margin-left:20 px"),正确的写法是"margin-left: 20px"

       2) 内部样式表

            当单个文档需要特殊的样式时,就应该使用内部样式表。可以使用<style>标签在文档头部定义内部样式表。

             CSS学习(从菜鸟教程学习)(一)

         3)内联样式

              由于要将表现和内容混杂在一起,内联样式会损失掉样式表的许多优势。

               请慎用这种方法,例如当样式仅需要在一个元素上应用一次时。

               要使用内联样式,需要在相关的标签内使用样式(style)属性。Style属性可以包含任何CSS属性。

               CSS学习(从菜鸟教程学习)(一)

           4)多重样式优先级

                样式表允许以多种方式规定样式信息。样式可以规定在单个的HTML元素中,在HTML页的头元素中,或在一个外部的

                CSS文件中。甚至可以在同一个HTML文档内部引用多个外部样式表。

                内联样式 > 内部样式 > 外部样式 > 浏览器默认样式

                 CSS学习(从菜鸟教程学习)(一)

              注意:如果外部样式放在内部样式的后面,则外部样式将覆盖内部样式。

7. CSS背景

    CSS背景属性用于定义HTML元素的背景。

   1) 背景颜色

       backgroud-color 属性定义了元素的背景颜色。

       页面的背景颜色使用在body的选择器中:

        CSS学习(从菜鸟教程学习)(一)

        CSS中,颜色值通常以以下方式定义:

             十六进制 - 如:"#ff0000"

              RGB - 如:"rgb(255, 0, 0)"

              颜色名称 - 如:"red"

         以下实例中,h1, p 和 div元素拥有不同的背景颜色:

          CSS学习(从菜鸟教程学习)(一)

       2)背景图像

            backgroud-image属性描述了元素的背景图像。

            默认情况下,背景图像进行平铺重复显示,以覆盖整个元素实体。

            页面背景图片设置实例:

            CSS学习(从菜鸟教程学习)(一)

       3)背景图像 - 水平或垂直平铺

             默认情况下,backgroud-image属性会在页面的水平或者垂直方向平铺。

             其中属性 background-repeat 属性可以设置background-image的平铺属性:

               background-repeat: no-repeat  表示background-image不会重复

               background-repeat: repeat-x  表示只有水平位置会重复背景图像

               background-repeat: repeat-y  表示只有垂直位置会重复背景图像

               inherit  表示指定 background-repeat属性设置应该从父元素继承

         4)背景图像 - 设置定位与不平铺

              background-position属性设置背景图像的起始位置。

              注意对于这个工作在 firefox和Opera,background-attachment必须设置为‘fixed(固定)’,如:

              background-position: left top/left center/left bottom/right top/right center/right bottom/center top/center bottom

              background-position:x% y% 第一个值是水平位置,第二个值是垂直位置。左上角是0% 0%,右下角是100% 100%。

                                                如果仅指定了一个值,其他值将是50%。默认值为:0% 0%

             background-position: xpos ypos 第一个值是水平位置,第二个值是垂直。左上角是0.单位可以是像素(0px0px)或其他css

                                               单位。如果仅指定了一个值,其他值将是50%,你可以混合使用%和positions。

             inherit   指定background-position属性设置应该从父元素继承

       5)背景 - 简写属性

            页面的背景颜色可以通过很多的属性来控制。为了简化属性的代码,可以将这些属性合并在同一个属性中。

            背景颜色的简写属性为“background”:

            CSS学习(从菜鸟教程学习)(一)

            当使用简写属性时,属性值的顺序为:

             background-color -- background-image -- background-repeat -- background-attachment -- background-position

            这些属性无需全部使用,可以案主页面的实际需要使用。

8. CSS文本属性

   CSS学习(从菜鸟教程学习)(一)

9. CSS字体

    CSS字体属性定义字体、加粗、大小、文字样式。

    1)serif 和 sans-serif 字体之间的区别

          CSS学习(从菜鸟教程学习)(一)

          在计算机屏幕上,sans-serif 字体被认为是比serif字体容易阅读

     

   2) CSS字型

        在CSS中,有两种类型的字体系列名称:

           通用字体系列 -- 拥有相似外观的字体系统组合(如"Serif" 或 "Monospace")

           特定字体系列 -- 一个特定的字体系列(如"Times" 或 "Courier")

            CSS学习(从菜鸟教程学习)(一)

      3) 字体系列

           font-family 属性设置文本的字体系列。

           font-family 属性应该设置几个字体名称作为一种"后备"机制,如果浏览器不支持第一种字体,他将尝试下一种字体。

           注意: 如果字体系列的名称超过一个字,它必须用引号,如Font Family:"宋体"。

            多个字体系列是用一个逗号分隔,如下:

             CSS学习(从菜鸟教程学习)(一)

       4)字体样式

             font-sytle 主要用于指定斜体文字的字体样式属性。

             这个属性由三个值:

                 正常 -- 正常显示文本

                 斜体 -- 让斜体字显示的文字

                 倾斜的文字 -- 文字向一边倾斜(和斜体非常类似,但不太支持)

                  CSS学习(从菜鸟教程学习)(一)

         5)字体大小

               font-size 属性设置文本的大小

               能否管理文字的大小,在网页设计中是非常重要的。但是,你不能通过调整字体大小使段落看上去像标题,或者

              使标题看上去像段落。请务必使用正确的HTML标签,<h1> - <h6>表示标题和<p>表示段落:

              字体大小的值可以是绝对或相对的大小。

              绝对大小:

                  设置一个指定大小的文本

                  不允许用户在所有浏览器中改变文本大小

                  确定了输出的物理尺寸时绝对大小很有用

              相对大小:

                   相对于周围的元素来设置大小

                   允许用户在浏览器中改变文字大小

           注意:如果你不指定字体的大小,默认大小和普通文本段落一样,是16像素(16px=1em)。

          6)设置字体大小像素

                CSS学习(从菜鸟教程学习)(一)

                上面的例子可以在 Internet Explorer 9, Firefox, Chrome, Opera, 和 Safari 中通过缩放浏览器调整文本大小。

          7)用em来设置字体大小

               为了避免Internet Explorer 中无法调整文本的问题,许多开发者使用 em 单位代替像素。
               em的尺寸单位由W3C建议。
               1em和当前字体大小相等。在浏览器中默认的文字大小是16px。
                因此,1em的默认大小是16px。可以通过下面这个公式将像素转换为em:px/16=em

                CSS学习(从菜鸟教程学习)(一)

                如果使用 em 单位,则可以在所有浏览器中调整文本大小。

                不幸的是,仍然是IE浏览器的问题。调整文本的大小时,会比正常的尺寸更大或更小。

        8)使用百分比和EM组合

             在所有浏览器的解决方案中,设置<body>元素的默认字体大小的是百分比:

             CSS学习(从菜鸟教程学习)(一)

            我们的代码非常有效。在所有浏览器中,可以显示相同的文本大小,并允许所有浏览器缩放文本的大小。

       9) 所有CSS字体属性

             CSS学习(从菜鸟教程学习)(一)

10. CSS链接

      不同的链接可以有不同的样式。

       1)链接样式

             链接的样式,可以用任何CSS属性(如颜色,字体,背景等)。
             特别的链接,可以有不同的样式,这取决于他们是什么状态。
             这四个链接状态是: 

                 a:link - 正常,未访问过的链接

                 a:visited - 用户已访问过的链接

                 a:hover - 当用户鼠标放在链接上时

                 a:active - 链接被点击的那一刻

          CSS学习(从菜鸟教程学习)(一)

        当设置为若干链路状态的样式,也有一些顺序规则:
            a:hover 必须跟在 a:link 和 a:visited后面
            a:active 必须跟在 a:hover后面

    2)文本修饰

         text-decoration 属性主要用于删除链接中的下划线

         CSS学习(从菜鸟教程学习)(一)

     3)背景颜色

           背景颜色属性指定链接背景色:

           CSS学习(从菜鸟教程学习)(一)