表单标签补充知识、CSS层叠样式表、CSS选择器、CSS属性相关

表单标签补充知识

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

1.name属性：类似于字典的键
2.value属性:类似于字典的值
ps:form表单在朝后端发送数据的时候，标签必须要有name,否则不会发送该标签的值

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

<label for="d1">name:</label>>
<input type="text" name="name" id="d1">

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

placeholder

<p>password:
	<input type="password" name = "password" placeholder="填写密码">
</p>

4.获取用户输入的标签如果不是让用户自己写而是选择，那么标签需要自己写value

除了自己需要选择上传的file属性名，内部已经写好了

<p>gender:
	<input type="radio" name="gender" value ="女">女
	<input type="radio" name="gender" value ="男">男
</p>

<p>hobby:
    <input type="checkbox" name="hobby" value="read">看书
    <input type="checkbox" name="hobby" value="sleep">睡觉
    <input type="checkbox" name="hobby" value="music">音乐
</p>

<select name="province" id="">
    <option value="SC">四川</option>
    <option value="BJ">北京</option>
    <option value="SH">上海</option>
</select>

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

checked="checked" (如果属性名和属性值相等，可以简写 checked)

<p>gender:
    <input type="radio" name="gender" value ="女" checked="checked">女
    <input type="radio" name="gender" value ="男">男
</p>

<p>hobby:
    <input type="checkbox" name="hobby" value="read" checked>看书
    <input type="checkbox" name="hobby" value="sleep">睡觉
    <input type="checkbox" name="hobby" value="music">音乐
</p>

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

selected="selected" 可以简写为selected

<select name="province" id="">
    <option value="SC" selected="selected">四川</option>
    <option value="BJ">北京</option>
    <option value="SH">上海</option>
</select>

CSS层叠样式表

语法结构

选择器 {
    属性名1：属性值1;
    属性名2:属性值2
}

注释语法

/*注释内容*/

三种编写css的方式

1.head中style标签内部直接编写(学习阶段使用)

  <style>
    h1 {
      color: greenyellow;
    }
  </style>

2.head中link标签引入外部css文件(最正规)

  <link rel="stylesheet" href="mycss.css">

3.直接在标签内部通过style属性编写(不推荐)

<h1 style="color: green">加油 努力</h1>

css选择器

css选择器之基本选择器

基本选择器有：标签选择器、类选择器、id选择器、通用选择器

1.标签选择器

标签选择器就是直接编写标签名来查找标签

需求：查找所有的div标签 并将内部的文本颜色变为绿色

<style>
    div {
      color: green;
    }
  </style>

2.类选择器

类选择器就是通过编写class的值来查找标签

需求：查找所有class属性中含有c1的标签 并将内部的文本颜色变为绿色  
  <style>
    .c1 {
      color: green;
    }
  </style>

3.id选择器

id选择器就是通过编写id的值来精确查找标签

需求：找id值是d1的标签 并将内部的文本颜色改为绿色
<style>
    #d1 {
      color: green;
    }
 </style>

4.通用选择器

通用选择器就是查找所有的标签

需求：查找所有的标签 并将内部的文本颜色改为绿色 
<style>
    * {
      color: green;
    }
</style>

css选择器之组合选择器

组合选择器有：后代选择器、儿子选择器、毗邻选择器、弟弟选择器

1.后代选择器

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

需求：查找div标签内部所有的span(后代)
<style>
    div span {
      color: green;
    }
 </style>

2.儿子选择器

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

需求：查找div标签内部所有的儿子span
<style>
    div>span {
      color: green;
    }
 </style>

3.毗邻选择器

毗邻选择器就是：两个选择器之间+号隔开,查找前面选择器同级别下面紧挨着的+号后面的选择器

 需求：查找div标签同级别下面紧挨着的一个span标签(弟弟)
<style>
    div+p {
      color: green;
    }
  </style>

需求：查找id =d1的同级别下面紧挨着的一个p标签(弟弟)  
<style>
    #d1+p {
      color: green;
    }
  </style>

4.弟弟选择器

弟弟选择器就是：两个选择器之间隔开，查找前面选择器同级别下面所有号后面的选择器

需求：查找div标签同级别下面所有的span标签(弟弟们)
  <style>
    div~span {
      color: green;
    }
  </style>

css选择器之属性选择器

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

