CSS从入门到精通（基础篇）

从头学习了一遍css，包括：css基础, css选择器，css优先级，CSS继承和层叠、css样式命名等。

原文请访问我的技术博客番茄技术小栈

CSS基础

HTML、CSS、JavaScript关系

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

什么是CSS

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

为什么学习CSS

• CSS简化HTML相关标签，网页体积小，下载快
• 解决内容与表现分离的问题
• 更好的维护网页，提高工作效率

CSS样式规则

CSS规则由两部分构成：选择器，声明

CSS引用

写在标签内:

<style type=“text/css”>
CSS样式... 
</style>
复制代码

CSS注释

• html注释:
• CSS注释:/注释语句/

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 使用方法区别

类别	引入方法	位置	加载
行内样式	开始标签内style	html文件内	同时
内部样式	head中style内	html文件内	同时
外部样式	head中link引用	css样式文件与html文件分离	页面加载时，同时加 载CSS样式
导入式 @import	在样式代码最开始处	css样式文件与html文件分离	在读取完html文件之 后加载

CSS选择器

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

类选择器

为HTML标签添加class属性:

<h1 class="red">test</h1>

复制代码

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

.red{color: red;}
复制代码

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

<h1 class="red">test</h1>
<p>test2</p>
<p class="red"> test3</p>

p.red{color: red;}
h1.red{font-size:20px}
复制代码

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

<p class="red fsize">test</p>
复制代码

标签选择器

以HTML标签作为选择器:

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

p{
	color:blue;
	font-family:"隶书";
}

h1{
	color:red;
}
复制代码

ID选择器

为HTML标签添加ID属性:

<h1>test1</h1>
<p id="p1">test2</p>
<p id="p2">test3</p>
复制代码

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

#p1{
	color:red;
}

#p2{
	color:blue;
}
复制代码

全局选择器

所有标签设置样式:

*{
	color: blue;
}
复制代码

群组选择器

集体统一设置样式:

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

p{
	color:blue;
	font-family:"隶书";
}

h1{
	color:red;
}
复制代码

后代选择器

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

<p><em>test</em></p>
复制代码

p em{
	font-size: 40px;
}
复制代码

后代选择器可以多层

xp a em {......} /*p标签中a标签中的em*/
#p1 em {......} /*id为p1的标签中的em*/
p.red a em {......} /*class 为red的p标签中的a标签的em
复制代码

伪类

连接伪类

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

伪类	说明
link	未访问的链接
visited	已访问的链接
hover	鼠标悬停状态
active	激活的链接

伪类： hover和active

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

p:hover {
	color: red;
}

p:active{
	font-size: 20px;
}
复制代码

链接伪类的顺序

:Link > :Visited > :Hover > :Active

** 说明: **

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

CSS继承和层叠

css继承

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

CSS层叠

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

CSS优先级

CSS使用方法优先级

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

说明:

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

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 规则

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

div{
	color:red !important;
}
复制代码

CSS优先级总结

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

权值相同	权值不同
就近原则	使用权重高的

CSS样式命名

CSS样式命名规则

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

常用的CSS样式命名

页面结构

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

复制代码

导航

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

功能

标志:logo 
广告:banner 
登陆:login 
登录条:loginbar
注册:register 
搜索:search 
功能区:shop 
标题:title
复制代码

id和class使用

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

---

————————-华丽的分割线——————–

看完的朋友可以点个喜欢/关注，您的支持是对我最大的鼓励。

个人博客番茄技术小栈和掘金主页

想了解更多，欢迎关注我的微信公众号：番茄技术小栈