1. 技术文章
  2. css笔记整理

css笔记整理

由 岁酱吖の 提交于 2020-08-19 03:27:58

 

0索引

1html标签块

2选择器

3CSS的引入方式:

4CSS浮动 :流式布局

5盒子模型

6案例一网站首页

7案例二网站注册页面

 

1html标签块

  • div标签:默认占- -行,自动换行
  • span标签:内容显示在同- -行
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div>张三</div>
        <div>李四</div>
        <span >我想</span>
        <span >好好</span>
        <span >学习</span>
        <span >那是不存在的</span>
    </body>
</html>


2选择器

  • 元素选择器:

元素的名称{

属性名称:属性的值;

属性名称:属性的值;

}

 

  • ID选择器:

以#号开头


#ID的名称{
属性名称:属性的值;

属性名称:属性的值;

}


  • 类选择器:

以.号开头

.类名{

属性名称:属性的值;

属性名称:属性的值;

}

  • 伪类选择器
  • 后代选择器
  • 选择器优先级
    • 按照选择器搜索精确度来编写:

行内样式 > ID选择器 > 类选择器 > 元素选择器

    • 就近原则：选择离标签近的

代码示例:

<!--元素选择器-->
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
            <style>
                div{
                    color: red;
                    font-size: 50px;
                }
                
                span{
                    color: yellowgreen;
                    font-size: 80px;
                }
            </style>
    </head>
    <body>
        <div>张三</div>
        <div>李四</div>
        <span >我想</span>
        <span >好好</span>
        <span >学习</span>
        <span >那是不存在的</span>
    </body>
</html>
<!--ID选择器-->
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            
            #div1{
                color: red;
            }
            
        </style>
    </head>
    <body>
        <!--请将JAVAEE颜色改成红色-->
        <div id="div1">JAVAEE</div>
        <div>IOS</div>
        <div>ANDROID</div>
    </body>
</html>
<!--类选择器-->
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .shuiguo{
                color: yellow;
            }
            .shucai{
                color: green;
            }
        </style>
    </head>
    <body>
        <div class="shuiguo">香蕉</div>
        <div class="shucai">黄瓜</div>
        <div class="shuiguo">苹果</div>
        <div class="shucai">茄子</div>
        <div class="shuiguo">橘子</div>
    </body>
