前端学习笔记

今日内容概要

• 表单标签知识补充
• CSS层叠样式表

今日内容详细

表单标签知识补充

---

1.获取用户输入的标签两大重要的属性:

name属性:类似于字典的key(前端程序员写)

value属性:类似于字典的value(用户自己传)

2.lable标签:专门给input标签配文字说明

获取用户输入的input标签理论上需要有label配合使用

<label for="某个input标签的id值"></label>
方式1
<label for="d1">用户名:</label>
<input type="text" id="d1">
方式2
<label>用户名:
     <input type="text">
</label>

3.获取用户输入的input标签也可以添加背景提示

<input type="text" 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>
</select>

5.针对radio和checkbox可以默认选中

checked="checked" 如果属性名和属性值相等，那么可以简写为 checked

6.针对option标签也可以默认选中

selected="selected" 简写为 selected

CSS层叠样式表

---

CSS（Cascading Style Sheet，层叠样式表)定义如何显示HTML元素。

当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）。

用来调整标签样式

1.语法结构

每个CSS样式由两个组成部分：选择器和声明。声明又包括属性和属性值。每个声明之后用分号结束。

选择器 {属性名1:属性值1;属性名2:属性值2}
#d1{color:red;font-size:18px}

2.语法注释

/*注释内容*/

3.三种编写CSS的方式

1.head中style标签内部直接编写(学习阶段使用方便)
2.head中link标签引入外部css文件(最正规)
3.直接在标签内部通过style属性编写(不推荐)

CSS基本选择器

1.标签选择器(范围查找)

直接编写标签名来查找标签

div{
    color: green;  /*查找所有的div标签并将内部的文本颜色变为绿色*/
}

2.类选择器(范围查找)

通过编写class的值来查找标签(关键性符号句点符，不能省略)

.c1{
    color: red;  /*查找所有class属性中含有c1的标签并将内部的文本颜色变为红色*/
}

3.id选择器(精确查找)

通过编写id的值来精确查找标签

#d1 {
        color: aquamarine;  /*查找id值是d1的标签 并将内部的文本颜色改为天青色*/
    }

4.通用选择器

查找所有的标签

* {
        color: blue;  /*查找所有的标签 并将内部的文本颜色改为蓝色*/
    }

CSS组合选择器

预备知识:标签之间的关系
<p1></p1>
<div>
    <p>
        <span></span>
    </p>
</div>
<p2></p2>

通过嵌套层级来表示亲属关系
1.对于div来说p是儿子，span是孙子

2.对于div来说p1是哥哥，p2是弟弟

3. div内部所有的标签无论层级都可以称之为是div的后代

1.后代选择器(关键符号是空格)

两个选择器之间空格隔开，查找空格前面选择器获取到的标签内部所有符合空格后面选择器要求的标签

/*查找div标签内部所有的span(后代)*/
#d1 span {
    color: blue;
}

2.儿子选择器(关键符号是大于号)

两个选择器之间大于号隔开，查找大于号前面选择器获取到的标签内部第一层级符合大于号后面选择器要求的标签

/*查找div标签内部所有的儿子span*/
#d1>span {
    color: orange;
}

3.毗邻选择器(关键符号是加号)

两个选择器之间大于号隔开，查找加号前面选择器同级别下面紧挨着的符合加号后面选择器要求的标签

/*查找div标签同级别下面紧挨着的一个span标签(弟弟)*/
#d1+span {
    color: red;
}

4.弟弟选择器(关键符号是波浪号)

两个选择器之间大于号隔开，查找波浪号前面选择器同级别下面所有的符合波浪号后面选择器要求的标签

/*查找div标签同级别下面所有的span标签(弟弟们)*/
#d1~span {
    color: blue;
}

CSS属性选择器

所有的标签除了有自己默认的属性之外 还可以拥有自定义的任意属性
    默认属性    id class
    自定义属性  x=1 y=2

根据标签内部的属性名和属性值查找标签(关键符号是中括号)

1.查找属性名含有name的标签

[name] {
    background-color: red;
}

2.查找属性名含有name并且值是username的标签

[name='username'] {
    background-color: orange;
}

3.查找属性名含有name值是username的input标签

input[name='username'] {
    background-color: aqua;
}
/*前面的选择器可以是任意类型的 标签、id、class*/

CSS选择器之分组与嵌套

分组

