CSS Day01

最新推荐文章于 2024-07-05 14:51:32 发布

肖帆咪

最新推荐文章于 2024-07-05 14:51:32 发布

阅读量132

点赞数

分类专栏： CSS 文章标签： css html

本文链接：https://blog.csdn.net/XiaoFanMi/article/details/109277994

版权

CSS 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

CSS(级联样式表)

什么是CSS

控制HTML文档控制外观\定义布局

级联:关联将两个内容联系起来比如省市县

样式表:css修饰网页的语法集

优点:将页面内容与表现形式(css)分离达到重复使用

CSS能做什么

HTML写入内容

CSS定义页面的布局

CSS的基本语法

行内样式表

<!-- 
	行内样式表
	在标签内直接定义样式,只对在本标签内的内容进行修饰
-->
		<h1 style="color: aqua; 
		font-size: 80px; 
		font-family: "agency fb";">行内样式表</h1>

内嵌样式表

<!-- 
	内嵌样式表
	在head中用
	<style type="text/css">
	通过连接器p{属性:属性值;}
	</style>
-->
	<h2 >内嵌样式表</h2>

外部样式表

<!-- 
	外部样式表
	在项目中新建CSS文件
	将修饰内容放在CSS文件中
	通过<link href="CSS文件" rel="stylesheet" />联系起来	
-->
	<p>外部样式表</p>

选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			p {
				color: #0000FF;
			}
			.p1 {
				color: #FF0000;
			}
			.p2 {
				color: aqua;
			}
			.p3,.p4 {
				color: brown;
			}		
			#title{
				color: darkgray;
			}	
			*{
				color: darkorange;
			}
		</style>

	</head>
	<body>
		<!-- 
			标签选择器
			选中网页中指定的标签
		<p>第一行</p>
		<p>第二行</p>
		 -->
        
		<!-- 
			类选择器
			对标签进行分组
		<p class="p1">第三行</p>
		<p class="p2">第四行</p>
		<p class="p3">第五行</p>
		<p class="p4">第六行</p>
		-->
        
		<!-- 
			id选择器
		 <p id="title">标题</p>
		 <p class="p1">第三行</p>
		 <p class="p2">第四行</p>
		 <p class="p3">第五行</p>
		 <p class="p4">第六行</p>
		  -->
        
		 <!-- 
			通配选择器,优先级最低
			*{}选择所有标签
		 <h3>第一种</h3>
		 <tr>第二种</tr>
		-->
	</body>
</html>

选择器2

选择器优先级:通配选择器<标签选择器<类选择器<id选择器
行级样式表优先级高于所有选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
            
			/* p1下的i标签 */
			.p1 b{
				color: red;
			}
            
			/* p1的子b标签 */
			.p1>i{
				color: bisque;
			}
            
			/* p1的相邻p标签 */
			.p1+p{
				color: blue;
			}
            
			/* 兄弟标签 */
			.p3~b{
				color: blueviolet;
			}
		</style>
	</head>
	<body >
		<p class="p1">
			<b>子标签</b>
			<b>
				<i>子标签</i>
			</b>
			<i>i标签</i>
		</p>
		<p>相邻标签</p>
		<p class="p2">
			<b class="p3">子标签</b>
			<b>
				<i>子标签</i>
			</b>
		</p>
	</body>
</html>

文本样式

<style type="text/css" >
.p1{
	width: max-content;
	height: max-content;
	/* color: #ff0022;字体颜色 */
	/* background-color: #00FFFF;背景颜色 */
	/* font-size: 3rem;字体大小 */
	/* font-family: "新宋体";字体样式 */
	/* text-align: center; */
	/* text-decoration: line-through;删除线 */
	/* text-align:文本对齐 */
	/* text-decoratiom:none;正常文本 */
	/* font-style:italic;斜体文本 */
	/* font-weight:字体粗细 */
	/* letter-spacing:字符间距 */
	/* text-indent首行缩进 */		
	}	
</style>

背景样式

<style type="text/css">
	.u1{
		width: 50rem;
		height:40rem;
		background-color: #87CEEB;/*背景颜色*/
		background-image: url(./img/.png);/*背景图片*/
		background-repeat: no-repeat;/*背景重复*/
		list-style: none url(img/未标题-1.png) inside;
		text-align:center;
		}
    <body >
		<ul class="u1">
			<li>列消息</li>
			<li>列消息</li>
			<li>列消息</li>
			<li>列消息</li>
			<li>列消息</li>
		</ul>
	</body>
</style>

伪类

<style type="text/css">
    /*
	:link 表示没访问的链接,只对超链接使用
	:visited 表示访问过的链接,之对超链接使用
	:hover 表示鼠标移入的状态(还可以设置字体)
	:active 被点击的状态
	:focus 焦点,输入类组件
	*/
	a:link{
		color: #87CEEB;
	}
	a:visited{
		color: #FF0000;
	} 
	a:hover{
		color: aqua;
		font-size: 20px;
	}
	a:active{
		color: chartreuse;
		font-size: 5px;
	}
	a:focus{
		color: darkorange;
		background-color: deeppink;
	}
</style>

透明

透明:opacity 从0.0到1.0

块级.行级.行级块级标签

块级:无论内容多少,都独立占一行
	默认宽:与父级标签一致
	默认高:0或者内容的高度
	通过width和height设置宽高
<p><h1><ul><ol><hr><li>表格表单
    
行级:只占自身大小,不会占一行,不能设置宽高
    <a><b><i>
       
行级块:可以设置宽高,不占一行
        <img/><input/>
      注意p标签不可以包含任何的块标签
        
display:inline;变成行级标签        
display:block;变成块级标签
display:inline-block;变成行级块标签
        
        
div标签:纯净的块级标签(没有任何附加的标签)
span标签:纯净的行级标签(没有任何附加的标签)

肖帆咪

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS Day01

@TOCCSS(级联样式表)什么是CSS控制HTML文档控制外观\定义布局级联:关联将两个内容联系起来比如省市县样式表:css修饰网页的语法集优点:将页面内容与表现形式(css)分离达到重复使用CSS能做什么HTML写入内容CSS定义页面的布局CSS的基本语法行内样式表 <h1 style="color: aqua; font-size: 80px; font
复制链接

扫一扫