掌握CSS基础与选择器：从内联到高级实践-CSDN博客

本文链接：https://blog.csdn.net/qq_43800904/article/details/119938867

有一些标签，默认是带有padding，比如ul标签：

border:

练习：

CSS概念

CSS定义：cascading style sheet 层叠样式表。

语法：

CSS使用：

1、通过选择器选择上标签

2、在选择的标签上设置样式

选择器：

选择器 {

属性名1:属性值1;

属性名2:属性值2;

属性名3:属性值3;

属性名4:属性值4;

}

选择器分类：

标签选择器： p{}

类选择器： .className{}

id选择器： #id{}

CSS高级选择器：

直接看代码

s1 s2 后代选择器

s1,s2 并集选择器(选择器组)

s1s2 交集选择器

s1>s2 直接儿子选择器，和后代选择器不一样

s1+s2 下一个兄弟选择器,后面紧挨着的第一个兄弟

一些常见的样式：

color:red; 文字颜色

font-size:40px;

background-color:blue;

text-decoration:underline;

text-decoration:none; //去掉下划线

CSS样式

1.内联样式

内联样式：直接在元素开始标签中定义style

margin，指的是当前控件和父控件的边距（外边距）

padding，指的是当前控件的内边距，即控件中内容距离控件的边缘的距离。(内边距)

border：边框

2.内嵌式

把css样式代码写在标签之间。如下面代码实现把三个标签中的文字设置为红色：

嵌入式css样式必须写在之间，并且一般情况下嵌入式css样式写在之间。

3.外部式css样式

外部式css样式(也可称为外联式)就是把css代码写一个单独的外部文件中，这个css样式文件以“.css”为扩展名（也可以为调用其他网站CSS）。

练习：

class

一共有三种样式：50px字体、红色、下划线

正确的思路，就是用所谓“公共类”的思路，就是我们类就是提供“公共服务”，比如有红、大、线，一旦携带这个类名，就有相应的样式变化：

所以要总结两条：

1） class可以重复，也就是说，同一个页面上可能有多个标签同时具有某一个类；

2）同一个标签可以同时携带多个类，每个标签，就去选取自己想要的类：。

类的使用，能够决定一个人的css水平。

总结：

1）不要去试图用一个类名，把某个标签的所有样式写完。这个标签要多携带几个类，共同造成这个标签的样式。

2）每一个类要尽可能小，有“公共”的概念，能够让更多的标签使用。

有一些标签，默认是带有padding，比如ul标签：

所以做网站时候便于精确计算，把这些默认的padding都去掉

margin: 0;

padding: 0;

}

*效率不高，可以使用并集选择器，罗列出所有标签，这个标签不用背，直接拷贝过来即可。

ul,ol，h1,h2{

margin: 0;

padding: 0;

}

border:

就是边框。边框有三个要素：粗细、线型、颜色。

实线：solid 点：dotted 虚线： dashed

颜色如果不写，默认是黑色。另外两个属性不写，显示不出来边框。

border是一个大综合属性:border:1px solid red;

border属性能够被拆开，有两大种拆开的方式：

1）按3要素:border-width、border-style、border-color

2）按方向：border-top、border-right、border-bottom、border-left

练习：

第一行文本为 <p> 元素，使用内联样式定义其样式为 25px 的红色文本；

第二行文本为 <h1> 元素，使用内部样式表定义其样式为 20px的蓝色文本；

第三行文本为 <h2> 元素，使用外部样式表定义其样式为 15px的绿色文本，且背景色为银灰色（silver）。

盒模型

盒子中主要的属性就5个：width、height、padding、border、margin。

padding:内边距 margin：外边距

盒模型的示意图：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
				width: 100px;
				height: 100px;
				margin: 10px 	;// 间隙
			}
			.bg-blue{
				background-color: blue;
			}
			.bg-yellow{
				background-color: yellow;
			}
		</style>
	</head>
	<body>
		<div id="" class="bg-blue">
			
		</div>
		<div id="" class="bg-yellow">
			
		</div>
		<div id="" class="bg-blue">
			
		</div>
	</body>
</html>

1、说出下面盒子真实占有宽高，并画出盒模型图：

div{

width: 200px;

height: 200px;

padding-left: 10px;

padding-right: 20px;

padding: 40px 50px 60px; // 上右下左（顺时针方向,某一个方向没写就取对边的值）

padding-bottom: 30px;

/*border: 8px solid #000000;*/

border: 8px solid #000;

}

RGB R:red G:green B:blue

200+8*2+50*2=316

200+8*2+40+30=286

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
				width: 200px;
				height: 200px;
				padding-left: 10px;
				padding-right: 20px; 
				padding: 40px 50px 60px;/* 内间距 */
				border: 8px solid red;/* 边界 边框 */
			}
		</style>
	</head>
	<body>
		<div id="">
			
		</div>
	</body>
</html>

2、我现在给你盒模型图，请写出代码，试着用最最简单的方法写