python学习Day51

Day 51

今日内容概要

• 表单标签知识补充
• CSS层叠样式表
  • 作用
  • 语法结构
  • 注释语法
  • 三种编写css的方式
• CSS选择器
  • 基本选择器
  • 组合选择器
  • 属性选择器
  • 分组与嵌套选择器
  • 伪类选择器
  • 伪元素选择器
• CSS选择器优先级
• CSS属性
  • 字体样式
  • 背景属性
  • 边框属性
  • display属性

今日内容详细

一.表单标签知识补充

1.获取用户输入的标签之两大重要属性
    name属性
        类似于字典的键
    value属性
        类似于字典的值
  #form表单在朝后端发送数据时 标签必须要有name 否则不会发送该标签的值

2.获取用户输入的input标签理论上需要有label配合使用(一般不用)
	<label for="某个input标签的id值,可不写"></label>
    
3.获取用户输入的input标签也可以添加背景提示
	<input type="password" name="password" placeholder="密码">
    
4.获取用户输入的标签如果是让用户选择,那标签需要自己写value(文件不用)
    <input type="radio" name="gender" value="male">男
    <input type="checkbox" name="hobby" value="basketball">篮球
    <select name="province" id="">
          <option value="sh">上海</option>
        
5.针对radio和checkbox可以选择默认值
	checked="checked" 
    如果属性名和属性值相等 那么可以简写为checked
    
6.针对option标签也可以选择默认值
	selected="selected" 
    如果属性名和属性值相等 那么可以简写为selected

二.CSS层叠样式表

1.作用

可以调整标签的样式,变得更好看一些

2.语法结构

选择器{               #选择器是确定要调整哪个标签
    属性名1:属性值;
    属性名2:属性值;
}

3.注释语法

1.单行注释
    /*注释内容*/
2.多行注释
    /*
    注释内容
    */

4.三种编写css的方式

1.【内部样式】head中style标签内部直接编写(学习阶段可以使用,方便)
    <style>
       h1{
        color: blanchedalmond;
   	 }
    </style>
2.【外部样式】head中link标签引入外部css文件(最正规√)
    <link rel="stylesheet" href="myscc.css">
3.【行内样式】直接在标签内部通过style属性编写(不推荐使用)
	<p style="color: blue">要好好学习</p>

三.CSS选择器

1.CSS基本选择器

1.标签选择器：直接编写标签名来查找标签
    div{
        color: green;/*查找所有div标签,并将内部文本改为绿色*/
    }

2.类选择器：通过编写class的值来查找标签
    .c1{
        color: blue;/*查找所有class属性中'含有'c1的标签,并将内部文本改为蓝色*/
    }

3.id选择器：通过编写id的值来精确查找标签
      #d1{
        color: fuchsia;/*查找id值是d1的标签,并将内部文本改为粉色*/
      }

4.通用选择器：查找所有的标签
      *{
        color: red;/*查找所有标签 并将内部文本改为红色*/
      }

2.CSS组合选择器

给外层第一个div设置一个id为d1,用id选择器操作  如果没有设置id则用标签选择器操作

1.查找div标签内部所有的span标签(后代)
   【后代选择器】：两个选择器之间空格隔开,查找前面选择器获取到的标签内部所有符合空格后面选择器要求的标签
     #d1 span{
        color: red;
      }

2.查找div标签内部所有的儿子span
   【儿子选择器】：两个选择器之间大于号隔开,查找前面选择器获取到的标签内部第一层级符合大于号后面选择器要求的标签
     #d1>span{
        color: red;
      }

3.查找div标签同级别下面紧挨着的一个span标签(第一个弟弟)
   【毗邻选择器】：两个选择器之间加号隔开,查找前面选择器获取到的标签下面第一个符合加号后面选择器要求的标签
      #d1+span{
        color: red;
      }

4.查找div标签同级别下面所有的span标签(所有弟弟们)
   【弟弟选择器】：两个选择器之间波浪线隔开,查找前面选择器获取到的标签下面所有符号波浪线后面选择器要求的标签
      #d1~span{
        color: red;
      }

3.CSS属性选择器

所有标签除了有自己默认的属性外,还可以拥有自定义的任意属性
   默认属性  id class
   自定义属性 x=1 y=2
————————————————————————————————————————————————————————————
1.查找属性名含有name的标签,并把背景改为红色
      [name]{
          background-color: red;
      }

2.查找属性名含有name且值是username的标签,并把背景改为红色
      [name='username']{
          background-color: red;
      }

