zoukankan      html  css  js  c++  java
  • CSS基础

    CSS的基础语法:

      其格式分为两部分:选择器和样式规则。

               样式规则:用于设置样式类容 。

               选择器:用来指定哪些HTML元素采用该样式规则

      格式: H3{color:red;} ,其中H3为选择器,{}中的内容为样式规则。  

          如果有多个样式规则则用(;)隔开。如果要为一个属性赋多个值,中间用(,)分开。

          H3{

            font-family:Arial , sans-serif ;

            color:red ;

            }

    一、在HTML中定义样式:

      在HTML中通过<style>标签可以将HTML元素中的样式提炼出来:

      1、id 选择器

      在选择器前面加上 (#)表示这个选择器是一个id属性值。 

    <html>
    <head>
    <title>CSSTest.html</title>
    <style type = "text/css">
    #red
    {background-color:red;}
    </style>
    </head>
    <body>
    <a href = "http://www.cnblogs.com/jbelial" id = "red">http://www.cnblogs.com/jbelial</p> <br>
    </body>
    </html>

      

      2、类选择器 

        在选择器前加(.)表示这个选择器的名可以放在class属性中。  

    <html>
    <head>
    <title>CSSTest.html</title>
    <style type = "text/css">
    .red
    {
    background-color
    : red ;
    padding
    : 18px ;
    }
    </style>
    </head>
    <body>
    <a href = "http://www.cnblogs.com/jbelial" class = "red"> http://www.cnblogs.com/jbelial</p> <br>
    </body>
    </html>

      3、HTML标签名选择器

      当选择器名正好是一个HTML元素名的话,所有相应的HTML元素应用都会用这个样式。 

    <html>
    <head>
    <title>CSSTest.html</title>
    <style type = "text/css">
    .red
    {
    background-color
    : red ;
    padding
    : 18px ;
    }
    h1
    { font-size : 40px; }
    </style>
    </head>
    <body>
    <h1> http://www.cnblogs.com/jbelial</h1>
    <a href = "http://www.cnblogs.com/jbelial" class = "red"> http://www.cnblogs.com/jbelial</p> <br>
    <h1> http://www.cnblogs.com/jbelial</h1>
    </body>
    </html>

     二、在外部文件中定义样式

      CSS标准中允许将样式单独写在一个.css文件中(在HTML中定义样式不可以在不同的HTML页面间共享),通过<link>标签应用这个文件(这样

    便可以达到共享的样式的目的) 。 

    @CHARSET "UTF-8";
    <style type = "text/css">
    <!--
    .red
    {
    background-color
    : red ;
    padding
    : 18px ;
    }
    h1
    { font-size : 50px; }
    -->
    </style>
    <html>
    <head>
    <title>CSSTest.html</title>
    <!-- 引用一个css文件 -->
    <link type = "text/css" rel = "stylesheet" href = "CSSTest.css" />
    </head>
    <body>
    <a href = "http://www.cnblogs.com/jbelial" class = "red" id = "link"> http://www.cnblogs.com/jbelial</a> <br>
    <h1 > http://www.cnblogs.com/jbelial</h1>
    </body>
    </html>


    三、样式的继承

       如果HTML元素未设置某些样式,但在其父元素中设置了,在子元素就会继承父元素的中的样式。


  • 相关阅读:
    js中__proto__和prototype的区别和关系?
    Vue绑定事件v-on(@)与修饰符
    Vue状态(视图共享)管理:Vuex
    Vue UI框架对比:Element UI、Ant Design Vue、iView
    搞清楚Vue-router中的Router、Router实例、Router对象的区别与联系
    Vue-router高级进阶知识
    Vue-router基础知识
    FloatHelper
    scrollHelper
    DialogHelper
  • 原文地址:https://www.cnblogs.com/jbelial/p/2381946.html
Copyright © 2011-2022 走看看