随笔- 71 文章- 17 评论- 0 阅读- 5326

- 表单标签知识补充
CSS

表单标签知识补充

1.获取用户输入的标签两大重要的属性

name属性：类似于字典的键
value属性：类似于字典的值

form表单在朝后端发送数据的时候便签必须要有name，否则不会发送该标签的值

2.获取用户输入的input标签理论上需要有label配合使用

 <label for="某个input标签的id值"></label>

3.获取用户输入的input标签也可以添加背景提示

 <input type="text" name="password" placeholder="密码">

4.获取用户输入的标签如果不是让用户自己写而是选择那么标签需要自己写value

 <input type="radio" name="gender" value="male">男
<input type="checkbox" name="hobby" value="basketball">篮球
<select name="province" id="">
<option value="sh">上海</option>

5.针对radio和checkbox可以默认选中

  checked="checked" 如果属性名和属性值相等 那么可以简写  checked

6.针对option标签也可以默认选中

 selected="selected" 简写为 selected

CSS

一、CSS介绍

CSS（Cascading Style Sheet，层叠样式表)定义如何显示HTML元素。

当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）

二、CSS语法

1.CSS实例

每个CSS样式由两个组成部分：选择器和声明。声明又包括属性和属性值。每个声明之后用分号结束

语法结构

 选择器 {
    属性名1:属性值1;
    属性名2:属性值2;
}

2.CSS注释

注释是代码之母

 /*注释*/

三、CSS引入方式

1.行内样式

行内式是在标记的style属性中设定CSS样式。不推荐大规模使用

 <p style="color: red">Hello world.</p>

2.内部样式

嵌入式是将CSS样式集中写在网页的< head>< /head>标签对的< style>< /style>标签对中

 <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            background-color: #2b99ff;
        }
    </style>
</head>

3.外部样式

外部样式就是将css写在一个单独的文件中，然后在页面进行引入即可。推荐使用此方式

 <link href="mystyle.css" rel="stylesheet" type="text/css"/>

四、CSS选择器

1.基本选择器

1.1.标签选择器

直接编写标签名来查找标签

 div {
    color: green;  /*查找所有的div标签 并将内部的文本颜色变为绿色*/
}

1.2.类选择器

通过编写class的值来查找标签

 .c1 {
    color:red;  /*查找所有class属性中含有c1的标签 并将内部的文本颜色变为红色*/
}

1.3.id选择器

通过编写id的值来精确查找标签

 #d1 {
    color: aquamarine;  /*查找id值是d1的标签 并将内部的文本颜色改为天青色*/
}

1.4.通用选择器

查找所有的标签

 * {
    color: blue;  /*查找所有的标签 并将内部的文本颜色改为蓝色*/
}

注意：

样式类名不要用数字开头（有的浏览器不认）
标签中的class属性如果有多个，要用空格分隔

2.组合选择器

2.1.后代选择器

两个选择器之间空格隔开查找前面选择器获取到的标签内部所有符合空格后面选择器要求的标签

 /*查找div标签内部所有的span(后代)*/
#d1 span {
    color: blue;
}

2.2.儿子选择器

两个选择器之间大于号隔开查找前面选择器获取到的标签内部第一层级符合大于号后面选择器要求的标签

 /*查找div标签内部所有的儿子span*/
#d1>span {
    color: orange;
}

2.3.毗邻选择器

 /*查找div标签同级别下面紧挨着的一个span标签(弟弟)*/
#d1+span {
    color: red;
}

2.4.弟弟选择器

 /*查找div标签同级别下面所有的span标签(弟弟们)*/
#d1~span {
    color: blue;
}

3.属性选择器

所有的标签除了有自己默认的属性之外还可以拥有自定义的任意属性

默认属性：id、class
自定义属性：x=1、y=2

3.1.查找属性名含有name的标签

 [name] {
    background-color: red;
}

3.2.查找属性名含有name并且值是username的标签

 [name='username'] {
    background-color: orange;
}

3.3.查找input标签并且属性名含有name值是username的标签

 input[name='username'] {
    background-color: aqua;
}

注意：前面的选择器可以是任意类型的标签、id、class

4.分组嵌套

4.1.分组

当多个元素的样式相同的时候，我们没有必要重复地为每个元素都设置样式，我们可以通过在多个选择器之间使用逗号分隔的分组选择器来统一设置元素样式

 div, p {
    color: red;
}

4.2.嵌套

多种选择器可以混合起来使用

 /*.c1类内部所有p标签设置字体颜色为红色*/
.c1 p {
    color: red;
}

5.伪类选择器

 /* 未访问的链接 */
a:link {
    color: #FF0000
}
 
