HTML学习笔记4——CSS3

最新推荐文章于 2024-05-20 22:08:52 发布

跃起的影子

最新推荐文章于 2024-05-20 22:08:52 发布

阅读量90

点赞数

分类专栏： HTML5 文章标签： html css3 学习

本文链接：https://blog.csdn.net/qq_45569406/article/details/126020145

版权

HTML5 专栏收录该内容

12 篇文章 1 订阅

订阅专栏

CSS基本语法

语法

<!--
选择器{
	声明1;
	声明2;
	...
}
-->
<style type="text/css">
	h1 {
		font-size:12px;
		color:#F00;
	}
</style>

CSS的最后一条声明后的“;”可写可不写，但是，基于W3C标准规范考虑，建议最后一条声明的结束“;” 都要写上

引入样式

行内样式
使用style属性引入CSS样式

<h1 style="color:red;">style属性的应用</h1>
<p style="font-size:14px; color:green;">直接在HTML标签中设置的样式</p>

内部样式
CSS代码写在的

<style>
        h1{color: green; }
</style>

外部样式
CSS代码保存在扩展名为.css的样式表中
HTML文件引用扩展名为.css的样式表，有两种方式：
链接式

<head>
……
<link href="style.css" rel="stylesheet" type="text/css" />
……
</head>

导入式

<head>
……
<style type="text/css">
<!--
@import url("style.css");
-->
</style>
</head>

链接式与导入式的区别
link标签属于XHTML，@import是属于CSS2.1
使用link链接的CSS文件先加载到网页当中，再进行编译显示
使用@import导入的CSS文件，客户端显示HTML结构，再把CSS文件加载到网页当中
@import是属于CSS2.1特有的，对不兼容CSS2.1的浏览器是无效的

优先级
行内>内部样式>外部样式

CSS3基本选择器

标签选择器
HTML标签作为标签选择器的名称
h1…h6、p、img

p { font-size:16px;}

类选择器

<!--
<标签名 class= "类名称">标签内容</标签名>
-->
.class { font-size:16px;}

ID选择器

#id { font-size:16px;}

标签选择器直接应用于HTML标签
类选择器可在页面中多次使用
ID选择器在同一个页面中只能使用一次

优先级

ID选择器>类选择器>标签选择器

注：
标签选择器是否也遵循“就近原则”？
不遵循，无论是哪种方式引入CSS样式，一般都遵循ID选择器 > class类选择器 > 标签选择器的优先级

CSS的高级选择器

层次选择器

总示例：

<!DOCTYPE html>
<html>
<head lang="en">
	<meta charset="UTF-8">
	<title>使用CSS3层次选择器</title>
	<style type="text/css">

		p,ul{
			border: 1px solid red;  /*边框属性*/
		}

		/*后代选择器*/
		body p{
			background: red;
		}
		/*子选择器*/
		/* body>p{
			background: pink;
		} */
		/*/!*相邻兄弟选择器*!/*/
		/* .active + p{
			background: green;
		} */
		/*/!*通用选择器*!/*/
		/* .active~p{
			background: yellow;
		} */
	</style>
</head>
<body>
	<p  class="active">1</p><!-- 为了说明相邻兄弟选择器，在此处添加一个类名active -->
	<p>2</p>
	<p>3</p>
	<ul>
		<li>
			<p>4</p>
		</li>
		<li>
			<p>5</p>
		</li>
		<li>
			<p>6</p>
		</li>
	</ul>

</body>
</html>

后代选择器 （E F）
选择匹配的F元素，且匹配的F元素被包含在匹配的E元素内

body p{ background: red; }

后代选择器两个选择符之间必须要以空格隔开，中间不能有任何其他的符号插入

子选择器 （E>F）
选择匹配的F元素，且匹配的F元素是匹配的E元素的子元素

 body>p{  background: pink;  }

相邻兄弟选择器 （E+F）
选择匹配的F元素，且匹配的F元素紧位于匹配的E元素后面

.active+p {  background: green;  }

通用兄弟选择器 （E~F）

.active~p{  background: yellow;  }

结构伪类选择器
示例：

<!DOCTYPE html>
<html>
<head lang="en">
	<meta charset="UTF-8">
	<title>使用CSS3结构伪类选择器</title>
	<style>
		/*ul的第一个子元素*/
		ul li:first-child{
			background: red;
		}
		/*ul的最后一个子元素*/
		ul li:last-child{
			background: green;
		}

		/*body下面的第2个p元素*/
		p:nth-child(2){
			background: black;
		}
		/*选择到父级里的第一子元素p*/
		div p:nth-child(1){
			background: yellow;
		}

		/*父元素里第2个类型为p的元素*/
		p:nth-of-type(2){
			background: blue;
		}
	</style>
</head>
<body>
	<!-- <h2>结构伪类选择器</h2> -->

	<div>
		<p>d1</p>
		<p>d2</p>
		<p>d3</p>
	</div>
	
	<p>p1</p>
	<p>p2</p>
	<p>p3</p>

	<ul>
		<li>li1</li>
		<li>li2</li>
		<li>li3</li>
	</ul>
</body>
</html>

在这里插入图片描述
使用E F:nth-child(n)和E F:nth-of-type(n)的关键点
E F:nth-child(n)在父级里从一个元素开始查找，不分类型
E F:nth-of-type(n)在父级里先看类型，再看位置

属性选择器

在这里插入图片描述

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>CSS3属性选择器的使用</title>
    <style type="text/css">
        /*此段代码只是让结构更美观*/
        .demo a {
            float: left;
            display: block;
            height: 50px;
            width: 50px;
            border-radius: 10px;
            text-align: center;
            background: #aac;
            color: blue;
            font: bold 20px/50px Arial;
            margin-right: 5px;
            text-decoration: none;
            margin: 5px;
        }
        /*存在属性id的元素*/
        a[id] {
            background: yellow;
        } 

        /*属性id=first的元素*/
        /* a[id=first] {
            background: red;
        } */

        /*属性class="links"的元素*/
        /* a[class="links"] {
            background: red;
        } */

        /*属性class里包含links字符串的元素*/
        /* a[class*=links] {
            background: red;
        } */

        /*属性href里以http开头的元素*/
        /* a[href^=http] {
            background: red;
        } */
        
        /*属性href里以png结尾的元素*/
        /* a[href$=png] {
            background: red;
        } */
    </style>
</head>
<body>
<p class="demo">
    <a href="http://www.baidu.com" class="links item first" id="first" >1</a>
    <a href="" class="links active item" title="test website" target="_blank" >2</a>
    <a href="sites/file/test.html" class="links item"  >3</a>
    <a href="sites/file/test.png" class="links item" > 4</a>
    <a href="sites/file/image.jpg" class="links item" >5</a>
    <a href="efc" class="links item" title="website link" >6</a>
    <a href="/a.pdf" class="links item" >7</a>
    <a href="/abc.pdf" class="links item" >8</a>
    <a href="abcdef.doc" class="links item" >9</a>
    <a href="abd.doc" class="linksitem last" id="last">10</a>
</p>
</body>
</html>