层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力
(1)行内样式
使用style属性,只是对当前标签有效,页面内容和样式高度耦合的。写在行内(2)内部样式
在head中使用style标签,当前页面有效,内容和样式一定程度分离,但是不彻底,css代买写在hea的style标签中。 优点:方便在同页面中修改样式。 缺点:不利于在多页面将共享复用代码及维护,对内容与样式的分离也不够彻底。(3)外部样式
将样式写到一个单独CSS文件中,需要用到HTML文件,引用它即可。
实现了内容与样式的完全分离. 优点:结构化样式分离,好维护 样式重用 多个页面使用字体属性
font-style:字体(斜体)
font-variant :字体的变化(大小写)
font-weight :字体粗细
font-size:字体大小
font –family:字体名称
主要包含:
颜色:color、
对齐方式:text-algin、
修饰效果:text-decoration,
行高:line-height
background-color;:背景颜色
background-image: url();:背景图片
background-repeat ;背景重复方式
background-position:背景位置
隐藏元素的方法:
(1)Display:none,可以隐藏,并且不占位置
(2) visibility: hidden; 可以隐藏,但是位置还在
Display可以设置元素的显示模式
Display: inline-block
变成行内块标签:可以设置width和height,不会占满一行Display: inline
变成行内标签,width和height设置无效,其空间取决于内容Padding-top、Padding-right、Padding-bottom、Padding-left
Padding 50px 40px 30px 10px 上 右 下 左
Padding 50px 40px ;上下 左右
## 外边距margin
和内边距类似的
元素选择器
通过标签名作为选择器
Id选择器
一个页面上的标签,id是唯一的,不能重复
类选择器
需要在便签上使用class, class里头的名字可以重复
Css样式使用多次
Id选择器>类选择器>元素选择器
后代选择器:
可以选择一个元素的后代元素,这个元素的儿子,孙子,孙子的儿子。。。
子类选择:
某一元素,选中直接后代(儿子,孙子不要)
并选择器:
将相同的颜色放在一起,类名直接用逗号分隔
通配符选择器:
选中所有的标签,不建议使用。
兄弟选择器 (1)E + F
选中最近的一个“弟弟”元素,不选中自己 (2)E~F
选中所有的“弟弟”元素,不选中自己
继承 层叠性 优先级
action; 把数据提交给服务器的地址,
method ; 提交的方式(post , get ),
type中可以指定的 number tel 来指定数字 电话号码 或者使用date 来指定时间
含有text <input type=“text” name="username" placeholder=“请输入name” > name属性 会随提交(form)到其他页面 就是作为参数password:密码
file: 上传文件
radio :单选按钮 只能单选 默认的是chacked =“checked”
checkbox 多选(方框) 复选按钮
textarea 一个区域的文本框 设置 cols 和rows 来定框的大小
style =reset-non 不重新设置大小;
select 标签 下拉列表 请选择 option 子标签;提交按钮:submit
重置按钮:reset
普通按钮:botton
botton 按钮具有默认提交表单的功能,如果不指定type 就会提交表单
form 表单标签 提交的内容 包裹所需要提交的内容action 属性 要提交的地址 # 代表是本地地址
method get 方式(默认的提交方式,,把请求方式拼接在请求页面,)
post方式(把请求方式封装在请求体中)
<form action="#" method="get" name="要提交参数的Key " ></form>只有存在name时候才能 接收数据
必须要有name 才能够提交;
若是单选或者复选框,必须提供value ,
placeholder 是一种提示信息