JavaWeb新手避坑|CSS 3个灵魂拷问,我踩完坑全懂了
刚学JavaWeb前端先搞定了HTML能敲出页面架子但一接触CSS就懵了——满屏的属性、选择器越看越迷糊踩了好几个坑之后才慢慢摸清门道。今天就说说我刚开始学CSS时最疑惑的3个点都是新手大概率会碰到的再结合我自己练手的小例子说不定能帮你少走点弯路纯个人心得不啰嗦。第一个疑惑HTML已经能写页面结构了为啥非要用CSS这是我最开始最纳闷的事觉得多学一门语言很麻烦直到自己动手试了才懂。我最开始用HTML写了个简单的页面有标题h1、段落p代码很简单但显示出来巨丑标题又大又粗贴在左边段落文字挤在一起没有一点间距。后来我试着用CSS改了下就几行代码h1 { color: #2c3e50;text-align: center;margin-top: 20px; }p { line-height: 1.6;margin: 0 20px; }改完之后标题居中、段落有行距、还有边距瞬间清爽了。原来CSS不是多余的HTML是搭骨架CSS是给骨架“化妆”而且不用动HTML结构只改CSS就能换样式后期想调整也方便这一下就解开了我的第一个疑惑。第二个疑惑CSS选择器那么多到底该用哪个刚开始看到标签选择器、类选择器还有ID选择器我直接懵了不知道什么时候用哪个总担心用错。后来我自己练手总结出一个简单的规律如果想给所有同类型标签改样式就用标签选择器比如所有p标签如果只想给某几个特定元素改样式就用类选择器ID选择器一般用在唯一的元素上比如页面顶部的导航栏。举个我练手的小例子我想让页面里两个段落一个是灰色一个是浅蓝色用标签选择器肯定不行会把所有p标签都改成一样的这时候就用类选择器p classgray-p这是灰色段落/pp classblue-p这是浅蓝色段落/p.gray-p { color: #666; } .blue-p { color: #3498db; }这样就能精准控制每个段落的样式不用再纠结选择器用错这个疑惑也慢慢解开了其实新手不用记所有选择器先把这三个最基础的用熟就够了。第三个疑惑为什么我写的CSS样式有时候没效果这是我踩过最多次的坑明明代码写对了页面却没变化急得我反复检查最后才找到问题所在——CSS的层叠性和优先级。最开始我粗心给同一个h2标签写了两个样式先写了color: red;后来又写了color: green;本来以为会出错结果页面上显示的是绿色。后来才搞明白CSS是“后来者居上”同一个元素后面写的样式会覆盖前面的这就是层叠性。还有一次我用类选择器给某个按钮改样式却没生效最后发现是我同时用了ID选择器给这个按钮写了样式ID选择器的优先级比类选择器高所以类选择器的样式没显示。搞懂这两个点之后我再也没遇到过样式不生效的问题。说实话现在我对CSS的了解还很浅浮动、定位那些难一点的知识点还在慢慢练有时候调样式也会卡壳。但这3个疑惑解开之后我学CSS就顺畅多了也明白新手学CSS不用急着贪多先把这些基础的疑惑弄明白多动手敲代码、踩踩坑慢慢就顺手了。