【HTML+CSS】表单和选择器

芒果Cake

已于 2022-12-01 09:08:52 修改

阅读量467

点赞数 1

分类专栏： HTML 文章标签： css css3 html

于 2022-11-16 19:56:52 首次发布

本文链接：https://blog.csdn.net/huangwfu/article/details/127892074

版权

HTML 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

表单基础

表单作用：收集用户信息
表单分为：表单域form、表单控件input
表单特点：单标签、不独占一行
注意：表单控件不能脱离表单域

表单控件的类型
1. type=“text”文本输入框
2. type=“password”密码框
3. type=“submit”提交按钮
4. type=“reset”重置按钮
5. type=“button”普通按钮
初始值

value=“初始值”value可以是文本输入框的初始值，也可以是按钮的名字

提示文字

placeholder =“请输入”

最大长度

maxlength=“5”

<form action="">
        <p>
            <input type="text">
            <input type="text" value="佳佳的input">
            <input type="text" placeholder="输入姓名">
            <input type="text" maxlength="5">
        </p>
        <p>
            <input type="password">
            <input type="password" value="密码123456">
            <input type="password" placeholder="输入密码">
            <input type="password" maxlength="5">
        </p>
        <p>
            <input type="submit" value="这是提交按钮">
            <input type="reset" value="这是重置">
            <input type="button" value="普通按钮">
        </p>
    </form>

action属性

数据提交之后的跳转地址

method属性

数据提交的方式，有两种。默认是get用于获取数据，post用于发送数据
get和post的区别：

  1. get发送的数据会明文显示在地址栏上，相对不安全。get发送数据还有大小限制
  2. post不会显示在地址栏上，相对安全。post发送数据没有大小限制

<form action="./start.html" method="post">
        <input type="text" name="user" placeholder="用户名"><br>
        <input type="password" name="pswd" placeholder="密码"><br>
        <input type="submit" value="登录">
    </form>

css样式基础

w3c推荐我们使用css的方式来取代html属性
css页面表现，层叠样式表
他是专门来修饰页面内容的，比如内容的文字，颜色，大小间距，或者添加动画等等

html属性的缺点:

代码变得很杂乱
样式只能修饰改标签，复用性很差
样式需要修改的时候，不利于维护的

css语法

选择器+声明
选择器：要添加样式的对象
声明：样式属性+属性值
选择器｛
属性1：属性值1；
属性2：属性值2；
……
｝

简单的属性

width：宽度px；
hieght：高度px；
background-color：背景色；
小结：

先写html，再写样式
所有的符号都是英文的
声明的分号不能忘记
只有最后一条声明可以不写分号

样式表

内部样式表

在html文件的head标签里面用style标签来书写样式

外部样式表1

需要在外面建立一个css文件（例如test.css)，在里面书写css代码
和html我呢间建立联系
1. 在html文件中head标签里面的最下面用link标签引入
2. rel=“stylesheet”关联外部样式表，必须写
3. href=“”路径，必须写

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>123123</title>
    <link rel="stylesheet" href="./test.css">
</head>

外部样式表2

需要在外面建立一个css文件（例如test.css），在里面书写css代码
和html文件建立联系，在html文件中的head标签里面最下面

用style 里面@import url（./test.css）

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>123123</title>
    <style>
        @import url(./test.css);
    </style>
</head>

样式表权重

css的内部样式表、行内样式表、外部样式表

行内样式权重最大，内部样式表和外部样式表看书写顺序，谁在下，谁优先

标签选择器

标签选择器，标记+元素+类型
语法：标签名字｛｝，例如div｛｝p｛｝h1｛｝
作用：选择相同的选择器

<style>
        p {
            background-color: skyblue;
        }
        div {
            background-color: skyblue;
        }
        h1 {
            background-color: skyblue;
        }
</style>

类选择器

class选择器也叫类选择器

class名字的规则

可以使英文，连字符-，下划线_，英文字母开头
不可以数字开头
一般不可以出现中文和特殊字符
不能是关键字
严格区分大小写
尽量见名知义
多个单词连接可以-_或者驼峰命名
类名可以写长一点，避免重复

简单的属性

width:宽度
height:高度
bgc:背景色
color:文本颜色
font-size:字体大小

群组选择器

语法：选择符1，选择符2，选择符3…{属性：属性值;}

<style>
        .box1,.box2{
            background-color: red;
          	font-size: 30px;
        }
</style>
<body>
    <div class="box1">div1</div>
  	<div class="box2">div1</div>
</body>

通配符/通配选择器

通配选择符的写法是“*”，其含义就是所有元素。

语法：{属性：属性值；}
扩展：{margin:0; padding:0;}代表清除所有元素的默认边距值和填充值；

<style>
        *{
            padding: 0;
            margin: 0;
        }
</style>

包含选择器/后代选择器

语法：选择符1 选择符2 {属性：属性值;}
说明：含义就是选择符1中包含的所有选择符2;
用法：当我的元素存在父级元素的时候，我要改变自己本身的样式，可以不另加选择符，直接用包含选择器的方式解决。

<style>
        ul li{
            background-color: aqua;
        }
</style>

后代群组选择器

<style>
        .box .child1,.box .child2{
            background-color: blueviolet;
        }
</style>
<div class="box">
        <div class="child1">123123</div>
        <div class="child2">123123</div>
</div>

子代选择器

后面的选择器必须是前面选择器的子代
最终作用到最后一个选择器身上

<style>
        span>p>a{
            background-color: red;
        }
</style>
<span>
        <p>
            <a href="">12321</a>
        </p>
        <p>555555</p>
</span>