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

     

     

     

  • 相关阅读:
    html实现滚动播报(原生JS实现)
    移动端H5页面惯性滑动监听
    简单线条、任意填充色的小图标(含自制方法)
    git和github新手安装使用教程(三步入门)
    node.js的安装配置——前端的配置
    Sublime Text 3 一些简单使用
    $.ajax() 方法的理解
    前端知识点
    (6)一些工作和生活的经验分享,以后还会不断补充添加
    (5.1)Opencv库学习第二部分
  • 原文地址:https://www.cnblogs.com/pangbing/p/7190957.html
Copyright © 2020-2023  润新知