CSS学习

CSS

css是英文Cascading Style Sheets的缩写,称为层叠样式表，用于对页面进行美化。

存在方式有三种：元素内联、页面嵌入和外部引入，比较三种方式的优缺点。

语法：style = 'key1:value1;key2:value2;'

在标签中使用 style='xx:xxx;'
在页面中嵌入 < style type="text/css"> </style > 块
引入外部css文件

css写在head里面，style标签中写样式

ID用 #号来表示，class 可以用 .表示

在css里面注释用/* xxxxxxxxxxxxxxxxx */ 表示

标签选择器

div{ }
<div > </div>

class选择器

.bd{ }
<div class='bd'> </div>

id选择器

#idselect{ }
<div id='idselect' > </div>

关联选择器（可以层级选择）

#idselect p{ }
<div id='idselect' > <p> </p> </div>

组合选择器

input,div,p{ } #每个都可以应用

属性选择器

input[type='text']{ width:100px; height:200px; }

class 优先级或者重叠

 .c1{
            background-color:red;
            height:60px;
        }
        .c2{
            font-size:50px;

        }

一个div里可以有两个class样式  ，两个不一样的时候会一起选用，如果有重叠的话会先用style   class  和div中的

<div class="c1 c2">这里测试</div>

引入 css文件可以适用于其它网页的属性

 <link rel="stylesheet" href="xxx.css"/>

常用 css属性

font-size:50px;
border: 3px dotted red; 宽度为3px  虚线 红色
border: 3px solid red;  实线
height 48px;  高度
width  80%; 宽度  可以用像素，也可以用百分比
text-align ceter  水平居中
line-height  上下居中
font-weight 400  字体加粗

float用法，display用法

<div style="width:90px; height:30px; border: 1px solid red;float: left;"> 这里测试</div>
<div style="clear: both;"></div>将float清除
<div style="display: block">测试</div>  将div变成块级标签
<div style="display: inline">测试</div>  将div变成内联标签（行内标签），默认自己有多少占多少
<div style="display: inline-block">测试</div> 两个属性都有
<div style="display: none">测试</div> 让标签消失
行内标签，无法设置高度宽度，块级标签能设置

边距属性

padding: 20px; 内边距
margin: 30px; 外边距
margin: 0 auto; 可以将网页边上空余的去掉 ，auto 自动

=============IE常见问题答疑==================================

再A标签上使用图片有些IE不兼容会导致图片边上有框，为了消除他可以让style 上添加broder 为0

<style>
img{
        border: 0; 
    }
</style>


<a href="http:\\www.baiud.com">
    <img src="qwe.png">
</a>

=================position 位置设置固定设置某个位置============================================

<body>  #position: fixed      固定页面某个位置，页面滑动永远再固定的那个位置，bottom: 20px;right: 40px   离下面20px。离右边40px
<div style="height: 50px;width: 50px;background-color: black;color: white;position: fixed;bottom: 20px;right: 40px ;">返回顶部</div>
<div style="height: 5000px;background-color:#dddddd;: "></div>

relative+absolute  做绝对定位，单个absolute定位时候再某个页面  滑动页面会随着页面而滚动

<div style="height: 300px; width: 600px; border: 1px solid red; position : relative" ;>
    <div style="position:absolute;bottom: 0px;right: 0px;width: 50px;height: 50px;background-color: black;color: white">点我</div>
</div>
<div style="height: 300px; width: 600px; border: 1px solid red; position : relative" ;>
    <div style="position:absolute;top: 0px;left: 0px;width: 50px;height: 50px;background-color: black;color: white">点我</div>
</div>
<div style="height: 300px; width: 600px; border: 1px solid red; position : relative" ;>
    <div style="position:absolute;top: 0px;right: 0px;width: 50px;height: 50px;background-color: black;color: white">点我</div>
</div>

================================设置图片透明度======================

    <div style="position: fixed;background-color: black;top: 0;bottom: 0;right: 0;left: 0;opacity: 0.5;z-index: 10"></div>  #opacity 用来设置透明度,z-index值越大，越再上面第一层
    <div style="height: 5000px;background-color: green">colort</div>

=================================overflow======================================

 当图片固定大小超过DIV大小时会将div撑开

<div style="overflow: auto">  </div> overflow: hidden 超过div宽度就隐藏
                                     overflow: auto  超过div宽度就出现滚动条

=========-=====================模仿抽屉导航制作===================================

<style>
    .header{
        position: fixed;
        right: 0;
        left:0;
        top:0;
        height: 48px;
        background-color: #2459a2;
        line-height: 48px;

    }
    .main   {
        margin-top: 50px;
    }
    .w{
        width: 980px;
        margin: 0 auto;
    }
    .header .menu{
        display: inline-block;
        padding: 0 10px;
        color: white;
    }
    .header .menu:hover{
        background-color: blue;
    }
</style>

<body>
 <div class="header">
     <div class="w">
         <a class="logo">LOGO</a>
          <a class="menu">全部</a>
          <a class="menu">42区</a>
          <a class="menu">段子</a>
          <a class="menu">图片</a>
          <a class="menu">挨踢1024</a>
          <a class="menu">你问我答</a>


     </div>
 </div>
<div class ="main">56465465</div>

</body>

============background使用方法=====

<div style="background-image: url(icon.png);height: 80px;width: 18px; height: 18px;background-repeat: no-repeat;border: 1px solid red"></div>

利用img可以将图片缩小到位置

===========background-image ========================================================

<div style="background-image: url('qwe.png');height: 600px;"></div>#默认 ，div大 图片会重复放，水平垂直都可以增加，一般用于短图片做背景适用
 <div style="background-no-repeat: repeat;>   background-repeat 加了这个以后可以超出指定高度不会重复 ， background-x  x轴不会重复

============background-image==background-image 可以将很多不同杂在一起的图片选取指定想要的图片=======================

 <div style="background-image: url(icon.png);height: 80px;background-repeat: no-repeat;border: 1px solid red;width: 18px;height: 18px;

background-image

: 0px;background-position-y: -79px;"></div>

=====================简单登入窗口小图标-=========================

简单调用了position-relative position: absolute绝对位置来把图标位置移到右边定位，利用paddinig进行内边框偏移让数字不会穿过他

  <div style="height: 116px;width: 400px;margin: auto;margin-top:150px;border:  1px solid red;position: relative;">
       <div>
        <input type="text" style="height: 50px;width: 366px;padding-right: 30px" />
          </div>
        <div>
            <input type="pwd" style="height: 50px;width: 394px;margin-top:3px ;" />
      <span style="background-image: url(tb.png);position: absolute;right:12px;top:12px;botton:15px;width:  24px;height: 24px ;    background-position-x: -35px;    background-position-y: -67px;" ></span>
             </div>

         </div>

@media（mix-height：1200px{。containerwidth：{1170px；}}）判断当小于1170时操作

posted on 2017-09-19 22:44 喵吉欧尼酱阅读(218) 评论(0) 收藏举报

刷新页面返回顶部

喵吉欧尼酱

公告

CSS