琼殿技术论坛»首页 › 前端开发技术交流 › CSS论坛 › 前端学习：学习笔记（CSS部分）
返回列表 发新帖
查看: 34|回复: 0

前端学习：学习笔记（CSS部分）

[复制链接]
张婷婷

1

主题

0

回帖

0

积分

积极分子

金币
0
阅读权限
220
精华
0
威望
0
贡献
0
在线时间
0 小时
注册时间
2012-6-11
发表于 2019-9-17 18:48:00 | 显示全部楼层 |阅读模式

前端学习：学习笔记（CSS部分）

CSS的学习总结(图解）

CSS的引入方式和书写规范

CSS的插入方式_内嵌样式

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    
    
    
    <body>
        <!-- 插入CSS代码的第1种方式: 内嵌形式 -->
        <div style="height: 300px;width: 300px;background-color: red;">
            <h1>我是DIV--1号</h1>
        </div>
                
                
        <div>
            <h1>我是DIV--2号</h1>
        </div>            
                
    </body>
    
    
    
    
    
</html>
View Code

CSS的插入方式_内部样式

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            div{
                height: 300px;
                width: 300px;
                background-color: red;
                color: yellow;
            }
        </style>
    </head>

    
    <body>
        <!-- 插入CSS代码的第2种方式: 内部形式 -->
        <div>
            <h1>我是DIV--1号</h1>
        </div>
                
                
        <div>
            <h1>我是DIV--2号</h1>
        </div>    
        
    </body>

</html>
View Code

CSS的插入方式_外部样式

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="css/Demo1.css" />
    </head>
    
    
    <body>
        <!-- 插入CSS代码的第3种方式: 外部形式 -->
        <div>
            <h1>我是DIV--1号</h1>
        </div>
                
                
        <div>
            <h1>我是DIV--2号</h1>
        </div>    
    </body>
    
</html>
View Code

 Demo01.css

div{
    height: 500px;
    width: 500px;
    background-color: #FFFF00;
    color: black;
}
View Code

CSS选择器

CSS标签选择器

<head>
        <meta charset="utf-8" />
        <title></title>
        <!-- 
            选择器的作用: 根据我们的项目需要,找到我们需要找到的某一些标签
            
            选择器{
                属性:属性值;  ==>键值对
                属性:属性值;
                属性:属性值;
                属性:属性值;
            }    
        -->
        <style>
              div{
                     height: 300px;
                     width: 300px;
                     background-color: red;
              }            
            
        </style>
    </head>
    
    <body>
        <div><h1>DIV1</h1></div>
        <div><h1>DIV2</h1></div>
        <div><h1>DIV3</h1></div>
        <div><h1>DIV4</h1></div>
        <div><h1>DIV5</h1></div>
    </body>
View Code

CSSid选择器

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            #d1{
                height: 400px;
                width: 400px;
                background-color: blue;
                color: red;
            }
        </style>
    </head>
    <body>
        <div id="d1"><h1>DIV1</h1></div>
        <div><h1>DIV2</h1></div>
        <div><h1>DIV3</h1></div>
        <div><h1>DIV4</h1></div>
        <div><h1>DIV5</h1></div>
    </body>
View Code

CSS类选择器

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .clazz{
                height: 300px;
                width: 300px;
                background-color: red;
            }
        </style>
    </head>
    
    <body>
        <div class='clazz'><h1>DIV1</h1></div>
        <div class='clazz'><h1>DIV2</h1></div>
        <div class='clazz'><h1>DIV3</h1></div>
        <div><h1>DIV4</h1></div>
        <div><h1>DIV5</h1></div>
    </body>
View Code

同时使用多个选择器的情况

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            div{
                height: 300px;
                width: 300px;
                background-color: black;
            }
            
            .clazz{
                background-color: yellow;
            }
            
            #d1{
                background-color: red;
            }
            
        </style>
    </head>
    
    <body>
        <div id="d1" class="clazz"><h1>DIV1</h1></div>
        <div><h1>DIV2</h1></div>
        <div><h1>DIV3</h1></div>
        <div><h1>DIV4</h1></div>
        <div><h1>DIV5</h1></div>
    </body>
View Code

同时使用三种方式插入CSS代码

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            div{
                height: 200px;
                width: 200px;
                background-color: blue;
            }
        </style>
        <link rel="stylesheet" href="css/Demo05.css" />
    </head>
    
    <body>
        <div style="height: 100px;width: 100px;background-color: red;"><h1>DIV1</h1></div>
    </body>
