H5基本样式和css选择器

css基本样式:
  css基本样式是对标签的修饰美化,它可以让网页显得更炫酷优美,下面就给大家介绍一些基本的样式:

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>基本样式</title>

<style type="text/css">

div{

/*文字颜色*/

color: red;

/*设置宽度*/

width: 500px;

/*设置高度*/

  height: 500px;

/*设置背景颜色*/

/*background-color: orange;*/

background-color: rgb(84,121,30);

/*边框*/

border: 5px solid black;

/*标签文本开头空出30px*/

text-indent: 30px;

/*标签内文本内容加下划线*/

text-decoration: underline;

/*文本贯穿线*/

text-decoration: line-through;

/*取消a标签的下划线*/

text-decoration: none;

/*内容居中*/

text-align: center;

/*字体大小*/

font-size: 30px;

/*字体*/

font-family: STSong;

/*文字加粗*/

font-weight: bold;

/*文字倾斜*/

font-style: italic;

/*设置背景图片*/

background-image: url(img/3.jpg);/*(此处需要在omg文件夹中插入一张图片)*/

/*不重复背景图片*/

background-repeat: no-repeat;

/*背景尺寸*/

background-size: 100% 100%;

}

                        /*取消a标签自带的下划线*/

a{

text-decoration: none;

}

</style>

</head>

<body>

<div>我是div</div>

<a href="javascript:void(0)">我是a标签</a>

<div>

<a href="javascript:void(0)">我是另一个a标签</a>

</div>

</body>

</html>


   css选择器:
css选择器就如同雷达一样,他能精准的找到我们想要修改的标签的样式,他在程序编写的过程中起到很大的作用,可以说没有css选择器就不能制作出一套完美的网页,如下,我通过代码的方式让大家体会选择器的强大作用;(注:大家在运行代码的过程中尽量是想用哪个就注掉其他无关的代码,以免它们之间相互影响,给你的观察带来影响。)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
       <title>css选择器</title>
       <!--选择器:负责在样式区找到我们要修改样式的标签-->
       <style type="text/css">
            /*css选择器第一种:标签名选择器*/
        div{
           width: 100px;
           height: 100px;
          background-color: red;
          }
         /*二:类选择器*/
      .div1{
         width: 200px;
         height: 200px;
         background-color: darkcyan;
        }
       /*三:id选择器,优先级很高,和js有关,尽量少使用*/
      #oDiv{
         width: 50px;
         height: 50px;
         background-color: blue;
        }
         /*四:后代选择器*/
       .div2 p{
           color: red;
        }
        /*五:通配符选择器*/
     * {
          border: 1px solid black;
       }
       /*六:组合选择器*/
       .div3,.div4,.div5,#oDiv1,p{
          width: 200px;
          height: 200px;
          background-color: cyan;
          }
        p{
           width: 100px;
           height: 100px;
           background-color:red;
          }
       </style>
</head>
<body>
       <div class="div1"></div>
       <div id="oDiv"> 我是做参考的</div>
       <p class="div1"></p>
       <div class="div2">
            <p>我是p1</p>
           <div>
              <p>我是p3</p>
          </div>
      </div>
     <p>我是p2</p>-->
     <div class="div5"></div>
     <div class="div4"></div>
     <div class="div3"></div>
    <div id="oDiv1"></div>
    <p></p>
   <!--
       选择器优先级
       标签名选择器<class选择器<id选择器
    -->
</body>
</html>



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值