前端-(2)

菜鸟笔记 2022-08-26

内容概览

  • 表单标签知识补充
  • 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” 使元素同时具有行内元素和块级元素的特点。
html前端前端

相关文章

如何学习编程？新手菜鸟如何学编程？
学习编程是顺着互联网的发展潮流，是一件好事。新手如何学习...
it行业都是什么工作？it行业主要做什么？
IT行业是什么工作做什么？IT行业的工作有：产品策划类、页面...
女生学Java好就业吗？女生适合学Java编程吗？
女生学Java好就业吗？女生适合学Java编程吗？目前有不少女生...
mysql-connect-confused
Can’t connect to local MySQL server through socket \'/v...
oracle基本命令
oracle基本命令 一、登录操作 1.管理员登录 # 管理员登录 ...
shell判断服务是否启动
一、背景 因为项目中需要通北京网络，所以需要连vpn，但是服...