CSS的基本认识

最新推荐文章于 2022-04-17 14:27:16 发布

闲鱼!!!

最新推荐文章于 2022-04-17 14:27:16 发布

阅读量726

点赞数

本文链接：https://blog.csdn.net/weixin_43158056/article/details/90083656

版权

一.引入模式

CSS的引入方式:

	外部样式: 通过link标签引入一个外部的css文件

	内部样式: 直接在style标签内编写CSS代码

	行内样式: 直接在标签中添加一个style属性, 编写CSS样式

行内式

<img src="../a.jpg"  height=200px>
里面所写的属性即是行内式

内嵌式

    <style type="text/css">

         span{
             font-size: 60px;
             color: darkblue;
             font-family:宋体;
         }

    </style>

</head>
<body>

<span>这是应用了ｎｅｗ的span</span><br>
<span>没有用new的span</span>
</body>
</html>

外链式

单独的css文件,由标签使用href引入

<link rel="stylesheet" href="/lib/share/css/share.min.css">

二.选择器(前3种较常用)

ID选择器

		<!--  #ID的名称{
				属性名称：属性的值；
				属性名称：属性的值；
						 	}   -->
<style>
			#div1{
				color: red;
						}							
</style>

	<body>
		<!--请将JAVAEE颜色改为红色-->
		<div id="div1">JAVAEE</div>
		<div >IOS</div>
		<div >ANDROID</div

类选择器

<!--
			.类的名称{
   				属性名称:属性的值;
  				属性名称:属性的值;
					}
		-->
		<style>
			.vegetables{
				color: yellow;
			}
			.fruit{
				color: green;
			}
		</style>
	</head>
	<body>
		<!--
			请将水果类，改成黄色
			蔬菜类改成绿色
		-->
		<div class="fruit">香蕉</div>
		<div class="vegetables">黄瓜</div>
		<div class="fruit">苹果</div>
		<div class="vegetables">茄子</div>
		<div class="fruit">橘子</div>
	</body>

标签或元素选择器

<style type="text/css">
span{
            font-size: 60px;
        }
 </style>

</head>
<body>
<div class="new">这是应用了ｎｅｗ的div</div>
<span class="new">这是应用了ｎｅｗ的span</span>      被指定的span标签
<span>没有用new的span</span>

层级或后代选择器

<style>
			/*请将H1下面的所有em元素的内容颜色改成红色*/
			/*中间以空格隔开的是后代选择器，空格换成>的四元素选择器*/
			h1 > em{
				color: red;
			}
		</style>
	</head>
	<body>
		<h1>
			This is a<em>儿子</em><strong><em>孙子</em></strong>heasding
		</h1>
	</body>

并集选择器

<style type="text/css">
        div{
            color: pink;
        }
        span{
            color: pink;
        }
        p{
            color: pink;
        }
        /**
        以上内容可以写成如下格式　　　　注意：各个选择器用逗号分开
        <style type="tess/css">
        div,span,p{
            color: pink;
            </span>
                              }
                              */

<body>
<div>这是div</div>
<span>这是span</span>
<h1>这是h1</h1>
<p>段落</p>
</body>

指定标签选择器

    <style type="text/css">
        span.new{
            font-size: 60px;
        }

    </style>
</head>
<body>
<div class="new">这是应用了ｎｅｗ的div</div>
<span class="new">这是应用了ｎｅｗ的span</span>			    这行被指定
<span>没有用new的span</span>

属性选择器

<!--修改包含title属性的a标签<-->
	<!--定位越具体越优先-->
	<!--当是相同属性是,后者覆盖前者-->
			<style>
				/*a[title='aaa']{
				  	color: red;
				  }*/
				 a[href][title]{
				 	color: yellow;
				 }
			</style>
		</head>
	<body>
		<a href="#" title="aaa">张三</a>
		<a href="#" >李四</a>
	</body>

伪类选择器(超链接状态)

<style>
			a:link {color: #FF0000}		/* 未访问的链接    红色 */
			a:visited {color: #00FF00}	/* 已访问的链接      绿色*/
			a:hover {color: #FF00FF}	/* 鼠标移动到链接上    紫色*/
			a:active {color: #0000FF}	/* 选定的链接           蓝色*/

		</style>
	</head>
	<body>
		<a href="#">程序员</a>
	</body>

伪类选择器


    <style type="text/css">
        .test::after{
            content: "ssssss";
            color: red;
        }
        .test::before{
            content: "ssssss";
            color: blue;
        }

    </style>
</head>
<body>
<div class="test">这是div</div>
<span>这是span</span>
<h1>这是h1</h1>

CSS新增选择器

三.标签的实体化(写宽写高写背景)

基本实体化

注意点:块标签 div 宽高都生效
行标签 span 宽高不生效,默认宽度就是文字内容的大小

div{
width:300px;
height:100px
background:pink
}
span{
width:300px;
height:150px;
ackground:red;
}

在这里插入图片描述

块级标签的模式修改(div)

div{
	width:400px;
	height:200px;
	background: red;
	display:block;  
}

行级标签的模式修改(span)

span{
	width:300px;
	height:100px;
	background: blue;
	display:block;  块标签模式
	display:inline-block   行内块模式
	
}

四.css样式重置

 <style type="text/css">
        ul,ol{list-style: none}     /*清除列表的样式，去除点和数字*/
        body,h1,h2,h3,h4,h5,h6,div,span,ul,ol,dl,dd,dt,a,img{
        /*可以一起写，也可用通配符代替如下*/
        
             margin: 0;
             padding: 0;
         }     
        *{
            margin: 0;
             padding: 0;
        }
</style>
<body>
    <h1>h1</h1>
    <ul>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
    </ul>
</body>