• 欢迎光临~
> > 学习python-Day45

学习python-Day45

开发技术 开发技术 2022-08-23 次浏览

今日学习内容

一、表单标签补充知识

  1. name相当于字典的键，value相当于字典值。

    对于前端到后端传数据需要用到name属性，不然无法被后端识别该数据是 什么。

    form表单在朝后端发送数据的时候，标签必须要有name，否则不会发送该标签的值。

  2. 获取用户输入的input标签页理论上需要有label配合使用。
    <label for="该input标签的id值"></label>

效果：使输入框连带则标签旁边的文本一起选中
  3. 获取用户输入的input标签做第二次提示的背景提示。
    <input type="radio" name="password" placeholder="密码">
  4. 获取用户输入的标签如果是默认选中框
    针对radio和checked、option标签可以默认选中数据。

<input type="radio" name="gender" value="male">男
<input type="checkbox" name="hobby" value="basketball">篮球

<select name="province" id="1">
	<option value="sh">上海</option>
</select>

注意：
checked="checked" 如果属性名和属性值相等，那么可以简写成 checked
selected="selected" 可以简写成 selected
  5. 文件file或files、日期不需要标识。

二、CSS简介

  1. CSS作用：调整标签样式

  2. 语法结构

    选择器	{

​		属性名1:属性值1;

​		属性名2:属性值2;

​		......

}

  3. 注释语法

    /*注释内容*/

  4. 三种编写CSS的方式

    1.<head>中style内部编写
2.<head>中link标签引入外部CSS文件（最正规）
3.标签内部通过style属性编写 ===> 行内式
    <p span="color:read">hahaha</p>

三、选择器

  1. 基本选择器

    选择器 定义 举例 说明
    标签选择器 用标签名来找找标签 div {
    color:green;
    }    		 查找所有的div标签，并将内容文本颜色变为绿色
    类选择器 用class里的值来查找标签 .c1 {
    color:red;
    }    		 查找所有class属性中带有带有c1标签并将内部文本颜色变成红色
    id选择器 用id的值来精确查找标签 #d1 {
    color:yellow;
    }    		 查找id值是d1的标签并将内部文本颜色变成黄色
    通用选择器 查找所有的标签 * {
    color:blue;
    }    		 查找所有的标签并将内部的文本颜色改为蓝色

  2. 组合选择器

    标签之间的关系（自定义）：后代选择器、儿子选择器、毗邻选择器、弟弟选择器

    <p></p>
<div id="d1">
    <p>
        <span>haha</span>
    </p>
    <span>lala</span>
</div>
 <span>hehe</span>
<p></p>
 <span>dodo</span>

    1.查找div标签内部所有的隔标签的span(后代：隔代)
    #d1 span {
        color: blue;
    }
后代选择器：两个选择器之间空格隔开，查找前面标签内所有的与之相隔标签的空格后面选择器的标签

2.查找div标签内部所有儿子span
	 #d1>span {
        color: orange;
    }
儿子选择器：两个选择器间用大于号隔开，查找前面标签内下面第一个为大于号后面的选择的标签。

3.查找div标签同级别下面紧挨着的一个span标签
	#d1>span {
        color: orange;
    }
毗邻选择器：两个选择器用+隔开，查找前面标签内下面与之紧挨着的加号后面选择器，中间有标签隔开没有紧挨着则不会查询到。

4.查找div标签下面所有的span标签（弟弟们）
	#d1~span {
        color: orange;
    }
弟弟选择器：两个选择器用~隔开，查找前面标签内下面所有为波浪线后面的选择器的标签。

  3. 属性选择器

    所有的标签除了有自己默认的属性之外，还可以拥有自定义的任意属性。

    1.查找属性名含有name的标签
    [name] {
        background-color:red;
    }
2.查找属性名含有name并且值是username的标签
    [name="username"] {
        background-color:orange;
    }
3.查找input标签并且属性名含有name值是username的标签
    input[name="username"] {
        background-color:aqua;
    }

前面的选择器可以是任意类型的 标签、id、class...

  4. 分组与嵌套

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

  5. 伪装选择器

    补充知识
	a标签有记录是否被点击的颜色区分：紫色（该链接地址已被点击）、蓝色（该链接地址从来没有被点击过）
    a:hover {
        color:blue;
    }
