python学习第43天

一.css

1.css样式引入方式

(1)第一种

head标签中引入
<style>
    /* 选择器{css属性名称:属性值;css属性名称:属性值;} */
    div{
        /* css注释 */
         200px;
        height: 200px;
        background-color: red;
    }

</style>

(2)第二种

外部文件引入  工作中常用的
创建一个css文件,stylesheet文件,比如test.css文件
里面写上以下代码
div{
    /* css注释 */
     200px;
    height: 200px;
    background-color: red;
}

在想使用这些css样式的html文件的head标签中写上下面的内容
<link rel="stylesheet" href="test.css"> href对应的是文件路径

(3)第三种

内联样式:
<div style="background-color: red;height: 100px; 100px;"></div>

2.css选择器

基本选择器

(1)元素选择器

div{100px;}
标签名称{css属性:值}
直接在head中写上标签名称

(2)id选择器

html示例代码:
	<div id="d1">

    </div>
css写法:
    #d1{
        background-color: green;
         100px;
        height: 100px;
    }

(3)类选择器

html代码:
<div id="d1" class="c1">
    李晨浩
</div>

<div id="d2" class="c2">
    李海煜
</div>

<div id="d3" class="c1">
    张建志
</div>

css写法
.c1{
    background-color: green;
     100px;
    height: 100px;
}

有点个性的选择器

(4)属性选择器

HTML代码
<div id="d1" class="c1" xx="ss">
    李晨浩
</div>

<div id="d2" class="c2" xx="kk">
    李海煜
</div>

css写法:
[xx]{  属性查找
    background-color: green;
     100px;
    height: 200px;
}

[xx='ss']{ 属性带属性值查找
    background-color: green;
     100px;
    height: 200px;
}

(5)后代选择器

html代码示例:
	<div id="d1" class="c1" xx="ss">
        <span>
            <a href="http://www.chenhao.com">李晨浩</a>
        </span>
    </div>

    <div id="d2" class="c2" xx="kk">
        <a href="http://www.chenhao.com">李海煜</a>

    </div>

    <div id="d3" class="c1">
        张建志
    </div>
    <a href="http://www.chenhao.com">xxxxxxx</a>
css代码:
    div a{	
        color:orange; /* 字体颜色 */
    }
    父辈 子辈选择器

(6)组合选择器(逗号连接)

html代码
    <div id="d1" class="c1" xx="ss">
        <span>
            <a href="http://www.chenhao.com">李晨浩</a>
        </span>
        <span>
            <span>xxx222</span>
        </span>
    </div>

    <div id="d2" class="c2" xx="kk">
        <a href="http://www.chenhao.com">李海煜</a>

    </div>

    <div id="d3" class="c1">
        <a href="">张建志</a>
    </div>
    <a href="http://www.chenhao.com">xxxxxxx</a>

    <span>官人,你好!</span>
    
css代码: 注意:a标签字体颜色设置,必须找到a标签才能设置
	#d1 a,#d3 a{
        background-color: pink;
        color:yellow;
    }

3.css样式相关

(1)高度宽度

html代码:
	<div>
        div1
    </div>
    <span>span1</span>
css写法:
	div{
        height: 100px;
         100px;
        background-color: pink;
    }
    span{
        height: 100px;
         100px;
        background-color: green;
    }
    
 50%; 宽度高度可以设置百分比,会按照父级标签的高度宽度来计算

块级标签可以设置高度宽度，即便设置了宽度，还是霸占一整行
内联标签不能设置高度宽度，内联标签的高度宽度由内容的高度宽度来决定

(2)字体

html代码:
    <div>
        窗前明月光,地上鞋三双!
    </div>
	
css写法:
	font-size: 20px; /* 默认字体大小是16px */
    color:green; /* 字体颜色 */
    /*font-family: '楷体','宋体'; !* 字体格式 *!*/

	font-weight: 400;  /* 字体粗细 100-900,默认是400 */

(3)字体对齐

html代码:
    <div>
        只身赴宴鸡毛装!!!
    </div>

css代码:
	height: 100px;
     200px;
    background-color: yellow;
    text-align: center;  水平居中
    /*text-align: right;*/
    line-height: 100px;  和height高度相同,标签文本垂直居中

(4)颜色设置

背景,字体颜色都可以

三种方式:
	英文单词:red;
	十六进制: #ff746d;
	rgb: rgb(155, 255, 236);
	带透明度的: rgba(255, 0, 0,0.3);  单纯的就是颜色透明度
	标签透明度:opacity: 0.3;  0到1的数字,这是整个标签的透明度,百分比也可以

