表单标签
4.1:select下拉菜单标签
场景:在网页中提供多个选择项的下拉菜单表单控件
标签组成:
- select标签:下拉菜单的整体
- option标签:下拉菜单的每一项
常见属性:
- selected:下拉菜单的默认选中
4.2:textarea文本域标签
场景:在网页中提供可输入多行文本的表单控件
常见属性:
- cols:规定了文本域内可见宽度
- rows:规定了文本域内可见行数
-
<body> <textarea name="" id="" cols="30" rows="10"></textarea> <!-- cols控制宽度 rows控制高度 --> <!-- 右下角有一个可以拖拽的东西 在实际中用css来禁止一些功能(拖拽) --> </body>
注意点:
- 右下角可以拖拽改变大小
- 实际开发时针对于样式效果推荐使用css
4.3:label标签
场景:常用于绑定内容与表单标签的关系
使用方法:
- 使用label标签把内容包裹起来
- 在表单标签上添加id属性
- 在label标签的for属性中设置对应的id属性值
使用方法2:
- 直接将label标签把内容(如:文本)和表单标签一起包裹起来
- 需要把label标签的for属性删除即可
<body>
<!-- 使用方法 -->
<!-- 1:使用lable标签把内容(如:文本)包裹起来 -->
<!-- 2:在表单标签上添加id属性 -->
<!-- 3:在label标签的for属性中设置对应的id属性值 -->
性别：<input type="radio" name="se" id="n"><label for="n">男</label>
<input type="radio" name="se" id="nv"><label for="nv">女</label>
<!-- 这个id是自己敲出来的,不是默认出来的 -->
<!-- 满足用户体验感,避免因操作不当导致体验感下降 -->
<br>
<br>
<!-- 使用方法 -->
<!-- 1:直接使用label标签把内容(如:文本)和表单标签一起包裹起来 -->
<!-- 2:需要把label标签的for属性删除即可 -->
性别：<label><input type="radio" name="sex">女</label>
<label><input type="radio" name="sex">男</label>
</body>5.1字符实体:
场景:在网页中展示特殊符号效果时,需要使用字符实体替代
结构:&英文
常见字符实体(也就第一个,表示空格那个)
css基础认识
css的三种引入方式:
- 内嵌式
- 外联式
- 行内式
二.基础选择器
2.1类选择器
结构: .类名{css属性名:属性值}
作用:通过类名,找到页面中所有带有这个类名的标签,设置样式
注意点:
- 所有标签上的有class的属性值,class的属性值为类名(类似于名字)
- 类名可以由数字,字母,下划线组成,但不能以数字或下划线开头
- 一个标签可以同时有多个类名,类名之间可以以空格隔开
- 类名可以重复,一个类选择器可以同时选中多个标签
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 进行类的定义 */
.green {
color: green;
}
.size{
font-size:66px;
}
</style>
</head>
<body>
<!-- 这里输入类 -->
<p class="green">这个是绿色的</p>
<p>2134546</p>
<div class="green size" >我太想进步了hhh</div>
<!-- 用一次写一次class类 -->
<!-- 标签等于全选一次性进行赋值属性 -->
<!-- 类选择器等于一个一个进行赋予属性 -->2.2 id选择器
结构:#id属性值{css属性名:属性值;}
作用:通过id属性值,找到页面中带有id这个属性值的标签,设置样式
注意点:
- 所有标签都有id属性
- id属性值类似于身份证号码 在一个页面是唯一的 不可重复的
- 一个标签上只能有一个id属性值
- 一个id选择器只能选中一个标签
2.3 通配符选择器
结构:*{css属性名:属性值;}
作用:找到页面中的所有标签 设置样式
注意点:
- 开发中使用的很少,会在极特殊的情况下使用
三.字体和文本样式
3.1字体大小
属性名:font-size
取值:数字+px
注意点:
- 谷歌浏览器大小是16px
- 单位需要设置 否则无效
3.2 字体粗细
属性名:font-weight
取值:
关键字:normal 正常 或bold 加粗
纯数字:100-900的整百数
正常400 加粗700
注意点:
- 不是所有的字都提供了九种粗细 因此有些是没有变化的
- 实际开发中以:正常 加粗用的最多
<!-- 建立一个标签 -->
<style>
p{
/* 这里的数字也可以写成bold 也是默认700的意思 最大900 */
font-weight: 700;
}
h1{
font-weight: 100;
}
</style>
</head>
<body>
<p>不知道该说些什么好啊hhhhhhhh</p>
<p>不知道该说些什么好啊hhhhhhhh</p>
<p>不知道该说些什么好啊hhhhhhhh</p>
<p>不知道该说些什么好啊hhhhhhhh</p>
<div>不知道该说些什么好啊hhhhhhhh</div>
<h1>不知道该说些什么好啊hhhhhhhh</h1>
<!-- 将标题变细 -->3.3 文本样式(是否倾斜)
属性名:font-style
取值:
- 正常:(默认)normal
- 倾斜:italic
<style>
d{
font-style: italic;
}
h1{
font-style: normal;
}
/* 改变字体倾斜的方式 */
</style>
</head>
<body>
<em>好好学习天天向上</em>
<br>
<em>好好学习天天向上</em>3.4 字体系列
属性名:font-family
3.5常见字体(了解)
3.6字体font相关属性的连写
属性名:font(复合属性)
取值:
font: style weight size family;(顺序不可改变)
省略要求:
只能省略前两个 如果省略了相当于设置了默认值
<style>
h1{
/* 这样简便的快写是有顺序要求的 */
/* font: style--weight--size--字体; */
font: italic 700 66px 宋体;
/* 可以省略前两个 省略了相当于默认值(不倾斜 400) */
/* 也可以运用层叠性 */
}
/* 一个属性冒号后面书写多个属性值的写法------复合属性 */
</style>
</head>
<body>
<h1>好好学习天天向上</h1>
</body>3.7文本缩进
属性名:text-indent
取值:
- 数字+px
- 数字+em(推荐:1em=当前标签的font-size的大小)
3.8 文本水平对齐方式
取值:
注意点:如果想要文本水平居中 text-align属性给文本所在标签(文本的父元素)设置
3.9 文本水平居中方法总结
test-align:center能让哪些元素水平居中
- 文本
- span标签 a标签
- input标签 img标签
3.9.1文本修饰
属性名:text-decoration
取值:
注意点:
开发中使用text-decoration:none;会清除a标签的默认下划线
3.9.2行高
作用:控制一行的上下间距
属性名:line-height
取值:
- 数字+px
- 倍数(当前标签font-size的倍数)
应用:
- 让单行文本垂直居中可以设置line-height:文字父元素高度
- 网页精准布局时 会设置line-height:1 可以取消上下间距
行高与font连写的注意点
- 如果同时设置了行高和font连写 请注意覆盖问题
- font:style weight size/line-height family;
3.9.3 颜色常去值
属性名:
文字颜色: color
背景色:bakeground-color
4.0 选择器进阶
4.1 子代选择器:
作用: 根据html的标签属性嵌套关系 选择父元素 子代中 满足条件的元素
选择器语法: 选择器1>选择器2(css)
结果:在选择器1所找到标签的子代(儿子)中 找到满足选择器2的标签 设置样式
注意点:
- 子代只包括:儿子
- 子代选择器中 选择器与选择器之间通过>隔开
4.2 后代选择器
作用: 根据html标签的嵌套关系 现在父元素 后代中 满足条件的元素
选择器语法: 选择器1 选择器2 {css}
结果:
- 在选择器1 中找到所在标签的后代{儿子 孙子 重孙子......} 知道满足选择器2 的标签 设置样式
注意点:
- 后代包括:儿子 孙子 重孙子......
- 后代选择器中,选择器与选择器之间通过 空格隔开
4.3 并集选择器:
作用:同时选择多组标签 设置相同样式
选择器语法: 选择器1 , 选择器2{css}
结果:
- 找到选择器1 和选择器2选中的标签 设置样式
注意点:
4.4 hover伪类选择器
作用:选中 鼠标 悬停在元素上的状态 设置样式
选择器语法: 选择器:hover{css}
- 注意点:
- 伪类选择器选中的元素的 某种状态
快写:
背景相关属性
5.1 背景平铺:
属性名:background-repeat
属性值:
背景位置:
属性名: background-position(bgp)
属性值: background-position:水平方向位置 垂直方向位置
注意点: 方位名词取值可以和坐标取值混合使用 第一个取值表示水平 第二个取值表示垂直
5.2 背景相关属性的连写
属性名:background(bg)
属性值:
- 单个属性值的合写
书写顺序:
- 推荐: background: color image repeat position
省略问题:
- 可以按需求省略
- 特殊情况:在pc端 如果盒子大小和背景图片大小一样 此时可以直接写 background:url()
元素显示:
6.1块级元素:
显示特点:
- 独占一行(一行只能显示一个)
- 宽度默认是父元素的宽度 高度默认由内容直接撑开
- 可以设置宽高
代表标签:
- div p h系列 ul li dl dt form header nav footer
6.2 行级元素:
显示特点:
- 一行可以显示多个
- 宽度和高度默认由内容撑开
- 不可以设置宽高
代表标签:
- a span b u i s strong ins em del
6.3元素显示模式:
块级元素一般作为大容器 可以嵌套:文本 块级元素 行内元素 行内块元素等等........
但是:p标签中不要嵌套div p h 等块级元素
a标签内部可以嵌套任意元素
但是:a标签不能嵌套a标签
css特性
7.1 继承性的介绍:
特性:子元素有默认继承父元素样式的特点(子承父业)
可以继承的常见属性(文字控制的属性都可以继承)
- color
- font-style font-weight font-size font-family
- text-indent text-align
- line-height
- ...........
注意点:
- 可以根据调试工具判断样式是否可以继承
7.2 层叠性的介绍:
特性:
- 给同一个标签设置不同样式的->此时样式会叠加-->最终共同作用在标签上
- 给同一个标签设置相同的样式-->此时样式会层叠覆盖-->最终写在最后的样式会生效
注意点:
- 当样式冲突时 只有当选择器优先级相同时 才能通过层叠性判断
7.3 优先级的介绍
特性:不同选择器具有不同的优先级 优先级高的选择器样式会覆盖优先级低的选择器样式
优先级公式:
- 继承<通配符选择器<标签选择器<类选择器<id选择器<行内选择器<!important
注意点:
- !important写在属性值的后面 分号的前面
- !important不能提升继承的优先级 只要是继承就是优先级最低
- 实际开发中不建议使用!important
总结就是:选择器的范围越广 优先级越低
盒子模型的介绍
盒子模型的概念:
- 页面中的每一个标签 都可以看做是一个盒子 通过盒子的视角更好进行布局
- 浏览器在渲染(显示)网页时会将网页中的元素看做是一个个矩形的区域 我们也形象的称为盒子
盒子模型:
css中规定每个盒子分别由:内容区域(content) 内边距(padding) 边框区域(border) 外边距区域(margin) 构成 这就是盒子模型
内容的宽度和高度
作用:利用width和height属性默认设置是盒子 内容区域的大小
属性:width/height
常见取值:数字+px
边框(连写形式)
属性名: border
属性值:单个取值的连写 取值之间以空格隔开
如:border : 10px solid red;
快捷键:bd+tab
边框(单方向设置)
场景: 只给盒子的某个方向设置单独的边界
属性名:border-方位词
属性值:连写的取值
4730
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
