html css javascript三者关系
- html是网页内容的载体
- css是网页内容的表现，外观控制
- javascript是网页逻辑处理和行为控制
css相对于html标签属性的优势
css简化了标签代码，利于下载提高效率
解决了网页内容与外观分离
利于维护，提供工作效率
css语法基础
css语法：选择符+申明，其中申明是指属性-值形式，注意css样式区分大小写
css使用方式
1）行内样式，又称内联样式
是通过标签的style属性书写在标签内部的样式
2）内部样式，又称嵌入样式
是在网页头部的style标签内部进行定义css样式
3）外部样式，又称外联样式
是通过link标签引用css文件地址
4）导入样式
是使用@import 导入指定url路径的css文件，并且导入样式一般在style标签内部使用，是在style标签内部的开始处，导入的css样式表是在整个html文件加载完成后开始加载
css引用优先级
一般来说是行内样式》内部样式》外部样式
但是内部样式和外部样式，取决于谁最后被加载，也就是就近原则
css选择符
1）类选择符
使用.clallName方式定义，通过标签的class属性应用类css样式，一个标签可同时引用多个class，之间使用空格符分隔；类选择符可以对多个标签进行重复使用；
2）标签选择符
标签选择符表示对整个文档一类标签进行样式设置
3）id选择器
同构#定义css样式，id选择器不是太常用，太常用导致id泛滥，增加文档dom id对象检索时间不利于提高网页响应
4）群组选择器
又称组合选择器，是指多个选择器共同定义样式，他们之间使用逗号进行分隔
5）后代选择器
在dom中上下紧挨的标签称为父子关系，再往上则为祖先后代关系，那么后代选择器则是值标签的子元素以及更下级的子元素标签，后代选择器之间使用空格符分隔，
理解为在某个标签内部查找目标标签；
注意后代选择器的定义往往是从大范围到小范围进行，而大范围的入口即为这6种选择符；
6）通用选择器 *
这是指所有的标签都应用该选择器
7）伪类选择器
：link：标签未被访问之前
：visited 标签访问过后
：hover 鼠标移动到标签上
：active 标签被单击但是没有放开鼠标前
其中优先级：active《hover《visited《link，这个直接通过逻辑判断就可以知道；
注意：hover必须放于link和visited之后才有效
active必须放于hover之后才有效
伪类对大小写不敏感
8）伪对象
：before
：after
同一样式表内部样式优先级
总体来说就是就近原则，但是也有通过计算权重值进行判断
标签权重值：+1
类权重值：+10；
id权重值：+100
行内权重值：+1000
对于具有同样权重值来说，那就是后来居上，后面的将覆盖前面的
最高优先级 ！important，是指该样式为最高优先级，使用方式为 如 fontCss{font-size:14px !important;}
css样式命名规则
不能以数字或者下划线，‘-’连接线开头
常见的命名规则有
驼峰法：首字母小写，其余单词首字母大写
连接符：即单词首字母小写，单词与单词之间使用连接线-或者下划线_连接
常见的页面命名有
页头：header 导航：nav 页面主体：main 侧栏：sidebar 页尾：footer 栏目：column
内容：content/container 页面外围控制：wrapper 容器：container 左中右：left center right
常见的css导航命名有
导航：nav 左导航：leftsidebar 主导航：mainnav 右导航：rightsidebar 子导航：subnav 菜单：menu
顶导航：topnav 子菜单：submenu 边导航：sidebar 标题：title 摘要：summary
常见的css样式命名有
标志：logo 注册:register 广告：banner 搜索：search 登陆：login 功能区：shop
登陆条：loginbar 标题：title