(5)背景

html代码:
    <div class="c1">

    </div>

css写法:
    /*background-color: #ff746d;*/
    /*background-color: rgb(155, 255, 236);*/
    /*background-image: url("fage.png");*/ url写图片路径,也可以是网络地址路径
    /*background-repeat: no-repeat;*/
    /*background-repeat: repeat-y;*/
    /*background-position: right top;*/
    /*background-position: 100px 50px;*/
    /* 简写方式 */
    background: #ff0000 url("fage.png") no-repeat right bottom;

(6)边框

html代码
    <div>
        都是同学装鸡毛!
    </div>
css写法:

    /* 边框简写方式,对四个边框进行设置 */
    /*border:1px solid red;*/
    /*border-left: 1px solid green;*/
    /*border-top: 1px solid blue;*/
    border- 5px;  边框宽度
    border-style: dashed;  边框样式
    border-color: aqua; 边框颜色

(7)盒子模型

占用空间大小
margin: 外边距  距离其他标签或者自己父级标签的距离

下面三个表示标签实际占用的空间大小
padding: 内边距  内容和边框之间的距离
border: 边框  
content: 内容部分  设置的width和height

(8)内边距

html代码:
	<div>
        英姿飒爽雄鸡装,飞上枝头变凤凰!
    </div>

css写法:
     200px;
    height: 100px;
    border: 4px solid red;
    /*padding: 6px 8px;*/
    /*padding: 4px 2px 6px 8px;*/
    /*padding-left: 20px;*/
    /*padding-top: 20px;*/
    /*padding-right: 20px;*/
    /*padding-bottom: 20px;*/

(9)外边距

html代码:
    <div>
        英姿飒爽雄鸡装,飞上枝头变凤凰!
    </div>
    <div class="c1">
        <div class="c2">
        </div>
    </div>

css写法:
    .c1{
        background-color: red;
        height: 100px;
         100px;
        /*margin-left: -1000px;*/
        /*margin: 10px 15px;*/
    }

    .c2{
        background-color: green;
        height: 20px;
         20px;
        /*margin: 10px 15px;*/
        margin-left: 20px;
    }

(10)display属性

示例:
html代码:
    <span>
        我是span标签
    </span>
    <div class="c1">
        鹅鹅鹅,曲项向天歌!

    </div>

    <div class="c2">
        拔毛烧开水,铁锅炖大鹅!
    </div>
css写法:
	span{
            /*display: block;*/
        }
    .c1{
        background-color: red;
        height: 100px;
         100px;
        /*display: inline;*/
        /*display: inline-block;*/
        display: none;
    }
    .c2{
        background-color: green;
        height: 100px;
         100px;
    }

display的几个值:
inline: 将块级标签变成了内联标签
block:将内联标签变成块级标签
inline-block: 同时具备内联标签和块级标签的属性,也就是不独占一行,但是可以设置高度宽度
none: 设置标签隐藏

(11)浮动(float)

浮动的元素,不独占一行,并且可以设置高度宽度

html代码
	<div class="cc">
        <!--<div>吟诗作对</div>-->
        <div class="c1"></div>
        <div class="c2"></div>

    </div>

    <div class="c3"></div>
	
css样式
		body{
            margin: 0;
        }
        .c1{
            background-color: red;
            height: 100px;
             200px;
            float: left;
        }
        .c2{
            background-color: brown;
            height: 100px;
             200px;
            float: right;
        }
        .c3{
            background-color: pink;
            height: 100px;
             100%;
        }

浮动会造成父级标签塌陷的问题,没有高度了

解决父级标签塌陷的问题:

方式1:
	给父级标签加高度
方式2:
	清除浮动:clear属性
方式3: 常用
	.clearfix:after{
            content: '';
            display: block;
            clear: both;
        }
	
html代码:
    <div class="cc clearfix">
        <!--<div>吟诗作对</div>-->
        <div class="c1"></div>
        <div class="c2"></div>
    </div>
    <div class="c3"></div>


方式4：
css代码：overflow: hidden;
.c1{
  height: 100px;
   100px;
  background-color: red;
  float: left;
}
.c2{
  height: 100px;
   100px;
  background-color: green;
  float: right;
}
.c3{
  background-color: yellow;
  height: 200px;
}
.cc{
  overflow: hidden;
}

html代码：
<div class="cc">
    <div class="c1"></div>
    <div class="c2"></div>
</div>

<div class="c3"></div>