多个选择器查找到的标签需要调整相同的样式那么可以合并

查找div或者p或者span
div, p, span {
    color: red;
}

嵌套

合并的选择器彼此不干扰也没有类型的限制

查找id是d1或者class包含c1或者span
#d1, .c1, span {
    color: red;
}

综合用法

可以在选择器基础之上添加额外的选择使得查找更精确
div#d1    查找id是d1的div标签
div.c1    查找class包含c1的div标签
div #d1   查找div内部id是d1的后代标签
#d1>.c1   查找id是d1的内部class包含c1的儿子标签

CSS伪类选择器

补充知识
    a标签默认的颜色有两种 紫色跟蓝色
        紫色:链接地址已经被点击过了
        蓝色:链接地址从来没有点击过

/*鼠标移动到a标签上方 字体颜色动态修改为蓝色*/
a:hover {
    color: blue;
}

/*鼠标悬浮上去之后样式改变 适用于所有含有文本的标签*/

CSS伪元素选择器

伪元素选择器通过css操作文本内容

1.修改首个字体样式

p:first-letter {
    font-size: 48px;
    color: red;
}

2.在文本开头添加内容

p:before {
    content:"我不好这口!";
    color:red;
}

3.在文本结尾添加内容

p:after {
    content:"雨化田喜欢洗脚";
    color:blue;
}

伪元素选择器可以用在解决标签浮动所带来的的负面影响也可以用来做数据的防爬

CSS选择器优先级

"""
当多个选择器查找到相同的标签修改不同的样式 那么标签该听谁的
"""
1.选择器相同 引入位置不同
    就近原则
2.选择器不同的情况
    行内 > ID选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器

强制修改标签样式的操作
!important
· 增加指定样式规则的应用优先权，让浏览器首选执行此条语句
· 使用方法：选择器{样式：值 !important}
例：
<div class="father">
    <div class="a"></div>
</div>

.father{
 color: blue;
 .a{
 color: red !important
 }
}

字体样式

---

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

文字字体

p { font-family: "微软雅黑";}

字体大小

p {font-size: 16px;}

字体粗细

p {font-weight: lighter\bolder;}

字体颜色

p {color: red;}
p {color: rgb(128, 128, 128);}
p {color:#3e3e3e;}
p {color:rgba(1,1,1,0.5)}  /*a是透明度*/

获取颜色的方式:截图软件自带取色功能，pycharm提供的取色器。

文字属性

---

文字对齐

p {text-align:left}    左边
p {text-align:center}  中间
p {text-align:right}   右边

文字装饰(重点)

a {text-decoration: none;}  主要就是用于去除a标签的下划线
a {text-decoration: line-through;}  删除线
a {text-decoration: overline;}  上边线
a {text-decoration: underline;}  下划线

首行缩进

p {text-indent: 32px;}  首行缩进32px

补充:可以使用浏览器做样式的动态调整，查找到标签的css，然后左键选中，通过方向键上下动态修改数值，找到适合的数值填写到css样式里。

背景属性

---

背景颜色

p {background-color: red;}  

背景图片

img {background-image:url("111.png");}   背景图片如果没有设置的区域大,
那么默认自动填充满
img {background-repeat:no-repeat\repeat-x\repeat-y;}  是否平铺
img {background-position:left top;}  图片位置
img {background-attachment: fixed;}  背景附着

如果多个属性名具有相同的前缀，那么可以整合到一起编写(前缀名即可)。

img {background:#336699 url('1.png') no-repeat left top;}

边框属性

---

自定义调整每个边的边框

p {border-left/top/right/bottom-color: black;}  给边框修改颜色
p {border-left/top/right/bottom-width: 5px;}  修改边框的粗细
p {border-left/top/right/bottom-style: solid;}  修改边框的类型

dotted点状虚线边框,dashed矩形虚线边框,solid实线边框

统一调整每个边的边框

p {border: 5px solid black;}  顺序无所谓,只要给了三个就行

画圆

p {border-radius: 50%}   如果长宽一样那么就是圆,不一样就是椭圆

display属性

---

display:inline  让标签具备行内标签的特性(不能设置长宽)
display:block   让标签具备块儿级标签的特性(可以设置长宽)
display:inline-block  使元素同时具有行内元素和块级元素的特点

display:none    隐藏标签(重点)  页面上不会保留位置也不显示
visibility:hidde  也是隐藏标签 但是位置会保留