CSS的基本语法

一.CSS的基本语法

1.1CSS的基本语法结构
html 复制代码
h1 {
	font-size:12px;
	color:#F00;
}

h1 选择器

font-size:12px 声明

font-size 属性

CSS的最后一条声明后的";" 可写可不写,但是,基于W3C标准规范考虑,建议最后一条声明的结束";" 都要写上

1.2style标签
html 复制代码
<style type="text/css">
h1 {
	font-size:12px;
	color:#F00;
}
</style>

二.HTML中引入CSS样式

2.1行内样式

使用style属性引入CSS样式

html 复制代码
<h1 style="color:red;">style属性的应用</h1>
<p style="font-size:14px; color:green;">直接在HTML标签中设置的样式</p>
2.2内部样式表

CSS代码写在<head><style>标签中

html 复制代码
<style>
        h1{color: green; }
</style>
2.3外部样式表

CSS代码保存在扩展名为.css的样式表中

HTML文件引用扩展名为.css的样式表,有两种方式

2.3.1链接式
html 复制代码
<head>
  ......
<link href="style.css" rel="stylesheet" type="text/css" />
......
</head>

href 文件路径

rel 使用外部样式表、

type 文件类型

2.3.2导入式
html 复制代码
<head>
......
<style type="text/css">
<!--
@import url("style.css");
-->
</style>
</head>

三.CSS3基本选择器

3.1标签选择器

HTML标签作为标签选择器的名称<h1>...<h6>、<p>、<img/>

html 复制代码
p { font-size:16px;}

p 标签名称

font-size 属性

16px 值

3.2类选择器
html 复制代码
.class { font-size:16px;

class 类名称

font-size 属性

16px 值

3.3ID选择器
html 复制代码
#id { font-size:16px;

id id名称

font-size 属性

16px 值

注意:

标签选择器直接应用于HTML标签

类选择器可在页面中多次使用

ID选择器在同一个页面中只能使用一次

四.CSS的高级选择器

4.1层次选择器
css 复制代码
后代选择器
body p{  background: red;  }

注意:

后代选择器两个选择符之间必须要以空格隔开,中间不能有任何其他的符号插入

css 复制代码
 子选择器
 body>p{  background: pink;  }
css 复制代码
相邻兄弟选择器
.active+p {  background: green;  }
css 复制代码
通用兄弟选择器
.active~p{  background: yellow;  }
4.2结构伪类选择器

前三个是一类 ,在父级里从一个元素开始查找,不分类型,不具有指定元素类型的能力

后三个是一类 ,在父级里先看类型,再看位置,具有指定元素类型的能力

示例

css 复制代码
ul li:first-child{ background: red;}
ul li:last-child{ background: green;}
p:nth-child(1){ background: yellow;}
p:nth-of-type(2){ background: blue;}

分别是:

选择ul下的第一个子元素,并且是li,变为红色背景

选择ul下的最后一个子元素,并且是li,变为绿色背景

选择到父元素的第一个p元素,变成黄色背景

选择到父元素的第二个p元素,变成蓝色背景

4.3属性选择器
4.3.1 E[attr]选择器:
css 复制代码
 a[id] { background: yellow; }

含有id属性的a元素,设置背景元素使黄色

4.3.2 E[attr=val]属性选择器:
css 复制代码
 a[id=first] { background: red; }

含有id属性,并且id属性值为first的a元素,背景颜色变成红色

E[attr=val]属性选择器中,属性和属性值必须完全匹配才能被选中

4.3.3 E[attr*=val]属性选择器

所有的a元素都有class属性,并且属性中都有links字符串,把其背景颜色设成红 色

4.3.4 E[attr$=val]属性选择器
复制代码
 a[href$=png] { background: red; }

含有href属性,并且属性值是png字符结尾的,背景颜色变成红色

4.3.5 E[attr^=val]属性选择器
css 复制代码
 a[href^=http] { background: red; }

含有href属性,并且属性值是http字符开头的,背景颜色变成红色

相关推荐
前行的小黑炭18 分钟前
设计模式:为什么使用模板设计模式(不相同的步骤进行抽取,使用不同的子类实现)减少重复代码,让代码更好维护。
android·java·kotlin
Mintopia18 分钟前
深入理解 Three.js 中的 Mesh:构建 3D 世界的基石
前端·javascript·three.js
前端太佬22 分钟前
暂时性死区(Temporal Dead Zone, TDZ)
前端·javascript·node.js
Java技术小馆23 分钟前
如何设计一个本地缓存
java·面试·架构
Mintopia24 分钟前
Node.js 中 http.createServer API 详解
前端·javascript·node.js
xRainco29 分钟前
Redux从简单到进阶(Redux、React-redux、Redux-toolkit)
前端
印第安老斑鸠啊30 分钟前
由一次CI流水线失败引发的对各类构建工具的思考
前端
CodePencil32 分钟前
CSS专题之外边距重叠
前端·css
hepherd34 分钟前
Flask学习笔记 - 表单
前端·flask
求知呀34 分钟前
最直观的 Cursor 使用教程
前端·人工智能·llm