CSS的三种引⼊⽅式，以及基本选择器⼀.关于上篇博客的回顾
1.标签
- ⾏内标签 a span i em strong b、label
（1）在⼀⾏内显⽰
（2）不能设置宽⾼，默认的宽和⾼是内容的宽⾼
⾏内块标签： input img
（1）在⼀⾏内显⽰
（2）可以设置宽⾼
- 块级标签 h1（页⾯中只有⼀个h1，为了这个搜索引擎）~h6  div ul li ol dl dt dd form table
（1）独占⼀⾏
（2）可以设置宽⾼，如果不设置宽，默认是⽗盒⼦的100%宽
2.⼀些⽹页布局结构
3.div模型
division：分割
div+span ⽹页布局
a：
（1）超链接
href 超链接的地址
target: _self 默认在当前中打开链接地址
_blank  在空⽩的页⾯打开连接地址
p标签只能放⽂本图⽚表单元素，不能放其他的元素
5.标签的使⽤
(1).a：
（1）超链接
href 超链接的地址
target: _self 默认在当前中打开链接地址
_blank  在空⽩的页⾯打开连接地址
2）标签内部跳转
锚点默认有点击⾏为。我们可以javascript:void(0)；阻⽌a标签的默认点击⾏为。
(2).img
src：连接的图⽚资源
alt：图⽚资源加载失败。显⽰的⽂本
ul: unordered list ⽆序列表 ul下的⼦元素只能是li
li
type='circle' 圆⼼
type='square' ⽅块
ol:
ordered list
只能是li
dl：定义列表
dt：定义标题
dd：定义描述
  　sublime的简单使⽤
ctrl+shift+p  搜package control
table  border='1'
tr  表格⾏
td  表格描述
form
HTTP协议
action：提交的服务器⽹址
method:get(默认)| post(应⽤：登录注册、上传⽂件)
页⾯中的a img link 默认是get请求
input
type:
text: ⽂本输⼊框
password：密码输⼊框
file:⽂件按钮提交⽂件的时候⼀定要⽤post ⼀定要给form标签添加 Enctype='multipart/form-data'
file:⽂件按钮提交⽂件的时候⼀定要⽤post ⼀定要给form标签添加 Enctype='multipart/form-data'                submit：提交按钮
button：普通按钮
name：提交到服务器端的key
value: 显⽰的⽂本内容，与服务器端的value
placeholder：⽂本代替
label
for：是与下⾯的某个表单控件的id属性进⾏关联
(3) BS交互
1.form表单默认与服务器进⾏交互
2.ajax技术
⼆.CSS
1.CSS层叠样式表
作⽤：修饰⽹页结构
2.CSS的三种引⼊⽅式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS</title>
</head>
<body>
<p >娃哈哈</p>
<span>爽歪歪</span>
</body>
</html>
⾏内样式
注意:⾏内样式的优先级是最⾼的
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS</title>
<style type="text/css">
span{
color: red;
font-size: 40px;
}
</style>
</head>
<body>
<!--<p >娃哈哈</p>-->
<span>爽歪歪</span>css样式表优先级最高
</body>
</html>
内接样式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS</title>
<link rel="stylesheet" href="./index.css"/>
</head>
<body>
<!--<p >娃哈哈</p>-->
<span>爽歪歪</span>
</body>
</html>
外接样式
三.基本选择器
1.id选择器
选中的特性是唯⼀的，不能重复
2.标签选择器
选中的页⾯中共性的标签
3.类选择器
选中的也是页⾯中共性的标签，类名可以有多个
4.通配符选择器
通常是对页⾯进⾏重置样式表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="./css/reset.css">
<style type="text/css">
/*1.标签选择器选中的是 ‘共性’*/
p{
color: red;
}
/*重置样式*/
/*组合选择器*/
ul,ol{
list-style: none;
}
/
*2.类选择器  .类名选中的也是共性可以有多个*/
.active{
color: yellow;
}
.large{
font-size: 30px;
}
/*3.id选择器选中的是‘特性’ # id是唯⼀的*/
#p1{
color: green;
}
/
*4. 通配符选择器  * 在以后⼯作中不要⽤这个  */
/*⼀开始布局页⾯如果写css,⼀定要重置*/
/*⼀开始布局页⾯如果写css,⼀定要重置*/
/**{
padding: 0;
margin: 0;
}*/
a{
/*清除a标签的下划线*/
text-decoration: none;
}
.
baidu{
color: blue;
/*下划线*/
text-decoration: underline;
/*显⽰⼩⼿的状态*/
cursor: pointer;
}
input{
border: none;
width: 400px;
height: 40px;
border: 1px solid #e0e0e0;
font-size: 22px;
}
</style>
</head>
<body>
<p id="p1">营养快线</p>
<p id="p2">营养快线1</p>
<p>营养快线2</p>
<p>营养快线3</p>
<p>营养快线4</p>
<ul>
<li class="active large">
乳娃娃
</li>
<li>
爽歪歪
</li>
</ul>
<ul>
<li class="active">
娃哈哈
</li>
</ul>
<a href="javascript:void(0);">百度⼀下</a>
<span class="baidu">百度⼀下</span>
<input type="text">
</body>
</html>
汇总展⽰

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。