表单域/文本域/按钮/CSS选择器，类名，伪类/CSS样式命名三大特性/去除轮廓/鼠标小手/占位符

最新推荐文章于 2021-11-24 12:54:01 发布

喵帕斯_喵太

最新推荐文章于 2021-11-24 12:54:01 发布

阅读量656

点赞数

分类专栏：前端基础文章标签： css css3 html

本文链接：https://blog.csdn.net/miaopasi_poi/article/details/115028533

版权

前端基础专栏收录该内容

10 篇文章 0 订阅

订阅专栏

表单

表单的作用是手机用户信息的。
组成部分

表单域
表单控件
提示信息

<form>
    ...
</form>

表单元素

三大类

input 输入
select 选择
textarea 文本域

input

文本

<input  type="text" />

密码

<input  type="password" />

单选框

<input type="radio"   />

都是通过name来分组

男 <input type="radio" name="gender"  value="boy"  />
女 <input type="radio" name="gender"  value="girl" />

<br/>

今天穿蓝色衣服 <input type="radio" name="color" value="blue" />
今天穿红色衣服 <input type="radio" name="color" value="red" />
今天穿黄色衣服 <input type="radio" name="color" value="yellow" />

复选框

<input type="checkbox"   />


<h1>复选框 可以同时选择多个</h1>
<input type="checkbox"  value="a" checked >  蛋炒饭
<input type="checkbox"  value="b" checked >  火锅拉面
<input type="checkbox"  value="c" checked >  海底捞

    value 作用给到后台的  
    checked 选中
    单选框 name值一样

提交

<input type="submit" value="提交数据咯"   />

重置

<input type="reset" value="重置数据咯"   />

普通按钮

<input  type="button"  value="普通按钮"  />

（两种都属于按钮一般常用下面的书写方式）

<button>另一种普通按钮</button>

文件域上传按钮

<input  type="file"   />

label

文本提示标签

一般是搭配 input 标签一块使用的

作用是增大表单的响应区域当点击 文字提示的时候也会让 输入框 获得焦点

<label for="fale">男</label>
<input type="text"  id="fale" >

（两种书写方式下面为简写，建议用下方暂不考虑浏览器低版本兼容问题）

<label><input type="radio" name="">男</label>

select

下拉表单元素下拉框下拉列表

一个小标签可以藏着多种选项

select 是标签名
selected 是选中的属性

<select>
    <option>西瓜</option>
    <option>南瓜</option>
    <option>东瓜</option>
    <option selected  >麻瓜</option>
</select>

textarea
可以输入大段的文字可以用作留言板

<textarea>大段大段的文本框</textarea>

resize: none;  ///去除文本域拉动条，防止拖拽文本域。

去除点击表格框后边框默认轮廓

去除前加入outline:0(none);前加入outline:0;前
去除后加入outline:0(none);后
加入outline:0;后

outline：0；

移上去变小手图标

cursor:pointer;

占位符

placeholder=“这里写什么就会显示什么，鼠标点击输入文字后会消失”

 <input type="text" placeholder="输入关键字">

分割线

css 三大特性
层叠
继承
优先级
层叠性

用来说明多个样式共同作用于一个标签的时候如何生效

不同的样式都起作用
相同的样式按照某些规则 来决定谁生效
继承性

简单理解为子元素和继承父元素的某些样式

字体颜色
- color
字体相关的属性会被继承
- font-size
文本相关的属性会被继承
- text-align
优先级

标签会按照优先级来决定那一句样式代码生效

权重

选择器	权重
继承或 `*`	`0,0,0,0`
标签选择器	`0,0,0,1`
类选择器 / 伪类选择器	`0,0,1,0`
id 选择器	`0,1,0,0`
行内样式	`1,0,0,0`
`!important`	`∞`

（这个Visual Studio Code 会自带显示一般不用记忆。）

标签选择器

div {
    color:red;
}

类选择器

.nav {
    color:red;
}

子代选择器符号是 >

子标签：必须是当前的标签的下一级必须是子代

  <title>Document</title>
    <style>
        .box>span {
            color: skyblue;
            /* 只会生效 box的子代 命令 */
        }
    </style>
</head>

<body>
    <div class="box">
        <span>box的子代</span>
        <div>
            <span>box的后代</span>
        </div>
    </div>
    <span>box的兄弟</span>

