css样式表、选择器、字体属性、尺寸属性、边框阴影

css概念

1. 以统一的方式实现样式的定义
2. 提高页面样式的可重用性和可维护性
3. 实现了内容（HTML）和表示（CSS）的分离

• HTML和CSS之间有什么关系？

  1. HTML：构建网页的结构
  2. CSS ：构建HTML元素的样式

字体样式汇总

属性	解释
color	字体颜色
font-size	字体大小
font-family	字体样式
font-weight	字体的粗细 normal 普通 lighter 细 bold 宽
font-style	字体的形状 inherit斜体
line-height	行高
text-align	水平位置
letter-spacing	字符间距
text-decoration	字体的划线 overline 上 line-through 中 underline 下
width	宽度
height	高度

CSS的使用

内联样式

1. 内联样式
   将样式声明在元素的style属性中
   样式声明 表示一个具体的显示效果，可以多个同时存在的，多个样式之间用 ； 进行隔开
   每个样式声明都有两部分组成：
   color： 样式属性
   red ： 属性值

<!--内联样式-->
		<div style="color:red ; font-size: 100px;">
			你好
		</div>

效果展示：

内部样式表

2. 内部样式表
   • 在head里面加上一个 style标签
   • .在style中添加任意多的样式

<!--内部样式表-->
		<style type="text/css">
			body{
				color: red;
				font-size: 40px;
			}
		</style>

外部样式表

3. 外部样式表
   • 创建一个单独的样式表文件保存样式规则
     在css文件夹下新建一个CSS文件 并在里面添加好样式
   • 在需要使用得页面上添加 link 标签 进行引入

<link rel="stylesheet" type="text/css" href="css/new_file.css"/>

CSS样式表的特征

特性	描述
继承性	子级标签可以直接使用父级元素声明好的样式 （大部分的CSS样式可以被继承）
层叠性	可以同时写多个样式
优先级	低： 浏览器的缺省值 中： 就近原则 高： 内联样式
！improtant规则	强制调整优先级，打破了优先级规则

CSS基础选择器

作用： 规范了页面中哪些元素能够使用定义好的样式
目的： 匹配页面元素（找到页面的元素）

选择器	作用	用法
通用选择器	匹配页面中的所有元素	*{ }
标签选择器	匹配当前所有这一类的标签	p{}
类选择器	匹配被标记的class属性元素	.类名{ }
ID选择器	匹配被标记的id属性元素	#ID名{ }

优先级：id>class>p（标签）> *（通配符）

选择器	权值
标签选择器	0,0,0,1
类选择器	0,0,1,0
id选择器	0,1,0,0
内联样式	1,0,0,0

选择器的权值加到一起，大的优先；如果权值相同，就近原则。

复杂的选择器

选择器	说明
群组选择器	选择器声明式以 ‘ , ’ 分割 的选择器列表
后代选择器	具备层级关系的元素，使用空格 隔开
子代选择器	只具备一级层级的关系的元素 ， 使用 > 隔开

尺寸属性

1. 作用：用户设置元素的宽度和高度 单位为：px， 百分比

属性值	说明
width	宽度
height	高度
max-width	最大宽度
min-height	最大高度

2. 允许被修改高度和宽度的元素
   1.块级元素
   2.行内块大部分允许被设置宽高的 例如 表单控件 单选和复选 是不能修改尺寸
   3.存在width和height属性的元素 可以设置宽高的样式 img table

3. 溢出 overflow
   使用尺寸属性限制元素大小的时候，如果内容所需要的空间太小大于元素本身，会导致溢出效果
   属性：

overflow 溢出	属性值说明
hidden 隐藏	隐藏 溢出的时候隐藏
scroll 滚动	当元素溢出的时候会出现滚动条 溢出时滚动条可用
auto 自动	内容溢出的时候会出现但是没有溢出的时候不出现

边框阴影

边框阴影：box-shadow
属性：
h-shadow ：水平位置
v-shadow ：垂直位置
blur ：模糊距离
spread ：阴影尺寸
color ：颜色
inset ：将外阴影变成内阴影