View Code

同时使用三种方式插入CSS代码.css

div{
    height: 300px;
    width: 300px;
    background-color: yellowgreen;
}
View Code

属性选择器

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            div{
                height: 300px;
                width: 300px;
                background-color: red;
                margin-bottom: 10px;
                color: red;
            }
            
            div[align="left"]{
                background-color: yellow;
            }
            div[align="right"]{
                background-color: blue;
            }
            
        </style>
    </head>
    
    <body>
        <div align="left">DIV1</div>
        <div align="left">DIV2</div>
        <div align="right">DIV3</div>
        <div align="right">DIV4</div>
        <div align="right">DIV5</div>
        
    </body>
View Code

伪元素选择器

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            a{
                text-decoration: none;
            }
            a:link{
                color: yellowgreen;
            }
            a:hover{
                color: black;
                text-decoration: underline;
            }
            a:active{
                color: darkgray;
            }
            a:visited{
                color: darkblue;
            }
        </style>
    </head>
    
    
    <body>
        <h1>
            <a href="#1">百度一下</a><br>
            <a href="#1">百度一下</a><br>
            <a href="#1">百度一下</a><br>
            <a href="#1">百度一下</a><br>
            <a href="#1">百度一下</a><br>
            <a href="http://www.baidu.com">百度一下</a><br>
        </h1>
    </body>
View Code

层级选择器

<head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            #d1 a{
                color: red;
            }        
            
        </style>
    </head>
    <body>
         <div id='d1'>
               <a>百度一下</a>
               <a>百度一下</a>
               <a>百度一下</a>
               <a>百度一下</a>
         </div>     
         <a>百度一下</a>
         
    </body>
View Code

CSS属性

CSS中的文本属性

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            body{
                background-color: yellowgreen;
                font-family: "微软雅黑";
                font-size: 50px;
                color: red;
                text-decoration: none;
                text-align: right;
                font-weight: bold;
                line-height: 120px;
            }
            span{
                color: black;
            }
            
        </style>
    </head>
    <body>
        HTML是世界上最好的编程语言.<br>
        <span>
        HTML是世界上最好的编程语言.<br>
        HTML是世界上最好的编程语言.<br>
        <span>
    </body>
View Code

CSS中的背景属性

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            body{
                background-color: red;
                background-image: url(img/tphot.jpg);
                background-repeat: repeat-y;
                
            }
        </style>
    </head>
    <body>
    </body>
View Code

CSS中的列表属性

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            ul li{
                list-style-type:none;
                list-style-image:url(img/tphot11.jpg);
            }
        </style>
    </head>
    
    <body>
        <ul>
            <li>第1名</li>
            <li>第2名</li>
            <li>第3名</li>
            <li>第4名</li>
        </ul>
    </body>
View Code

CSS中的显示属性

<head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            div{
                height: 300px;
                width: 300px;
                background-color: red;
                display: inline;
            }
            
            ul li{
                list-style-type: none;
                display: inline;
            }
            
            
            span{
                height: 300px;
                width: 300px;
                background-color: salmon;
                /*display: block;*/
            }
            
        </style>
    </head>
    <body>
        <input type="text" />
        <div>
            DIV
        </div>
        HTML
        <ul>
            <li>第1名</li>
            <li>第2名</li>
            <li>第3名</li>
            <li>第4名</li>
        </ul>
        
        <span>
            我是一个块级标签
        </span>
        xxxxxx
        
    </body>
View Code

CSS中的浮动属性

<head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            div{
                font-size: 30px;
                font-weight: 900;
                color: rosybrown;
            }
            #d1{
                height: 300px;
                width: 300px;
                background-color: red;
                float: left;
            }
            
            #d2{
                height: 300px;
                width: 300px;
                background-color: yellowgreen;
                float: left;
            }
            
            #d3{
                height: 300px;
                width: 300px;
                background-color: black;
                float: right;
            }    
            
            .clear{
                clear: both;
            }
        </style>
    </head>

    <body>
        <div id="d1">DIV1</div>
        <div id="d2">DIV2</div>
        <div id="d3">DIV3</div>
        <div class="clear"></div>
    </body>
View Code

