css的艺术

FruitBro
976 阅读6分钟

一、HTML、CSS、JavaScript之间的关系

HTML:网页内容的载体

CSS: 控制页面的样式

JavaScript: 用来实现网页功能

CSS层叠样式表(Cascading Style Sheets)：用于定义HTML内容在浏览器内的显示样式

二、CSS发展历史：

  1. 1996年W3C发布CSS1
  2. 1998年W3C发布CSS2
  3. 现在CSS3

三、CSS内容：

  1. CSS基础语法
  2. CSS使用方法
  3. CSS选择器
  4. CSS继承和层叠
  5. CSS优先级
  6. CSS命名规范

四、引入css方法：

  1. 行内样式：标签内引入style属性。加载顺序：和页面同时加载。

  2. 内部样式（嵌入样式）：在<head></head>中<style></style>。加载顺序：和页面同时加载。

  3. 链入外部样式：<link href='xxx.css' rel='stylesheet' type='text/css' />标签要放在<head></head>标签之间。加载顺序：页面加载时，同时加载css样式。最常用。

  4. css导入式：1. @import "./***.css" 2. @import url(***.css)。加载顺序：在读取完html之后加载。可能存在问题：页面加载慢时，dom加载完，但是css没有加载完，页面没有样式。同时import也存在浏览器兼容性问题。

CSS使用方法优先级：行内样式 > 内部样式 > 外部样式

内部样式 和 链入外部样式 的优先级取决于引入的前后位置，就近原则。最后定义的优先级最高。

五、CSS选择器

  1. 标签选择器
  2. 类选择器
  3. ID选择器
  4. 全局选择器
  5. 群组选择器
  6. 后代选择器

1. 标签选择器

以HTML标签作为选择器。p、h1~h6等

通过标签选择器设置的样式，使用该标签的内容都会引入该样式。

2. 类选择器

.sepcial {color: red;} 只要通过class属性引用类选择器设置的样式，那该标签引用相应样式。

可对不同类型元素的同一个名称的类选择器设置不同的样式规则：

p.red {font-size: 16px;}
h1.red {font-size: 36px;}

同一个元素可以设置多个类，之间有空格隔开：

<p class="special red">段落</p>

3. ID选择器

ID选择器与类class选择器使用方法基本相同

#one {color: yellow;}

同一个html下，ID是唯一的。

4. 群选择器和全局选择器

群选择器：集体统一的设置样式。选择器之间用逗号隔开。

p,h1,h2,h6 {font-size: 30px;}

class名和id名是区分大小写的。 全局选择器：*为通配符

* {font-size: 50px;}

5. 后代选择器

使用后代选择器，选择器之间用空格隔开

p em {font-size: 36px;}
h1.special em {color: orange;}

6. 伪类选择器

伪类选择器定义特殊状态下的样式

无法用标签、id、class及其它属性实现

<a></a>链接的4种状态：激活状态、已访问状态、未访问状态、鼠标悬停状态

伪类 说明
:link 未访问的链接
:visited 已访问的链接
:hover 鼠标悬停状态
:active 激活的链接（鼠标点击但未松开）

以点击过的状态会存储到cookie中，需要清除才可以重置。

伪类:hover和:active兼容

  1. IE6及更早版本，支持<a>标签的4种状态
  2. IE6浏览器不支持其他元素的:hover和:active

链接伪类的书写顺序：顺序错误会导致样式不生效 :link > :visited > :hover > :active

  1. a:hover必须置于:link和 :visited之后才有效
  2. a:active必须置于:hover之后，才有效
  3. 伪类名称对大小写不敏感

六、CSS继承、层叠和优先级

1. CSS继承：从父元素那里继承部分CSS属性。 不是所有的属性都可以继承。

继承的好处：

  1. 父元素设置样式，子元素可以继承部分属性
  2. 减少CSS代码

Chrome浏览器默认字体16px，h1默认字体大小2em。h1为父级字体大小的2倍。

CSS层叠：多个样式应用于同一个元素。

CSS层叠：

  1. 可以定义多个样式
  2. 不冲突是，多个样式可以层叠为一个
  3. 冲突时，按不同样式规则优先级来应用样式

2. CSS优先级

行内样式 > 内部样式 > 外部样式

说明：

  1. 链入外部样式与内部样式表之间的优先级取决于所处位置的先后
  2. 最后定义的优先级最高（就近原则）

优先级：

id选择器 > class选择器 >标签选择器

同类样式多次引用，样式表中后定义的优先级高

2. CSS权重

后代选择器的优先级如何判断

p a em {}
#p1 em {}
p.red a em {}

同一样式表中：

  1. 权值相同。就近原则（离被设置元素越近优先级越高），同类样式多次引用，样式表中后定义的优先级高。
  2. 权值不同。根据权值来判断CSS样式，哪种CSS样式权值高，就使用哪种样式。

选择器权值

选择器 权值
标签选择器 1
类原则器和伪类 10
ID选择器 100
通配符选择器 0
行内样式 1000

权值规则：

  1. 统计不同选择器的个数
  2. 每类选择器的个数乘以相应权值
  3. 把所有选择器的值相加得出选择器的权值

3. CSS权值和优先级

!important规则：可调整样式规则的优先级。添加在样式规则之后，中间用空格隔开。一般不要轻易使用。如：

div{color; red !important;}

CSS优先级总结

  1. !important声明高
  2. CSS使用方法的优先级：行内样式 > 内部样式 > 外部样式
  3. link链入外部样式和style内部样式优先级，取决于先后顺序。
  4. 样式表中优先级。id选择器 > class选择器 > 标签选择器 > 通配符
权值相同 权值不同
就近原则 使用权值搞的

七、CSS应用

CSS样式命名规则：

  1. 采用英文字母、数字以及 - 和 _ 命名
  2. 以小写字母开头，不能以数字和 - 、_ 开头
  3. 命名形式：单字，连字符，下划线和驼峰
  4. 使用有意义的命名

常用的CSS样式命名

1）页面结构：

页头：header 页面主体： main 页尾：footer 内容： content、container 容器：container 导航：nav 侧栏：sidebar 栏目：column 页面外围控制：wrapper 左右中：left right center

2）导航：

导航：nav 主导航：mainnav 子导航：subnav 顶导航：topnav 边导航：sidebar 左导航：leftsidebar 右导航：rightsidebar 菜单：menu 子菜单：submenu 标题：title 摘要：summary

3）功能：

标志：logo 广告：banner 登录：login 登录条：loginbar 注册：register 搜索：search 功能区：shop 标题： title

id和class使用：

  1. id不要滥用，谨慎使用。id是唯一的。
  2. 适当使用class，并不是所有的都要使用class。
avatar
文章
阅读
粉丝