CSS学习整理
来源：互联网 发布：网络摄像头电脑客户端 编辑：程序博客网 时间：2024/06/16 16:45
1.表单标签
表单标签<from>
action属性： 请求路径，确定表单提交到服务器的地址
method属性： 请求方式。常用的取值：get、post
get：默认值
post:提交数据不再请求路径上追加
<body>
<form action=" " method =" ">
</form>
</body>
2.输入标签<input>
用于获取用户输入信息，type属性值不同，搜集方式不同。最常用的属性 ：
type属性：
text:文本框，单行的输入字段，用户可在其中输入文本。
password:密码框
radio：单选框
submit:提交按钮
checkbox：复选框
file：文件上传组件
hidden：隐藏字段
reset:重置按钮
image:图片提交按钮
btton:普通按钮
name:元素名
value属性：
设置input标签的默认值
submit和reset为按钮显示数据
size:大小
checked属性：
单选框和复选框被选中
readonly:是否只读
disable：是否可用
maxlength:允许输入的最大长度
如：<input type=”text” name=”username”id=”username” />
3.下拉列表标签：select
可进行单选和多选，需要使用<option>指定列表项
name属性：发给服务器的名称
multiple属性：不写默认单选，取值为multiple表示多选
size属性：多选时，可见选项的数目
<option>子标签：下拉列表中的一个选项
selected:勾选当前列表项
value:发给服务器的选项值
如：
<select name=”city”>
<option value=””>-请选择-</option>
<option value=”sh”>上海</option>
<option value=”bj”>北京</option>
… …
</select>
Ps: 一般option需要给value这个属性，如果不给，默认会把option的文本内容发送给服务器
4.文本域标签：<textarea>
cols属性： 文本域的列数
rows属性：文本域的行数
如：
<textarea cols=”50” rows=”3”></textarea>
5.按钮标签：botton
? <button type="button|reset|submit"> 按钮标签一般很少使用，提供“普通|重置|提交”功能，不同的浏览器默认值不同。
二、div&&span
div就是html一个普通标签，进行区域的划分。必须结合CSS样式进行渲染。
特性：独自占一行。独自不能实现复杂效果。
div通常是块级元素
实际开发中：使用div + css用来对页面进行布局和划分
span是html中的一个简单标签，特性：共处一行。用来对行内元素进行美化（一般用来美化字体，例如改变字体大小，设置高度，宽度，字体颜色等等…）
实际开发中：使用span + css用来对数据进行样式的修饰
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>div与span</title>
</head>
<body>
我是div
<div align="center"><font color="red">我是div</font></div>
<div align="center"><font color="red">我是div</font></div>
<div align="center"><font color="red">我是div</font></div>
<div align="center"><font color="red">我是div</font></div>
<br/>
我是span
<span><font color="blue"><i>我是span</i></font></span>
<span><font color="blue">我是span</font></span>
<span><font color="blue">我是span</font></span>
<span><font color="blue">我是span</font></span>
<br/>
</body>
</html>
三、使用CSS优化网站注册页面
CSS 通常称为CSS样式或层叠样式表，又称之为网页的美容师，主要用于设置HTML页面中的文本内容（字体、大小、对其方式等）、图片的外形（高宽、边框样式、边距等）以及版面的布局等外观显示样式。
CSS可以是HTML页面更好看，CSS色系的搭配可以让用户更舒服，CSS+DIV布局更佳灵活，更容易绘制出用户需要的结构。
CSS (Cascading Style Sheets) ：指层叠样式表
样式： 给HTML标签添加需要显示的效果。
层叠： 使用不同的添加方式，给同一个HTML标签添加样式，最后所有的样式都叠加到一起，共同作用于该标签。
CSS使用的基本语法：
<标签名 style="样式名1 : 样式值1；样式名2 : 样式值2；" ></标签名>
注意点：
1、 属性名 和 属性值 之间通过 ： 来隔开
2、 多个样式之间使用 ; 隔开
3、 一般复合样式 (border, font…) 值是多个，而多个值使用空格隔开。例如： border : 1px solid #000；
Ps: 样式非常多，具体的样式名和样式值需要在api中去查询。在今天课程的最后我们会介绍一些常见的css样式。
需求：书写div，要求设置：字体为黄色，字体大小100px， 边框为 1px 实线 边框颜色为红色
CSS和HTML结合的方式
方式一：使用HTML标签的style属性
方式二：在head标签使用style标签设置
语法格式：
<head>
<style type=”text/css”>
标签名称 ｛
样式名1：样式值1；
样式名2：样式值2；
｝
</style>
</head>
方式三：在head标签中的style标签使用@import
语法格式：
<style type="text/css">
@import url("css文件的地址");
</style>
方式四：在head标签中使用link标签
语法格式：
<link rel="stylesheet" type="text/css" href="css文件路径" />
注意：rel="stylesheet" 不能省略
css知识：
CSS选择器
作用在当前页面的所有该名称标签上的
语法格式：
标签名称｛
css代码;
｝
ID选择器
语法格式：
#选择器的名称 ｛
css代码；
｝
使用：
<标签名 id=” 选择器的名称” />
为啥要有选择器，因为各个div需要设置不同的样式，因此为了方便操作而采用的方法，就是选择器
class选择器
作用在一组标签之上
语法格式：
.class选择器的名称 ｛
css代码；
｝
使用：
<标签名 class=”xxxx” />
注意：
对iD选择器和class选择器的使用是：对单个div进行操作时可以选用id选择器，而对多个div进行操作时可以选择用class选择器
class . id #
组合选择器
应用场景：如果页面不同的选择器想使用相同的css样式
语法格式：
选择器1, 选择器2... {
css代码
}
例如：
div,p {
color:red;
}
如果需要对div和span都进行相同功能的操作时，就需要使用组合器。
关联选择器
语法格式：
标签名 后代标签名 ｛
css代码；
｝
如果只想单独对span进行操作，此时可以用关联选择器即可。
锚伪类选择器
语法格式：
选中的标签 ： 伪元素名称 {
css代码
}
4种锚伪类选择器：
link 某个html标签未被点击之前的状态
?visible 鼠标点击之后，松开了
?hover 鼠标悬浮式
?active 鼠标点击 但没有松开
例如：
a : link {
color : red;
}
属性选择器：
属性选择器是在原有选择器的基础上，通过标签的属性，再次对标签进行筛选
语法格式：
选择器名[属性名=’属性值’] {
css样式；
}
如：<style type="text/css">
input[type='text'] {
border: 2px solid blue;
}
</style>
CSS常用的样式
border ：设置边框的样式
格式：宽度 样式 颜色
例如：style=”border:1px solid #f00” ，1像素实边红色。
样式取值：solid 实线，none 无边，dashed虚线 等
width、height：用于设置标签的宽度、高度。
转换：display
HTML提供丰富的标签，这些标签被定义成了不同的类型，一般分为：块标签和行内标签。
块标签：以区域块方式出现。每个块标签独自占据一整行或多整行。
常见的块元素：<h1>、<div>、<ul>等
默认可以设置高度和宽度
行内元素：不必在新的一行开始，同时也不强迫其他元素在新的一行显示。
常见的行内元素：<span>、<a> 等
设置高度和宽度无效
在开发中，希望行内元素具有块元素的特性，需要使用display属性将行内元素转换成块级元素
语法结构：
选择器 {display : 属性值 }
常用的属性值：
inline：此元素将显示为行内元素（行内元素默认的display属性值）
block：此元素将显为块元素（块元素默认的display属性值）
none：此元素将被隐藏，不显示，也不占用页面空间。
<style type="text/css">
span {
border :1px solid #f00;
width:100px;
height:50px;
}
</style>
<span style="display: block;">转成块的sapn1</span>
<span style="display: block;">转成块的sapn2</span>
字体：color、line-height
语法格式：
color： 颜色 字体颜色
line-height: 行高 设置行高
ps： 给元素设置行高一般设置为当前父容器的高度以便于让当前的元素在父元素中居中显示
div区域中设置相关属性的方法
<div style="height: 50px; width: 200px; border: 1px solid #000;">
<span>多年后</span>
<span>重相逢</span>
</div>
背景：background-color，background-image
语法格式：
background-color：颜色; 设置元素的背景颜色
background-image : url(图片的路径地址);
background-repeat: 背景平铺方式;
背景平铺方式取值：
no-repeat： 不平铺
repeat-x ： 横向平铺
repeat-y ： 纵向平铺
注意：图片默认是平铺满整个盒子的
布局：float、clear
通常默认的排版方式，将页面中的元素从上到下一一罗列，而实际开发中，需要左右方式进行排版，就需要使用浮动
语法结构：
选择器 {
float : 属性值;
}
常用属性值：
left：元素向左浮动
right：元素向右浮动
none：元素不浮动（默认值）
ps: float : left 是比较常用的布局方式
由于浮动元素不再占用原文档流的位置，所以它会对页面中其他元素的排版产生影响。
如果要避免影响，需要使用clear属性进行清除浮动。
选择器 {
clear : 属性值;
}
常用属性值：
left：不允许左侧有浮动元素（清除左侧浮动的影响）
right：不允许右侧有浮动元素（清除右侧浮动的影响）
both：同时清除左右两侧浮动的影响
边框(盒模型)
我们可以把每一个标签都看成是一个盒子，每个盒子都由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成。
问题：有时候想设置h1上下的内边距位10px，左右不想设置，那怎么实现呢 ？
方式一： h1 { 10px 0 10px 0 }
方式二： h1 { 10px 0 }
第一个值表示上下，第二个值表示左右
表单标签<from>
action属性： 请求路径，确定表单提交到服务器的地址
method属性： 请求方式。常用的取值：get、post
get：默认值
post:提交数据不再请求路径上追加
<body>
<form action=" " method =" ">
</form>
</body>
2.输入标签<input>
用于获取用户输入信息，type属性值不同，搜集方式不同。最常用的属性 ：
type属性：
text:文本框，单行的输入字段，用户可在其中输入文本。
password:密码框
radio：单选框
submit:提交按钮
checkbox：复选框
file：文件上传组件
hidden：隐藏字段
reset:重置按钮
image:图片提交按钮
btton:普通按钮
name:元素名
value属性：
设置input标签的默认值
submit和reset为按钮显示数据
size:大小
checked属性：
单选框和复选框被选中
readonly:是否只读
disable：是否可用
maxlength:允许输入的最大长度
如：<input type=”text” name=”username”id=”username” />
3.下拉列表标签：select
可进行单选和多选，需要使用<option>指定列表项
name属性：发给服务器的名称
multiple属性：不写默认单选，取值为multiple表示多选
size属性：多选时，可见选项的数目
<option>子标签：下拉列表中的一个选项
selected:勾选当前列表项
value:发给服务器的选项值
如：
<select name=”city”>
<option value=””>-请选择-</option>
<option value=”sh”>上海</option>
<option value=”bj”>北京</option>
… …
</select>
Ps: 一般option需要给value这个属性，如果不给，默认会把option的文本内容发送给服务器
4.文本域标签：<textarea>
cols属性： 文本域的列数
rows属性：文本域的行数
如：
<textarea cols=”50” rows=”3”></textarea>
5.按钮标签：botton
? <button type="button|reset|submit"> 按钮标签一般很少使用，提供“普通|重置|提交”功能，不同的浏览器默认值不同。
二、div&&span
div就是html一个普通标签，进行区域的划分。必须结合CSS样式进行渲染。
特性：独自占一行。独自不能实现复杂效果。
div通常是块级元素
实际开发中：使用div + css用来对页面进行布局和划分
span是html中的一个简单标签，特性：共处一行。用来对行内元素进行美化（一般用来美化字体，例如改变字体大小，设置高度，宽度，字体颜色等等…）
实际开发中：使用span + css用来对数据进行样式的修饰
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>div与span</title>
</head>
<body>
我是div
<div align="center"><font color="red">我是div</font></div>
<div align="center"><font color="red">我是div</font></div>
<div align="center"><font color="red">我是div</font></div>
<div align="center"><font color="red">我是div</font></div>
<br/>
我是span
<span><font color="blue"><i>我是span</i></font></span>
<span><font color="blue">我是span</font></span>
<span><font color="blue">我是span</font></span>
<span><font color="blue">我是span</font></span>
<br/>
</body>
</html>
三、使用CSS优化网站注册页面
CSS 通常称为CSS样式或层叠样式表，又称之为网页的美容师，主要用于设置HTML页面中的文本内容（字体、大小、对其方式等）、图片的外形（高宽、边框样式、边距等）以及版面的布局等外观显示样式。
CSS可以是HTML页面更好看，CSS色系的搭配可以让用户更舒服，CSS+DIV布局更佳灵活，更容易绘制出用户需要的结构。
CSS (Cascading Style Sheets) ：指层叠样式表
样式： 给HTML标签添加需要显示的效果。
层叠： 使用不同的添加方式，给同一个HTML标签添加样式，最后所有的样式都叠加到一起，共同作用于该标签。
CSS使用的基本语法：
<标签名 style="样式名1 : 样式值1；样式名2 : 样式值2；" ></标签名>
注意点：
1、 属性名 和 属性值 之间通过 ： 来隔开
2、 多个样式之间使用 ; 隔开
3、 一般复合样式 (border, font…) 值是多个，而多个值使用空格隔开。例如： border : 1px solid #000；
Ps: 样式非常多，具体的样式名和样式值需要在api中去查询。在今天课程的最后我们会介绍一些常见的css样式。
需求：书写div，要求设置：字体为黄色，字体大小100px， 边框为 1px 实线 边框颜色为红色
CSS和HTML结合的方式
方式一：使用HTML标签的style属性
方式二：在head标签使用style标签设置
语法格式：
<head>
<style type=”text/css”>
标签名称 ｛
样式名1：样式值1；
样式名2：样式值2；
｝
</style>
</head>
方式三：在head标签中的style标签使用@import
语法格式：
<style type="text/css">
@import url("css文件的地址");
</style>
方式四：在head标签中使用link标签
语法格式：
<link rel="stylesheet" type="text/css" href="css文件路径" />
注意：rel="stylesheet" 不能省略
css知识：
CSS选择器
作用在当前页面的所有该名称标签上的
语法格式：
标签名称｛
css代码;
｝
ID选择器
语法格式：
#选择器的名称 ｛
css代码；
｝
使用：
<标签名 id=” 选择器的名称” />
为啥要有选择器，因为各个div需要设置不同的样式，因此为了方便操作而采用的方法，就是选择器
class选择器
作用在一组标签之上
语法格式：
.class选择器的名称 ｛
css代码；
｝
使用：
<标签名 class=”xxxx” />
注意：
对iD选择器和class选择器的使用是：对单个div进行操作时可以选用id选择器，而对多个div进行操作时可以选择用class选择器
class . id #
组合选择器
应用场景：如果页面不同的选择器想使用相同的css样式
语法格式：
选择器1, 选择器2... {
css代码
}
例如：
div,p {
color:red;
}
如果需要对div和span都进行相同功能的操作时，就需要使用组合器。
关联选择器
语法格式：
标签名 后代标签名 ｛
css代码；
｝
如果只想单独对span进行操作，此时可以用关联选择器即可。
锚伪类选择器
语法格式：
选中的标签 ： 伪元素名称 {
css代码
}
4种锚伪类选择器：
link 某个html标签未被点击之前的状态
?visible 鼠标点击之后，松开了
?hover 鼠标悬浮式
?active 鼠标点击 但没有松开
例如：
a : link {
color : red;
}
属性选择器：
属性选择器是在原有选择器的基础上，通过标签的属性，再次对标签进行筛选
语法格式：
选择器名[属性名=’属性值’] {
css样式；
}
如：<style type="text/css">
input[type='text'] {
border: 2px solid blue;
}
</style>
CSS常用的样式
border ：设置边框的样式
格式：宽度 样式 颜色
例如：style=”border:1px solid #f00” ，1像素实边红色。
样式取值：solid 实线，none 无边，dashed虚线 等
width、height：用于设置标签的宽度、高度。
转换：display
HTML提供丰富的标签，这些标签被定义成了不同的类型，一般分为：块标签和行内标签。
块标签：以区域块方式出现。每个块标签独自占据一整行或多整行。
常见的块元素：<h1>、<div>、<ul>等
默认可以设置高度和宽度
行内元素：不必在新的一行开始，同时也不强迫其他元素在新的一行显示。
常见的行内元素：<span>、<a> 等
设置高度和宽度无效
在开发中，希望行内元素具有块元素的特性，需要使用display属性将行内元素转换成块级元素
语法结构：
选择器 {display : 属性值 }
常用的属性值：
inline：此元素将显示为行内元素（行内元素默认的display属性值）
block：此元素将显为块元素（块元素默认的display属性值）
none：此元素将被隐藏，不显示，也不占用页面空间。
<style type="text/css">
span {
border :1px solid #f00;
width:100px;
height:50px;
}
</style>
<span style="display: block;">转成块的sapn1</span>
<span style="display: block;">转成块的sapn2</span>
字体：color、line-height
语法格式：
color： 颜色 字体颜色
line-height: 行高 设置行高
ps： 给元素设置行高一般设置为当前父容器的高度以便于让当前的元素在父元素中居中显示
div区域中设置相关属性的方法
<div style="height: 50px; width: 200px; border: 1px solid #000;">
<span>多年后</span>
<span>重相逢</span>
</div>
背景：background-color，background-image
语法格式：
background-color：颜色; 设置元素的背景颜色
background-image : url(图片的路径地址);
background-repeat: 背景平铺方式;
背景平铺方式取值：
no-repeat： 不平铺
repeat-x ： 横向平铺
repeat-y ： 纵向平铺
注意：图片默认是平铺满整个盒子的
布局：float、clear
通常默认的排版方式，将页面中的元素从上到下一一罗列，而实际开发中，需要左右方式进行排版，就需要使用浮动
语法结构：
选择器 {
float : 属性值;
}
常用属性值：
left：元素向左浮动
right：元素向右浮动
none：元素不浮动（默认值）
ps: float : left 是比较常用的布局方式
由于浮动元素不再占用原文档流的位置，所以它会对页面中其他元素的排版产生影响。
如果要避免影响，需要使用clear属性进行清除浮动。
选择器 {
clear : 属性值;
}
常用属性值：
left：不允许左侧有浮动元素（清除左侧浮动的影响）
right：不允许右侧有浮动元素（清除右侧浮动的影响）
both：同时清除左右两侧浮动的影响
边框(盒模型)
我们可以把每一个标签都看成是一个盒子，每个盒子都由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成。
问题：有时候想设置h1上下的内边距位10px，左右不想设置，那怎么实现呢 ？
方式一： h1 { 10px 0 10px 0 }
方式二： h1 { 10px 0 }
第一个值表示上下，第二个值表示左右
阅读全文
0 0
- CSS学习整理
- CSS核心内容整理 - (中) css学习
- 前端学习 CSS定位属性整理
- 关于css的学习整理(一)
- 关于css的学习整理（二）
- CSS整理
- CSS整理
- CSS整理
- CSS整理
- CSS整理
- css整理
- css整理
- CSS整理
- css整理
- css整理
- css整理
- CSS整理
- css 整理
- HTML学习整理
- 【LeetCode 32】Longest Valid Parentheses【H】
- MySQL ERROR 1062 (23000): Duplicate entry '%-root' for key 'PRIMARY'
- c#知识扩展篇
- Linux 下 lua 开发环境安装及安装 luafilesystem
- CSS学习整理
- jdk1.8 + tomcat8 + mysql5.6 安装（Centos6）
- 树莓派3 串口使用 raspberry pi 3B+ uart boot overlay（最全树莓派串口使用）
- Oracle中分区表的常用视图
- linux命令_系统管理_date
- 【分支界限法】
- itext pdf 合并会翻转方向的问题. 修复方法.
- UVALive 6922 Reverse Polish Notation
- Material Design——CollapsingToolbarLayout+AppBarLayout+CoordinatorLayout实现菜单栏炫酷折叠效果
