CSS个人笔记

1.css选择器运用

标记选择器:对一个所需要的内容用字母标记起来,对内容进行设置调用p即可

类别选择器:比起标记选择器,它可以重复使用,一般使用clss调用

id选择器:id是唯一的,一次性用品;

例:id选择器

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Css之ID选择器</title>
<style type="text/css">
    #p1{
       color: red;
       font-size: 20px;
    }
    #p2{
    color: blue;
       font-size: 20px;
    }
   #p3{
    color: yellow;
       font-size: 20px;
    }
</style>
</head>
<body>
<p id="p1">总会有那么一天,我会强大!</p> 
<p id="p2">生活的希望都是自己给的!</p>
<p id="p3">在你碌碌无为时,没有谁会注意到你!</p> <!-- id是一次性用品,都是唯一的 -->
</body>
</html>

2.在HTML中需要导入样式,我们可以使用行内样式,镶嵌样式等进行导入,同时,这些样式的优先级也是不一样的;

3.复合选择器:

交集选择器,并集选择器,子代选择器,后代选择器;

例:后代选择器

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>后代选择器</title>
<style type="text/css">
     span{
          color:blue;
     }/*给含span指定变颜色*/
     p span{
          color:red;
     }/*给含p的后代span变颜色(即既有p又含有span)*/
</style>
</head>
<body>
<div>一代<p>二代<span>三代</span></p></div><br/>  
<span>一代又一代</span><br/>
<span>一代代又一代代</span> <br/>
</body>
</html>

4.css继承特性

例:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS继承特性</title>
<style type="text/css">
   .c{
        color: red;
     }/*继承特性 一层一层的 主目录下的子目录内容也继承变化*/
</style>
</head>
<body>
<h1>胡歌影视</h1>
<ul>
    <li class="c">仙剑奇侠传三
          <ul>
              <li>导演</li>
              <li>男一号</li>
              <li>女一号</li>
          </ul>
    </li>
    <li>琅琊榜</li>
    <li>天外飞仙</li>
</ul>  <!-- 使用嵌套  形成框架 -->
</body>
</html>

5.css设置图片边框  图片大小的缩放 图文混排  图片与文字对齐方式 (直接代码 主要代码备注作用)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>设置图片边框</title>
<style>
    .i1{
         border-width:1px;
         border-color:red;
         border-style:solid;
    }/*设置线框宽度   颜色   样式实线*/
    .i2{
         border: 2px red dashed;
    }/*设置线框宽度   颜色   样式虚线   此种为简写*/
    .i3{
         border: 2px red dotted;
    }/*设置线框宽度   颜色   样式点化线   此种为简写*/
    .i4{
       border-top:5px red solid;
       border-right:2px red dashed;
       border-bottom:2px yellow dotted;
       border-left:2px blue dashed;
    }/*设置边框 顶部红色实线  右边红色虚线  下面黄色点化线  左边蓝色虚线*/
    
</style>
</head>
<body>
<h1>实线边框</h1>
<img src="../java2.jpg" class="i1"/>
<h1>虚线边框</h1>
<img src="../java2.jpg" class="i2"/>
<h1>点化线边框</h1>
<img src="../java2.jpg" class="i3"/>
<h1>给不同边框设置样式</h1>
<img src="../java2.jpg" class="i4"/>
</body>
</html>

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>设置图片大小及缩放</title>
</head>
<body>
<div style="border:3px red solid"><!--  加一个边框 相当于容器-->
<h1>图片大小</h1>
<img src="../java.jpg" style="width: 160px; height:150px"/>
</div>
<div style="border:3px red solid">
<h1>图片缩放</h1>
<img src="../java.jpg" style="width: 20%;"/><!-- 设置宽度  高度自动协调-->
</div>
</body>
</html>

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图文混排</title>
<style type="text/css">
     img{
          width: 150px;
          height: 180px;
          float: left;
          margin: 5px;
     }/*设置图片大小  文字环绕向左  文字与图片距离*/
</style>
</head>
<body>
<img src="../java.jpg">
<p>Java之父——詹姆斯·高斯林出生于加拿大,是一位计算机编程天才。在卡内基·梅隆大学攻读计算机博士学位时,他编写了多处理器版本的Unix操作系统。</p>
<p>1991年,在Sun公司工作期间,高斯林和一群技术人员创建了一个名为Oak的项目,旨在开发运行于虚拟机的编程语言,同时允许程序在电视机机顶盒等多平台上运行。后来,这项工作就演变为Java。随着互联网的普及,尤其是网景开发的网页浏览器的面世,Java成为全球最流行的开发语言。因此被人称作Java之父。</p>
<p>高斯林一直对oracle公司抱有不满。这位工程师在离开甲骨文时写到,“我所说的都关乎细节与诚实,但吐露真相只会带来更多的坏处。”并称,“在Sun与oracle的并购会议上,到处是有关Sun和谷歌专利的争吵。oracle律师的眼睛闪闪发光。”
他表示,在收购Sun的早期阶段,oracle就表示出要同谷歌展开法律交锋的意愿。他本人也曾批评Android市场上的碎片化现象太过严重,足以影响软件开发者的工作。</p>

