1.CSS

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

2.CSS和div和span的理解

div相关的技术:
1. div是一个html标签, 一个块级元素(单独显示一行), 单独使用没有任何意义, 必须结合CSS来使用, 主要用于页面的布局;
2. span是一个html标签, 一个内联元素(显示一行), 它单独使用没有任何意义, 必须结合css使用, 主要对括起来的内容进行样式的修饰;

CSS 概述
CSS 指层叠样式表 (Cascading Style Sheets)
样式定义如何显示 HTML 元素
样式通常存储在样式表中
把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效率
外部样式表通常存储在 CSS 文件中
多个样式定义可层叠为一

总结:
1. 学习的行内标签和块级元素分别有哪些?
行内标签:span, strong, a, img, input, textarea
块级元素:div, h1-h6, p, hr, pre, ul, ol, dd, dt, th. tr, td

两者的区别与特性；
1).块级元素独占一行空间，行内元素只占据自身宽度的空间;
2).块级元素是可以包含块级元素和行内元素; 行内元素只能包含文本信息和行内元素;
3). 块级元素可以设置宽和高，行内元素设置的宽和高失效；
如何让块级元素居中? 如何让行内元素居中?
1); 块级元素居中： margin: 0 auto
2> 行内元素居中: text-aligin:center

3.编写CSS样式-类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
          <!--CSS的标签选择器-->
    <style>
        div{
            width:100px;
            height: 100px;
            border-radius:25px;
            border: 1px solid blueviolet;
            text-align: center;
            margin: 0 auto;
            padding-top: 20px;
            text-shadow: 5px 5px 5px gray;
        }

        /*选择div标签中类名为important的进行设置下面的样式*/
        .important {
            width: 20px;
            height: 20px;
            font-size: large;
        }
    </style>
</head>
<body>

<div class="important">1</div>
<div>2</div>
<div class="important">3</div>
<div>4</div>
<div class="important">5</div>

</body>
</html>

在这里插入图片描述

3.编写CSS样式-标签选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
          <!--CSS的标签选择器-->
    <style>
        div{
            width:100px;
            height: 100px;
            border-radius:25px;
            border: 1px solid blueviolet;
            text-align: center;
            margin: 0 auto;
            padding-top: 20px;
            text-shadow: 5px 5px 5px gray;
        }
    </style>
</head>
<body>


<!--<span style=" border: 1px solid red; text-align:center">hello</span>-->
<!--<br/>-->
<!--<span style="width: 200px; height: 200px; border: 1px solid chartreuse">world</span>-->

<!--<div style="width: 100px; height: 100px; border-radius:25px;border: 1px solid blueviolet;-->
    <!--box-shadow: 1px 1px 3px #888888;">hello</div>-->
<!--<div style="width: 100px; height: 100px; border: 1px solid aquamarine">world</div>-->

<div>1</div>
<div>2</div>
<div>3</div>

</body>
</html>

在这里插入图片描述

4.编写CSS样式-id选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
          <!--CSS的标签选择器-->
    <style>
        #westos{
            width:100px;
            height: 100px;
            border-radius:25px;
            border: 1px solid blueviolet;
            text-align: center;
            margin: 0 auto;
            padding-top: 20px;
            text-shadow: 5px 5px 5px gray;
        }
    </style>
</head>
<body>


<div>1</div>
<div id="westos">2</div>
<div>3</div>

</body>
</html>

在这里插入图片描述

5.CSS练习-导航栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width:80%;
            margin: 0 auto ;
            padding:  0;

        }

        ul {
            list-style-type: none
        }

        li {
            display: inline-block;
            width: 20%;
            background: snow;
            color: #333333;
            padding-top: 10px;
            padding-bottom: 10px;
            text-align: center;
            font-size: large;
            text-transform: capitalize;
        }

        li:hover {
            background: green;
            color: snow;
        }

        a:hover {

            color: snow;

        }

    </style>

</head>
<body>

<div>
    <ul>
        <li>
            <a href="http://www.w3school.com.cn/h.asp" style="text-decoration: none">HTML</a>
        </li>
        <li>CSS</li>
        <li>JS</li>
        <li>python</li>
    </ul>
</div>

</body>
</html>

在这里插入图片描述

6.CSS练习分页

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        ul {
            list-style-type: none;

        }

        li {
            text-decoration: none;
            display: inline-block;
            width: 10%;
            padding-top: 5px;
            padding-bottom: 5px;
            background: snow;
            color: #333333;

            text-align: center;
            font-size: large;
            text-transform: capitalize;

        }


        li:hover {
            background: green;
            color: snow;
        }

        a:hover {

            color: snow;

        }
        .active{
            background:  gray;
        }

        #pageintor{
            width: 80%;
            margin: 0 auto;
            /*border: 1px solid  red;*/
        }

    </style>
</head>
<body>


<div id="pageintor">
<ul>
    <li><a href="#">上一页</a></li>
    <li  class="active"><a   href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">...</a></li>
    <li><a href="#">28</a></li>
    <li><a href="#">下一页</a></li>


</ul>
    </div>
</body>
</html>

在这里插入图片描述

7.层级选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
       ul li a {
           color: red;
       }
       input[type='submit']{
           background: palevioletred;
            width: 200px;

       }

    </style>

</head>
<body>

<ol>
    <li><a href="#" > 新闻1</a></li>
    <li><a href="#"> 新闻2</a></li>
    <li><a href="#"> 新闻3</a></li>
</ol>



<ul>
    <li><a href="#"> 新闻1</a></li>
    <li><a href="#"> 新闻2</a></li>
    <li><a href="#"> 新闻3</a></li>
</ul>



<form>
    姓名: <input type="text"><br/>
    密码: <input type="password"><br/>
    <input type="submit" value="注册">
</form>



</body>
</html>

在这里插入图片描述

8.CSS的引入方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        li {
            background: red;
        }
    </style>
    <link rel="stylesheet" href="css/main.css">

</head>
<body>
<!--引入方式:
        1). 行内引入: <a style="行内引入的样式">
        2). 内部引入: 写在head标签里面的style标签里面的样式;
        3). 外部引入: 将css样式独立成一个文件， 通过<link rel="stylesheet" href="css/main.css">与当前html文件链接在一起.



        三种引入方式的优先级: 就近原则
    -->
<div>
    <ul>
        <li style="background: blue">
            <a href="http://www.w3school.com.cn/h.asp" style="text-decoration: none">HTML</a>
        </li>
        <li>CSS</li>
        <li>JS</li>
        <li>python</li>
    </ul>
</div>
</body>
</html>

在这里插入图片描述

Python之CSS

1.CSS

2.CSS和div和span的理解

3.编写CSS样式-类选择器

3.编写CSS样式-标签选择器

4.编写CSS样式-id选择器

5.CSS练习-导航栏

6.CSS练习分页

7.层级选择器

8.CSS的引入方式

猜你喜欢