并集选择器（分组选择器）：用逗号隔开

<title>Document</title>
    <style>
  p,
        .nav,
        .box,
        h3 {
            /* 定义了一个并集选择器 将带有 p, class="nav",h3, class="box",标签的字体转换成红色  */
            color: red;
        }

        .nav .nav-b,
        .nav-d,
        .box-a .box-b,
        .box-d {
            /* 定义了一个并集选择器 将class="nav"里面的class="nav-b",class="nav-d"和class="box-a"里面的class="box-b",class="box-d"变成蓝色 */
            color: aquamarine;
        }
    </style>
</head>

<body>
    <p>并集选择器</p>
    <h1 class="nav">并集选择器
        <div class="nav-a">
            <div class="nav-b">并集选择器</div>
            <div class="nav-c">并集选择器</div>
            <div class="nav-d">并集选择器</div>
        </div>
    </h1>
    <h2>并集选择器</h2>
    <h3>并集选择器</h3>
    <h4 class="box-a">并集选择器
        <div class="box-b">并集选择器</div>
        <div class="box-c">并集选择器</div>
        <div class="box-d">并集选择器</div>
    </h4>
</body>

</html>

- id 选择器

#nav {
1. 样式 # 定义
2. 结构 id 调用
3. 一次设定只能给一个标签调用一次
4. 别人勿使用
    }

- 通配符选择器

* {
	margin:0;
	padding:0;
}

伪类选择器符号是 :
a:link 未被访问过少用
a:visited 已经被访问过少用
a:hover 鼠标移入的时候常用
a:active 鼠标按下还没有抬起的时候少用
记忆方法爱恨 love hate

- E[attr] 表示存在attr属性即可找到

<title>Document</title>
    <style>
        /* 通过属性选择器来给有name属性的元素设置样式*/
        div[name] {
                color:red;
        }
    </style>
</head>
<body>
    <!--①创建div标签，并设置name属性，值为空-->
    <div name="">选择器</div>
    <!--②创建第二个div标签，没有设置name属性-->
    <div>选择器</div>
</body>
</html>

[attribute] 选择器

[attribute] 选择器用于选取带有指定属性的元素。

选择所有带有 target 属性的元素；

<title>Document</title>
  <style>
   a[target] {
 <!-- 带有a标签里含 target 属性的链接获得颜色背景 -->
  background-color: red;
}
a[arget=_blank] {
<!-- 带有a标签里含 arget=_blank] 属性的链接获得颜色背景 -->
 background-color: red;
}
</style>
</head>
<body>
<a href="https://www.baidu.com">百度</a>
<a href="http://www.baidu.com" target="_blank">百度</a>
<a href="http://www.baidu.com" target="_Top">百度</a>
</body>
</html>

CSS [attribute~=“value”] 选择器

[attribute~=“value”] 选择器选取属性值包含指定词的元素。

下例选取 title 属性包含 “flower” 单词的所有元素：
注意{会匹配以下属性的元素：title=“flower”、title=“summer flower” 以及 title=“flower new”，但不匹配：title=“my-flower” 或 title=“flowers”。}

<title>Document</title>
<head>
    <style>
            [title~=flower] {
            border: 5px solid red;
        }
    </style>
</head>
<body>
     <!-- title 属性包含 "flower" 的所有图像会有红色边框。-->

    <img src="图片路径" title="klematis flower" >
    <img src="图片路径" title="flower" >
    <img src="图片路径" title="tree" >

</body>
</html>

CSS [attribute|=“value”] 选择器

[attribute|=“value”] 选择器用于选取指定属性以指定值开头的元素。

下例选取 class 属性以 “top” 开头的所有元素：

注释：值必须是完整或单独的单词，比如 class=“top” 或者后跟连字符的，比如 class=“top-text”。
所以下面的例子只会选取 class=“top-header” 和 class="top-text"生效

<style>
[class|=top] {
  background: red;
}
</style>
</head>
<body>

<h1 class="top-header">W值必须是完整或单独的单词</h1>
<p class="top-text">值必须是完整或单独的单词</p>
<p class="topcontent">值必须是完整或单独的单词</p>

</body>
</html>

CSS ## [attribute^=“value”] 选择器

