css基础-1

css简介

 

一、CSS 指层叠样式表

 样式定义如何显示 HTML 元素

 样式通常存储在样式表

 把样式添加到 HTML 4.0 中,是为了解决内容与表现分离的问题

 外部样式表可以极大提高工作效率

 外部样式表通常存储在 CSS 文件

 多个样式定义可层叠为一

 

CSS 可以通过以下方式添加到HTML:

1.内部样式:

       行内样式

       嵌入样式

2.外部样式

 

 

     1)行内样式- 在HTML元素中使用"style" 属性

      <p style="color:blue;margin-left:20px;">This is a paragraph.</p>

     

     2)嵌入样式-在HTML文档头部 <head> 区域使用<style> 元素 来包含CSS

      <head>

     <style type="text/css">

     body {background-color:yellow;}     

     p {color:blue;}

     </style>

     </head>

     以上是直接给元素定义css

         

(1、通过选择器来调用css

               定义方式有两种:id选择器和class选择器

       例子1id选择器                    调用

           #id名字 {属性:值}          <标签 id="刚才定义的id名字">

           #pang {clor:red}           <p id="pang">

         

      例子2 class选择器                 调用

          .名字 {属性:值}              <标签 clas="刚才定义的id名字">  

          .pang {color:red}          <p class="pang">

   

     这两种调用可以使用在内部样式表和外部引用中

    

     

3)外部引用 - 使用外部 CSS 文件

      <head>

     <link rel="stylesheet" type="text/css" href="mystyle.css">

     </head>

     最好的方式是通过外部引用CSS文件.

 

CSS样式表优先顺序

    ID选择器>类选择器>标签选择器

    选择器类型相同时,按照代码应用顺序,后应用的样式覆盖先应用的样式

    CSS行内样式在所有样式表中优先级最高

 

二、css语法格式

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

      (1)选择器通常是:您需要改变样式的 HTML 元素。(也就是标签)

      (2)每条声明:由一个属性和一个值组成。

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

 

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

     例子:

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

         

    如果属性值有两个单词以上,需要""扩起来

   比如: a {color:"red asd"}  

2css注释

     /*   注释内容  */

 

 

三、css常用属性

  (1)height: 表示高度

  (2)width: 表示宽度

  (3)background : 表示背景

   背景属性(背景图片)例子:

   {backgrouund:blue url(1.png) no-repeat X轴位置 Y轴位置;}

      blue背景颜色

      no-repeat:表示背景图片不重复显示

      XY轴可以用像素来表示:比如100px 200px

     center:表示居中

     fixed:这个值表示固定背景图片,图片不会随着滚动条的下拉而消失。也就是说始 终在屏幕上。

 

 

 

posted @ 2017-07-16 16:54  借风拥你  阅读(160)  评论(0编辑  收藏  举报