zoukankan      html  css  js  c++  java
  • 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:这个值表示固定背景图片,图片不会随着滚动条的下拉而消失。也就是说始 终在屏幕上。

     

     

     

  • 相关阅读:
    关于Design Complier/Library Compiler的跌坑(坑爹)记录
    博客暂时停更
    简单的Verilog测试模板结构
    存储器的设计/建模
    静态时序分析的三种分析模式(简述)
    Linux系统的基本使用
    Modelsim的使用——复杂的仿真
    Python-第三方库requests
    MySQL查询结果写入到文件总结
    MySQL创建函数报“ERROR 1418 ”错误,不能创建函数
  • 原文地址:https://www.cnblogs.com/pangbing/p/7190957.html
Copyright © 2011-2022 走看看