CSS基础

标签：栏目   层叠样   方法   其它   多个   idt   contain   优先   加载   

[目录]

一、CSS基础介绍

1. CSS层叠样式表（Cascading Style Sheet）：用于定义HTML内容在浏览器内的显示样式
2. 特点：
   • CSS简化HTML相关标签，网页体积小，下载快
   • 解决内容与表现分离的问题
   • 更好的维护网页，提高工作效率

二、CSS基础语法

1. CSS样式规则：CSS规则由两部分构成：选择器，声明
2. CSS引用

3. CSS注释：/注释语句/

三、CSS的使用方法

1. 引用CSS样式的方法
   • 行内样式（内联样式）：在开始标签内添加style样式属性，如：

     内容

   • 内部样式表（嵌入样式）：把CSS样式代码写在style样式中，如：
   • 外部样式表：把CSS样式代码写在独立的一个文件中，扩展名.css，引入外部文件，，要放到标签内
   • 导入式：@import“外部CSS样式”
2. CSS使用方法区别

3. 使用链入外部样式的好处
   • CSS和html分离
   • 多个文件可以使用同一个样式文件
   • 多文件引用同一个CSS文件，CSS只需要下载一次
4. CSS使用方法优先级

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

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

5. CSS优先级规则

• 同一样式表中：
  • 权值相同：就近原则（离被设置元素越近优先级越高）
  • 权值不同：根据权值来判断CSS样式，哪种CSS样式权值高就使用哪种样式

6. 选择器权值
   • 标签选择器：权值为1
   • 类选择器和伪类：权值为10
   • ID选择器：权值为100
   • 通配符选择器：权值为0
   • 行内样式：权值为1000
7. 权值规则
   • 统计不同选择器的个数
   • 每类选择器的个数乘以相应权值
   • 把所有的值相加得出选择器的权值
8. !import规则

   
   可调整样式规则的优先级，添加在样式规则之后，中间用空格隔开

四、CSS选择器

1. 标签选择器：以HTML标签作为选择器
2. 类选择器：为HTML标签添加class属性，通过类选择器来为具有此class属性的元素设置CSS样式，可对不同类型元素的同一个名称的类选择器设置不同的样式规则，同一个元素可以设置多个类，之间有空格隔开
3. ID选择器：为HTML标签添加ID属性，通过ID选择器来为具有此ID的元素设置CSS规则
4. 群组选择器：集体统一设置样式
5. 全局选择器：所有标签设置样式
6. 后代选择器：使用后代选择器设置，之间用空格隔开
7. 伪类：伪类伪类选择器定义特殊状态下的样式，无法用标签id,class及其它属性

• 伪类:hover和:active兼容
  • IE6及更早版本支持元素的4种状态
  • IE6浏览器不支持其他元素的:hover和:acitve
• 链接伪类的顺序

  
  :link > :visited > :hover > :active

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

五、CSS继承和层叠

1. CSS继承：从父元素那继承部分CSS属性
2. 继承的好处：父元素设置样式，子元素可以继承部分属性，减少CSS代码
3. CSS层叠
   • 可以定义多个样式
   • 不冲突时，多个样式可层叠为一个
   • 冲突时，按不同样式规则优先级来应用样式

六、CSS样式命名规则

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

常用的CSS样式命名

• 页面结构

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

• 导航

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

• 功能

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

CSS基础

标签：栏目   层叠样   方法   其它   多个   idt   contain   优先   加载   

原文地址：https://www.cnblogs.com/yujiao-99/p/12872925.html