小白学习前端的第二天之css基本语法-CSDN博客

本文链接：https://blog.csdn.net/bbbbbya/article/details/109338049

一. css基本语法

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,a,.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标签
-->

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<!-- 内部样式 -->
		<style type="text/css">
			/* 这儿写的css代码 */
			#box1{
				/* 设置文字颜色 */
				color: coral;
				/* 设置背景颜色 */
				background-color: green;
				/* 设置字体大小 */
				font-size: 30px;
				/* 设置字体宽度（粗细） */
				font-weight: 100;
				/* 设置宽度和高度 */
				width: 120px;
				height: 100px;
			}
			.c1{
				color: deeppink;
				/* border:边框样式 边框颜色 边框的宽度 
				solid - 实线
				dotted - 点划线
				dashed - 虚线
				double - 双实线
				*/
			    /* 四个边一起设置 */
				/* border: solid purple 30px; */
				
				/* 四个边单独设置 */
				border-top: solid purple 5px;
				border-bottom: dotted purple 3px;				
			}
			
			p{
				/* 
				 添加文字装饰：
				 underline - 下划线
				 line-through - 删除线
				 none - 取消装饰
				 */
				text-decoration: underline;
			}
			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: skyblue;
			}
		</style>
		
		<!-- 外部样式 -->
		<link rel="stylesheet" type="text/css" href="./css/css基础语法.css">
	</head>
	<body>
		<!-- 内联样式 -->
		<p style="color: red;">我是段落1</p>
		
	    <div id="box1">我是dic1</div>
		
	    <img src="img/logo-201305-b.png" >
	    <a href="" class="c1 ">我是超链接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>
				<span>
					<p>我是段落4</p>
				</span>
			</div>
	    </div>
	</body>
</html>