/* 鼠标移动到链接上 */
a:hover {
    color: #FF00FF
} 
 
/* 选定的链接 */ 
a:active {
    color: #0000FF
}
 
/* 已访问的链接 */
a:visited {
    color: #00FF00
} 
 
/*input输入框获取焦点时样式*/
input:focus {
    outline: none;
    background-color: #eee;
}

6.伪元素选择器

伪元素选择器通过css代码来操作标签的文本内容，可以用在解决标签浮动所带来的的负面影响，也可以用来做数据的防爬

6.1.first-letter

常用的给首字母设置特殊样式

 p:first-letter {
    font-size: 48px;
    color: red;
}

6.2.before

在每个元素之前插入内容

 /*在每个<p>元素之前插入内容*/
p:before {
    content:"我不好这口!";
    color:red;
}

6.3.after

在每个元素之后插入内容

 /*在每个<p>元素之后插入内容*/
p:after {
    content:"雨化田喜欢洗脚";
    color:blue;
}

注意：before和after多用于清除浮动

7.选择器优先级

7.1.CSS继承

继承是CSS的一个主要特征，它是依赖于祖先-后代的关系的。继承是一种机制，它允许样式不仅可以应用于某个特定的元素，还可以应用于它的后代。例如一个body定义了的字体颜色值也会应用到段落的文本中

 body {
    color: red;
}

此时页面上所有标签都会继承body的字体颜色。然而CSS继承性的权重是非常低的，是比普通元素的权重还要低的0

我们只要给对应的标签设置字体颜色就可覆盖掉它继承的样式

 p {
    color: green;
}

此外，继承是CSS重要的一部分，我们甚至不用去考虑它为什么能够这样，但CSS继承也是有限制的。有一些属性不能被继承，如：border，margin，padding，background等

7.2.选择器优先级

选择器相同引入位置不同：就近原则
选择器不同的情况：行内 > id选择器 > 类选择器 > 标签选择器

除此之外还可以通过添加 !important方式来强制让样式生效（不推荐使用，如果过多的使用!important会使样式文件混乱不易维护）

CSS 中的!important规则用于为属性/值添加比正常情况更多的重要性。如果使用该!important规则，它将覆盖该元素上该特定属性的所有先前样式规则（不推荐使用，如果过多的使用!important会使样式文件混乱不易维护）

 #myid {
    background-color: blue;
}
 
.myclass {
    background-color: gray;
}
 
p {
    background-color: red !important;
}

在上面的例子中。即使 id选择器和类选择器具有更高的特异性，所有三个段落都将获得红色背景色。在这两种情况下，该!important规则都会覆盖该 background-color属性。

注意：除非绝对必须，否则不要使用!important

五、CSS相关属性

1.宽高

width属性：为元素设置宽度

height属性：为元素设置高度

注意：块级标签才能设置宽度，内联标签的宽度由内容来决定

2.字体属性

2.1.文字字体

font-family可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。浏览器会使用它可识别的第一个值

 body {
    font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif
}

2.2.字体大小

 p {
    font-size: 14px;
}

如果设置成inherit表示继承父元素的字体大小值

2.3.字体粗细

font-weight用来设置字体的字重（粗细）

 p {
    font-weight:lighter;
}

值	描述
normal	默认值，标准粗细
bold	粗体
bolder	更粗
lighter	更细
100~900	设置具体粗细，400等同于normal，而700等同于bold
inherit	继承父元素字体的粗细值

2.4.文本颜色

颜色属性被用来设置文字的颜色。

颜色是通过CSS最经常的指定：

十六进制值 - 如: ＃FF0000
一个RGB值 - 如: RGB(255,0,0)
颜色的名称 - 如: red

还有rgba(255,0,0,0.3)，第四个值为alpha, 指定了色彩的透明度/不透明度，它的范围为0.0到1.0之间

 p {
    color:red;
    color:rgb();
    color:#3e3e3e;
    color:rgba(1,1,1,0.5)
}

2.5.文字对齐

text-align 属性规定元素中的文本的水平对齐方式

值	描述
left	左边对齐，默认值
right	右对齐
center	居中对齐
justify	两端对齐

 p {
    text-align:center;
}

2.6.文字装饰

text-decoration 属性用来给文字添加特殊效果

值	描述
none	默认，定义标准的文本
underline	定义文本下的一条线
overline	定义文本上的一条线
line-through	定义穿过文本下的一条线
inherit	继承父元素的text-decoration属性的值

常用的为去掉a标签默认的自划线

 a {
    text-decoration: none;
}

2.7.首行缩进

 p {
    text-indent: 32px;
}

3.背景属性