练习：注册页面

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            #header{
                height: 100px;
                width: 100%;
            }
            
            #content{
                height: 700px;
                width: 60%;
                /*设置页面居中*/
                margin: auto;
                border: 2px solid black;
            }
            
            .c1{
                height: 30px;
                width: 100%;
                background-color: #F7F7F7;
            }
            
            .c2{
                height: 200px;
                width: 100%;
                background-color: white;
            }
            
            #c2-left{
                height: 100%;
                width: 30%;
                float: left;
                text-align: right;
            }
            
            #c2-left div{
                height: 20%;
            }
            
            #c2-right{
                margin-left: 20px;
                height: 100%;
                width: 60%;
                float: left;
            }
            #c2-right div{
                height: 20%;
            }
            
            .clear{
                clear: both;
            }
            
            .c6{
                height: 120px;
                width: 100%;
                background-color: white;
            }
            #c6-zhuce {
                height: 40px;
                width: 250px;
                background-color: red;    
                text-align:center;
                margin: auto;
                
            }
            #c6-zhucezi{
                padding: 8px;        
            }
            span{
                color: red;
            }
            
     
        </style>
    </head>
    
    
    <body>
        <div id="header"></div>
        <div id="content">
            <div class="c1"><strong><font>&nbsp;账户信息</font></strong></div>
            <div class="c2">
                <div id="c2-left">
                    <div></div>
                    <div><span>*</span>用户名:</div>
                    <div><span>*</span>请输入密码:</div>
                    <div><span>*</span>请确认密码:</div>
                </div>
                <div id="c2-right">
                    <div></div>
                    <div><input type="text"/></div>
                    <div><input type="password"/></div>
                    <div><input type="password"/></div>
                </div>
                <div class="clear"></div>
            </div>
            
            <div class="c1"><strong><font>&nbsp;联系人信息</font></strong></div>
            <div class="c2">
                <div id="c2-left">
                    <div></div>
                    <div><span>*</span>联系人姓名:</div>
                    <div><span>*</span>所在部门:</div>
                    <div><span>*</span>固定电话:</div>
                </div>
                <div id="c2-right">
                    <div></div>
                    <div><input type="text"/></div>
                    <div>
                        <select>
                            <option selected="selected">请选择</option>
                            <option value="yjb">研究部</option>
                            <option value="xzb">行政部</option>
                            <option>人事部</option>
                            <option>市场部</option>
                        </select>
                    </div>
                    <div><input type="text"/></div>
                </div>
                <div class="clear"></div>
            </div>
            <div class="c1"><strong><font>&nbsp;公司信息</font></strong></div>
            <div class="c6">
                <div id="c2-left">
                    <div></div>
                    <div><span>*</span>公司名称:</div>
                    <div><span>*</span>购买类型/用途:</div>
                </div>
                <div id="c2-right">
                    <div></div>
                    <div><input type="text"/></div>
                    <div>
                        IT设备<input type="checkbox" />
                        IT设备<input type="checkbox" />
                        IT设备<input type="checkbox" />
                        IT设备<input type="checkbox" />
                        IT设备<input type="checkbox" />
                        IT设备<input type="checkbox" checked="checked"/>
                    </div>
                </div>
                <div class="clear"></div>
            </div>
            
            <div id="c6-zhuce">
                <div id="c6-zhucezi">
                     <font color="white">立即注册 </font>
                </div>
            </div>
            
        </div>
        
    </body>
    
</html>
View Code

CSS盒子模型

盒子模型

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            #box{
                height: 300px;
                width: 300px;
                background-color: darkgreen;
                /*上下左右*/
                padding: 50px;
                /*上  左右  下*/
                /*padding: 50px 100px 150px;*/
                /*padding: 50px 100px 150px 200px;*/
                border: 5px solid red;
                
            }    
            
            #moon{
                height: 300px;
                width: 300px;
                background-color: yellow;
            }
            
            
            #d1{
                height: 300px;
                width: 300px;
                border: 5px dashed black;
            }
            
            #d2{
                height: 300px;
                width: 300px;
                border: 5px dotted black;
            }
            
            div{
                margin-left: 50px;
                margin-bottom: 100px;
            }        
            
        </style>
    </head>
    
    
    <body>
        
        <div id="box">
            <div id="moon"></div>
        </div>
        
        
        <div id="d1"></div>
        
        <div id="d2"></div>
        
    </body>
View Code

圆角边框

