Html 初学者 第二篇

css样式分类和缺点

css样式的三种引入方式:

1. 行内样式 在标签内部通过style属性设置元素的样式

   • 结构和样式未分离,影响代码的维持
   • 只能对一个标签生效,不能统一去设置,增加些代码的负担.开发中绝对不能使用内联样式

2. 内联样式 将样式在head中的style标签里,通过选择器设置各种样式

   • 好处: 小型项目或demo中可以使用,相对行内样式,可以为多个标签设置样式,并且修改时只需要修改一处即可全部应用.
   • 问题:只对一个网页使用,不能跨页面使用

3. 外联样式

   • 两种导入方式:link标签:<link rel="stylesheet" href=".css/reset.css">和@import url(./css/reset.css)可以重复使用,冰洁保证结构和样式分离,也可以跨界面使用样式.

选择器权重:

!important: 最高级别(谨慎使用)
内联样式: 1000
id选择器:100
类名选择器/伪类选择器/属性选择器:10
元素选择器/伪元素选择器:1
通配符,关系选择器,否定伪类:0
继承样式:没有优先级
用tuple样式计算权重(权重低的即使叠加再多也不会优于权重高的)

选择器命名

统一使用连字符"-"连接两个单词
禁止驼峰命名
不允许带有广告等宣传类单词(防止爬虫忽视)
不允许单个字母的选择器出现
以字母开头命名(为了兼容性)