CSS基础与选代详解：布局与冲突处理

需积分: 12 147 浏览量更新于2024-09-08 收藏 134KB PDF 举报

身份认证购VIP最低享 7 折!

30元优惠券

本文档是对CSS（层叠样式表）的基础知识点进行全面梳理的指南。CSS在Web开发中扮演着至关重要的角色，它实现了结构与表现的分离，使得HTML文档的呈现更加灵活和美观。以下是主要内容的详细解析： 1. CSS的作用及优势： - 结构与显示分离：通过CSS，开发者可以将HTML的结构和样貌分开管理，提高了代码的可读性和维护性。 - 扩充HTML标记：CSS允许开发者添加新的样式属性，增强HTML元素的功能。 - 提高效率：通过预定义样式，减少了重复的样式编写，提升开发效率。 - 精美布局：CSS提供了丰富的布局工具，如浮动、定位、网格等，能实现复杂页面布局。 - JavaScript和jQuery学习基础：CSS是前端开发的基础，学习CSS有助于理解和使用更高级的JavaScript库。 2. 选择器冲突： - CSS中的选择器主要有ID选择器（#id）、类选择器（.class）、标签选择器（element），以及它们之间的优先级关系。ID选择器的优先级最高，然后是类选择器，最后是元素选择器。 3. CSS的四种使用方式： - 行内样式：直接在HTML元素中设置style属性。 - 嵌入样式：在<head>部分使用<style>标签定义。 - 链接样式：外部CSS文件通过<link>标签引入。 - 倒入样式：通过@import引入其他CSS文件。 4. 内容冲突解决： - 行内样式具有最高优先级，若存在行内、嵌入、链接或导入的样式，行内的样式会覆盖其他方式定义的。 5. CSS复合选择器： - 交集选择器：同时满足多个条件的选择器。 - 并集选择器：满足任意一个条件的选择器。 - 后代选择器：应用于父元素下所有后代元素。 - 子选择器：仅应用于直接子元素。 - 相邻选择器：仅应用于紧邻的同级元素。 - 属性选择器：根据元素的属性值进行筛选。 6. 伪类选择器： - CSS内置的伪类分为结构伪类（基于元素位置）和UI元素伪类（基于元素状态）。 - 结构伪类如`:root`（根元素）、`:not`（排除某些元素）、`:empty`（空元素）等。 - UI元素伪类如`:first-child`（第一个子元素）、`:last-child`（最后一个子元素）、`:target`（页面中被激活的链接）等。 7. 伪类选择器在实际样式中的应用示例： - 设置整个文档的背景色为天蓝色：`:root { background-color: skyblue; }` - 除h1元素外，设置其他元素背景为黄色：`Body *:not(h1) { background-color: yellow; }` 通过本文档的学习，读者可以深入了解CSS的基本概念、选择器的用法以及如何解决样式冲突，这对于初学者和进阶者来说都是宝贵的知识资源。

资源详情

资源推荐

CSS 层叠样式表

1. CSS 的作用及优势：

做到了结构与显示分离；

扩充了 HTML 标记；

提高网站维护的效率；

可以实现精美的布局；

利于学习 JS，Jquery。

3.选择器冲突：id>class>标签选择器

4.CSS 的四种使用方式

（1）行内样式

（2）嵌入样式

（3）链接样式

（4）倒入样式

5.CSS 不同方式中内容冲突：行内 > 嵌入/链接/导入（顺序在后面的作用）

6.CSS 复合选择器：

（1）交集选择器 .

（2）并集选择器 ,

（3）后代选择器

（4）子选择器 >

（5）相邻选择器 +

（6）属性选择器 [],*^$

div[id=”first”]{……}

input[type=”text”]{……}

可以采用三个通配符来扩展我们的属性选择器：*^$

[attr*=”value”] 匹配属性包含特定的元素

a[href*=”lnnu”] 匹配<a href=”http://www.lnnu.edu.cn”>包含匹配</a>

[attr^=”value”] 开头

a[href^=”ftp”]，匹配<a href=”ftp://computer.tech.cn”>开头匹配</a>

[attr$=”vaule”] 结尾匹配

a[href$=”cn”]匹配：<a href=”http://189.aa.cn”>尾匹配</a>

（7）伪类选择器

①CSS 中定义好的，而不是用户自己定义的

②可分为两种：

结构伪类选择球；UI 元素伪类选择器。

结构伪类选择器是利用文档树进行元素过滤，更加简洁。

UI 元素伪类选择器作用在标记的状态上。

下载后可阅读完整内容，剩余7页未读，立即下载

xilance

粉丝: 7
资源: 21

CSS基础与选代详解：布局与冲突处理

3一面 3：CSS-HTML 知识点与高频考题解析.md

CSS3知识点归纳

CSS的知识总结和梳理.xmind

vue 安装了postcss-loader 并配置了 postcss-pxtorem ，然后删除了postcss-loader和postcss-pxtorem,项目再启动会报错Loading PostCSS "postcss-pxtorem" plugin failed: Cannot find module 'postcss-pxtorem'

postcss-px-to-viewport-8-plugin 与postcss-pxtorem的区别

postcss-to-viewport

postcss-pxtorem和postcss-px2rem 区别

css - @supports无法从SASS编译为CSS css-loader

react脚手架引入配置postcss-px-to-viewport或postcss-px2rem失效的问题

css-in-css

Loading PostCSS "postcss-px-to-viewport" plugin failed: Cannot find module 'postcss-px-to-viewport'

npm i postcss postcss-loader postcss-px-to-viewport -D。

postcss-px-to-viewport

postcss-import报错

postcss-less

npm下载postcss-px-to-viewport

PostCSS plugin postcss-purgecss requires PostCSS 8

Loading PostCSS "postcss-import" plugin failed: Cannot find module 'postcss-import'

postcss-px-to-viewport怎么用

umi postcss-px-to-viewport

最新资源