码迷,mamicode.com
首页 > Web开发 > 详细

html_之css

时间:2019-02-27 10:29:42      阅读:214      评论:0      收藏:0      [点我收藏+]

标签:sql   type   oat   filter   css样式   int   --   鼠标移动   text   

css 有三种形式的写法:

  1. 直接在标签里写入style样式
  2. 在<head></head>里写入<style></style>样式
  3. 直接创建.css 文件通过<link/>引入css文件
<html>
<head>
    <title></title>
    <link rel="stylesheet" href="css文件名.css"/>  <!--把创建的css文件中所有的样式都引用到了本文件-->
    <style>
                <!--cc为名字,. 代表class-->
        .cc{     
            color:red;
            font-size:18px;
        }
        .ccd{
            color:#ddd;    
        }
    </style>
</head>
<body>
  <div id="122" style="color:red;font-size:15px;"> 第一种 </div>
  <div class="cc ccd"> 第二种 </div>  <!--优先级:当同时引用两个样式时class=“cc ccd”,style里越往后优先级越高-->
  <div class="bb">第三种</div>
</body>
</html>

 选择器 :

  • 标签选择器
  1. 把HTML中‘所有’的a标签应用此样式
a{ 
     color:red;
}

   2. 把input类中type=“text”的标签都应用这个样式

input[type="text"]{
    background-color:black;
    color:white;
}
  •  ID选择器

       例:id 是uu的标签应用这个样式

    <div id="uu"> 我是谁我在哪儿 ?.? </div>

#uu{
    background-color:black;
    color:white;
}
  • 层级选择器

  例:

    <div class=‘c‘>
      <a>
      <div>
        <span class=‘d‘></span>
      </div>
      <span class = ‘d‘></span>
      </a>
      </div>
    <span class=‘d‘></span>

.c a div .d{
    此样式只应用于c样式的标签下的a标签下的div标签下的标签的d样式
    (若省略div则是a标签下的所有d样式都被应用)
    若a标签中有id=i8,则此处的css样式中的a可写为#i8
}
  • 组合选择器

 例 : 如下a样式和p样式可写为组合样式a,p{ }

a{

}

p{

}

a,p{
    a标签或p标签都可以应用这个样式
    也可以和层级选择器一起应用
}

 <!--background-->

background-color   背景颜色
 background-image  背景图片
 background-image:url("图片路径")

如果没有指定图片宽度,图片默认会平铺;如果指定的高度大于图片高度,图片也会默认向下平铺

 background-repeat  repeat-x;不允许在x轴重复,repeat-y;不允许在y轴重复,no-repeat;不允许重复
 background-position:0px 119px;  如望远镜,随着望远镜的移动看见的景物也不同

 <!--border--> 

                            线的粗细   实线虚线   线的颜色
<div style="border:  5px      dotted    #3D3127;"></div>         dotted:虚线    solid : 实线
border-left:左边框 border-right:右边框 border-top:上边框 border-bottom:下边框

<!--display-->

参数:

none                                隐藏标签                                                                                        
block 把块级标签变为内联标签
inline 把内联标签变为块级标签

<!--cursor-->

参数:

pointer 鼠标移动到标签变为小手
move 鼠标移动到标签变为十字拉拽                                        
url(‘图片路径‘)                       鼠标移动到标签变为图片                                                          

<!--float-->

float: left; right; 在层级标签中一旦子类标签被设置为float,则父标签将不会被撑起来了

解决方法一:

<html>
    <head>
            <title> </title>
    </head>
    <body>
        <div style=‘background-color:blue‘>
        <div style=‘background-color:red;float:left;width:20%;‘>123</div>
        <div style=‘background-color:green;float:left;width:50%;‘>123</div>
        <!----width 的百分比是相对于父标签进行划分的--------->    
        <div style=‘background-color:green;float:right;width:10%;‘>123</div>
        <div style=‘clear:both;‘>这里可以什么都不写,但是必须有,
              相当于把飘起来的标签拉回来了,父标签里的background才会在剩下的20%显现出来
