zoukankan      html  css  js  c++  java
  • CSS学习第一天

    今天是CSS学习的第一天,老师讲了CSS的基本结构和写法,总起来还是比较简单的,但还是要多加练习~

    CSS  层叠样式表

    三种样式

    1、内联式 写在body内 

    语法(属性式)  style:"样式:样式值;"   其优点是控制精确,缺点是不灵活,代码冗余

    2、内嵌式 写在head内

    选择器{样式:样式值}    其优点是代码精简  缺点是 控制不精确

    3、外部样式表  写在head内

    <link rel="stylesheet"  href="路径"> 优点是 精简html的文件代码  缺点是控制不够精确

    4、注释的语法

    /* 注释的内容 */

    标签选择器

    ID选择器    #ID名

    类选择器     .class名

    复合选择器   逗号  空格  点

    代码示例:<style>
                p{ 200px; height: 200px; background-color: darkmagenta;}
                #name1{ 200px; height: 200px; background-color: coral;}
                .name2{ 200px; height: 200px; background-color: aquamarine;}
                li.name3{ 200px; height: 200px; background-color: cornflowerblue;}
                li#name4{ 200px; height: 200px; background-color: bisque;}
                ol li{ 200px; height: 200px; background-color: chartreuse}
            </style>

    表格样式:

    代码示例:<style type="text/css">
            *{margin: 0px; padding: 0px;}
            table{background-color: aqua;}
            td{background-color: chartreuse;}
        </style>

    页面的格式布局

                position:fixed;  固定 top(必须设置)   left  right  bottom      z-index
                position:absolute;  绝对定位
                1、只有本身:在页面中定位(根据top属性来)
                2、有嵌套关系  a.嵌套他的标签没有position:还是在页面中定位
                             b.嵌套他的标签有position:在嵌套他的标签里面定位
                position:relative;  相对定位

    做的示例小练习

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style type="text/css">
                *{position: fixed;
                  position: absolute;
                  position: relative;
                
                }
                #a{ 400px; height: 100px; background-color: #00FFFF;position: fixed; top: 10px; border: 2px solid green}
                #b{ 400px; height: 100px; background-color: antiquewhite;position: fixed; top: 110px;border: 2px solid red}
                #c{ 90px; height: 40px; background-color: black;position:absolute;border: 2px solid coral;top: -80px; left: 10px;}
                #d{ 90px; height: 40px; background-color: lavenderblush;position:absolute; bottom: 10px; border: 2px solid darkgray;right: 20px;}
                #e{ 90px; height: 40px; background-color: hotpink;position:relative; left: 480px;border: 2px solid dodgerblue;top: 60px;}
            </style>
        </head>
        <body>

            <div id="a"></div>
            <div id="b">
                <div id="c"></div>
                <div id="d"></div>
                <div id="e"></div>
            </div>
        </body>
    </html>

  • 相关阅读:
    springboot文件上传: 单个文件上传 和 多个文件上传
    Eclipse:很不错的插件-devStyle,将你的eclipse变成idea风格
    springboot项目搭建:结构和入门程序
    POJ 3169 Layout 差分约束系统
    POJ 3723 Conscription 最小生成树
    POJ 3255 Roadblocks 次短路
    UVA 11367 Full Tank? 最短路
    UVA 10269 Adventure of Super Mario 最短路
    UVA 10603 Fill 最短路
    POJ 2431 Expedition 优先队列
  • 原文地址:https://www.cnblogs.com/qianqian528/p/7592128.html
Copyright © 2011-2022 走看看