<head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            #d1{
                width: 300px;
                height: 300px;
                border: 5px solid red;
                margin: auto;
                margin-top: 100px;
                /*border-radius: 50px;*/
                /*border-radius: 50px 100px 150px;*/
                
            }
            #d2{
                width: 300px;
                height: 300px;
                border: 5px solid blue;
                border-radius: 150px;
            }
            #d3{
                width: 300px;
                height: 150px;
                border: 5px solid blue;
                border-radius: 300px 300px 0px 0px;
            }
            
            #d4{
                width: 300px;
                height: 150px;
                border: 5px solid greenyellow;
                border-radius: 0px 0px 300px 300px;
            }
            
            
            #d5{
                width: 150px;
                height: 300px;
                border: 5px solid greenyellow;
                border-radius: 300px 0px 0px 300px;
            }    
            
            #d6{
                width: 150px;
                height: 300px;
                border: 5px solid greenyellow;
                border-radius: 0px 300px 300px 0px;
            }
            
            #d7{
                width: 150px;
                height: 150px;
                border: 5px solid greenyellow;
                border-radius: 150px 0px 0px 0px;
            }
            
            #d8{
                width: 150px;
                height: 150px;
                border: 5px solid greenyellow;
                border-radius: 0px 150px 0px 0px;
            }            
            
        </style>
    </head>
    <body>
        
        <div id="d1"></div>
        
        <div id="d2"></div>
        <div id="d3"></div>
        <div id="d4"></div>
        <div id="d5"></div>
        <div id="d6"></div>
        <div id="d7"></div>
        <div id="d8"></div>
    </body>
View Code

盒子阴影

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            div{
                height: 500px;
                width: 500px;
                background-color: salmon;
                box-shadow: 0px 0px 30px yellowgreen;
            }
        </style>
    </head>
    <body>
        
        <div></div>
        
    </body>
View Code

CSS 的定位

相对定位

<head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            #d1{
                height: 300px;
                width: 300px;
                background-color: greenyellow;
                margin-top: 20px;
                /*设置相对定位*/
                position: relative;
                left: 150px;
                /*right: 100px;*/
                float: left;
                /*top: 50px;*/
                bottom: 100px;
            }
            #d2{
                height: 300px;
                width: 300px;
                background-color: cornflowerblue;
                margin-top: 20px;
                float: left;
            }
            
        </style>
    </head>
    
    
    <body>
        <div id="d1">
        </div>    
        
        <div id="d2">
        </div>    
    </body>
View Code

绝对定位

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            div{
                height: 300px;
                width: 300px;
                margin-top: 20px;
                float: left;
            }
            
            #d1{
                background-color: greenyellow;
            }
            
            
            #d2{
                background-color: yellow;
                /*设置成绝对定位*/
                position: absolute;
                left: 100px;
                top: 500px;
            
            }

            #d3{
                background-color: red;
            }
        </style>
    </head>
    
    <body>
        
        <div id="d1">
        </div>    
        
        <div id="d2">
        </div>    
        
        
        <div id="d3">
        </div>
    </body>
View Code

固定定位

<head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            body{
                height: 5000px;
                
            }
            div{
                height: 100px;
                width: 80%;
                background-color: greenyellow;
                /*设置成固定定位*/
                position: fixed;
                top:300px;
            }
        </style>
    </head>
    
    <body>
        <div id="d1">我是一个广告~~~~~~~~~~~~~</div>
    </body>
View Code

z-index属性

<head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            #d1{
                height: 300px;
                width: 300px;
                background-color: red;
                float: left;
                position: relative;
                z-index: 10;
            }
            
            #d2{
                height: 300px;
                width: 300px;
                background-color: blue;
                float: left;
                margin-left: -200px;
                margin-top: 50px;
                z-index: 5;
                position: relative;
            }
            
            #d3{
                height: 300px;
                width: 300px;
                background-color: yellowgreen;
                float: left;
                margin-left: -200px;
                margin-top: 100px;
                z-index: 1;
                position: relative;
            }
        </style>
    </head>
    
    <body>
        <div id="d1"></div>
        <div id="d2"></div>
        <div id="d3"></div>
    </body>
View Code

设置元素透明度

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            div{
                height: 300px;
                width: 300px;
                background-color: blue;
                opacity: 0.1;
            }
        </style>
    </head>
    <body>
        <div>
            DIV
        </div>
    </body>
View Code

 
回复

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|琼殿技术论坛 |nimba_sitemap:appname

相关侵权、举报、投诉及建议等，请发 E-mail：qiongdian@foxmail.com

Powered by Discuz! X5.0 © 2001-2026 Discuz! Team.

在本版发帖返回顶部