python 学习_第五模块 CSS

时间 2019-12-08

标签 python 学习第五模块 css 栏目 Python 繁體版

原文原文链接

python 学习_第五模块 CSScss

1.网页引用css样式 3种模式html

　　内联样式python

　　内嵌样式学习

　　外部样式（经常使用）字体

<!--
    1.内联样式 （行内样式）  少用
    2.内嵌样式
    3.外部样式
-->

<!DOCTYPE html>
<html>
<head>
    <title>3种模式</title>

    <!-- 内嵌样式 -->
    <style type="text/css">
        h3{
            color: green;
        }    
    </style>
    <!-- 外部样式-->
    <link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
    <!-- 行内样式 -->
    <p>
    <p style="color: red;">
        文本颜色为何颜色？
    </p>

    <h3>
        小圆圈
    </h3>

    <h4>
        mjj
    </h4>

</p>
</body>
</html>

link标签 index.cssspa

h4{
    color: orange;
    font-size: 22px;
    font-weight: bold;
}

　　2. 基本选择器code

　　　①标签选择器htm

　　　示例blog

p{
    color: green;
    font-size: 20px;
}

　　　　　将全部p标签设置字体颜色为绿色大小为20px　　　继承

　　　　②id选择器

　　　　示例

#douyin{
    color: red;
    
}

　　　　将id为抖音的元素字体颜色设置为红色　　

　　　　③类选择器

　　　　示例

.active{
    color: gray;
}

　　　　　　将类为 active的颜色设置为灰色

基本选择器的使用

<!DOCTYPE html>
<html>
<head>
    <title>css基础选择器</title>
    <link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
    <div id="container">
        <h3 class="active title">抖音</h3>

        <p>
            年后，一股抖音风火爆了社媒，抖音上的博主带火了小猪佩奇。他们的标志是"<span class="active">手带小猪佩奇手表，身披小猪佩奇纹身</span>"，因而就诞生了"<span id="peiqi">小猪佩奇身上纹，掌声送给社会人</span>"。
        </p>

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

link标签 index.css

p{
color: green;
font-size: 20px;
}

.active{
color: gray;
}

.title{
font-size: 30px;
}

#peiqi{
color: red;

}

类选择器的使用样例

<!DOCTYPE html>
<html>
<head>
    <title>类选择器使用</title>
    <link rel="stylesheet" type="text/css" href="css/common_class.css">
</head>
<body>
    <!-- 绿色 20px -->
    <p class="lv big">yyy</p>
    <!-- 绿色 粗 -->
    <p class="lv bold">yyy</p>
    <!-- 粗 20px -->
    <p class="bold big">yyy</p>

</body>
</html>

link 标签 common_class.css

.lv{
    color: green;
}
.big{
    font-size: 20px;
}
.bold{
    font-weight: bold;
}

　　3.高级选择器

　　①后代选择器

/*后代选择器*/
.wrap a {
    color:red;
}

　　②子代选择器

/*子代 选择器*/
.wrap >a{
    color: green;
}

　　③组合选择器

/*组合选择器*/

h3,span {
    color: gray;
    font-size: 20px;
}

　　④交集选择器

/*交集选择器*/

h2{
    color: red;
}
.active{
    font-weight: lighter;
}
h2.active{
    font-size: 14px;
}

<!DOCTYPE html>
<html>
<head>
    <title>高级选择器</title>
    <link rel="stylesheet" type="text/css" href="css/advanced_selector.css">
</head>
<body>
    <h3>组合选择器1</h3>
    
    <div class='wrap'>
        <p>
            <a href="#">小圆圈</a>
        </p>
        <a href="#">hello</a>
    </div>


    <a href="#">123456</a>


    <div>
        <a href="#"> hello a</a>
    </div>

    <span>组合选择器2</span>


    <h2 class="active">mgg</h2>
</body>
</html>

link标签 advanced_selector.css

/*后代选择器*/
.wrap a {
    color:red;
}



/*子代 选择器*/
.wrap >a{

    color: green;
}


/*组合选择器*/

h3,span {
    color: orange;
    font-size: 30px;
}

/*交集选择器*/

h2{
    color: red;
}
.active{
    font-weight: lighter;
}
h2.active{
    font-size: 24px;
}

　　⑤伪类选择器

<!DOCTYPE html>
<html>
<head>
    <title>伪类选择器</title>
    <link rel="stylesheet" type="text/css" href="css/test.css">
</head>
<body>
    <a href="https://www.baidu.com" >baidu</a>

</body>
</html>

　　link标签 test.css

       /*让超连接点击以前是红色*/
        a:link{
            color:red;
        }

        /*让超连接点击以后是绿色*/
        a:visited{
            color:green;
        }
        /*鼠标悬停，放到标签上是黄色*/
        a:hover{
            color:orange;
        }
        /*鼠标点击连接，可是不松手是黑色*/
        a:active{
            color:black;

须要注意的是 :hover 能够应用于任何的元素

继承性

<!DOCTYPE html>
<html>
<head>
    <title>继承性</title>
    <link rel="stylesheet" type="text/css" href="css/special.css">
</head>
<body>
    <div>
        <ul>
            <li>
                <p>
                    A
                </p>
            </li>
        </ul>
    </div>
</body>
</html>

body{
    color: red;
    font-size: 30px;
    border: 1px solid red;
}

4. 选择器权重

<!DOCTYPE html>
<html>
<head>
    <title>选择器权重</title>
    <style type="text/css">
        /*数选择器的数量： id选择器 类选择器 标签选择器*/
        /*0 1 0*/
        .b{
            color: purple;
        }
        /*0 0 3*/
        html body div{
            color: red;
        }
        /*1 0 0*/
        #b{
            color: orange;
        }

    </style>
