Css入门课程 Css基础

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