目录

  • 一.CSS基本概念：
  • 1.静态网页：
  • 2.动态网页：
  • 二.CSS基本结构：
  • 三.网页中使用的css的三种方式：
  • 1.行内方式：
  • 2.内部样式：
  • 3.外部样式：
  • 四.选择器：
  • 1.标签选择器：
  • 2.类选择器：
  • 3.ID选择器：
  • 五.常见的CSS的样式：
  • 1.字体样式：
  • 2.文本样式
  • 3.span
  • 4.图片样式：


一.CSS基本概念：

CSS：cascade style sheet 层叠样式表 我们可以对table使用多个样式(字体颜色 字体大小)，那么表格就是这两个样式的综合体。

1.静态网页：

网页中的内容任何时候任何人看到的效果都是一样的，那这种网页就是静态网页。

2.动态网页：

网页中的内容是否会根据不同用户以及同一个用户的不同输入展示不同的结果

二.CSS基本结构：

选择器{
属性:属性值;
属性:属性值;
	
}

三.网页中使用的css的三种方式：

1.行内方式：
<h1 style="color:red;font-size: 12px;">第八天</h1>
2.内部样式：
<style type="text/css">
			h1{
				color:red;
				font-size:12px;
			}	
			
		</style>
3.外部样式：
<link href="css/common.css" rel="stylesheet"/>
  • 当行内样式，内部样式，外部样式同时作用于一个标签时，优先级是 行内 > 内部 > 外部、

四.选择器：

1.标签选择器：
  • 所有的标签都可以做选择器
2.类选择器：
// 定义类选择器的样式
.nav(该名字不要和标签名一样){
	color:red;
}
// 使用类选择器的样式
<h1 class="nav">第八天</h1>
<p class="nav">哈哈</p>
<h5 class="nav">呵呵</h5>
3.ID选择器：
有一个样式，只想给某一个标签使用，那么可以选择使用ID选择器
定义ID选择器
#jk(保证不要和标签名一样){
	Color:red;
}
使用ID选择器:
<h2 id="demo">哈哈</h2>
优先级: ID选择器》类选择器>标签选择器

五.常见的CSS的样式：

1.字体样式：
字体颜色: color
字体大小:font-size
字体粗细:
字体风格
字体
				/**
				 * 字体颜色
				 */
				color:yellow;
				/**
				 * 字体大小
				 */
				font-size: 12px;
				/**
				 * 字体粗细 bold  粗体
				 */
				font-weight: bold;
				/**
				 * 字体风格 italic
				 oblique 这两种都代表斜体
				 */
				font-style: italic;
				
				font-family: "times new roman",宋体;
2.文本样式
/**
				 * 设置文本的行高
				 */
				line-height:20px;
				/**
				 * 首行缩进
				 */
				text-indent: 2em;
				
				/**
				 * 对齐方式  左  右  中
				 */
				text-align: center;
				
				/**
				 * 设置样式line-through 删除线
				 underline 下划线
				 */
				text-decoration:overline;
3.span
它不会独占一行
<span>全民核酸检测</span>
可以单独给span标签设置样式:
span{
				color:red;
				font-size: 28px;
	}
4.图片样式：
/**
			 * 设置图片和所在行的文字进行对齐
			 */
			img{
				vertical-align: middle;
			}