</head>
<body>
    <div>a</div>
    <div class="b" id="b" style="color: green;">b</div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <title>css选择器权重深刻</title>
    <style type="text/css">
        /* 0 0 3*/
        div div p{
            color: yellow;
        }
        /*0 0 1*/
        p{
            color: gray;
        }
        /*0 1 0*/
        .active{
            color: purple;
        }
        /*0 1 1*/
        div .active{
            color: black;
        }
        /*0 1 1*/
        div div .active{
            color: blue;
        }
        /*1 2 0*/
        .wrap1 #box2 .active{
            color: green;
        }
        /*2 0 1*/
        #box1 #box2 p{
            color: red;
        }
        /*继承来的属性 它的权重很是低 0*/
        #box1 #box2 #box3{
            color: orange;
        }

        .container{
            color: orange;
            font-size: 14px;
        }
        .container ul li {
            color: #000;
            font-size: 16px;

        }

    </style>
</head>
<body>
    <div class="wrap1" id="box1">
        <div class="wrap2" id="box2">
            <div class="wrap3" id="box3">
                <p class="active">MJJ是什么颜色</p>
            </div>
        </div>
        
    </div>


    <div class="container">
        <ul>
            <li>小米手机</li>
        </ul>
    </div>
</body>
</html>

5 字体相关属性

font-family 字体系列

body {
  font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif
}

若是设置成inherit，则表示继承父元素的字体。

font-weight 字重（字体粗细）。

取值范围：

font-size 字体大小。

p {
  font-size: 14px;
}

若是设置成inherit表示继承父元素的字体大小值。

color 设置内容的字体颜色。

　　支持三种颜色值：

　　　　十六进制值如: ＃FF0000
　　　　一个RGB值如: RGB(255,0,0)
　　　　颜色的名称如: red

p {
  color: red;
}

text-align 文本对齐

取值范围：

line-height 行高

text-decoration 文字装饰。

取值范围：

字体属性示例

<!DOCTYPE html>
<html>
<head>
    <title>字体属性</title>
    <style type="text/css">
        body{
            font-family: "Hoefler Text","Arial";
            font-size: 30px;    
            color: rgb(255,103,0);
            font-style: italic;
            font-weight: 900;
            text-decoration: line-through; 
        }
        
    </style>
</head>
<body>
    <!-- 像素单位： px  em rem  -->
    MJJ 小猿圈

</body>
</html>

文本属性和字体属性示例

<!DOCTYPE html>
<html>
<head>
    <title>文本属性和字体属性示例</title>
    <style type="text/css">
         a{
            text-decoration: none;
            color: #333;
            font-size: 14px;
        }
        a:hover{
            color: #FD8308;
            text-decoration: underline;
        }
        .box p span{
            text-decoration: line-through;
        }
    </style>
</head>
<body>
    <div class="box">
        <a href="https://detail.tmall.com/item.htm?spm=a230r.1.14.10.3e58105cVQmmSc&id=576523555964&cm_id=140105335569ed55e27b&abbucket=9">
            V领雪纺衫女2019春装新款漏锁骨打底长袖雪纺衬衣宽松网纱衬衫潮</a>
        <p>¥ <span>339.00</span></p>
    </div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <title>文本属性</title>
    <style type="text/css">
        p{    
            /*font-family: */
            text-indent: 2em;
            /*font-size: 20px;*/
            /*行高： 行与行之间的距离*/
            /*line-height: 60px;*/
            /*文字和文字之间的距离*/
            letter-spacing: 5px;
            /*英文单词之间的距离*/
            word-spacing: 10px;
            /*综合属性*/
            font: 20px / 3 "Helvetica Neue",Helvetica,Arial,"Microsoft Yahei","Hiragino Sans GB","Heiti SC","WenQuanYi Micro Hei",sans-serif;
        }
        div{
            line-height: 60px;
            font-size: 20px;
            background-color: red;
            /*设置文本水平居中显示*/
            text-align: center;
        /*    text-align: left; 默认
            text-align: right;*/
        }
    </style>
</head>
<body>
      <p>
           hello  world在人类漫长的历史长河中，推进社会向前的从不会是那些甘于平凡的多数人，相反，他们每每都是一群特立独行桀骜不驯的疯子！这一群疯子中有位传奇的人物，他颠覆性地将人文与科技完美融合，极大地改变了人类计算机领域，改变了人们的生活方式，其一手建立的计算机公司到现在还是手机行业的传奇，没错！他就是乔布斯！
      </p>
      <div>
          在人类漫长的历史长河    
      </div>    

</body>
</html>