css的基本语法

哎呀，说到 CSS，这就是我在创建网页时遇到很多麻烦的地方。
记得刚进入这个行业的时候，对于某些项目，客户的要求很多，风格也很复杂。
因此，在兼容性方面需要很长时间的努力。
我来说说我自己的经历。

CSS的基本语法其实非常简单。
想想看，在我编写网页之前，HTML 已经完成，然后我创建一个单独的 CSS 文件，例如 style.css，并引用它。
这样，表示层和数据层就分开了，以后更容易更改。

例如，当我更改电子商务网站模板时，我需要调整按钮样式。
我打开 CSS 文件，找到按钮选择器，例如 buy-now-btn，然后设置其样式：
css 立即购买 btn { 背景颜色：ff0000； /红色背景/ 颜色: 白色; /白字/ 内边距：1 0px 2 0px； / 上下各1 0px，左右内边距2 0px / 边框：无； /无界限/ 光标：指针； / 鼠标手形光标 /
这样，所有 ID 为 buy-now-btn 的按钮都将具有红色背景、白色文本、填充且无边框。
当鼠标向上移动时，它会变成手的形状。

但是，我当时遇到了浏览器兼容性问题。
例如，IE6 ，该死的东西，不能识别很多CSS。
我记得在一个项目中我改造了一个新闻网站并使用了非常新的 CSS3 属性。
结果IE6 就变得乱七八糟了。
我研究了很长时间，最后发现对于IE6 ，我可以使用旧方法并添加一个前缀，例如：
css 新闻项目{ 内边距：5 px； 宽度：2 00px； 宽度：2 1 0px； /IE6 专用/
这样FF和Chrome显示正常，IE6 稍微调整宽度。

另外，垂直居中，我也遇到了麻烦。
例如，当时创建活动页面时，容器中的内容需要垂直居中。
我尝试了很多方法，最后发现行高和高度一起使用效果很好。
但请注意，这并不适用于所有情况。
例如：
CSS 中间框{ 高度：3 00px； 行高：3 00px； /高度与行高一致/ 文本对齐：居中； /文字中心/ 垂直对齐：居中； / 中心元素 /
这样，中间框中的内容就会垂直居中。
不过这个方法并不是万能的，有时需要与其他属性结合使用。

总之，CSS虽然简单，但是兼容性问题和各种技术还是要一步步摸索的。
当时我为了项目改了N次CSS才算对了。
现在想来，我还需要多练习、多看、多学。

css的语法

昨天在一家咖啡馆里，我旁边的那个人正在电脑前挠头。
屏幕说div.content样式没有生效。
他尝试了三种日志记录方法，最后看到了 console.log(document.querySelector('.content'));在控制台上。
没有报告任何错误，但风格保持不变。
等等，他忘了加分号，我提醒他并喜欢它。
这个场景让我想起了CSS优先级，明明写得没错，但就是不行。
内联样式具有最高优先级。
他尝试插入 style="color: red;"直接进入 HTML，它立即变成红色。
标识符选择器比类选择器更强大。
内容一旦改变，效果会立竿见影。
类选择器经常使用，例如 .container .inner .text 和其他后代选择器。
它们的优先级高于单独的.text，但低于text。
[type="text"] 属性选择器很少使用，但它确实很有用。
其input[type="text"]的背景颜色由CSS控制。
广告块内颜色：蓝色；字体大小：1 4 px；除非写了!important，否则同时有效，但如果使用得太频繁，看起来就像作弊。
今天他告诉我，!important 在项目中的使用频率是在规格表中的三倍，导致迷宫般的风格冲突。
优先顺序为：字符串 > 标识符 > 类 > 元素 > 伪类 > 伪元素。
伪类（例如 :hover）和伪元素（例如::before）的优先级高于元素，但低于类。
现在，它将 CSS 文件分为四个部分：重置、基础、布局和组件，并使用 @import 来表示它们，因此层次结构更加清晰。
但我想如果你使用 Sass 或 Less 进行预处理并使用 BEM 命名法来命名类名，那么没有人会停止担心优先级吗？比如article__title--highlight，直接看类名就可以找出层次关系。
他去查资料，我一边喝拿铁，一边突然想到这些复杂的优先级规则。
难道是设计者太想控制样式继承，结果却给前端开发者设下了陷阱？

CSS是什么语言？基本语法是什么呢？

昨晚，我在咖啡馆的电脑前修改网页，客户要求将某个按钮的颜色调暗。
我打开代码，找到按钮，发现它使用了类选择器.p-cta。
我心想，最好记得加上ID前缀，否则如果有另一个.p-cta，就会被错误修复。
我在调色板上选择了深蓝色，输入了几行 CSS，几秒钟内按钮就变黑了。
对面的顾客说：“对对对，是蓝色的。
”我松了一口气，并仔细检查以确保没有其他按钮受到影响。
这时候我突然想到，是不是上次换头像的时候ID选择器user-profile也变了？等等，上周似乎添加了一个移动菜单、响应式布局......