CSS快速入门
1.CSS语法格式—简单写法
下面展示一些 内联代码片。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--规范 <style>可以编写css代码.每一个声明 最好使用分号结尾
语法:
选择器{
声明1;
声明2;
}
-->
<style>
h1{
color: brown;
}
</style>
</head>
<body>
<h1>我是标题</h1>
</body>
</html>
2.css分离写法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 链接指定到 href="css/style.css"-->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>我是标题</h1>
</body>
</html>
style.css文件
h1{
color: blueviolet;
}
3.选择器
作用：选择页面上的某一个或者每一个元素
3.1 基本选择器
1.标签选择器：选择一类标签 标签{}
2.类选择器class： 选择所有class属性一致的标签,跨标签 .类名{}
3.id选择器:全局唯一！#id名{}
优先级：id>class>标签
3.2 层次选择器
1.后代选择器:在某个元素的后面 祖爷爷 爷爷 爸爸 你
/*后代选择器 在某个元素的后面 祖爷爷 爷爷 爸爸 我 */
body p{
background:red;
}
2.子选择器 一代儿子
/* 子选择器 指向下一个 */
body>p{
background:red;
}
3.相邻兄弟选择器 同辈
/*相邻兄弟选择器 只有一个，相邻（向下） */
body + p{
background:red;
}
4.通用选择器
/*通用兄弟选择器，当前选中元素的向下的所有兄弟元素 */
body ~ p{
background:red;
}
3.3 结构伪类选择器
3.4 属性选择器
545
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
