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

分类：菜鸟笔记作者：m0_56371364

表单标签补充知识

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>

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

html前端前端前端前端

相关推荐

如何学习编程？新手菜鸟如何学编程？
学习编程是顺着互联网的发展潮流，是一件好事。新手如何学习编程？其实不难，不过在学习编程之前你得先了解你的目的是什么？这个很重要，因为目的决定你的发展方向、决定你的发展速度。
it行业都是什么工作？it行业主要做什么？
IT行业是什么工作做什么？IT行业的工作有：产品策划类、页面设计类、前端与移动、开发与测试、营销推广类、数据运营类、运营维护类、游戏相关类等，根据不同的分类下面有细分了不同的岗位。
女生学Java好就业吗？女生适合学Java编程吗？
女生学Java好就业吗？女生适合学Java编程吗？目前有不少女生学习Java开发，但要结合自身的情况，先了解自己适不适合去学习Java，不要盲目的选择不适合自己的Java培训班进行学习。只要肯下功夫钻研，多看、多想、多练
mysql-connect-confused
Can’t connect to local MySQL server through socket \'/var/lib/mysql/mysql.sock问题 1.进入mysql路径
oracle基本命令
oracle基本命令 一、登录操作 1.管理员登录 # 管理员登录 sqlplus / as sysdba 2.普通用户登录
shell判断服务是否启动
一、背景 因为项目中需要通北京网络，所以需要连vpn，但是服务器有时候会断掉，所以写个shell脚本每五分钟去判断是否连接，于是就有下面的shell脚本。
SQL BETWEEN 操作符
BETWEEN 操作符选取介于两个值之间的数据范围内的值。这些值可以是数值、文本或者日期。
​​windows上传ipa到开发者中心app store的方法
假如你已经使用过苹果开发者中心上架app，你肯定知道在苹果开发者中心的web界面，无法直接提交ipa文件，而是需要使用第三方工具，将ipa文件上传到构建版本，开...
SQL 入门篇之什么是别名？
下面的 SQL 语句指定了两个别名，一个是 name 列的别名，一个是 country 列的别名。**提示：**如果列名称包含空格，要求使用双引号或方括号：
windows上传ipa文件到app store的方法​
在使用H5混合开发的app打包后，需要将ipa文件上传到appstore进行发布，就需要去苹果开发者中心进行发布。​
SQL AND & OR 运算符
+----+--------------+---------------------------+-------+---------+
C++ 数组
数组的声明并不是声明一个个单独的变量，比如 number0、number1、...、number99，而是声明一个数组变量，比如 numbers，然后使用 nu...
最全iOS 应用上架流程提交到AppStore
第一步：到appuploader官网下载辅助工具和iCloud驱动，使用前面创建的AppID登录。
SQL ALTER TABLE 语句
如需删除表中的列，请使用下面的语法（请注意，某些数据库系统不允许这种在数据库表中删除列的方式）：
dism操作巨慢
前不久在制作win11pe，制作了一版，1.26GB，太大了，不满意，想再裁剪下，发现这次dism mount正常，commit或discard巨慢，以前都很快...
三种方法卸载Symantec Endpoint Protection 赛门铁克
赛门铁克各个版本概览：https://knowledge.broadcom.com/external/article?legacyId=tech163829
python3.6、python3.10用什么版本的pip
实测Python 3.6.6用pip 21.3.1，再高就报错了，Python 3.10.7用pip 22.3.1是可以的
博通和诺顿
Broadcom Corporation （博通公司，股票代号AVGO）是全球领先的有线和无线通信半导体公司。其产品实现向家庭、 办公室和移动环境以及在这些环境...
高版本c4d在低版本windows系统上打开后不显示窗格
发现个问题，server2016上安装了c4d这些版本，低版本的正常显示窗格，但红色圈出的高版本c4d打开后不显示窗格，
基础网络windows不要使用TAT、如何卸载TAT
TAT：https://cloud.tencent.com/document/product/1340
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot