css基础

今天了解css
主要内容如下：
一、什么是CSS
CSS 层叠样式表，级联样式，简称才是样式表
实现了内容和表示的分离
CSS和HTML之间的关系
HTML是负责网页的结构
CSS 是负责构建HTML元素的样式
CSS作用：
1.以统一的方式实现样式的定义
2.提高页面样式的可重用性和可维护性

二、CSS的使用
1.内联样式（行内样式）
将样式声明在元素的style属性中
语法：

2.内部样式
将样式声明定义在页面的Style属性中
步骤：
1.在head标签里面添加一个style标签
2.在style中书写样式
语法：

三、CSS样式表的特征
继承性
1、子级元素可以直接使用父级元素声明好的样式（这里不是所有的样式都可以被继承）
层叠性
一个匀速可以声明多个样式
注意：如果样式不冲突，多个样式规则中的样式可以层叠为一个。
优先级
样式定义产生冲突时按照不同的样式使用“优先级”来应用样式
在们三种引入方式中谁的优先级最高（行内样式表）
低：浏览器缺省值
中：外部样式表或者内部样式表
高：内部样式表
！improtant
作用：显示调整样式的优先级
语法：属性名称： 值！improtant
注意： IE浏览器 8 以下 不支持的
破坏了优先级规则
四、CSS基础选择器
1.通用选择器
作用：匹配到页面中所有的元素
语法：*{样式1；样式2；}
优点：一个样式整个页面都可以被改变
缺点：效率低，尽可能的少用
2.标签选择器
作用：定义页面的某一个标签的默认样式
语法： 标签名{样式1；样式2}
3.类选择器
作用：由CSS定义好，可以被任意标记的Class属性值进行引用的选择器
语法： 1.在标签中添加 class属性 并且给他一个名字
2.在style中 用.类名{}方式进行样式编写
注意：类名：不能以数字开头，除了 _ , - 以外的特殊符号都不能使用
4.ID选择器
作用：针对指定id值得元素去定义样式
语法： 1.在元素中定义id属性
2.在style中用#id名进行样式编写
注意： id是唯一的
一定要对应页面某个元素的id值
class里面可以同时存在多个类名但是id不能存在多个id名
优先级 ID > 类 > 标签 > *
5.群组选择器
作用：选择器声明 以 ， 隔开的选择器列表
语法：
选择器1，选择器2，。。。。{样式1,；样式2}
ps：不同的选择器都可以被选中（都可以连着用）
6.后代选择器
后代：只要具备层级关系的元素，被嵌套的都可以称为后代元素
语法：
#div1 span{}
注意：中间用空格隔开，并且他们只能是父子级的关系
7.子代选择器
子代：只具备一级层级关系的子元素，被嵌套的（被包括的）称之为子代元素
语法 ： #div2 > span{}
8.伪类选择器
1.hover
9. 选择器的优先级
选择器的类型 权值
元素选择器 0,0,0,1
类选择器 0,0,1,0
伪类选择器 0,0,1,0
id选择器 0,1,0,0
内联样式 1,0,0,0
注意：选择器的权值加到一起 大的是优先 如果权值相同的话，后定义的优先

五、尺寸属性
作用：用户设置元素的宽度和高度 单位为 px（像素） 和 百分比%
宽度属性：
width：设置元素的宽度
min-width：设置最小的宽度
max-width：设置最大的宽度
高度属性：
height：设置元素的高度
min-height：设置元素最小的高度
max-height：设置元素的最大的高度
允许被改变高度和宽度的元素
1.块级元素时可以设置宽高的
2.大部分行内块元素时可以设置宽高的
input 单选多选框
3.存在width和height属性是可以设置宽高的
img table
溢出
使用尺寸属性限制元素的大小时，如果内容所需要的空间大小大于
元素本身，会导致溢出的效果
语法：overflow:
overflow-x: 处理横向溢出
overflow-y: 处理纵向溢出
/*溢出处理
visible 默认效果 溢出可见
hidden 溢出隐藏
scroll 滚动，元素会出现滚动条当内容溢出的时候，滚动条可用
auto 自动（自适应） 内容溢出的时候会出现滚动条 没有溢出的时候是不出现的
* /
边框阴影
属性 box-shadow
h-shadow 必须填的 阴影的水平偏移距离 正数的 右边 负数 左偏移
v-shadow 必须天的 垂直的偏移距离 + 下 - 上
blur 模糊距离 必须是正数
color 颜色
spread 阴影的大小
inset值 将默认的外阴影变成内阴影
轮廓
作用： 绘制元素周围的一条线，位于边框外的
语法：
outline-width：/
/outline-width: 10px;
outline-style: solid;
outline-color: yellow;
outline: none;/
outline: 1px solid red;
背景属性
1.背景颜色
background-color: #000000 英文单词 transparent（透明色）
注意：背景颜色会填充到元素的内容区域、内边距区域 和 边框区域
/背景颜色/
background-color: red;
/*背景图片
默认的效果平铺
* */
background-image: url(img/day04.jpg);
/*修改平铺
repeat:默认的平铺
repeat-x ：水平平铺
repeat-y：垂直平铺
no-repeat：不平铺
* */
background-repeat:repeat;
/*背景图片的尺寸
cover :覆盖 撑满整个元素
contain：将背景图片放大 直到背景图像的下边或者右边有一个边缘碰到我们的元素为止
value1 value2 单位是px
value% value% 采用当前元素的宽度和高度的百分比进行缩放
* * */
background-size: 50% 50%;
/*背景图片的固定
fixed: 背景固定
* */
background-attachment: scroll;

六、盒子模型
1.元素的分类
1、块级元素：独占一行，对宽高生效，如果不给宽度撑满整行，如果不给
高度随着内容的增长而增长
2、行内元素：可以多个标签存在一行，对宽高不生效完全依靠内容去撑起宽高
3、行内块元素： 结合了行内和块级元素的特点，不仅是可以设置宽高而且还可以多个标签
存在一行。
4、如果有需要的话 可以运用display进行强转
inline 行内元素
block 块级元素时可以设置宽高的
inline-block 行内块元素：
none 不显示
2.外边距 内边距 边框 内容
W3C标准的盒子模型中 元素在网页中所占的位置的实际宽度

		总结:之前学过一些css 但是没有今天的全面 今天也学习了很多新知识 
		是以前没有接触过的 也知道了 css里面一些好多隐藏知识 让我对css有了重新的认识 更加熟悉了css