山东标梵CSS介绍NetCore/Net5 Web应用开发基础

Cascading Style Sheets (CSS)层叠样式表
css主要作用就是定义控制页面的布局，如何格式化显示HTML元素
css为控制页面HTML样式节约了大量时间，因为css可以同时作用于多个HTML元素及多个HTML页面

CSS语法

CSS规则由选择器及声明块组成
如下图：
p就是选择器，意义就是只需要设置应用css样式的HTML元素
花括号就是一个声明块，每个声明块包含一条或者多条声明
声明包含属性和属性值用冒号分割，多条声明用分号分割

实际应用
还记得上一节介绍HTML的时候有一个表单，那个表单没有应用任何自定义样式，由浏览器默认的css去控制显示的，有点凌乱，下面我们就来用自定义的css来控制表单的显示，使得更为整洁美观
我们在forms.html 增加如下css
<head>

<style>

#userinfo label {

color:blue;

float:left;

width:100px;

text-align:right;

margin-right:5px;

}

#name, #nation {

width:150px;

background-color:yellow;

}

#introduce{

background-color:pink;

}

#submit {

margin-left:105px;

}

</style>

</head>

下面两张图是无自定义css和有自定义css控制的运行效果图，怎么样是不是不一样呢。至于上面的css暂时不理解没关系，后面会慢慢随着应用熟悉，也可以多查一下css手册，反正语法就那样，大家需要学习记住的就是不同属性及属性值的作用，然后根据实际情况应用到实际场景中即可。

将CSS应用于HTML元素的几种方式
外联式：
就是单独用一个css文件来定义css样式，在需要使用该css样式的页面做如下引用即可，这样的好处就是css做到了重用，无论是新增，修改样式都只需要维护这个css文件即可，不需要对所有页面做维护。
<link href="main.css" rel="stylesheet" />

内联式：
在当前页面定义如下代码的代码块，在里面定义css样式，这样定义可以对整个页面的 html元素进行样式控制，我们上面对表单的控制就是采取的这样方式

<style>

/* css样式定义 */

</style>

行内式：

就是针对某个具体的HTML元素进行css样式控制定义，只对该元素起效，应用代码如下：

CSS选择器的几种方式

因为这个不是本系列的重点所以只介绍最基本的选择器，其他复杂的选择器方式，请自行查询手册学习

元素选择器

元素选择器是根据元素的名称来选择HTML元素，如下示例：
h2 {

font-family: verdana, sans-serif;

font-weight: bold;

color: blue;

}
p {

text-align:

color: blue;

}

id选择器

顾名思义，就根据HTML元素的id来选择元素，HTML元素id在一个页面内必须唯一，要选择某个特定id的元素，在“#”后面写该元素id，即可选择到对应的元素了。
#header {

font-family: verdana, sans-serif;

font-weight: bold;

color: blue;

}

#submit {

margin-left: 105px;

}

类选择器

类选择器选择有特定 class 属性的 HTML 元素。

如需选择拥有特定 class 的元素，请写一个句点（.）字符，后面跟类名。
<p class="bright">

.bright {

color : yellow;

}

CSS盒子模型

Margin：距离相对于本元素外的空间或周围元素的空间
Border: 元素的周围可见边框
Padding: 本元素边框距离元素内部内容之间的空间

CSS单位
绝对尺寸大小

像素 (1px = 1/96th of 1in)

点 (1pt = 1/72 of 1in)

cm, mm, in

分别为厘米、毫米、英寸

相对大小

基于当前元素的字体大小

rem