CSS基础篇一
一、什么是CSS
CSS ：
层叠样式表，级联样式，简称才是样式表
实现了内容和表示的分离
CSS和HTML之间的关系：
HTML是负责网页的结构
CSS 是负责构建HTML元素的样式
CSS作用：
1.以统一的方式实现样式的定义
2.提高页面样式的可重用性和可维护性
二、CSS的使用
1.内联样式（行内样式）
将样式声明在元素的style属性中
语法：
<p style=“color: red;”></p>
注意： 所有的样式都必须在双引号之内并且中间用分号进行分隔
代码：
<p style="color: green;font-family: 华文彩云;font-size: 80px;">你好</p>
2.内部样式
将样式声明定义在页面的Style属性中
步骤：
1.在head标签里面添加一个style标签
2.在style中书写样式
语法：
<style type=“text/css”>
p{
/字体的颜色/
color: green;
/字体的大小/
font-size: 80px;
/文字的字体样式/
font-family: “华文彩云”;
}
</style>
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
p{
/*字体的颜色*/
color: green;
/*字体的大小*/
font-size: 80px;
/*文字的字体样式*/
font-family: "华文彩云";
}
</style>
</head>
<body>
<p>你好</p>
</body>
</html>
效果：
3.外部样式表
步骤：
创建一个新的CSS文件
创建和HTML文件的关联
书写样式
<link href=“css/style01.css” type=“text/css” rel=“stylesheet”/>
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="创建的CSS文件"/>
</style>
</head>
<body>
</body>
</html>
三、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.伪类选择器
: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 模糊距离 必须是正数
spread 阴影的大小
color 颜色
inset值 将默认的外阴影变成内阴影
轮廓
作用： 绘制元素周围的一条线，位于边框外的
语法：
/* 轮廓的宽度 */
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标准的盒子模型中 元素在网页中所占的位置的实际宽度
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
/* 通用选择器 */
*{
margin: 0px;
padding: 0px;
}
/* ID选择器 */
#div{
/* 宽 */
width: 670px;
/* 高 */
height: 600px;
/* 背景颜色 存在 但是被背景的图片覆盖了 */
background-color: lemonchiffon;
/* 背景的图片 */
background-image: url(img/9-1Q031164325-51.jpg);
/* 背景的大小 */
background-size: cover;
/* 溢出的效果 隐藏 */
overflow: hidden;
/* 轮廓*/
outline:4px dashed palegreen;
/* 外边距*/
margin: auto;
margin-top: 10px;
}
/* 后代选择器*/
#div>ul{
margin-left: 10px;
}
/* 后代选择器 */
#div li{
/*阴影 */
box-shadow: 0px 0px 10px 10px papayawhip inset;
width: 150px;
height: 100px;
border: 2px solid powderblue;
margin: 0px;
/*强转为行内块元素 */
display: inline-block;
}
/* 伪类选择器 */
#div li:hover{
background-color: plum;
}
</style>
</head>
<body>
<div id="div">
<ul class="cod">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>
效果：
margin:0 auto使用条件
1、必须是块级元素
2、必须设置了宽高
vertical-align 属性
定义和用法
vertical-align 属性设置元素的垂直对齐方式。
值：
baseline 默认。元素放置在父元素的基线上。
sub 垂直对齐文本的下标。
super 垂直对齐文本的上标
top 把元素的顶端与行中最高元素的顶端对齐
text-top 把元素的顶端与父元素字体的顶端对齐
middle 把此元素放置在父元素的中部。
bottom 把元素的顶端与行中最低的元素的顶端对齐。
text-bottom 把元素的底端与父元素字体的底端对齐。
% 使用 “line-height” 属性的百分比值来排列此元素。允许使用负值。
inherit 规定应该从父元素继承 vertical-align 属性的值。
