数据库运维
记录DBA学习成长历程
当前位置：MySQL学习笔记 > 开发 > PHP > 正文

第2课 CSS入门代码

2022-09-12 分类：PHP 阅读(657)
文章目录
CSS 基础
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        p{
            background-color: red;
            font-size: 40px;
        }
        
    </style>
</head>
<body>
    <p>http://www.imooc.com</p>
    <p>慕课网</p>
    <p>慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术</p>
</body>
</html>
CSS选择器
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        p{
            background-color: red;
            font-size: 40px;
        }
        .p1{
            font-family: 隶书;
        } 
    </style>
</head>
<body>
    <p>http://www.imooc.com</p>
    <p class="p1">慕课网</p>
    <p class="p1">慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术</p>
</body>
</html>
CSS样式设置
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        p{
            background-color: red;
            font-size: 40px;
        }
        .p1{
            font-family: 隶书;
        }
        body{
            /*background-color:yellow;
            background-image: url("image/wudaojiaoshi.jpg");
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-position: 20px 30px;*/
            background:yellow url("image/wudaojiaoshi.jpg") no-repeat fixed 30px 40px;
        }
    </style>
</head>
<body>
    <p>http://www.imooc.com</p>
    <p class="p1">慕课网</p>
    <p class="p1">慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术</p>
<p class="p1">慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到

</body>
</html>
CSS其他选择器1
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
    
    <p>http://www.imooc.com</p>

    <p class="p1" id="name1">慕课网</p>
    <p class="p1" id="name2">慕课网</p>
    <h1>慕课网欢迎您</h1>
    <p>
        慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术</p>
    <table border="1" width="500px">
      <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
      </tr>
      <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
      </tr>
      <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
      </tr>
    </table>
</body>
</html>
#name1,#name2,p,#td1{
    color:red;
    background-color: yellow;
}
CSS其他选择器2
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
    <div id="div1">
    <div id="div2">
    <p>http://www.imooc.com</p>
    </div>
    <div id="div3">
    <p class="p1" id="name1">慕课网</p>
    <p class="p2" id="name2">慕课网</p>
    </div>
    <h1>慕课网欢迎您</h1>
    <p>
        慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术</p>
    </div>
    <p>为在div1的外面</p>
    <table border="1" width="500px">
      <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
      </tr>
      <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
      </tr>
      <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
      </tr>
    </table>
</body>
</html>
/*子孙选择器*/
/*#div1 p{
    color: red;
}*/
/*子选择器*/
/*#div1>p{
    color:red;
}*/

/*相邻兄弟选择器*/
#div2+div{
    color: red;
}

/*属性选择器*/
p[class="p1"]{
    color:red;
}
CSS样式设置
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        p{
            background-color: red;
            font-size: 40px;
        }
        .p1{
            font-family: 隶书;
        }
        body{
            /*background-color:yellow;
            background-image: url("image/wudaojiaoshi.jpg");
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-position: 20px 30px;*/
            background:yellow url("image/wudaojiaoshi.jpg") no-repeat fixed 30px 40px;
        }
    </style>
</head>
<body>
    <p>http://www.imooc.com</p>
    <p class="p1">慕课网</p>
    <p class="p1">慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术</p>
<p class="p1">慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到

</body>
</html>
CSS字体类样式
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
    <p>http://www.imooc.com</p>
    <p class="p1">慕课网</p>
    <p class="p1">慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术</p>
    
</body>
</html>
p{
    /*color: rgb(238,130,238);*/
    /*direction: ltr;*/
    letter-spacing: 10px;
    line-height: 50px;
    /*text-align: justify;*/
    /*text-decoration: line-through;*/
    /*text-shadow: 5px 5px 5px red;*/
    text-transform: uppercase;
    text-indent: 30px;
    font-style: italic;
    font-weight: bold;
    font-size: 30px;
    font-family: 隶书;
}
CSS文本类样式
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
    <p>http://www.imooc.com</p>
    <p class="p1">慕课网</p>
    <p class="p1">慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术</p>

</body>
</html>
p{
    /*color: rgb(238,130,238);*/
    /*direction: ltr;*/
    letter-spacing: 10px;
    line-height: 50px;
    /*text-align: justify;*/
    /*text-decoration: line-through;*/
    /*text-shadow: 5px 5px 5px red;*/
    text-transform: uppercase;
/*	text-indent: 2em;*/
    text-indent: 30px;
}
CSS列表样式
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
    <p>http://www.imooc.com</p>
    <p class="p1">慕课网</p>
    <p class="p1">慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术</p>
    <ul>
        <li>aaaaa</li>
        <li>bbbbb</li>
        <li>ccccc</li>
        <li>ddddd</li>
        <li>eeeee</li>
    </ul>

    <ol>
        <li>aaaaa</li>
        <li>bbbbb</li>
        <li>ccccc</li>
        <li>ddddd</li>
        <li>eeeee</li>
    </ol>
</body>
</html>
p{
    /*color: rgb(238,130,238);*/
    /*direction: ltr;*/
    letter-spacing: 10px;
    line-height: 50px;
    /*text-align: justify;*/
    /*text-decoration: line-through;*/
    /*text-shadow: 5px 5px 5px red;*/
    text-transform: uppercase;
    text-indent: 30px;
    font-style: italic;
    font-weight: bold;
    font-size: 30px;
    font-family: 隶书;
}