1.[属性名]充当选择器

需求：查找属性名含有name的标签

  <style>
    [name] {background-color: green}
  </style>

2.[属性名=属性值]充当选择器

需求:查找属性名含有name并且值是username的标签

  <style>
    [name="username"] {
      background-color: green;
    }
  </style>

3.标签/id/class[属性名=属性值]充当选择器

需求：查找input标签并且 属性名含有name值是username的标签

  <style>
    input[name="username"] {
      background-color: green;
    }
  </style>

CSS选择器之分组与嵌套

分组

当多个选择器查找到的标签需要调整相同的样式，那么可以合并，并且合并的选择器彼此不干扰也也没有类型的限制

需求：将div、p、span标签的文本都设为绿色
<style>
    div,p,span {
      color: green;
    }
  </style>

需求：将标签span或者类c1或者id为d1的文本设为绿色
  <style>
    #d1,.c1,span {
      color: green;
    }
  </style>

嵌套

可以在选择器基础之上添加额外的选择使查找更精确

  <style>
    div#d1 {
      color: green;
    }
  </style>

CSS选择器之伪类选择器

补充知识

1.a标签默认的颜色有两种，紫色和蓝色
	紫色：代表链接地址已经被点击过了
    蓝色:代表链接地址从来没有被点击过

伪类选择器

hover 鼠标放上去(悬浮操作)、link 链接没有被点击过、visited 链接被点击过、active链接被点击那一刻

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

  <style>
    a:link {
      color: green;
    }
    a:hover {
      color: palevioletred;
    }
    a:active {
      color: aqua;
    }
    a:visited {
      color: coral;
    }
  </style>

CSS选择器之伪元素选择器

伪元素选择器通过css代码俩操作标签文本内容；伪元素选择器可以用在解决标签浮动所带来的负面影响，也可以用来做数据的防爬。

first-letter

first-letter常用的给首字母设置特殊样式

  <style>
    p:first-letter {
      font-size:48px;
      color:red;
    }
  </style>

before

before:每个

元素之前插入内容

  <style>
    p:before {
      content:"否";
      color: coral;
    }
  </style>

after

after：每个

元素之后插入内容

  <style>
    p:after {
      content:"否";
      color: coral;
    }
  </style>

CSS选择器优先级

1.当选择器相同的时候，引入位置不同：就近原则
2.当选择器不同的时候：行内>id选择器>类选择器>标签选择器
3.强制修改标签样式的操作：!important

CSS属性相关

字体样式

1.width、height

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

2.font-family

设置字体

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

3.font-size

设置字体大小

  <style>
    p {
      font-size: 16px;
    }
  </style>

4.font-weight

设置字体粗细(自重)

值 描述
normal 默认值，标准粗细
bold 粗体
bolder 更粗
lighter 更细
100~900 设置具体粗细，400等同于normal，而700等同于bold
inherit 继承父元素字体的粗细值 
  <style>
    p {
      font-weight: bold;
    }
  </style>

5.color

设置颜色有四种方式：第一种：十六进制值(eg:FF0000);第二种：RGB值 (RGB(255,0,0));第三种直接写颜色的名称 (red)；第四种:RGBA值(RGBA(255,0,0,0.3))

  <style>
    p {
      color: #542f79;
    }
  </style>

文字属性

文字对齐

text-align 属性规定元素中的文本的水平对齐方式。(left--左对齐 默认值；right--右对齐；center--居中对齐;justify--两端对齐)

  <style>
    p {
      text-align: center;
    }
  </style>

文字装饰

text-decoration 属性用来给文字添加特殊效果。

值 描述
none 默认。定义标准的文本。
underline 定义文本下的一条线。
overline 定义文本上的一条线。
line-through 定义穿过文本下的一条线。
inherit 继承父元素的text-decoration属性的值。 
  <style>
    a {
      text-decoration: none;
    }
  </style>

首行缩进

text-indent 首行缩进

  <style>
    p {
      text-indent: 32px;
    }
  </style>

背景属性

背景颜色

设置背景颜色用:background-color

  <style>
    body {
      background-color: palevioletred;
    }
  </style>

背景图片

设置背景图片用：background-image

  <style>
    body {
        background-image: url("https://img0.baidu.com/it/u=3790884796,164977939&fm=253&fmt=auto&app=138&f=JPEG?w=794&h=500");
    }
  </style>
