前端-(2)

分类：菜鸟笔记作者：AL_QX

内容概览

  • 表单标签知识补充
  • CSS层叠样式表
  • CSS选择器
  • 字体样式
  • 背景属性
  • 边框属性
  • display属性

表单标签知识补充

  1. 获取用户输入的标签两大重要的属性
    name属性：类似于字典的键
    value属性：类似于字典的值
    form表单往后端发送数据的时候，标签必须要有name，否则不会发送该标签的值
  2. 获取用户输入的input标签理论上需要有label配合使用
    <label for="input的id值"></label>
<input type="text" name="" id="">
<!--可以直接使用id绑定,也可以将input写在label中-->
  3. 获取用户输入的input标签可以添加背景提示
    <input type="text" name="username" placeholder="用户名">
  4. 获取用户输入的标签如果不会让用户传入值，那么value值需要提前填写
    <input type="radio" name="gender" value="male">男
<input type="checkbox" name="hobby" value="basketball">篮球
<select name="province">
	<option value="sh">上海</option>
</select>
<!--单选、多选和下拉框用户只是选择,不会输入具体的值,所以需要提前写好
日期与文件等都会传入具体值,所以不用提前写好-->
  5. 针对radio和checkbox可以默认选中
    <input type="radio" name="gender" value="male" checked="checked">男
<input type="radio" name="gender" value="female">女
<!--如果属性名和属性值相等,可以简写成一个 checked="checked"==checked-->
  6. 针对select也可以默认选中
    <select name="province">
	<option value="bj">北京</option>
	<option value="sh" selected>上海</option>
</select>
<!--selected也是由selected="selected"简化而来-->

CSS层叠样式表

  1. 调整标签样式
  2. 语法结构
    选择器 {
    属性名1:属性值1;
    属性名2:属性值2;
    }
  3. 注释语法
    /*注释*/
  4. 三种编写CSS的方式
    1. head中style标签内部编写
    2. head中link标签引入外部文件(最正规)
    3. 直接在标签内部通过style属性编写(不推荐)

CSS选择器

基本选择器

1. 标签选择器
div {
	color: green;  /*查找所有div标签,并将字体改为绿色*/
}

2. 类选择器
.c1 {
	color: red;  /*查找所有class属性中含有c1的标签,并将字体改为红色*/
}

3. id选择器
#d1 {
	color: blue;  /*查找到id值为d1的标签,并将字体改为蓝色*/
}

4. 通用选择器
* {
	color: yellow;  /*查找所有标签,并将字体改为黄色*/
}

组合选择器

  1. 标签之间的关系：
    • 后代：当前标签内嵌套的所有标签
    • 儿子：当前标签内嵌套的第一层标签
    • 毗邻：当前标签同级别的下边第一个标签
    • 弟弟：当前标签同级别的下边所有标签
  2. 组合选择器
    <div id="d1">
	<p>儿子
		<span>后代</span>
	</p>
	<span>儿子</span>
</div>
<p>毗邻</p>
<span>弟弟</span>
1. 后代选择器:两个选择器之间空格隔开,查找前边选择器获取到的标签内部所有符合后边选择器条件的标签
<style>
	#d1 span {
		color: blue;
	}
</style>
2. 儿子选择器:两个选择器之间大于号隔开,查找前边选择器获取到的标签内部下第一层符合后边选择器条件的标签
<style>
	#d1>span {
		color: orange;
	}
</style>
3. 毗邻选择器:两个选择器之间加号隔开,查找前边选择器获取到的标签下紧挨着的第一个标签,而且该标签要符合后边选择器的条件
<style>
	#d1+p{
		color: red;
	}
</style>
4. 弟弟选择器:两个选择器之间波浪号隔开,查找前边选择器获取到的标签下边所有符合后边选择器条件的标签
<style>
	#d1~span {
		color: blue;
	}
</style>

属性选择器

所有的标签除了有本身默认的属性之外，还可以拥有自定义的任意属性
默认属性：id、class
自定义属性：a=1、b=2

<style>
1. 查找含有name属性的标签,并修改背景颜色
		[name] {
			background-color: red;
		}
2. 查找含有name属性并且值是username的标签,并修改背景颜色
		[name="username"] {
			background-color: orange;
		}
3. 查找input标签,并且含有属性名name值为username,修改背景颜色
		input[name="username"] {
			background-color: aqua;
		}
</style>

分组与嵌套

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

div,p,span {
	color: red;
}

合并的选择器彼此互不干扰，可以使用任意类型

#d1,.c1,span {
	color: red;
}

可以在选择器的基础上添加额外的条件，让查找更精确

span.c1 {  /*查找所有span标签,class中有c1的标签*/
	color: red;
}

伪选择器

a标签默认有两种颜色，紫色和蓝色
紫色是访问过的链接地址
蓝色是没有访问过的链接地址

1. 没有访问过的链接
a:link {
	color: darkgoldenrod;
}
2. 鼠标悬停在链接上
a:hover {
	color: azure;
}
3. 点击链接时
a:active {
	color: blank;
}
4. 已访问过的链接
a:visited {
	color: darkgreen;
}
选择器 说明
link 没有访问过的链接
hover 鼠标悬停在链接上
active 点击链接时
visited 已访问过的链接

伪元素选择器

通过css代码来操作标签的文本内容

p:first-letter {
	font-size: 48px;
	color: red;
}  /*将p标签中第一个字修改字体大小,并修改为红色*/
p:before {
	content:"p标签之前插入内容";
	color: red;
}
p:after {
	content:"p标签之后插入内容";
	color: red;
}
/*伪元素选择器可以用在解决标签浮动所带来的负面影响,也可以用来做数据的防爬*/
选择器 说明
first-letter 首字母
before 在之前做操作
after 在之后做操作

选择器优先级

  1. 当选择器相同，引入位置不同时
    按照执行顺序，最终结果为最后执行的命令修改
  2. 当选择器不同，引入位置相同时
    id选择器>类选择器>标签选择器

行内样式优先级最高
!important可强制修改标签样式，但不推荐使用

字体样式

width属性可以设置元素宽度
height属性可以设置元素高度
块级标签才能够修改，行内标签完全由内容决定

  1. 字体属性
    1. 字体
body {
	font-family: "微软雅黑"
}  /*修改body内的字体*/
2. 字体大小
p {
	font-size: 14px;
}  /*修改p标签内字体大小*/
3. 字体粗细
p {
	font-weight: lighter;
}  /*将p标签内字体修改为更细的字体*/
4. 字体颜色
p {
	color: red;
	color: rgb(51,51,51);
	color: #333333;
}
/*修改字体颜色除了可以直接使用英文,还可以使用RGB三原色、十六进制值
还有rgba,第四个值控制的是透明度,范围从0.0-1.0*/
    值 描述
    normal 默认值，标准粗细
    bold 粗体
    bolder 更粗
    lighter 更细
    100~900 设置具体粗细，400等同于normal，而700等同于bold
  2. 文字属性
    3. 文字对齐
p {
	text-align:center;
}  /*将文字居中*/
4. 文字装饰
a {
	text-decoration: none;
}  /*使a标签不使用下划线作为装饰*/
5. 首行缩进
p {
	text-indent: 32px;
}  /*首行缩进32个像素,一个字默认大小为16像素*/
    值 描述
    left 左边对齐 默认值
    right 右对齐
    center 居中对齐
    none 默认，定义标准的文本
    underline 定义文本下的一条线
    overline 定义文本上的一条线
    line-through 定义穿过文本下的一条线

背景属性

1. 背景颜色
div {
	background-color: red;
}
2. 背景图片
div {
	background-image: url(图片地址);
}
/*
背景图片如果大小比标签背景小,默认会重复平铺满整个区域
repeat(默认)：图片平铺排满整个网页
repeat-x：图片只在水平方向上铺满
repeat-y：图片只在垂直方向上铺满
no-repeat：图片不平铺
*/
3. 背景位置
div {
	background-position: center;
}
4. 简写
div {
	background: #333333 url("1.jpg") no-repeat lift top
}

边框属性

#d1 {
	border-width: 2px;  /*边框宽度*/
	border-style: solid;  /*边框类型*/
	border-color: red;  /*边框颜色*/
}
简写：
	border: 2px solid red;

单独设置指定边框
#d1 {
	border-left-color: red;
	border-top-color: bule:
	border-right-color: blank;
	border-bottom-color: green;
}

border-radius
用这个属性可以实现圆角边框的效果
	border-radius: 50%;
值 描述
none 无边框。
dotted 点状虚线边框
dashed 矩形虚线边框
solid 实线边框

display属性

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

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

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 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