当前位置：首页 > news >正文

CSS3核心技术

news 2025/9/9 7:06:49

1.简介及样式表分类

1.1简介

【1】适用场景

CSS核心是控制视觉表现

【2】详细介绍

1.2 样式表分类

<head><style>div {color: blue;}strong {color: purple;}</style>
</head>
<body><!-- 1.内联样式表（行内样式表） 直接写到标签内部 控制当前标签--><p style="color:pink;">我是佩奇我喜欢粉色</p><!-- 2.内部样式表（嵌入样式表） 写到head标签中的style标签中 控制当前页面 --><div>我是乔治，我是蓝色</div><strong>我喜欢紫色</strong>
</body>

<head><!-- 3.外部样式表（链接样式表） 写到外部的css文件中 控制当前页面 --><link rel="stylesheet" href="./css.css/my.css">
</head>
<body><div>我是猪爸爸，我喜欢红色</div>
</body>
并且另写一个CSS文件：
eg:
div{color: red;
}

2.类型选择器及AI注释

2.1CSS选择器

【1】选择器是什么

【2】选择器的细分

2.1.1基础选择器

2.1.1.1类型选择器

<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {color: pink;font-size: 20px;}
/*就近原则   层叠性【谁离body的div近，谁决定】
所以最后是红色
*/div {color: red;}</style>
</head><body><!-- 类型选择器 标签选择器 也叫元素选择器 --><div>春</div><div>夏</div><div>秋</div><div>冬</div>
</body>

注意书写规范：

2.1.1.2 类选择器

【1】场景

【2】语法

【3】代码演示

<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 类选择器 选择一个或多个 实现差异化选择*/.pink {color: pink;}/* 用短横线连接单词 */.sub-nav {font-size: 20px;}</style>
</head><body><div class="pink">春</div><div>夏</div><div>秋</div><!-- 用空格来写下一个属性 --><div class="pink sub-nav">冬</div></body>

2.1.1.3 id选择器

【1】语法

【2】代码演示

<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* id 选择器 */#first {color: pink;}</style>
</head><body><div id="first">春</div><div>夏</div><div>秋</div><div>冬</div></body>

注意：类选择器与id选择器的区别

2.1.1.4通配符选择器

【1】语法

2.1.1.5 总结

2.1.2关系选择器

【1】分类

2.1.2.1 后代选择器

【1】使用场景

【2】语法

【3】代码演示

<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 后代选择器 --><style>/* 法一 */div a {Color: red;}/* 法二 */.footer a {color: red;}/* 选择其一即可 *//* 法一 */ul li a {color: skyblue;font-size: 20px;}/* 法二 */.nav li a {color: skyblue;font-size: 30px;}</style>
</head><body><ul class="nav"><li><a href="#">首页</a></li><li><a href="#">产品介绍</a></li><li><a href="#">合作模式</a></li></ul><div class="footer"><a href="#">关于我们</a><a href="#">联系我们</a><a href="#">隐私政策</a></div>
</body>