css入门第一帖

最新推荐文章于 2022-07-11 18:52:20 发布

原创最新推荐文章于 2022-07-11 18:52:20 发布 · 224 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#CSS

CSS 专栏收录该内容

4 篇文章

订阅专栏

本文深入讲解CSS（层叠样式表）的基本概念、语法及选择器的使用，包括核心选择器、层次选择器、属性选择器、伪类选择器和伪元素选择器。探讨了在HTML中应用CSS的不同方式，如内联样式、内部样式表和外部样式表，以及它们各自的优缺点。

CSS

1. 介绍

层叠样式表：CSS(英文全称：Cascading Style Sheets)是一种用来表现HTML或XML等文件样式的计算机语言。

层叠

多个样式修饰一个结构
子元素从父元素那里继承样式
优先级
样式表
相关样式在一起定义（封装）

2. 语法

1) 如何在html中应用css

定义style属性中
缺点：样式与结构冗余
优点：优先级较高

定义在head标签中的style标签中
缺点：样式的复用率较低
优点：样式与结构分离

 	<head>
 		<meta>
 		<title></title>
 		<link rel="stylesheet" href="">
 		<script></script>
 		<style>
 			//css样式
 			div {
 				color:#fff;
 				background:#333
 			}
 		</style>
 	</head>
 	<body>
 		<div></div>
 	</body>

将样式定义在css文件中
优点：样式的复用率高（框架:例如bs），样式与结构分离
生成style.css文件
```
 div {
 	color:#fff;
 	background:#333
 }

 b.html
 	<head>
 		<link rel="stylesheet" href="./style.css">
 	</head>
```

2) 规则

style属性：
属性名:属性值;属性名:属性值;

style标签/.css

选择器 {
				属性值:属性值;
				属性名:属性值;
			}

3) 注释

	/*注释内容*/

4) 选择器

1.核心选择器

标签选择器
```
 		h2 { }
 		div {规则 }
```

id选择器

 		#two {}
 		<div id="one"></div>
 		<div id="two"></div>

类选择器

 		.second{}
 		<div class="second"></div>
 		<div class="second"></div>

逗号选择器
```
 		h1,h2,h3 {}
```

组合选择器

 		div#two {}
 		选择id为div的元素
 		div,#two {}
 		选择div元素和id为two的元素

普遍选择器
```
 		*{}
```

2. 层次选择器

子元素选择器

 		.header > a
 		选中class为header的元素的直接孩子元素a标签
 		<div class="header">
 			<a href=""></a>
 			<ul>
 				<li><a href=""></a></li>
 				<li><a href=""></a></li>
 			</ul>
 		</div>
 		<div class="content">
 			<a href=""></a>
 			<a href=""></a>
 		</div>

后代元素选择器

 		.header a
 		选中class为header的元素的后代元素a标签