css的艺术

时间  2020-03-22
标签 css 艺术 栏目 CSS 繁體版
原文   原文链接

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

HTML:网页内容的载体css

CSS: 控制页面的样式html

JavaScript: 用来实现网页功能浏览器

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

2、CSS发展历史：

  1. 1996年W3C发布CSS1
  2. 1998年W3C发布CSS2
  3. 如今CSS3

3、CSS内容：

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

4、引入css方法：

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

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

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

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

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

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

5、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. 伪类名称对大小写不敏感

6、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选择器 > 标签选择器 > 通配符
权值相同 权值不一样
就近原则 使用权值搞的

7、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。
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程