用于选取指定属性以指定值开头的元素。
值不必是完整单词！（与上面 [attribute|=“value”] 选择器选取的值值必须是完整或单独的单词区分开）

<style>
[class^="top"] {
  background: red;
}
</style>
</head>
<body>
 <!-- 这里会选取所有 执行命令 因为首字母单词是top 。-->
<h1 class="top-header">值不必是完整单词！</h1>
<p class="top-text">值不必是完整单词！</p>
<p class="topcontent">值不必是完整单词！</p>

</body>
</html>

CSS [attribute$=“value”] 选择器

[attribute$=“value”] 选择器用于选取指定属性以指定值结尾的元素。

下例选取 class 属性以 “test” 结尾的所有元素：
注意：值不必是完整单词！

<style> 
[class$="test"] {
  background: red;
}
</style>
</head>
<body>
<!-- 这里不会执行 class="second" 因为没有所定选择器值 test -->
<div class="first_test">值不必是完整单词！</div>
<div class="second">值不必是完整单词！</div>
<div class="my-test">值不必是完整单词！</div>
<p class="mytest">值不必是完整单词！</p>

</body>
</html>

CSS [attribute*=“value”] 选择器

[attribute*=“value”] 选择器选取属性值包含指定词的元素。

下例选取 class 属性包含 “te” 的所有元素：
注意：值不必是完整单词！

<style> 
[class*="te"] {
  background:red;
}
</style>
</head>
<body>
<!-- 这里不会执行 lass="second" 因为没有所定选择器值 te -->
<div class="first_test">值不必是完整单词！</div>
<div class="second">值不必是完整单词！</div>
<div class="my-test">值不必是完整单词！</div>
<p class="mytest">值不必是完整单词！</p>

</body>
</html>

不用class或ID选择器，采用属性选择器来制作表单表格

input[type="text"] {
<!-- 这里只会选择input里面的text进行执行 -->
  width: 150px;
  display: block;
  margin-bottom: 10px;
  background-color: red;
}

input[type="button"] {
<!-- 这里只会选择input里面的button进行执行 -->
  width: 120px;
  margin-left: 35px;
  display: block;
}

结构伪类选择器

第一个 li:first-child
最后一个 li:last-child
第n个 li:nth-child(n)
奇数 li:nth-child(odd)
偶数 li:nth-child(even)
前几个 li:nth-child(-n+几 )
从第几个开始 li:nth-child(n+几)
几的倍数 li:nth-child(几n) 注：几的倍数就在N前写几。
后几个 li:nth-last-child(-n+几) 注：后面几个就在更改数字。

CSS样式命名（参考）

CSS样式命名	说明
wrapper	页面外围控制整体布局宽度
container或content	容器,用于最外层
layout	布局
head, header	页头部分
foot, footer	页脚部分
nav	主导航
sub_nav	二级导航
menu	菜单
sub_menu	子菜单
side_bar	侧栏
sidebar_l, sidebar_r	左边栏或右边栏
main	页面主体
tag	标签
msg message	提示信息
tips	小技巧
vote	投票
friendlink	友情链接
title	标题
summary	摘要
login_bar	登录条
search_input	搜索输入框
hot	热门热点
search	搜索
search_output	搜索输出和搜索结果相似
search_bar	搜索条
search_results	搜索结果
copyright	版权信息
branding	商标
logo	网站LOGO标志
site_info	网站信息
site_info_legal	法律声明
site_info_credits	信誉
join_us	加入我们
partner	合作伙伴
service	服务
regsiter	注册
arr arrow	箭头
guild	指南
site_map	网站地图
list	列表
home_page	首页
sub_page	二级页面子页面
tool, toolbar	工具条
drop	下拉
dorp_menu	下拉菜单
status	状态
scroll	滚动
tab	标签页
left right center	居左、中、右
news	新闻
download	下载
banner	广告条(顶部广告条)

喵帕斯_喵太

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
表单域/文本域/按钮/CSS选择器，类名，伪类/CSS样式命名三大特性/去除轮廓/鼠标小手/占位符

表单表单的作用是手机用户信息的。组成部分表单域表单控件提示信息<form> ...</form>表单元素三大类input 输入select 选择textarea 文本域input文本<input type="text" />密码<input type="password" />单选框<input type="radio" />都是通过name来分组..
复制链接

扫一扫