background-color：背景颜色
background-image：背景图片
background-repeat：背景重复
background-position：背景位置

背景重复属性	描述
repeat	默认值，背景图片平铺排满整个网页
repeat-x	背景图片只在水平方向上平铺
repeat-y	背景图片只在垂直方向上平铺
no-repeat	背景图片不平铺

 background-color: red;
background-image: url('1.jpg');
background-repeat: no-repeat; 
background-position: left top;
background-position: 200px 200px;
 
/*简写*/
background:#336699 url('1.png') no-repeat left top;

4.边框属性

border-width：边框宽度
border-style：边框样式
border-color：边框颜色
border-radius：圆角边框

 #i1 {
  border-width: 2px;
  border-style: solid;
  border-color: red;
}
 
/*通常使用简写方式*/
#i1 {
  border: 2px solid red;
}

边框样式

值	描述
none	无边框。
dotted	点状虚线边框。
dashed	矩形虚线边框。
solid	实线边框。

除了可以统一设置边框外还可以单独为某一个边框设置样式，如下所示：

 #i1 {
    border-top-style:dotted;
    border-top-color: red;
    border-right-style:solid;
    border-bottom-style:dotted;
    border-left-style:none;
}

5.display属性

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

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

display:"none"与visibility:hidden的区别：

visibility:hidden: 可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局
display:none: 可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失

posted on 2022-08-23 19:10 念白SAMA 阅读(21) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· 前端开发3

· 第八周整理笔记

· 【前端】第2回 CSS

· 前端2css

· 前端学习笔记

阅读排行：
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 上周热点回顾（3.3-3.9）

公告

昵称：念白SAMA
园龄： 2年8个月
粉丝： 5
关注： 3

+加关注

2025年3月

日

一

二

三

四

五

六

随笔档案

2022年12月(1)

2022年9月(1)

2022年8月(13)

2022年7月(21)

2022年6月(18)

	<input type="radio" name="gender" value="male">男
	<input type="checkbox" name="hobby" value="basketball">篮球
	<select name="province" id="">
	<option value="sh">上海</option>

	<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<style>
	p{
	background-color: #2b99ff;
	}
	</style>
	</head>

	div {
	color: green; /查找所有的div标签并将内部的文本颜色变为绿色/
	}

	.c1 {
	color:red; /查找所有class属性中含有c1的标签并将内部的文本颜色变为红色/
	}

	#d1 {
	color: aquamarine; /查找id值是d1的标签并将内部的文本颜色改为天青色/
	}

	* {
	color: blue; /查找所有的标签并将内部的文本颜色改为蓝色/
	}

	/查找div标签内部所有的span(后代)/
	#d1 span {
	color: blue;
	}

	/查找div标签内部所有的儿子span/
	#d1>span {
	color: orange;
	}

	/查找div标签同级别下面紧挨着的一个span标签(弟弟)/
	#d1+span {
	color: red;
	}

	/查找div标签同级别下面所有的span标签(弟弟们)/
	#d1~span {
	color: blue;
	}

	/.c1类内部所有p标签设置字体颜色为红色/
	.c1 p {
	color: red;
	}

	/* 未访问的链接 */
	a:link {
	color: #FF0000
	}

	/* 鼠标移动到链接上 */
	a:hover {
	color: #FF00FF
	}

	/* 选定的链接 */
	a:active {
	color: #0000FF
	}

	/* 已访问的链接 */
	a:visited {
	color: #00FF00
	}

	/input输入框获取焦点时样式/
	input:focus {
	outline: none;
	background-color: #eee;
	}

	/在每个<p>元素之前插入内容/
	p:before {
	content:"我不好这口!";
	color:red;
	}

	/在每个<p>元素之后插入内容/
	p:after {
	content:"雨化田喜欢洗脚";
	color:blue;
	}

	#myid {
	background-color: blue;
	}

	.myclass {
	background-color: gray;
	}

	p {
	background-color: red !important;
	}

	body {
	font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif
	}

	p {
	color:red;
	color:rgb();
	color:#3e3e3e;
	color:rgba(1,1,1,0.5)
	}

	background-color: red;
	background-image: url('1.jpg');
	background-repeat: no-repeat;
	background-position: left top;
	background-position: 200px 200px;

	/简写/
	background:#336699 url('1.png') no-repeat left top;

	#i1 {
	border-width: 2px;
	border-style: solid;
	border-color: red;
	}

	/通常使用简写方式/
	#i1 {
	border: 2px solid red;
	}

	#i1 {
	border-top-style:dotted;
	border-top-color: red;
	border-right-style:solid;
	border-bottom-style:dotted;
	border-left-style:none;
	}