CSS基础 | 青训营笔记

用户2982905914262
81 阅读4分钟

立个新的flag

这是我参与【第五届青训营】伴学笔记创作活动的第2天。前段时间有些摆烂，这两天逐渐找回状态了，要稍微整理一下了。

CSS的用法

  1. 外链
    内容样式和内容架构不写在一个文件中，html文件负责网页的内容和架构，css文件(建议和对应的html文件在同一目录下，方便维护管理，文件后缀即.css)负责网页内容的样式，包括但不限于字体颜色、构件的位置大小。这样划分开很能体现出不同文件各司其职，也最推荐使用这种用法。
    在html文件head标签中加入link标签就能把css样式文件和html文件关联起来。
<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="./xxx.css">
    </head>
    <body>
    </body>
</html>
  1. 内联
    在需要加入样式的标签中加入style这个属性，css语法的样式内容赋值给它即可。一般不这么用，样式过多时更是会导致代码过于臃肿。不过具体情况具体考量，在循环渲染同一格式但样式不同的内容时，这种内联的样式用着还是比较方便的。
<p style="color:blue;">xxx</p>
  1. 嵌入
    在html文件head标签中加入style标签，style标签中的内容即是css语法的样式内容。这种方式对比第一种方式，就是没有特别好的划分职能，但是如果像是在组件开发中，这样合起来在一个文件中写有一种整体感，从另一方面来说，能够做到关注点分离。
<!DOCTYPE html>
<html>
    <head>
        <style>
            p {
               color:blue; 
            }
        </style>
    </head>
    <body>
    </body>
</html>

CSS中的选择器

css主要是将特定的样式赋予特定的元素上，所以找到这个元素就是一大重点，在css中常见的有标签选择器、类选择器、id选择器。下面列举部分~

通配选择器标签选择器类选择器
* {
margin:0;
}		p {
color:blue;
}		.box {
color:blue;
}
*表示全局的元素，这样写表示会选中所有标签。一般在初始化页面的时候用来消除一些浏览器的默认格式。p表示p标签，这样写表示会选中所有p标签的元素。此处box是在html文件的标签中设置的class属性值，如<p class="box">xxx</p>这样写表示选择class值为box的元素。
id选择器属性选择器
#box {
color:blue;
}		[type="password"] {
background-color:blue;
}		[disabled] {
background:blue;
}
此处box是在html文件的标签中设置的id属性值，如<p id="box">xxx</p> ，这样写表示选择id值为box的元素。不同于class属性，一个id值只能使用一次。此处type和disabled是某标签的属性，这样写表示选择有此属性(且等于某值)的元素

如果将不同选择器用逗号间隔可以同时进行设置（如p,h1{color:blue}）。另外，还可以通过组合得到更多的选择器，如下：

1.PNG

最后，不同选择器之间有优先级(内联样式>id>类、属性、伪类>标签、伪元素)，会根据优先级进行样式覆盖；组合得到的选择器会根据其特异度(含有选择器种类、个数的多少)进行样式覆盖，如果特异度相同，还会判断定义的位置(比如可能会判断属性选择器对应的属性和类选择器对应的class属性定义的位置)，定义靠后的优先；同级选择器之间后面设置的样式会覆盖前面设置的样式。 (关于特异度，我看了视频之后看了下这两篇文章www.jianshu.com/p/0e5bb0a42… 、blog.51cto.com/mouday/5056…)

一些我之前不知道的地方

  • 继承：某些属性会自动继承其父元素的计算值，除非显示指定一个值。一般和文字相关的都会自动继承，比如<p>我喜欢<em>大白菜</em></p>em标签的内容会自动继承赋予p标签的样式。也可以通过设置，使得某些样式具有继承性，比如*{box-sizing:inherit;}这样设置之后，box-sizing样式就具有了继承性。
  • 盒子模型：每一个元素都可以理解为一个盒子，一个盒子包括：内容content、内边距padding、边框border、外边距margin。继续细分的话又有两种，可用box-sizing样式进行设置，主要的区别在于对于元素width和height的定义，模型图如下： |content-box|border-box| |---|---| |

    2.PNG

    |

    3.PNG

    |

最后

俺才疏学浅，总结的可能有片面和不对的地方，欢迎路过的大佬指出，我虚心接受！

avatar
文章
阅读
粉丝