python100day - day21- css基本语法（html）

最新推荐文章于 2023-06-30 09:36:11 发布

Lance｀

最新推荐文章于 2023-06-30 09:36:11 发布

阅读量138

点赞数

文章标签： html

本文链接：https://blog.csdn.net/weixin_50995868/article/details/109319078

版权

python100day - day21- css基本语法（html）

1.css代码写在哪儿

内联样式表：将css代码写在标签的style属性中

内部样式表：将css代码写在style标签中

外部样式表：将css代码写在外部的css文件中，然后在html中通过link标签来导入

2.css语法

1）语法

选择器{属性名1:属性值1;属性名2:属性值2;属性名3:属性值3;…}

2)说明

选择器 - 选中当前需要添加样式的标签（在内联样式表中‘选择器{}’需要省略）

属性 - 属性名有哪些是固定的（不同的样式有对应的固定属性）；

属性值如果表示的是数值大小必须加单位：px

多个属性之间必须用分号隔开

3.选择器

1)id选择器 - 在id属性值钱加#作为一个选择器，选中id属性是指定值的标签

列如：#user - 选中id属性是user的标签（id属性是唯一的）

2）类选择器 - 在class属性前加.作为一个选择器，选中class属性是指定值的标签

列如：.c1 - 选中class属性是c1的所有标签

3）元素选择器 - 直接将标签名作为选择器，选中所有的指定标签

列如：p{} - 选中当前页面中所有的p标签

4）群组选择器 - 将多个选择器用逗号隔开作为一个选择器，选中每个选择器选中的标签

#p1,.c1{} - 选中id是p1的标签和class是c1的标签

p,q,.c2{} - 选中所有的p标签、所有的a标签和所有class是c2的标签

5）后代选择器 - 将多个选择器用空格隔开

列如：div p{} - 选中直接或者间接包含在div标签中的p标签

.c1 p{} - 选中直接或者间接包含在class是c1的标签中的p标签

div .c1 p - 选中包含在div中的class是c1中的p标签

6）子代选择器 - 将多个选择器用>隔开

列如：div>p{} - 选中直接包含在div标签中的p标签

	<!-- 内部样式 -->
	<style type="text/css">
		/* 这儿写的css代码 */
		#box1{
			/* 设置文字颜色 */
			color: cyan;
			/* 设置背景颜色 */
			background-color: deeppink;
			/* 设置字体大小 */
			font-size: 30px;
			/* 字体宽度 */
			font-weight: 100;
			/* 设置宽度和高度 */
			width: 120px;
			height: 100px;
		}
		.c1{
			color: aquamarine;
			/* border：边框样式 边框颜色 边框宽度 
			solid - 实线
			dotted  -  点划线
			dashed  -  虚线
			double  -  双实线
			*/
		   /* 四个边 */
			/* border: double purple 5px; */
			border-top: solid deepskyblue 5px;
			border-left: dotted crimson 3px;
			
		}
		
		.c2{
			
            
		}

		p{
			/* 
			 添加文字装饰
			 underline  -  下划线
			 line-through  -  删除线
			 none  -  取消装饰
			 */
			text-decoration: none;
			
		}
		a{
			text-decoration: none;
			
		}
		.c1,#box1{
			background-color: pink;
			/* 同时设置四个角的圆角弧度 */
			/* border-radius: 20px; */
			
			/* 分别设置四个角的圆角弧度 */
			border-bottom-left-radius: 30px;
			border-top-right-radius: 30px;
		}
		div p{
			text-align: center;
		}
		
		div>p{
			background-color: chartreuse;
		}
		
	</style>
	
	<!-- 外部样式 -->
	<link rel="stylesheet" type="" href="./css/css基础语法.css">

</head>
<body>
	<!-- 内联样式 -->
	<p style="color: red;">我是段落1</p>
	
	<div id="box1">我是div1</div>
	<img src="img/logo-201305-b.png" >
	<a href="" class="c1 c2">我是超链接1</a>
	<p class="c1">我是段落2</p>
	<input type="text" name="" id="" value="" />
	<div id="">
		<a href="">我是超链接2</a>
		<p>我是段落3</p>
		<span class="c1">我是span1</span>
		<div id="">
			<span>
				<p>我是段落4</p>
			</span>
			
		</div>
	</div>

</body>
</html>