ul{
    /*list-style-type: circle;
    list-style-position: outside;
    list-style-image: url("image/headLogo/1.gif");*/
    list-style: outside url("image/headLogo/9.gif");
}
ol{
    list-style-type: lower-latin;
}
伪类分类
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
    
    <p>http://www.imooc.com</p>

    <p>慕课网</p>
    <p>慕课网</p>
    <h1>慕课网欢迎您</h1>
    <table border="1" width="500px">
      <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
      </tr>
      <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
      </tr>
      <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
      </tr>
    </table>
</body>
</html>
p:nth-child(2){
    background-color: red;
}

td:nth-last-child(2){
    background-color: red;
}
伪类样式
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
    <p>http://www.imooc.com</p>
    <p class="p1">慕课网</p>
    <a href="#">伪类</a>
    <label>用户名</label>
    <input type="text">
</body>
</html>
a:link{
    color:red;
}
a:visited{
    color: green;
}
a:hover{
    color: yellow;
    font-size: 30px;
}
a:active{
    color:blue;
}
label:hover{
    color:red;
}
input:hover{
    background-color: red;
}
input:active{
    background-color: blue;
}
input:focus{
    background-color: yellow;
}
伪元素设置
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
    
    <p>http://www.imooc.com</p>

    <p>慕课网</p>
    <p>慕课网</p>
    <h1>慕课网欢迎您</h1>
    <p>
        慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术</p>
    <table border="1" width="500px">
      <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
      </tr>
      <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
      </tr>
      <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
      </tr>
    </table>
</body>
</html>
/*可以将p换成h1*/
p::before{
    content: "终于找到你，";
}
/*可以将body也换成h1*/
body::after{
    content: "依依不舍离开你，";
}
p::first-line{
    background-color: yellow;
}
p::first-letter{
    font-size: 30px;
}
p::selection{
    background-color: red;
}
CSS选择器优先级
<!DOCTYPE html>
<html>
<head>
    <title>css选择器优先级</title>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
    <div class="d1" id="d2">
       <div class="div1" id="div2"></div>
    </div>
</body>
</html>
div{
    width: 200px;
    height: 200px;
    background-color: red;
}

div .div1{
    background-color: yellow;
}

.d1 .div1{
    background-color: blue;
}
练习1-类选择器
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>类选择器</title>
    <style type="text/css">
    /*此处写代码*/
        p{
            color: red;
        }
        .pwd{
            background-color: yellow;
        }
    </style>
</head>
<body>
    <p>name</p>
    <p class="pwd">pwd</p>
</body>
</html>
练习2-字体样式
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <style type="text/css">
        h2{
            color:red;
            text-align:center;
        }
        p{
            text-indent:2em;
        }
        .p1{
            text-decoration:underline;
        }
        .p2{
            letter-spacing:5px;
        }
    </style>
</head>
<body>
    <h2>春</h2>
    <p class="p1">盼望着，盼望着，东风来了，春天的脚步近了。</p>
    <p class="p2">一切都像刚睡醒的样子，欣欣然张开了眼。山朗润起来了，水涨起来了，太阳的脸红起来了 。</p>

    <p>小草偷偷地从土里钻出来，嫩嫩的，绿绿的。园子里，田野里，瞧去，一大片一大片满是的。坐着，躺着，打两个滚，踢几脚球，赛几趟跑，捉几回迷藏。风轻悄悄的，草软绵绵的。
    </p>
  
</body>
</html>
练习3-列表样式
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <style type="text/css">
        h2{
            color:blue;
            text-decoration:underline;
        }
        ul{
            list-style-type:upper-roman;
            list-style-position:outside;
            font-size:25px;
        }
    </style>
</head>
<body>
   <h2>编程语言排行榜</h2>
   <ul>
       <li>Java</li>
       <li>C</li>
       <li>Python</li>
       <li>C++</li>
   </ul>
</body>
</html>
练习4-CSS伪类
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <style type="text/css">
        a:hover{
            background-color: orange; 
            font-weight: bold;
            font-size: 25px;
            color:blue;
        }
    </style>
</head>
<body>
    <a href="http://www.imooc.com">点击一下</a>
</body>
</html>
练习5-伪元素选择器
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <style type="text/css">
        p::before{
           content:"《";
        }
        p::after{
            content:"》";
        }
        p::selection{
            background-color:yellow;
        }
    </style>
</head>
<body>
    <h3>图书名称</h3>
    <p>Java程序设计</p>
    <p>Java编程思想</p>
    <p>Java核心技术</p>
</body>
</html>
练习6-后代选择器
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <!-- 补充代码 -->
    <style type="text/css">
        body {
            font-family:微软雅黑;
        }
        ul,ol{
            font-size:20px;
        }
        ul li{
            color:green;
        }
        ol li{
            color:blue;
        }
    </style>
</head>
<body>
    <!-- 补充代码 -->
    <h3>图书排行榜</h3>
    <ul>
        <li>三体</li>
        <li>盗墓笔记</li>
        <li>三生三世十里桃花</li>
    </ul>
    <h3>游戏排行榜</h3>
    <ol>
        <li>英雄联盟</li>
        <li>DOTA</li>
        <li>魔兽世界</li>
    </ol>
    </div>
</body>
</html>
赞(0)
MySQL学习笔记 » 第2课 CSS入门代码

近期文章

友情链接