python100day - day21- css基本语法(html)

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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值