3.查找input标签且属性名含有name且值是username的标签,并把背景改为红色
      input[name='username']{
          background-color: red;
      }

/*注：前面选择器可以是任意类型(标签、id、class)*/

4.CSS分组与嵌套选择器

当多个选择器查找到的标签需要调整相同样式时,可以合并在一起：
        div,p,span{
          	color: red;
        	}
且合并的选择器彼此不干扰,也没有类型的限制：
        #d1,.c1,span{
          	color: red;
        	}
还可以在选择器基础上添加额外的选择使查找更精确：

5.CSS伪类选择器

'''
补充知识：
    a标签默认的颜色有两种 紫色和蓝色
        紫色：链接地址已被点击过了
        蓝色：链接地址没被点击过
'''

1.鼠标悬浮上去颜色改为红色 /*需记*/
    a:hover{
        color: red; 
        }
2.鼠标点击时颜色改为蓝色
    a:active{
        color: blue; 
        }
3.未被访问过颜色改为黑色
    a:link{
        color: black; 
        }
4.被访问过颜色改为紫色（出现时悬浮和点击会失效）
    a:visited{
        color: blueviolet;
        }
5./*还可适用于文本*/
    p:hover{
        color: red;
    }

6.CSS伪元素选择器

通过css代码来操作标签的文本内容

<p>吃喝玩乐</p>

1.通过css将第一个字改变大小(像素)和颜色
    p:first-letter {
        font-size: 48px;
        color: red;
        }

2.通过css在开头添加文本
    p:before {
        content:"年轻人不能";
        color:red;
        }
3.通过css在末尾添加文本
    p:after {
        content:"要好好学习";
        color:blue;
        }

通过css添加的文本不能被选中,网页f12也显示不出来。伪元素选择器可以用在解决标签浮动所带来的的负面影响，也可以用来做数据的防爬

四.CSS选择器优先级

"""
当多个选择器查找到相同的标签修改不同的样式 那么标签该听谁的？
"""
1.选择器相同 引入位置不同
   就近原则（谁离标签近听谁的）
    行内 > 内部 > 外部
2.选择器不同的情况
    行内 > id选择器 > 类选择器 > 标签选择器
    
ps:自行查阅强制修改标签样式的操作 !important

五.CSS属性

1.字体样式

width属性可以为元素设置宽度。
height属性可以为元素设置高度。
块级标签才能设置长宽度，行内标签的长宽度由内容来决定

1.文字字体
    body {
        font-family:  "微软雅黑";
    	}
2.字体大小、粗细、居中
    p {
        font-size: 40px;         /*字体大小*/
        font-weight:lighter;	/*字体变细*/
        font-weight:bolder;		/*字体变粗*/
        text-align:center;		/*字体居中*/
    	}
3.字体颜色
    p {
        color:red;				/*直接改颜色*/
        color:rgb(16, 59, 189);  /*rgb取色器*/
        color:rgba(1,1,1,0.5)	 /*rgb取色器*/
        color:#3e3e3e;			/*rgb取色器*/
    	}
4.让文本缩进
    p {
        text-indent: 32px;		/*缩进32像素*/
    	}
5.让a标签(链接标签)去掉下划线
    a {
        text-decoration: none;	/*链接标签去掉下划线*/
    	}

2.背景属性

1.背景颜色
	background-color: red;
2.背景图片
	background-image: url('图片路径');
3.背景默认自动平铺
	background-repeat: repeat：背景图片平铺排满整个页面
	background-repeat: repeat-x：背景图片只在水平方向上平铺
	background-repeat: repeat-y：背景图片只在垂直方向上平铺
	background-repeat: no-repeat：背景图片不平铺
4.背景位置
	background-position: left top;	图片在左上角
	background-position: 200px 200px; 图片距离左边200px 上边200px
	background-position: center center; 图片居中对齐
	background-attachment: fixed; 图片固定在某个位置不随滚轮移动

/*当同样的属性时可合并简写*/
background: red url("图片路径") center center no-repeat;

3.边框属性

1.黑色点状虚线边框
	border: 4px dotted black;
2.黑色矩形虚线边框
 	border: 4px dashed black;
3.黑色实线边框
	border: 4px solid black;
4.圆形边框（长宽必须px一致）
    height:400px;  高
    width:400px;   宽
    border: 5px solid black; 黑色实线边框
    boder-radius= 50%;  表示边框趋于圆的幅度

4.display属性

<input type="text" style="display: none">
可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。
常用于钓鱼网站

作业

1.整理今日内容及博客
2.课上标签及css代码多敲几遍 短时间内高强度练习 速记
3.预习明日内容