背景重复

背景重复属性名：background-repeat.

属性值 描述
repeat(默认) 背景图片平铺排满整个网页
repeat-x 背景图片只在水平方向上平铺
repeat-y 背景图片只在垂直方向上平铺
no-repeat 背景图片不平铺 
    <style>
    div {
        height: 800px;
        width:800px ;
        background-color: palevioletred;
        background-image: url("https://img0.baidu.com/it/u=3790884796,164977939&fm=253&fmt=auto&app=138&f=JPEG?w=794&h=500");
        background-repeat: no-repeat;
        background-repeat: repeat-x;
        background-repeat: repeat-y;
        background-repeat: repeat;
    }
  </style>
背景位置

背景位置属性名用:background-position

    <style>
    div {
        height: 800px;
        width:1000px ;
        background-color: palevioletred;
        background-image: url("https://img0.baidu.com/it/u=3790884796,164977939&fm=253&fmt=auto&app=138&f=JPEG?w=794&h=500");
        background-repeat: no-repeat;
        background-position: center;
    }
  </style>

简写：
 background: palevioletred url("https://img0.baidu.com/it/u=3790884796,164977939&fm=253&fmt=auto&app=138&f=JPEG?w=794&h=500" ) no-repeat center;

边框属性

边框属性有：border-width、border-style、border-color

border-style的属性值 描述
none 无边框。
dotted 点状虚线边框。
dashed 矩形虚线边框。
solid 实线边框。 
  <style>
    div {
      height: 100px;
      width: 800px;
      background-color: greenyellow;

      border-left-color: palevioletred;
      border-left-width: 5px;
      border-left-style: dashed;

      border-top-color: palevioletred;
      border-top-width: 10px;
      border-top-style: dashed;

      border-left: palevioletred 5px dashed;
      border-top: palevioletred 10px dashed;
      border-right: rebeccapurple 4px solid;
      border-bottom: coral 8px solid;
    }
  </style>

border-radius

border-radius 用这个属性能实现圆角边框的效果。

  <style>
    p {
      height: 400px;
      width: 400px;
      background-color: orangered;
      border: 5px solid black;

      border-radius: 50%;
      background-image:url("https://img0.baidu.com/it/u=3790884796,164977939&fm=253&fmt=auto&app=138&f=JPEG?w=794&h=500" );
      background-position: center;
    }
  </style>

display属性

display属性用于控制HTML元素的显示效果

值 意义
display:"none" HTML文档中元素存在，但是在浏览器中不显示。一般用于配合JavaScript代码使用。
display:"block" 默认占满整个页面宽度，如果设置了指定宽度，则会用margin填充剩下的部分。
display:"inline" 按行内元素显示，此时再设置元素的width、height、margin-top、margin-bottom和float属性都不会有什么影响。
display:"inline-block" 使元素同时具有行内元素和块级元素的特点。

display:"none"

将标签隐藏起来

<p>
  <input type="text" >
</p>
<p>
  <input type="text" >
</p>
<p>
  <input type="text" name = 'name' value="nana" style="display: none">
</p>

display:"block"

使行内标签可以占几行(块儿级标签)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>block</title>
  <style>
    span {
      display: block;
    }
  </style>
</head>
<body>
  <span>123</span>
  <span>456</span>
  <span>789</span>
</body>
</html>

display:"inline"

使块儿级标签占一行(行内标签)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>inline</title>
  <style>
    p {
      display: inline;
    }
  </style>
</head>
<body>
<p>123</p>
<p>456</p>
<p>789</p>
</body>
</html>

display:"none"与visibility:hidden的区别

1.display:none: 可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>visibility:hidden</title>
  <style>
              div {
            height: 100px;
            background-color: red;
        }
  </style>
</head>
<body>
  <div>123</div>
  <div style="display: none">123</div>
  <div>123</div>
</body>
</html>
  1. visibility:hidden: 可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>visibility:hidden</title>
  <style>
              div {
            height: 100px;
            background-color: red;
        }
  </style>
</head>
<body>
  <div>123</div>
  <div style="visibility: hidden">123</div>
  <div>123</div>
</body>
</html>
posted @ 2022-08-23 20:03  DRAMA-娜娜  阅读(53)  评论(0)    收藏  举报