</div>     </div> </body> </html>

解决方法二:利用after,before伪类给内容前后插入数据

<html>
    <head>
        <title> </title>
        <style>
            .c1{
                float:left;
                width:20%;
                background-color:red;
                }
            .c2{
                float:right;
                width:50%;
                background-color:green;
                }
            .clearfix:after{   
                content:‘.‘;
                clear:both;    
                visibility:hidden;   <!-- 把内容‘ . ’隐藏 -->
            }
        </style>
    </head>
    <body>
        <div class=‘clearfix‘ style=‘background-color:#45e8e7;‘>
            <div class = ‘c1‘>342</div>
            <div class = ‘c2‘>33422</div>
        </div>
    </body>
</html>    

<!--position-->

参数:

fixed        固定位置   

定位在窗口的某一位置,fixed-top 离‘窗口‘顶部距离; fixed-left 离左边距离;

                                    fixed-bottom 离下面的距离; fixed-right 离右边的距离

absolute  绝对位置  一次固定在窗口的指定位置和relative合用
relative 相对位置 本身不产生任何效果,和absolute合用

 小例子:

<html>
    <head>
        <title> </title>
    </head>
    <body>
        <div style=‘height:2000px;background-color:pink‘>    
            <div style=‘position:relative;background-color:#aeafee;height:300px;width:300px;float:left;‘>        
            <div style=‘position:absolute;bottom:0px;right:0px;‘>定位</div>    <!-- ‘定位’定位在了blue框里的右下角  -->
        </div>
        <div style=‘position:fixed;bottom:50px;right:50px;‘>返回顶部</div><!--‘返回顶部‘定位在’窗口‘的右下角-->        

</div>
    </body>
</html>    

 <!--透明度:opacity-->

 透明度可设置范围为:0-1,注:ie浏览器设置透明度用filter:alpha(opacity=sqlN),其中sqIN设置范围:0-100

 小例子:通过fixed固定设置两层div(注:    <!-- z-index:层级数,数字越大层越上-->)

<html>
    <head>
        <title> </title>
        <style>
            .c{
                z-index:10;       
                position:fixed;
                top:0px;
                left:0px;
                bottom:0px;
                right:0px;
                background-color:black;
                color:white;
            }
            .c1{
                z-index:12;
                position:fixed;
                top:0px;
                left:0px;
                bottom:0px;
                right:0px;
                background-color:red;
                color:white;
                opacity:0.3;
            }
        </style>
    </head>
    <body>
        <div class=‘c‘>ihbk</div>    
        <div class=‘c1‘>sfadsdfds</div>    
    </body>
</html>    

<!--边距padding-->

 padding : 内边距      //     margin:外边距

 padding: padding-left:左边距; padding-right:右边距; padding-bottom: 下边距;  padding-top: 上边距;

 margin: margin-left:左边距; margin-right:右边距; margin-bottom: 下边距;  margin-top: 上边距;

 padding参数设置的三种方式:

  • padding:20px; 把上下左右边距都设置为20px;
  • padding:10px 20px; 把上下边距设置为10px; 左右边距设置为20px;
  • padding:10px 20px 30px 40px;  把上边距设置为10px; 把左边距设置为20px;  把下边距设置为30px;  把右边距设置为40px; 

 小例子:

<html>
    <head>
        <title> </title>
        <style>
            .c{
                height:70px;
                border:1px solid red;
            }
            .c1{
                height:50px;
                background-color:pink;
                margin-top:10px;
            }
        </style>
    </head>
    <body>
        <div class=‘c‘>
            <div class=‘c1‘> ihbk </div>    
        </div>    
    </body>
</html>    

 

html_之css

标签:sql   type   oat   filter   css样式   int   --   鼠标移动   text   

原文地址:https://www.cnblogs.com/Vera-y/p/10439922.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!