鼠标悬浮上去后样式改变，适用于所有文本的标签
还有其他的，不常用了解即可：
:link 、:active 、:visited 、:hover

  6. 伪元素选择器

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

    1.单独改第一个字
p:first-letter {
    font-size: 48px;
    color:red;
}

2.CSS动态添加文本内容使其在页面不能为选择。
p:before {
    content:"他们咋那么帅喽喽喽~~~";
    color:red;
}
p:after {
    content:"博君一肖是真的"
        color:blue;
}
伪元素选择器可以用在解决标签浮动说带来的负面影响，也可以防爬虫。

  7. 选择器优先级

    当多个选择器查找到相同的标签并修改不同的样式，那么样式呈什么样子。

    1. 选择器相同，引入位置不同

      就近原则

    2. 选择器不同的情况

      行内 > id选择器 > 类选择器 >标签选择器

    3. 强制修改标签样式的操作 !important

      1.只有一条语句使用!important修饰,按照该语句样式显示，最后显示为橙色。
.p{color:#blue !important}
<style>
        .box1 { color: green; }  #类选择器
        #d1 { color: red; }      #id选择器
        p { color: orange !important; }   #标签选择器
<style>



2.如果语句都使用!important修饰，那么将按照语句所在选择器的权重大小来起作用,最后显示红色。`id选择器 > 类选择器 >标签选择器`
<style>
        .box1 { color: green !important; }
        #d1 { color: red !important; }
        p { color: orange !important; }
<style>

3.• 如果是继承过来的样式，他的权重为0，加上!important属性权重仍为0，即!important不能提升权重为0的样式，结果显示为橙色。
<style>
	.box1 { color: green !important; }
	p { color: orange;}
</style>

<body>
<div class="box1">
          <p>文字颜色</p>
</div>
</body>

----------------<body>------------------------
<body>
          <p id="d1" class="box1">文字颜色</p>
</body>
------------------------------------------------

四、字体相关样式

width属性可以为元素设置宽度。

height属性可以为元素设置高度。

块级标签才能设置宽度，行内标签的宽度由内容来决定。

1.设置body内所有字体为微软雅黑
    body {
        font-family:  "微软雅黑";
    }
2.对标签p内字体大小做修改
    p {
        font-size: 16px;
    }
3.对标签p内的字体粗细做出修改
    p {
        font-weight:lighter;
    }
4.对标签p内颜色改变
有三种方式：
	十进制值：#
	RGB(参数1,参数2,参数3)
	RGBA(参数1,参数2,参数3,0-1间小数表透明程度)
	
	p {
    color:red;
    color:rgb();
    color:#3e3e3e;
    color:rgba(1,1,1,0.5)
	}
5.对标签p内容居中对齐
    p {
        text-align:center;
    }
6.对a标签的内容取消下划线
    a {
        text-decoration: none;
    }
7.对标签p内容文本上下间隔距离
    p {
        text-indent: 32px;
    }

学习python-Day45

五、背景属性

1.背景颜色
	background-color: red;
2.背景图片
	background-image: url('图片相对路径，在根路径下的路径');
3.背景重复
	repeat：背景图片平铺排满整个网页
	repeat-x：背景图片只在水平方向上平铺
	repeat-y：背景图片只在垂直方向上平铺
	no-repeat：背景图片不平铺
通常设置背景图片不重复为：background-repeat: no-repeat;
4.背景位置
	background-position: left top;
	background-position: 200px 200px;

以上可以简写，当同样的属性时，可以把他们合并写。
background: url("imgs/xzwyb.jpg") center center no-repeat;

六、边框属性

边框 描述
none 无边框
dotted 点状虚线边框
dashed 矩形虚线边框
solid 实现边框 
1.点状虚线边框
	border: 4px dotted black;
2.矩形虚线边框
 	border: 4px dashed black;
3.实现边框
	border: 4px solid black;

----------------<body>------------------------
<body>
          	<div id="a"></div>
            <div id="b"></div>
            <div id="c"></div>
</body>


boder-radius= 百分值
表示框的趋于圆的幅度，等宽等高的框50%就是个圆

七、display属性

style = "display:none"
作用于行内标签表示隐藏信息，就是说可以用于将用户输入的数据，客户端页面是看不了的，但可以将数据发送给服务端。
程序员灯塔
转载请注明原文链接：学习python-Day45
喜欢 (0)