青训营笔记：CSS的概念和使用方式

这是我参与「第四届青训营 」笔记创作活动的第2天，老师们教学了CSS的概念与使用。 CSS的概念表现HTML或XHTML文件样式的计算机语言
包括对字体、颜色、边距、高度、宽度、背景图片、网页定位等设定

css的基本语法为 选择器{ 属性：属性值； 属性：属性值； 属性：属性值； } 使用规则是 属性和属性值需要使用冒号链接 属性和属性值使用分号结束

在HTML属性中使用css时，比较规范的是外联，外联模式与内联模式相比将内容与表现分离，但是style中的内容是将css的内容插入到html

• 第一步是将css文件与HTML文件中相连接，具体操作为

<link rel="stylesheet"href="../css/CSS1.css">

• 在特定的css文件中可以对特定class的标签属性进行操作```

<div class="div1">
		<img src="../IMG/1-160426093410264.jpg" alt="" />
                
</div>

.div4{
	float: right;
	height: 20%;
	width: 10%;
	background-color: aquamarine;
}

具体的效果为：

其中，height与width是该图片占有此div块的比例大小（要注意溢出问题） 以上是我对css基本用法的理解，在实际的项目操作中，我们常常遇到许多问题和学习到许多操作模式 在我们设计页面时，通常会使用块div的嵌套，以达到精度优化块的方式，要选取div内部的标签进行操作，通常需要用空格分隔开，例如

<div class="wenzi3">
			<li>哈士奇</li>
			<li>边牧</li>
			<li>泰迪</li>
			<li>超级无敌徐晨峻</li>
		</div>

选取li标签的代码为

.wenzi3 li{
	padding-left: 10px;
      color: #000000;
    font-size:40px;
}

另外，对于CSS的优先级，大家需注意 内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器 > 通配选择器。对于样式语句说，可以使用!important来把优先级提升至最高,即使!important放在外部文件中，优先级依旧比style高。在实际应用中，用于限定样式不受style属性内容影响，从而避免js操作该组件元素样式。

• 重要模型，css盒式模型 CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：
  外边距，边框，内边距，和实际内容

  Margin(外边距) - 清除边框外的区域，外边距是透明的

  Border(边框) - 围绕在内边距和内容外的边框

  Padding(内边距) - 清除内容周围的区域，内边距是透明的

  Content(内容) - 盒子的内容，显示文本和图像 通过css里改变各个块的HTML元素，达到美化的目的，

.p2{
	font-size: 60px;
	color: black;
	font-weight: bold;
	text-align: center;
	padding-top: 30px;
	color: cornflowerblue;
	margin: 0px;
}

例如此代码块，我设置了内边距的上部分的宽度为30px，外边距为0.

这些是css初级用法，更多的css用法欢迎大家补充！