</body>
</html>

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>设置文字与图片对齐方式</title>
<style type="text/css">
   p{
      border: 1px red solid;
   }
</style>
</head>
<body>
<p>竖直对齐:<img src="../red.jpg" style="vertical-align: baseline;"/> 方式:<img src="../blue.jpg"style="vertical-align: baseline;""/>baseline</p>
<p>竖直对齐:<img src="../red.jpg" style="vertical-align: top;"/> 方式:<img src="../blue.jpg" style="vertical-align: top;"/>top</p>
<p>竖直对齐:<img src="../red.jpg" style="vertical-align: middle;"/> 方式:<img src="../blue.jpg"style="vertical-align: middle;"/>middle</p>
<p>竖直对齐:<img src="../red.jpg" style="vertical-align: bottom;"/> 方式:<img src="../blue.jpg"style="vertical-align: bottom;"/>bottom</p>
<p>竖直对齐:<img src="../red.jpg" style="vertical-align: text-bottom;"/> 方式:<img src="../blue.jpg" style="vertical-align: text-bottom;"/>text-bottom</p>
<p>竖直对齐:<img src="../red.jpg" style="vertical-align: text-top;"/> 方式:<img src="../blue.jpg" style="vertical-align: text-top;"/>text-top</p>
<p>竖直对齐:<img src="../red.jpg" style="vertical-align: sub;"/> 方式:<img src="../blue.jpg" style="vertical-align: sub;"/>sub</p>
<p>竖直对齐:<img src="../red.jpg" style="vertical-align: super;"/> 方式:<img src="../blue.jpg" style="vertical-align: super;"/>super</p>
<p>竖直对齐:<img src="../red.jpg" style="vertical-align: 20px;"/> 方式:<img src="../blue.jpg" style="vertical-align: 20px;"/>20px</p>
<p>竖直对齐:<img src="../red.jpg" style="vertical-align: -20px;"/> 方式:<img src="../blue.jpg" style="vertical-align: -20px;"/>-20px</p>
</body>
</html>

6.css盒模型:可想象为打哈子里面有一个小盒子,然后我们可以对他们之间的间距


border-width  设置边框粗细
border-color  设置边框颜色
border-style  设置边框样式
padding     设置内边距
magin        设置外边距

例:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>外边距</title>
<style type="text/css">
     #outerBox1{
          border-width:5px;
          border-color:red;
          border-style:solid;
          padding:40px;
          margin:10px;
     }
     #outerBox2{
           border:thick blue dashed;
           padding-top:20px;
           padding-right:10px;
           padding-bottom:5px;
           padding-left:2px;
           
            margin-top:20px;
            margin-right:10px;
            margin-bottom:5px;
            margin-left:2px;
     }
     #outerBox3{
           border-top:thick blue dashed;
           border-right:2px red solid;
           border-bottom:thin yellow dotted;
           border-left:2px red solid;
           padding: 20px 10px 5px 2px;
           
            margin: 20px 10px 5px 2px;
     }<!--三种设置方法 -->  <!--边框设置顺序 上右下左 -->
</style>
</head>
<body>
<div id="outerBox1">内容一</div>
<div id="outerBox2">内容二</div>
<div id="outerBox3">内容三</div>
</body>
</html>

7.盒子悬浮设置


left   盒子左悬浮
right  盒子右悬浮
clear-left   不允许左悬浮
clear-right  不允许右悬浮
clear-both   不允许有悬浮

例:


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>使用clear清除浮动的影响 both</title>
<style type="text/css">
       .parent{
           padding:5px;
           background-color:yellow;
           border: 2px solid red;
       }
       .d1{
           float:left; /*左浮动*/
           margin:5px;
           height:100px;
           background-color:green;
           border: 2px solid green;
       }
       .d2{
       float:right; /*右浮动*/
            margin:5px;
            height:50px;
            background-color:blue;
            border: 2px solid blue;
       }
       p{
            clear:both;/*不允许两边边有悬浮 */
            margin:5px;
            background-color:purple;
            border: 2px solid purple;
       }
</style>
</head>
<body>
<div class="parent">
       <div class="d1">盒子A</div>
       <div class="d2">盒子B</div>
       <p>CSS是一种定义样式结构如字体、颜色、位置等的语言,被qrfsjgldj;lgme;fdmhjghm;我瓦房店市拉开给你空间给你看发给你的离开那个的技能高考;给你新来的更困难多凉快干嘛哪里gjwkgtlskgwekgh我江东父老客户经理看见林俊杰哦32斤哦用于描述网页上的信息格式化和现实的方式。CSS样式可以直接存储于HTML网页或者单独的样式单文件。无论哪一种方式,样式单包含将样式应用到指定类型的元素的规则。外部使用时,样式单规则被放置在一个带有文件扩展名_css的外部样式单文档中。</p>
