• CSS的总结


    最近刚看完CSS入门经典, 结合之前对CSS的了解, 突然有点感想, 特地写下来.


    说起CSS,就不得不提起HTML. 众所周知, HTML是一门标记性语言. 何谓标记性语言?简单的来说就是:每一种标记(标签,例如 <p><div><span>)经过浏览器的渲染,呈现出不同的形状. 渐渐地, 内置的形状不能满足人们日益增长的需求, 因此, CSS诞生了, 本质上来说, CSS就是为了让网页更加美观而存在.

    CSS是为了美化HTML的. 那么美化前, 我们需要找到要美化的HTML的标签, 怎么找? 

    CSS提供了一个叫作选择器的东西,它的作用就是选择你要美化的标签. 选择器有4种基本类型: 标签选择器(tag),通用选择器(*), 类选择器(.class)和ID选择器(#id).4种选择器可混合使用. 当然,除了基本类型, 也存在着不基本类型(高级?感觉不算吧,就先这么叫着), 其中包括了: 后台选择器,直接子选择器, 兄弟选择器, 属性选择器, etc. 

    现在我们知道了怎么找到要美化的标签了.

    接下来假如我们用了合适的方法找到了相对应的标签, 那么我们就可以开始进行美化了. 可是美化美化, 到底我们美化的是什么? 

    答案就是属性,更准确来说,美化就是更改属性对应的值. 我们可以把HTML元素标签看作一个object(或者盒子), 每个object(或者盒子)都有内置属性(OO思想), 而CSS更改的就是这些属性的值从而达到美化的效果. 为什么说盒子呢?如果你了解过CSS,肯定知道盒子模型啦. 

    而属性又可以细分, 其中包括了 字体属性, 文本属性, 边距属性(就是盒子模型啦), 浮动属性, 列表属性, 背景属性, 定位属性, 表哥属性, etc.

    现在我们找到了标签(元素), 也修改了它的属性值, 那么我们如何将它应用到HTML文件呢?

    CSS提供了3种方式, 分别是: style属性, style标签 和 link标签导入(级别依次降低.)

     

    CSS无非就这样子工作的, 找到元素 --> 修改其属性值 --> 应用到页面. 

    这样一说,好像CSS蛮简单的.其实它确实不难. 可能比较难的地方是第二步, 你可以看到上面有那么多属性,而每个属性基本上都有4,5个值, 所以给人的感觉好像很多,挺容易混乱的.但是其实很多属性是一看就懂的.  个人觉得需要花点心思研究的有: 浮动, 定位, 盒子模型的边距折叠.

    (PS:纯粹个人感想, 本人前端菜鸟, 如果有什么不对的地方劳烦指明出来,谢谢~)


     未完待续...

  • 相关阅读:
    网络配置bridge
    ng-zorro等组件默认样式的修改
    正则表达式(/[^0-9]/g,'')中的"/g"是什么意思?
    ||与&&的返回值
    JS判断对象是否存在的10种方法总结
    undefined与null的区别
    前端页面布局中水平、垂直居中问题
    MAMP VirtualHost 无效 配置踩坑
    问题锦选
    Windows相关要点记录
  • 原文地址:https://www.cnblogs.com/lanxue/p/2908116.html
Copyright © 2020-2023  润新知