CSS 层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。 CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。
CSS为HTML标记语言提供了一种样式描述,定义了其中元素的显示方式。CSS在Web设计领域是一个突破。利用它可以实现修改一个小的样式更新与之相关的所有页面元素。
CSS分位:内联样式(行内样式),外部样式表
CSS样式表的三大特性:继承性,层叠性,优先级
CSS基础选择器
1.通用选择器
2.标签选择器
3.类选择器
4.ID选择器
5.群组选择器
6.后代选择器
7.子代选择器
8.伪类选择器
9. 选择器的优先级
选择器的类型 权值
元素选择器 0,0,0,1
类选择器 0,0,1,0
伪类选择器 0,0,1,0
id选择器 0,1,0,0
内联样式 1,0,0,0
五、尺寸属性
宽度属性:
width:设置元素的宽度
min-width:设置最小的宽度
max-width:设置最大的宽度
高度属性:
height:设置元素的高度
min-height:设置元素最小的高度
max-height:设置元素的最大的高度
溢出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-image: url(img/day04.jpg);
background-repeat:repeat;
background-size: 50% 50%;
六、盒子模型 div
1.元素的分类
1、块级元素:独占一行,对宽高生效,如果不给宽度撑满整行,如果不给
高度随着内容的增长而增长
2、行内元素:可以多个标签存在一行,对宽高不生效完全依靠内容去撑起宽高
3、行内块元素: 结合了行内和块级元素的特点,不仅是可以设置宽高而且还可以多个标签
存在一行。
4、如果有需要的话 可以运用display进行强转
inline 行内元素
block 块级元素时可以设置宽高的
inline-block 行内块元素:
none 不显示
2.外边距 内边距 边框 内容
W3C标准的盒子模型中 元素在网页中所占的位置的实际宽度
.外边距 + 内边距 + 边框 + 内容 =实际宽度(ie8以下不支持)
html+css布局方式:
流动模型 浮动模型 层模型
1.自然布局
2.流动布局
3.定位布局