</div>
</body>
</html>

8.表格样式设置


border: 设置表格边框
border-collapse:  设置边框分离(默认属性)
border-collapse:  设置边框合并
padding: 设置单元格里面的内容和边框之间的距离
此外,还可以对表格进行隔行换色,使用单偶数形式,也可以对各行进行样式设置想要的样式,也可以设置一些其他效果

例:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>设置鼠标经过时行变色效果</title>
<style type="text/css">
   .t{
       border: 2px gray solid;   /*设置表格边框*/
       border-spacing: 0px;    /*设置表格单元格之间的间距*/
       border-collapse:collapse;  /*合并单元格 两根线变为重合一根 不仅仅变成紧靠的两根*/
       width:500px;
       table-layout:fixed;  /*表格固定宽度*/
   }
   .t caption{
       font-size:20px;  /*设置字体大小*/
   }
   .t tr{
       background-color:#ccc; /*给表格加一个背景颜色*/
   }
   .t td{
       border: 2px gray solid;
       padding:5px; /*设置表格边框与内容的间距*/
   }
   .t th{
       border: 2px gray solid;
       padding:5px; /*设置表格边框与内容的间距*/
    }
    tbody tr.even{
       background-color:#AAA;  /*给偶数行换色  even代表偶数*/
    }
     th+td{
         text-align:center;  /*调整某一列居中*/
     }
     th+td+td+td{
         text-align:center;
         background-color:red;
     }
     tbody tr:hover{       
        background-color:aqua;  /*鼠标移动到行时 整行变色*/
     }
</style>
</head>
<body>
     <table class="t">
        <caption>学生信息</caption>
        <thead>
            <tr>
                <th>序号</th><th>学号</th><th>姓名</th><th style="width:50px;">性别</th><th>出生日期</th>
            </tr>
        </thead>
        <tbody>
            <tr> 
                <th>1</th><td>001</td><td>魏安复</td><td>男</td><td>2012-12-12</td>
            </tr>
            <tr class="even">
                <th>2</th><td>002</td><td>杜子腾</td><td>女</td><td>2011-11-11</td>
            </tr>
            <tr>
                <th>3</th><td>003</td><td>史珍湘</td><td>女</td><td>2010-10-10</td>
            </tr>
            <tr class="even">
                <th>4</th><td>004</td><td>梅读</td><td>女</td><td>2009-10-10</td>
            </tr>
            <tr>
                <th>5</th><td>005</td><td>赖月金</td><td>男</td><td>2008-01-01</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <th>总计</th>
                <th colspan="4">5条数据</th>
            </tr>
        </tfoot>
</table>
</body>
</html>

9.css中的布局:对网页进行布局,一般网页都分为好几个部分,分别用来放内容,主次之分,很多网页布局都如此

例:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>绝对定位法</title>
<style type="text/css">
       body{
            text-align:center;   /*内容居中*/
        }
       #head,#container,#content,#side,#foot{    /*加个边框*/
             margin: 20px auto 20px auto;
             padding:20px 0px 20px 0px;
             border: 1px solid red;
       }
        #head,#container,#foot{
            width:900px;
        }
        #container{
           border:0px;    /*布局中间内容大边框*/
           position:relative;
           height:250px;
        }
        #content{
           position:absolute;
           width:700px;
           height:200px;
        }
        #side{
           margin-left:750px;
           height:150px;
        }
</style>
</head>
<body>
<div id="head">head</div>  
<div id="container">
        <div id="content">content</div>  
        <div id="side">side</div>      
</div>
<div id="foot">foot</div>      
</body>
</html>

除此之外,我们也可以再一些固定的布局中根据我们需要改变我们的布局

例如:增加或减去一些小的部分

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>变宽布局</title>
<style type="text/css">
       body{
            text-align:center;   /*内容居中*/
        }
       #head,#container,#content,#side,#foot{    /*加个边框*/
             margin: 20px auto 20px auto;
             padding:20px 0px 20px 0px;
             border: 1px solid red;
       }
        #head,#container,#foot{
            width:80%;
        }
        #container{
           border:0px;
        }
        #content{
           float:left;  /*左浮动*/
           width:63%;
           height:200px;
        }
        #side{
           float:right;  /*右浮动*/
           width:33%;
           margin-left:10px;
           height:100px;
        }
        #foot{
           clear:both;   /*清除左右浮动*/
        }
</style>
</head>
<body>
<div id="head">head</div>  
<div id="container">
        <div id="content">content</div>  
        <div id="side">side</div>      
</div>
<div id="foot">foot</div>      
</body>
</html>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值