css基础

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

英俊的双田

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

阅读量132

点赞数

分类专栏：笔记文章标签： css css3 html

本文链接：https://blog.csdn.net/m0_56199142/article/details/122324232

版权

笔记专栏收录该内容

1 篇文章 0 订阅

订阅专栏

CSS和HTML的结合方式

第一种

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style="border: 1px solid #8d4aff;height: 100px;background-color: aquamarine;  text-align: center">div标签1</div>
    <div style="border: 1px solid #8d4aff;">div标签2</div>
    <span style="border: 1px solid #8d4aff;">span标签1</span>
    <span style="border: 1px solid #8d4aff;">span标签2</span>
</body>
</html>

第二种

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--style标签专门用来定义css样式代码-->
    <style type="text/css">
        div{
            border: 1px solid red;
        }
        span{
            border: 1px solid #8d4aff;

    </style>
</head>
<body>
        
        <div >div标签1</div>
        <div >div标签2</div>
        <span >span标签1</span>
        <span >span标签2</span>
</body>
</html>

第三种

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--link标签专门用来引入css样式代码-->
    <link rel="stylesheet" type="text/css" href="1.css"/>

</head>
<body>

<div >div标签1</div>
<div >div标签2</div>
<span >span标签1</span>
<span >span标签2</span>
</body>
</html>

1.css

div{
    border: 1px solid red;
}
span{
    border: 1px solid #8d4aff;
}

请添加图片描述

ID选择器

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>ID选择器</title>

	<style type="text/css">

		#id001{
			color: blue;
			font-size: 30px;
			border: 1px yellow solid;
		}
		#id002{
			color: red;
			font-size: 20px;
			border: 5px blue dotted;
		}
	</style>
</head>
<body>		
	
	<!-- 
	需求1：分别定义两个 div 标签，
	第一个div 标签定义 id 为 id001 ，然后根据id 属性定义css样式修改字体颜色为蓝色，
	字体大小30个像素。边框为1像素黄色实线。
	
	第二个div 标签定义 id 为 id002 ，然后根据id 属性定义css样式 修改的字体颜色为红色，字体大小20个像素。边框为5像素蓝色点线。
	 -->
	
	<div id="id001">div标签1</div>
	<div id="id002">div标签2</div>
	
</body>
</html>

class类型选择器

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>class类型选择器</title>

	<style type="text/css">
		.class01{
			color: blue;
			font-size: 30px;
			border: 1px solid yellow;
		}
		.class02{
			color: gray;
			font-size: 26px;
			border: 1px red solid;
		}
	</style>
</head>
<body>

	<!-- 
		需求1：修改 class 属性值为 class01的 span 或 div 标签，字体颜色为蓝色，字体大小30个像素。边框为1像素黄色实线。
		需求2：修改 class 属性值为 class02的 div 标签，字体颜色为灰色，字体大小26个像素。边框为1像素红色实线。


		格式是：
			.class属性值{
					属性 : 值 ;
			}

		class类型选择器,可以通过class属性有效性地去使用这个样式
	 -->

	<div class="class02">div标签class01</div>
	<div class="class02">div标签</div>
	<span class="class02">span标签class01</span>
	<span class="class01">span标签2</span>

</body>
</html>

请添加图片描述

组合类型选择器

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>组合类型选择器</title>
    <style type="text/css">
        .class01,#id01{
                color: blue;
                font-size: 20px;
                border: 1px solid yellow;
        }

    </style>
</head>
<body>

	<!-- 
	需求1：修改 class="class01" 的div 标签 和 id="id01" 所有的span标签，
	字体颜色为蓝色，字体大小20个像素。边框为1像素黄色实线。

	格式是：
	    选择器1，选择器2，选择器3，选择器n{
	        属性 : 值 ;
	    }

	 组合选择器可以让多个选择器公用一个css代码
	 -->

   <div class="class01">div标签class01</div> <br />
   <span id="id01">span 标签</span>  <br />
   <div id="id01">div标签</div> <br />
   <div class="class01">div标签id01</div> <br />

</body>
</html>

请添加图片描述

英俊的双田

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css基础

CSS和HTML的结合方式第一种<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <div style="border: 1px solid #8d4aff;height: 100px;background-color: aquama
复制链接

扫一扫