1.CSS的优势
- 1.内容和表现分离
- 2.网页结构表现统一,可以实现复用
- 3.样式丰富
- 4.可以使用独立于html的css文件
- 5.利用SEO,容易被搜索引擎收录
2.四种css样式使用方式
-
1.内部样式:直接在网页头部(head)添加style标签
<style> ........... </style>
-
2.2.外部样式(链接式):在网页头部(head)通过link标签调用外部样式表
<link> rel="stylesheet" href="css文件位置" </link>
stylesheet代表调用外部样式表(会将页面结构渲染之后再展示)
-
2.3.行内样式:直接在标签内添加style属性
<标签 style="...."> ..... </style>
-
2.4.导入式:是外部样式的一种,在网页头部(head)使用, 但是是CSS2.1特有的
<style> import url("css文件位置") </style>
少用,在展示页面会先展示页面结构在进行渲染
-
2.5.优先级:采取就近原则,哪种样式距离标签近,标签就使用哪种样式
3.选择器
- 1.作用:选择页面的某一个或某一类元素
- 2.语法: 选择器{ 声明…; }
4.基本选择器
- 1.标签选择器:选择一类标签 标签{}
- 2.类选择器 class:选择所有class属性一致的,可以跨标签 可复用 .类名{ }
<标签 class=“类名”>… <标签> - 3.ID选择器:全局选择器:全局唯一 不可复用,只可使用一次 #id名{ }
<标签 id=“id名”>…<标签> - 补充:优先级:id选择器>class选择器>标签选择器
- !important加载样式上优先级为最高
5.层次选择器
- 1.后代选择器:在某个元素后面的所有元素 body(父元素) 元素{ 声明; }
- 2.子选择器:在这个元素下一个层次的所有元素
body(父元素)>元素{ 声明; } - 3.相邻(兄弟)选择器:当前选中A元素的下个A元素,不包括自己(只有一个)
.类/#id +元素{ 声明; } 注:当A元素下个元素不是A类型时样式无效 - 4.通用选择器:当前选中A元素下面的所有同层次A元素,不包括自己
.类/#id ~ 元素{ 声明; }
6.结构伪类选择器
-
1.选中A元素内的第一个子元素
A元素 子元素:frist-child{ 声明; }
-
2.选中A元素内的最后一个子元素
A元素 子元素:last-child{ 声明; }
-
3.body的第n个A元素,考虑顺序,非规定元素类型也计入,当第n个元素非A类型时无效
A元素 子元素:nth-child(n){ 声明; }
-
4.body的第n个A元素,只考虑与元素同类型的(A类型)
A元素 子元素:nth-of-type(n){ 声明; }
-
5.子标签选中:div 子元素:nth-of-type(1) input {…}
-
6.A元素 子元素:nth-child(even){ 声明; } :偶数行选择器
A元素 子元素:nth-child(odd){ 声明; } : 奇数选择器
7.属性选择器
-
1.选中具有指定属性的所有A元素
A元素[属性]{ 声明; }
-
2.选中属性绝对等于值的所有A元素
A元素[属性=值]{ 声明; }
-
3.选中属性中包含值的所有A元素
A元素[属性*=值]{ 声明; }
-
4.选中属性中以值开头的所有A元素
A元素[属性^=值]{ 声明; }
-
5.选中属性中以值结尾的所有A元素
A元素[属性$=值]{ 声明; }
-
补充:值可以加双引号也可以不加,对结果没有影响
8.span标签
- 1.行内元素,无任何格式,通常用于网页需要重点显示内容
- 2.语法: 内容
9.div标签
- 1.块元素,通常用于一块区域
10.表单两种请求
1.get请求
- 1.请求参数拼接在请求路径后面,地址栏可见
- 2.因为请求参数可见所以相对不安全
- 3.请求参数大小有限制
- 4.传输效率相对较高
2.post请求
- 1.请求参数不在请求路径后面,地址栏不可见
- 2.因为请求参数不可见所以相对安全
- 3.请求参数大小无限制
- 4.传输效率相对较低