2021-07-25CSS知识点整理

最新推荐文章于 2024-05-26 20:46:36 发布

kesin_lee

最新推荐文章于 2024-05-26 20:46:36 发布

阅读量185

点赞数

分类专栏：学前端

本文链接：https://blog.csdn.net/kesin_lee/article/details/119074103

版权

CSS知识点整理

三种书写位置

1内嵌式将CSS代码嵌入到html文件中。代码耦合度较低，工作中偶尔使用

<style type=text/css>
      div {
   color:red;}
</style>

2内联式将CSS代码嵌入到html文件中。代码耦合度很高，有代码冗余，难以维护，工作中偶尔使用。

3外链式将CSS代码单独卸载CSS文件中，css代码和html代码绝对分离，代码耦合度极低，在工作中经常使用。

<link rel="stylesheet" type="text/css" href="one.css"/                                   >

命名不用数字开头，可用字母或者下划线开头，加上字母，数字，下划线，中划线。

建议用驼峰命名法：第一个单词首字母小写，从第二个单词开始首字母大写，例如：.yellowGreenStudent

多类名调用：标签可以调用多个类名，类名间用空格隔开

关系选择器后代选择器、并集选择器、相邻兄弟选择器、通用兄弟选择器、一级后代选择器

并集选择器：用，将多个选择器隔开，实现共同的属性

相邻兄弟选择器：用+ 匹配所有作为指定元素的相邻同级的单个元素。

兄弟（同级）元素必须具有相同的父元素，“相邻”的意思是“紧随其后”。
示例如下：最终只有段落三应用到了div+p的属性。

<style>
	div + p {
  		background-color: yellow;
	}
</style>
</head>
<body>
	<h1>相邻兄弟选择器</h1>
	<p>相邻的同胞选择器（+）选择所有作为指定元素的相邻的同级元素。</p>
	<div>
  		<p>div 中的段落 1。</p>
  		<p>div 中的段落 2。</p>
	</div>

	<p>段落 3。不在 div 中。</p>
	<p>段落 4。不在 div 中。</p>
</body>
}

通用兄弟选择器：用~匹配属于指定元素的同级元素的所有元素

兄弟（同级）元素必须具有相同的父元素，“相邻”的意思是“紧随其后”。
在相邻兄弟代码中，使用 div~p {} 最后是段落3和段落4应用到了属性。

一级后代选择器：用>选择所有的第一级后代

	<style type="text/css>
		.box>ul>li{
   border:red solid 1px;}
		.box>ul>li>ul>li {
   
            border: #22A4FF solid  1px;
        }
	</style>
</head>
<body>
	<div class="box">
		<ul>一级ul
			<li>一级li
				<ul>二级ul
					<li>二级li</li>
					<li>二级li</li>
					<li>二级li</li>
				</ul>
			</li>
			<li>一级li
				<ul>二级ul
					<li>二级li</li>
					<li>二级li</li>
					<li>二级li</li>
				</ul>
			</li>
		</ul>
	</div>
</body>