CSS3基础总结

最新推荐文章于 2024-07-24 21:48:20 发布

小杨不想写代码

最新推荐文章于 2024-07-24 21:48:20 发布

阅读量45

点赞数

分类专栏：复习总结文章标签： css3 css html

本文链接：https://blog.csdn.net/m0_74270395/article/details/129011231

版权

复习总结专栏收录该内容

9 篇文章 0 订阅

订阅专栏

1.css发展史

1996年12月css1.0–1998年5月css2.0–2004年2月css2.1----2010年css3.0

2.css语法结构
语法

选择器{属性1，属性值1；属性2，属性值2；属性3，属性值3}
例如：
h2{font-size:20px;color:red;}

3.三种样式
行内标签：

<标签名 style=属性1，属性值1；属性2，属性值2；属性3，属性值3；>内容</标签名>

内部样式表：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>内部样式表</title>
	<style>
	h1{font-size:16px;color:blue;}
	</style>
	</head>
	<body>
	<h1>标题标签使用的是内部样式表</h1>
	</body>
	</html>

外部样式表:
链接外部样式表

<head>
	<meta charset="UTF-8">
	<title>链接外部样式表</title>
	<link rel="stylesheet"href="style.css"type="text/css">
</head>

导入外部样式表：

<head>
	<meta charset="UTF-8">
	<title>导入外部样式表</title>
	<style>
		@import url("style.css")
	</style>
</head>

css样式：遵循就近原则

4.基础选择器
标签选择器：标签名{属性1，属性值1；属性2，属性值2；属性3，属性值3}
类选择器：类名{属性1，属性值1；属性2，属性值2；属性3，属性值3}
id选择器：id名{属性1，属性值1；属性2，属性值2；属性3，属性值3}
优先级：id>类>标签

5.高级选择器
1.层次选择器
（后代选择器，子选择器，相邻同胞，通用兄弟）
1.1后代

<head>
       <meta  charset=“UTF-8”>
       <title>层次选择器< /title>
       <style>
             /*后代选择器 */
             body p{color: red;}
        </style>
 </head>

使用后代选择器将body元素的后代< p>标签的字体颜色变为红色。

1.2子

<style>
   /*子选择器*/
   body>p{color: green;}
</style>

使用子选择器将body元素p的字体颜色变为绿色。

1.3同胞

<style>
   /*相邻同胞选择器*/
   .active+li{background: yellow;}
</style>

同邻同胞选择器找到类名为active的相邻< li>标签。

1.4兄弟

<style>
    /*通用兄弟选择器*/
    .active~li{background: #999;}
</style>

通用兄弟选择器用于选择某元素后面的所有兄弟元素。

2结构伪类选择器

：first-child选择器：	用于为父元素的第一个子元素设置样式
：last-child选择器：	用于为父元素的最后一个子元素设置的样式
：nth-child（n）选择器：	用于为父元素的第n个子元素设置样式
：first-of-type选择器	用于选择父元素下相同类型子元素中的第一个
：last-of-type选择器	用于选择父元素下相同类型子元素中的最后一个
：nth-of-type选择器	用于选择父元素下相同类型子元素中的第n个

3.属性选择器

E[attr]:	选择匹配具有属性attr的E元素。
E[attr=val]:	选择匹配具有属性attr的E元素，并且属性值为val（val区分大小写）
E[attr=val]:	选择匹配元素E，且E元素定义了属性attr，其属性值是以val开头的任意字符串。
E[attr^=val]:	选择匹配元素E，且E元素定义了属性attr，其属性值是以val结尾的任意字符串。
E[attr$=val]:	选择匹配元素E，且E元素定义了属性attr，其属性值包含了"val"