CSS样式
简介
CSS: 级联样式表单,cascade style sheets
- CSS 指层叠样式表(cascade style sheets)
- 样式定义如何显示 HTML元素
- 样式通用存储在样式表中
- 把样式添加到HTML4.0中,是为了解决内容与表现分离的问题
- 外部样式表 可以极大提高工作效率
- 外部样式表通常存储在CSS文件中
- 多个样式定义可层叠为一个
作用:
css使用一种样式表单,主要是用来对HTML页面进行样式的美化,增强样式和简化代码
注意:
css使用中网页样式表单,css一般使用不能单独使用,而是要在页面中体现
CSS的格式:
样式名称:样式值;
例如:
color :red;
font-size : 24px;
css在页面中的引入方式:
- 行内样式
在html中所有的标签中共有一属性style,使用该属性即可引入css样式
例:
<h1 style="color:red;font-size: 48px;">我是一个标题</h1>
- 内部样式
在页面中的head头部标签中,使用style标签来引入内部样式
格式:
选择器{
样式名称:样式值;
…
}
例:
<style>
/* css样式 */
h2{
color: blue;
}
</style>
- 外部样式
在项目中新建一个css文件,把样式写入到当前的文件中,在你需要的html页面中使用link来引入即可
css文件
h3{
color: chartreuse;
font-size: 50px;
}
html页面
<link href="c.css" rel="stylesheet"/>
css的选择器:【再css中用来选择html标签的工具】
标签选择器 标签名
多重样式:
如果有多个不同的样式设置同一个标签元素,则合并样式
如果多个相同的样式设置同一个标签元素,则样式以 就近原则
使用
CSS选择器
CSS选择器用于选择你想要的元素的样式的模式。
基本选择器:
- 类选择器 .class
- id选择器 #id 注意:一般id唯一
- 标签选择器 标签名
- 所有选择器 *
层次选择器:
- 选择器1,选择器2,........ 同时选择多个标签
- 父选择器 子选择器 选择父标签下的后代元素
- 选择器1>选择器2 选择1的子标签标签【孙子标签不执行】
- 选择器1+选择器2 选择1的相邻2标签
属性选择器:
- [attribute] 选择拥有此属性的标签
- [attribute=value] 选择拥有此属性且值固定的标签
- [attribute^=value] 选择此属性值以value开头的标签
- [attribute$=value] 选择此属性值以value结尾的标签
- [attribute*=value] 选择此属性值包含value的标签
伪类选择器
- :visited 链接访问后的样式
- :link 链接未访问前的样式
- :active 链接再出发时的样式
- :hover 链接再鼠标悬停时的样式
注意:如果以上四个样式都要设置,则:visited必须再后面三种的最前方设置即可
子标签选择器:
- :only-child 选择只有一个子标签的父元素
- :nth-child(n) 选择具体的几个子标签元素 2n odd even 1
- :last-child 选择最后一个子标签
- :first-child 选择第一个子标签
小demo
例如一个小项目:
源码及源文件:链接:https://pan.baidu.com/s/1aGAMZC8RWUHR12HOBVyqsQ
提取码:xxal
效果图: