Web前端总结：
Web前端：HTML最强总结 附详细代码
Web前端：CSS最强总结 附详细代码
Web前端：JavaScript最强总结 附详细代码
基本知识
基本概念
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
层叠:多个样式可以作用在同一个html的元素上，同时生效
-
样式定义如何显示HTML 元素
-
样式通常存储在样式表中
-
把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
-
外部样式表可以极大提高工作效率
-
外部样式表通常存储在 CSS 文件中
多个样式定义可层叠为一个CSS很像化妆，通过不同的CSS将同样的HTML内容打造为不同的呈现结果。 所以，前端程序员相互表白的时候可以说:you are the CSS to my HTML. 这是不是CSS是对HTML进行美化和布局作用的最好总结?
优点
-
功能强大
-
将内容展示和样式控制分离
降低耦合度。解耦
让分工协作更容易
提高开发效率
CSS的使用
CSS与html结合使用
根据定义CSS的位置不同，分为行内样式、内部样式和外部样式
行内样式
也称为内联样式
直接在标签中编写样式，通过使用标签内部的style属性;
代码样式：
弊端:只能对当前的标签生效，没有做到内容和样式相分离，耦合度太高。
内部样式
定义在head标签内，通过style标签，该标签内容就是CSS代码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>内部样式</title> <style> div{ color: red; } </style> </head> <body> <div>hello my css</div> </body> </html>
区别
-
作用域的范围：外部样式表>内部样式表>行内样式表
-
优先级：外部样式表<内部样式表<行内样式表;
-
同样的样式作用在同一个标签身上：就近原则。
-
不同样式作用在同一个标签身上，叠加生效。
CSS语法
基本格式由两个主要的部分构成：
基本选择器
筛选具有相似特征的元素
id选择器
选择具有相同id属性值的元素，建议html页面中的id值唯一
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 “#” 来定义。
PS: ID属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。
虽然多个元素可以使用同一个id选择器控制样式，但是不推荐。如果需要同样的样式对多个标签生效， 使用class选择器。
class选择器
选择具有相同的class属性值的元素。
-
class 选择器用于描述一组元素的样式，class 选择器有别于id选择器。
-
class可以在多个元素中使用。 class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示
PS：类名的第一个字符不能使用数字!它无法在 Mozilla 或 Firefox 中起作用
元素选择器/标签选择器
选择具有相同标签名称的元素。
定义选择器语法:标签名称{};PS:标签名称必须是html提供好的标签。
使用标签选择器:自动使用在所有的同名的标签上
优先级
选择器的优先级
ID选择器 > 类选择器 > 标签选择器
当多个选择器作用在同一个标签上的时候，如果属性冲突，看优先级；如果不冲突，样式叠加生效
样式表的优先级
行内样式 > 内部样式 >外部样式
同样，三个样式表中都有内容作用在同一个html标签的时候，如果属性冲突，看优先级；如果不冲突， 样式叠加生效
CSS常用样式
color：字体颜色
跟颜色相关的取值分3种:
-
颜色的单词 red blue…
-
rgb(红，绿，蓝)三色的取值范围是0-255 rgb(255,0,0)
rgba(红，绿，蓝,透明度)，透明度取值:0-1 0 全透明 1-不透明 0.5 半透明rgba(255,0,0,0.4)
-
#值1值2值3 :值的范式是00-FF 十六进制数字组成的 例如:#FF0000
width height：宽高
PS:只有块状元素可以设置宽高，行级元素设置不生效
取值方式有2种:
-
数值 绝对数字 单位是像素PX
-
百分比:占据父元素的比例
背景样式
文本样式
列表样式
边框样式
HTML&CSS调试利器
以谷歌浏览器为例说明。
快捷键F12或者工具条中的开发者工具调出以下内容。
在elements中可以看到当前页面的所有标签，在styles中可以看到html元素对应的样式。
交集选择器
条件:交集选择器由两个选择器构成，找到的标签必须满足:既有标签一的特点，也有标签二的特点。
语法:h3.class{ color:red; } 其中第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格，例如div.list。
交集选择器是并且的意思。 即…又…的意思
例如: table.bg 选择的是: 类名为 .bg 的 表格标签，但用的相对来说比较少。
后代选择器
概念
后代选择器又称为包含选择器。
作用
用来选择元素或元素组的子孙后代
其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔，先写父亲爷爷，再写儿子孙子。
格式:父级 子级{属性:属性值;属性:属性值;}
语法:.class h3{color:red;font-size:16px;}
当标签发生嵌套时，内层标签就成为外层标签的后代。 子孙后代都可以这么选择。 或者说，它能选择任何包含在内 的标签。
子元素选择器
作用:子元素选择器只能选择作为某元素子元素(亲儿子)的元素。 其写法就是把父级标签写在前面，子级标签写在后面，中间跟一个 > 进行连接。
语法:.class>h3{color:red;font-size:14px;}
比如：
.demo > h3 {color: red;} 说明 h3 一定是demo 亲儿子。 demo 元素包含着h3
转自：csdn论坛 ，
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
