CSS基础

HTML、CSS、JavaScript关系

  • HTML是网页内容的载体
  • CSS样式是表现(外观控制)
  • JavaScript是行为,用来实现网页特效效果

什么是CSS

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

CSS样式规则

CSS规则由两部分构成:选择器,声明

CSS引用

写在<head></head>标签内:
<style type=“text/css”>
CSS样式…
</style>

CSS注释

  • html注释:<!–注释语句–>
  • CSS注释:/*注释语句*/

如何引用CSS样式

  • 行内样式(内联样式)
  • 内部样式表(嵌入样式)
  • 外部样式表(Link链入)
  • 导入式

CSS行内样式

在开始标签内添加style样式属性
如: <p style=“color:red;”>内容</p>

CSS内部样式

内部样式(嵌入样式),把css样式代码写在:
<style type=”text/css”>
样式…
  </style>
说明:<style>要放在<head>标签之间

CSS外部样式

  • 外部样式表,把CSS样式代码写在独立的一个文件中
  • 扩展名: CSS文件名.CSS
  • 引入外部文件:
    <link href=“XX.css” rel=”stylesheet” type=”text/css” />

说明:<link>要放在<head>标签之间

CSS导入式

  • @import “外部CSS样式”
    说明:@import写在<style>标签内最开始

CSS使用方法区别

CSS使用方法优先级

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

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

CSS选择器

• 标签选择器
• 类选择器
• ID选择器
• 全局选择器
• 群组选择器
• 后代选择器

类选择器

为HTML标签添加class属性:

通过类选择器来为具有此class属性的元素设置CSS样式:

标签选择器

以HTML标签作为选择器:

类选择器

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

类选择器

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

ID选择器

为HTML标签添加ID属性:

通过ID选择器来为具有此ID的元素设置CSS规则:

群组选择器

集体统一设置样式:

全局选择器

所有标签设置样式:

HTML文档结构

后代选择器

使用后代选择器设置,之间用空格隔开:

后代选择器可以多层:

伪类

链接伪类

链接的4中状态:激活状态,已访问状态,未访问状态,
和鼠标悬停状态。

伪类:hover和:active

1. :hover用于访问的鼠标经过某个元素时
2. :active用于一个元素被激活时(即按下鼠标之后放开
鼠标之前的时间)

伪类:hover和:active兼容

• IE6及更早版本,支持<a>元素的4种状态
• IE6浏览器不支持其他元素的:hover和:active

链接伪类的顺序

:Link > :Visited > :Hover > :Active
说明:
1. a:hover 必须置于 a:link 和 a:visited 之后,才有效
2. a:active 必须置于 a:hover 之后,才有效
3. 伪类名称对大小写不敏感。

CSS继承和层叠

CSS继承

从父元素那继承部分CSS属性

CSS层叠

• 可以定义多个样式
• 不冲突时,多个样式可层叠为一个
• 冲突时,按不同样式规则优先级来应用样式

CSS优先级规则

同一样式表中:
1. 权值相同
就近原则(离被设置元素越近优先级越高)
2. 权值不同
根据权值来判断CSS样式,
哪种CSS样式权值高,就使用哪种样式

选择器权值

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

权值规则

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

#main div.warning h2{…}
id :1 class:1 标签:2
1*100=100 1*10=10 2*1=2
权值:100+10+2=112

!important规则

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

CSS优先级总结

• !important声明高
• CSS使用方法的优先级
行内样式>内部样式>外部样式
注:link链入外部样式和style内部样式优先级,取决于先后顺序。
• 样式表中优先级
Id选择器>class选择器>标签选择器>通配符

CSS样式命名规则

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

•使用有意义命名

常用的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使用

• id不要滥用,谨慎使用
• 适当使用class

https://www.imooc.com/

发布者

deng

听闻余生久不遇,相逢别错过。

发表评论

电子邮件地址不会被公开。 必填项已用*标注