初识CSS3
·
CSS的基本语法
CSS基本语法结构
h1 {
font-size:12px;
color:#F00;
}选择器{
声明1；
声明2；
……
}
style标签
<style type="text/css">
h1 {
font-size:12px;
color:#F00;
</style>HTML中引入CSS样式
行内样式
//使用style属性引入CSS样式
<h1 style="color:red;">style属性的应用</h1>
<p style="font-size:14px; color:green;">直接在HTML标签中设置的样式</p>内部样式表
CSS代码写在<head>的<style>标签中
<style>
h1{color:green;}
</style>外部样式表
//1.CSS代码保存在扩展名为.css的样式表中
<head>
……
<link href="style.css" rel="stylesheet" type="text/css" />
……
</head>
//2.HTML文件引用扩展名为.css的样式表，有两种方式
<head>
……
<style type="text/css"></style>
</head>
CSS样式优先级
行内样式>内部样式表>外部样式表
就近原则：越接近标签的样式优先级越高
CSS3基本选择器
标签选择器
类选择器
<标签名 class="类名称"> 标签内容 <1标签名>
ID选择器
基本选择器的优先级
ID选择器>类选择器>标签选择器
CSS的高级选择器
层次选择器
后代选择器
后代选择器两个选择符之间必须要以空格隔开，中间不能有任何其他的符号插入
子选择器
相邻兄弟选择器
通用兄弟选择器
结构伪类选择器
<html>
<head lang="en"><meta charset="UTF-8">
<title>使用CSS3结构伪类选择器</title>
</head>
<body>
<p>p1</p><p>p2</p><p>p3</pン
<ul>
<|i>|i1</|i><|i>|i2</|i><|i>|i3</l>
</u|>
</body>
</html>
属性选择器
E[attr]属性选择器
E[attr=val]属性选择器
E[attr*=val]属性选择器
E[attr^=val]属性选择器
E[attr$=val]属性选择器
码道开发者社区，聚焦华为云码道 CodeArts 代码智能体，沉淀 Agent、Skill、鸿蒙开发实战内容，供开发者查阅资料、交流技术、分享工程实践
更多推荐
16
0- 0
已为社区贡献2条内容
所有评论(0)