CSS

一.引入（初识css）：

  1. css是层叠样式表的简称，css也是一种标记语言
  2. css是网页的美容师，css用于设置HTML网页中的文本内容，图片的样式，版面的布局，css美化HTML，布局网页
  3. HTML做结构呈现，样式交给CSS，即样式和样式的分离
  4. css语法规范：css代码由两部分构成，选择器以及一条或多条声明
    选择器 {
    属性：属性值；
    属性：属性值；
    属性：属性值；
    }
    1. 选择器用于指定css样式的html标签，即对谁进行改样式
    2. 花括号内属性+冒号+属性值+分号，属性值对之间以分号分开
  5. 代码规范：选择器+空格+花括号 属性+冒号+空格属性值
    css大部分代码是放到<head>内的<style></style>标签的内部
  6. 选择器：就是根据不同的需求把不同的标签选出来就是其作用，选标签用的，
  7. 分为基础选择器和复合选择器两大类，基础选择器就是单个选择器

二.基础选择器（4种）

1.标签选择器

1.指用html标签名称作为选择器，为页面中某一类(按标签名分类)标签指定统一的css样式

<style>
p {
	color:red;
	}
</style>
</head>
<body>
<p>学习不间断</p>
</body>

2.类选择器

  1. .类名（类名是自定义的，类名前有个点）
  2. 结构中使用class属性调用 ，class="类名" 
<style>
.red {
	color: red;
	}
</style>
</head>
<body>
<p class="red">学习不间断</p>
</body>
  1. 类名是自定义的,最好是英文字母，而且见名知意，不要简写，常见nav表示导航的意思
  2. 类选择器实现差异化选择不同的标签，就是允许多个标签中出现“class="类名”，允许多次调用
  3. 多类名
    可以给一个标签调用多个类名，在class属性中写多个类名，多个类名间用空格隔开，这个标签就可以同时具有这些类名的样式
    例如：三个盒子，若有着相同的高和宽，只是颜色不同时
<style>
.red {
	background-color: red;
	}
.box {
	width: 150px;
	hight: 100px;
	}
.green {
	 background-color: green;
	}
</style>
</head>
<body>
<div class="red box" >红盒子</div>
<div  class=" box green" >绿盒子</div>
<div class="red box" >红盒子</div>
</body>

说明：div标签是一个盒子模型
使用多类名的作用：可以将一些标签元素相同的样式放到一个类里面，这些标签可以调用这个公共的类，然后再调用自己的独有的类，从而节省css代码，统一修改也方便

3,id选择器

1.和类选择器很相似：
# id名（id名是自定义的，id名前有个#）
结构中使用class属性调用 ，** id="id名"**

<style>
#red {
	color: red;
	}
</style>
</head>
<body>
<p id="red">学习不间断</p>
</body>

3.和类选择器区别：id选择器只允许HTML文档中出现一次，而类选择器允许HTML文档中被不同的标签调用多次

4.通配选择器

它表示选取页面中的所有标签，通配选择器在使用时不需要调用，自动就给所有标签使用该样式

<style>
* {
color: red;
}
</style>
</head>
<body>
<p>学习不间断</p>
</body>

三.CSS字体属性：

1.字体类型font-family

  1. font-family:"微软雅黑"，用英文表示“Micorsoft Yahei” font-family：Micrsoft Yahei；
  2. 属性值可以是多个字体类型，系统会依次检查本机是否安装此字体，就应用了，若都都没有安装，则使用本机默认字体类型
  3. 各种字体之间必须使用英文状态下的逗号隔开
  4. 使用css代码时会应用于body标签，就是整篇文档的字体类型的设置

2.字体的粗细font-weight

  1. 属性值：normal指的是默认值（不加粗）
    bold指的是粗体
    数字（100~900） 400等同于normal, 700等同于bold
    注意数字后没有单位
  2. 应用：让加粗标签（比如h和strong）不加粗 font-weight：normal；
  3. 实际开发中用数字较多

3.字体的样式font-style

  1. 属性值： normal 指的是默认值，会显示标准的字体样式
    italic 指的是显示斜体，
  2. 应用：让斜体标签（em ,i 标签）改为不倾斜字体

4.字体大小font-size

一般以像素为单位，在css中单位一般不可以省略
font-size：16px;

5.字体复合属性：font

1. 有严格的书写顺序：font-style font-weight font-size/line-height font-family
各个属性间以空格隔开
2. 不需要设置的属性可以省略（取默认值），但必须保留font-size和 font-family
3. 例如：font:20px "Micrsoft Yahei";
font:italic 700 20px "Micrsoft Yahei";

四.CSS文本属性

1.文本颜色 color

有三种表达颜色的方式：1. red,green, blue 2.十六进制 #FF0000红色
3.rgb(255,0,0)红色

2.对齐文本 text-align

  1. 用来设置盒子内的文字的水平对齐方式
  2. 属性值： left 左对齐（默认） right 右对齐 center居中对齐

3.装饰文本 text-decoration

  1. 属性值：none 默认，没有下划线 underline 下划线，超链接自带下划线
    overline 上划线 line-through 删除线（价格的原价上会使用）
  2. 应用： 给超链接去掉下划线
<style>
a {
	text-decoration:none;
}
</style>
</head>
<body>
<a href="#">学习是俺最大的快乐</a>
</body>

4. 文本缩进 text-indent

  1. text-indent属性用来指定文本的第一行缩进，通常是将该段首行缩进
  2. text-indent：2em;(缩进2字符大小，em是相对于当前文字的font-size一个字符大小，所以em不是固定的，是随当前文字而变化)

5. 行间距 line-height

  1. 用来设置行与行的距离，指行高 line-height:26px; 可取像素值
  2. 行间距==上间距+文本高度+下间距，所以改变行高，指的是改变上下间距

五.CSS引入方式

1， 行内样式表（内联样式表） 控制一个标签

  1. 是在HTML元素标签的内部的style属性中来设定css样式，适合修改简单的样式 style="属性：属性值；属性：属性值； "，style后面是等号 后跟双引号
<a href="#" style="text-decoration:none;">学习是俺最大的快乐</a>
  1. 仅仅可以控制当前的标签设置样式

2，内部样式表（内嵌样式表）控制一个页面

  1. 是将所有的CSS代码抽取出来，放到在head标签内部的style标签内部，可以方便的控制当前整个页面中的元素设置
<style>
a {
	text-decoration:none;
}
</style>
</head>
<body>
<a href="#">学习是俺最大的快乐</a>
</body>

3. 外部样式表 控制多个页面

  1. 将样式单独写到CSS文件中，之后把CSS文件引入到HTML页面中
  2. 引入外部样式表分两步：
    1. 新建一个后缀是.css的样式文件，把所有的css代码放到此文件中
    2. 在HTML页面中，使用标签引入css文件
    3. <link rel="stylesheet" href="css文件路径"
  3. 在html文档外面新建的css样式文件，可以被多个html文档应用
    4.外部样式表 实现了可以同时控制多个页面，实现了HTML和CSS的完全分离，即样式和结构的完全分离
    外部css样式表：
@charset "utf-8";
/* CSS Document */

h1 {
	font:italic 400 20px 微软雅黑;
	color:red;
	text-align:center;
	}

HTML网页：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>学习css</title>
<link rel="stylesheet" href="a2.css">
</head>
<body>
<h1>学习不间断</h1>
</body>
</html>