</html>
<!DOCTYPE html>
<!--伪类选择器-->
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            
            a:link {color: red}        /* 未访问的链接 */
            a:visited {color: #00FF00}    /* 已访问的链接 */
            a:hover {color: #FF00FF}    /* 鼠标移动到链接上 */
            a:active {color: #0000FF}    /* 选定的链接 */

            
        </style>
    </head>
    <body>
        <a href="#">黑马程序员</a>
    </body>
</html>
<!DOCTYPE html>
<!--后代选择器-->
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            /*请将H1下面的所有 em 元素 的内容颜色改成 红色*/
            /*中间以空格隔开的是后代选择器*/
            h1 > em{
                color: red;
            }
        </style>
    </head>
    <body>
        <h1>
            This is a 
            <em>儿子</em>
            <strong>
                <em>孙子</em>
            </strong>
         heading
        </h1>
    </body>
</html>

 

优先级示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            /*元素选择器*/
            div{
                color: red;
            }
            /*类选择器*/
            .chifan{
                color: deeppink;
            }
            
            /*ID选择器*/
            #div1{
                color: greenyellow;
            }
            
            
                        
            
            .first{
                color: green;
            }
            
            
            .second{
                color: blue;
            }
            
            
        </style>
    </head>
    <body>
        <!--/*
             按照选择器搜索精确度来编写:
                 行内样式 > ID选择器 > 类选择器  > 元素选择器
             */-->
        <div class="chifan" id="div1" style="color: goldenrod;">要好好学习</div>
        <!--金色-->
        
        <!--/*就近原则：选择离标签近的*/-->
        <div class="second first ">但是我好困，呜呜呜~</div>
        <!--蓝色-->
    </body>
</html>

 

 

 

 

3CSS的引入方式:

  • 外部样式:通过link标签引入-一个外部的css文件
  • 内部样式:直接在style标签内编写CSS代码,以上例子是.
  • 行内样式:直接在标签中添加一个style属性，编写CSS样式

代码示例:

1外部样式

/*css1文件中*/
.shuiguo{
    color: pink;
}
.shucai{
    color: green;
}
<!--外部样式html 1文件-->
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        
        <link rel="stylesheet" href="css1.css" />
        <!--css1.css为文件名-->
    </head>
    <body>
        <div class="shuiguo">香蕉</div>
        <div class="shucai">黄瓜</div>
        <div class="shuiguo">苹果</div>
        <div class="shucai">茄子</div>
        <div class="shuiguo">橘子</div>
    </body>
</html>

2内部样式

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <!--
            .类的名称{
               属性名称:属性的值;
                  属性名称:属性的值;
            }
        -->
        <style>
            .shuiguo{
                color: yellow;
            }
            .shucai{
                color: green;
            }
        </style>
    </head>
    <body>
        <!--
            请将水果类,改成黄色
            蔬菜类改成绿色
        -->
        <div class="shuiguo">香蕉</div>
        <div class="shucai">黄瓜</div>
        <div class="shuiguo">苹果</div>
        <div class="shucai">茄子</div>
        <div class="shuiguo">橘子</div>
    </body>
</html>

 

3行内样式

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        
    </head>
    <body>
        <!--通过行内样式修改甘蔗-->
        <div class="shuiguo" style="color: greenyellow;">甘蔗</div>
        <div class="shucai">青瓜</div>
        <div class="shuiguo">苹果</div>
        <div class="shucai">茄子</div>
        <div class="shuiguo">橘子</div>
    </body>
</html>

 

4CSS浮动 :流式布局
 浮动的元素会脱离正常的文档流,在正常的文档流中不占空间

  • float属性:

left
right

  • clear属性: 清除浮动

both : 两边都不允许浮动
left: 左边不允许浮动
right : 右边不允许浮动




<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        
        <div style="float:right;width: 200px; height: 200px; background-color: red;"></div>
        
        <div style="clear: both;"></div>
        <!--清除上面的浮动，让下面的绿色和蓝色显示在原本正常的位置-->
        <!--若去除上面的清除，那么绿色和蓝色会按原本的正常文档流显示，绿色在第一行，蓝色第二行-->
        <div style="width: 250px; height: 200px; background-color: greenyellow;"></div>
        <div style="width: 200px; height: 200px; background-color: blue;"></div>
        
        
    </body>
</html>

 

 

5盒子模型


1盒子模型介绍:

 

  • 万物皆盒子页边距:
    • 四个单独方向：

padding-top: .

padding-right:

padding-bottom:

padding-left:





 

    • 使用padding：

padding: 10px;
上下左右 都是10px
padding:10px 20px;.上 下是10px左右是20px
padding: 10px 20px 30px;上10px 石20px下30px 左20px
I padding: 10px 20px 30px 40px;. 上右下左，顺时针的方向






  • 外边距:

margin-top:

margin-right:

margin-bottom:

margin-left:

 

  • CSS绝对定位:

position: absulte
top:控制距离顶部的位置
left:控制距离左边的位置


代码实现:

  • 盒子模型
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <!--在网页检查中点击对应相应的div，每个div都是对应一个盒子-->
        <!--在div中可以调节相关参数-->
        <div style="border: 3px solid red ;width: 400px;height: 400px;">
            <div style="border: 1px solid green;width: 150px;height: 150px;"> 内容1</div>
            <div style="border: 1px solid gold;width: 150px;height: 150px;"> 内容2</div>
        </div>
    </body>
</html>

 

  • 绝对位置
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div style="border: 5px solid red; width: 400px; height: 400px;position: absolute;top: 200px;left: 200px;">
            黑马程序员
        </div>
    </body>
</html>

 

 

 

6案例一网站首页

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
         <link rel="stylesheet" type="text/css" href="../css/main.css"/>
        <!--<style>
            
            .logo{
                float: left;
                width: 33%;
                /*border-width: 1px;
                border-style: solid;
                border-color: red;*/
                height: 60px;
                line-height: 60px;
        /*        border: 1px solid red;*/
            }
            
            
            .amenu{
                color: white;
                text-decoration: none;
                height: 50px;
                line-height: 50px;
            }
            
            .product{
                float: left; text-align: center; width: 16%; height: 240px;
            }
            
        </style>-->
    </head>
    <body>
        <!--
            1. 创一个最外层div
            2. 第一部份: LOGO部分: 嵌套三个div
            3. 第二部分: 导航栏部分 : 放置5个超链接
            4. 第三部分: 轮播图 
            5. 第四部分: 
            6. 第五部分: 直接放一张图片
            7. 第六部分: 抄第四部分的
            8. 第七部分: 放置一张图片
            9. 第八部分: 放一堆超链接
        -->
        <div>
            <!--2. 第一部份: LOGO部分: 嵌套三个div-->
            <div>
                <div class="logo">
                    <img src="../img/logo2.png"/>
                </div>
                <div class="logo">
                    <img src="../img/header.png"/>
                </div>
                <div class="logo">
                    <a href="#">登录</a>
                    <a href="#">注册</a>
                    <a href="#">购物车</a>
                </div>
            </div>
            
                
            <!--清除浮动-->
            <div style="clear: both;"></div>
            
            
            <!--3. 第二部分: 导航栏部分 : 放置5个超链接-->
            <div style="background-color: black; height: 50px;">
                <a href="#" class="amenu">首页</a>
                <a href="#" class="amenu">手机数码</a>
                <a href="#" class="amenu">电脑办公</a>
                <a href="#" class="amenu">鞋靴箱包</a>
                <a href="#" class="amenu">香烟酒水</a>
            </div>
            
                
            <!--4. 第三部分: 轮播图--> 
            <div>
                <img src="../img/1.jpg" width="100%"/>
            </div>
            <!--5. 第四部分:--> 
            <div>
                <div><h2>最新商品<img src="../img/title2.jpg"/></h2></div>
                
                <!--左侧广告图-->
                <div style="width: 15%; height: 480px;  float: left;">
                    <img src="../products/hao/big01.jpg" width="100%" height="100%"/>
                </div>
                <!--
                    右侧商品
                -->
                <div style="width: 84%; height: 480px;float: left;">
                    <div style="height: 240px; width: 50%; float: left;">
                        <img src="../products/hao/middle01.jpg" height="100%" width="100%" />
                    </div>
                    <div class="product">
                        <img src="../products/hao/small08.jpg" />
                        <p>高压锅</p>
                        <p style="color: red;">$998</p>
                    </div>
                    <div class="product">
                        <img src="../products/hao/small08.jpg" />
                        <p>高压锅</p>
                        <p style="color: red;">$998</p>
                    </div>
                    <div class="product">
                        <img src="../products/hao/small08.jpg" />
                        <p>高压锅</p>
                        <p style="color: red;">$998</p>
                    </div>
                    <div class="product">
                        <img src="../products/hao/small08.jpg" />
                        <p>高压锅</p>
                        <p style="color: red;">$998</p>
                    </div>
                    <div class="product">
                        <img src="../products/hao/small08.jpg" />
                        <p>高压锅</p>
                        <p style="color: red;">$998</p>
                    </div>
                    <div class="product">
                        <img src="../products/hao/small08.jpg" />
                        <p>高压锅</p>
                        <p style="color: red;">$998</p>
                    </div>
                    <div class="product">
                        <img src="../products/hao/small08.jpg" />
                        <p>高压锅</p>
                        <p style="color: red;">$998</p>
                    </div>
                    <div class="product">
                        <img src="../products/hao/small08.jpg" />
                        <p>高压锅</p>
                        <p style="color: red;">$998</p>
                    </div>
                    <div class="product">
                        <img src="../products/hao/small08.jpg" />
                        <p>高压锅</p>
                        <p style="color: red;">$998</p>
                    </div>
                    
                </div>
            </div>
            
            <!--6. 第五部分: 直接放一张图片-->
            <div>
                <img src="../products/hao/ad.jpg" width="100%"/>
            </div>
            <!--7. 第六部分: 抄第四部分的-->
            <div>
                <div><h2>最新商品<img src="../img/title2.jpg"/></h2></div>
                
                <!--左侧广告图-->
                <div style="width: 15%; height: 480px;  float: left;">
                    <img src="../products/hao/big01.jpg" width="100%" height="100%"/>
                </div>
                <!--
                    右侧商品
                -->
                <div style="width: 84%; height: 480px;float: left;">
                    <div style="height: 240px; width: 50%; float: left;">
                        <img src="../products/hao/middle01.jpg" height="100%" width="100%" />
                    </div>
                    <div class="product">
                        <img src="../products/hao/small08.jpg" />
                        <p>高压锅</p>
                        <p style="color: red;">$998</p>
                    </div>
                    <div class="product">
                        <img src="../products/hao/small08.jpg" />
                        <p>高压锅</p>
                        <p style="color: red;">$998</p>
                    </div>
                    <div class="product">
                        <img src="../products/hao/small08.jpg" />
                        <p>高压锅</p>
                        <p style="color: red;">$998</p>
                    </div>
                    <div class="product">
                        <img src="../products/hao/small08.jpg" />
                        <p>高压锅</p>
                        <p style="color: red;">$998</p>
                    </div>
                    <div class="product">
                        <img src="../products/hao/small08.jpg" />
                        <p>高压锅</p>
                        <p style="color: red;">$998</p>
                    </div>
                    <div class="product">
                        <img src="../products/hao/small08.jpg" />
                        <p>高压锅</p>
                        <p style="color: red;">$998</p>
                    </div>
                    <div class="product">
                        <img src="../products/hao/small08.jpg" />
                        <p>高压锅</p>
                        <p style="color: red;">$998</p>
                    </div>
                    <div class="product">
                        <img src="../products/hao/small08.jpg" />
                        <p>高压锅</p>
                        <p style="color: red;">$998</p>
                    </div>
                    <div class="product">
                        <img src="../products/hao/small08.jpg" />
                        <p>高压锅</p>
                        <p style="color: red;">$998</p>
                    </div>
                    
                </div>
            </div>
            
            <!--8. 第七部分: 放置一张图片-->
            <div>
                <img src="../img/footer.jpg" width="100%"/>
            </div>
            <!--9. 第八部分: 放一堆超链接-->
            <div style="text-align: center;">
                        
                    <a href="#">关于我们</a>
                    <a href="#">联系我们</a>
                    <a href="#">招贤纳士</a>
                    <a href="#">法律声明</a>
                    <a href="#">友情链接</a>
                    <a href="#">支付方式</a>
                    <a href="#">配送方式</a>
                    <a href="#">服务声明</a>
                    <a href="#">广告声明</a>
                    
                    <br />
                    
                    Copyright © 2005-2016 传智商城 版权所有
            </div>
        </div>
    </body>
</html>

 

 

7案例二网站注册页面

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
         <link rel="stylesheet" type="text/css" href="../css/main.css"/>
    </head>
    <body>
        <!--
            1. 总共是5部分
            2. 第一部分是LOGO部分
            3. 第二部分是导航菜单
            4. 第三部分是注册部分
            5. 第四部分是FOOTER图片
            6. 第五部分是一堆超链接
        -->
        <div>
            
            <!--2. 第一部分是LOGO部分-->
            <div>
                <div class="logo">
                    <img src="../img/logo2.png" />
                </div>
                <div class="logo">
                    <img src="../img/header.png" />
                </div>
                <div class="logo">
                    <a href="#">登录</a>
                    <a href="#">注册</a>
                    <a href="#">购物车</a>
                </div>
            </div>
            
            <!--清除浮动-->
            <div style="clear: both;"></div>
            <!--3. 第二部分是导航菜单-->
            <div style="background-color: black; height: 50px;">
                <a href="#" class="amenu">首页</a>
                <a href="#" class="amenu">手机数码</a>
                <a href="#" class="amenu">电脑办公</a>
                <a href="#" class="amenu">鞋靴箱包</a>
                <a href="#" class="amenu">香烟酒水</a>
            </div>
            <!--4. 第三部分是注册部分-->
            <div style="background: url(../image/regist_bg.jpg);height: 500px;">
                
                <div style="position:absolute;top:200px;left:350px;border: 5px solid darkgray;width: 50%;height: 50%;background-color: white;">
                    <table width="60%" align="center">
                        <tr>
                            <td colspan="2"><font color="blue" size="6">会员注册</font>USER REGISTER</td>
                            
                        </tr>
                        <tr>
                            <td>用户名:</td>
                            <td><input type="text"/></td>
                        </tr>
                        <tr>
                            <td>密码:</td>
                            <td><input type="password"/></td>
                        </tr>
                        <tr>
                            <td>确认密码:</td>
                            <td><input type="password"/></td>
                        </tr>
                        <tr>
                            <td>email:</td>
                            <td><input type="email"/></td>
                        </tr>
                        <tr>
                            <td>姓名:</td>
                            <td><input type="text"/></td>
                        </tr>
                        <tr>
                            <td>性别:</td>
                            <td><input type="radio" name="sex"/> 男
                            <input type="radio" name="sex"/> 女
                            <input type="radio" name="sex"/> 妖
                            </td>
                        </tr>
                        <tr>
                            <td>出生日期:</td>
                            <td><input type="date"/></td>
                        </tr>
                        <tr>
                            <td>验证码:</td>
                            <td><input type="text"/></td>
                        </tr>
                        <tr>
                            <td></td>
                            <td><input type="submit" value="注册"/></td>
                        </tr>
                    </table>
                </div>
                
            </div>
            
            <!--5. 第四部分是FOOTER图片-->
            <div>
                <img src="../img/footer.jpg" width="100%"/>
            </div>
            <!--9. 第四部分: 放一堆超链接-->
            <div style="text-align: center;">
                        
                    <a href="#">关于我们</a>
                    <a href="#">联系我们</a>
                    <a href="#">招贤纳士</a>
                    <a href="#">法律声明</a>
                    <a href="#">友情链接</a>
                    <a href="#">支付方式</a>
                    <a href="#">配送方式</a>
                    <a href="#">服务声明</a>
                    <a href="#">广告声明</a>
                    
                    <br />
                    
                    Copyright © 2005-2016 传智商城 版权所有
            </div>
            
        </div>
    </body>
</html>

 




标签
RED
aMenu
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!