css概述
-
定义：cascading Style sheet 层叠样式表、级联样式表、样式表
-
使用css的好处
-
将内容与表现分离
-
提高了代码的可重用性与可维护性
-
-
css与HTML的关系
-
html主要用于构建网页结构与内容
-
css用于构建网页的样式
-
-
html属性与css的使用
能使用css修改的样式就不要使用html属性，html特有的属性只能使用html 属性；例如：colspan..
-
css样式表的分类
-
内联样式
在html标签中使用的css样式
-
内部样式表
将样式表定义在html文件的head中
-
外部样式表
将样式表定义在外部css文件中，在html页面进行引入
-
-
css样式表的使用
-
内联样式
使用方法：将样式定义在标签的style属性中
css语法：
允许出现一个或多个 属性：值
<div style="color：red;</div>
-
内部样式表
使用方法：
在html页面的head中，添加一对<style></style>标签
在style中书写以选择器{样式声明（属性：值）}的格式进行定义css样式
-
外部样式表
使用方法：
创建.css文件
在html页面的head中进行引入
<link rel="stylesheet" type="text/css" href="样式表文件的路径">
-
-
css注释
/注释的内容/
二、css语法
-
语法规范
-
样式语法总结
内联：样式声明
样式表（内外）：多个样式规则组成
-
css样式表的特征
1.继承性
大多数样式规则可以被继承
2.层叠性
为一个元素定义多个样式，样式属性不冲突时，多个样式可以层叠为一个
-
优先级
样式定义冲突时，按照不同的样式规则的优先级来应用样式
内联样式优先级最高，相同样式以最后一次为主
外部样式表或内部样式表优先级中等
就近原则：就近优先
！important:调整样式规则的优先级，优先级最高，在值的后面添加（color：“red” !important）
-
-
选择器
-
作用：规范了页面中哪些元素能够使用定义好的样式
-
分类
-
通用选择器：
作用：匹配页面上的所有元素
语法：*{}
-
元素（标签、标记）选择器
作用：匹配页面上指定的元素
语法：元素名称{}
-
类选择器
作用：通过元素的clss属性值，对类选择器进行引用
语法：.类名{}#类名不能以数字开头
-
分类选择器
作用：将类选择器和元素选择器结合使用，实现对某种元素中不同样式的细分控制
语法：元素选择器.类选择器{}
-
id选择器
作用：主要配合元素的id属性一起来使用，为指定id值的元素去定义样式
语法：#idvalue{}
-
后代选择器
作用：根据元素所在的上下级的关系来定义元素的样式，通常用在选择某个元素的后 代元素时使用
语法：选择器1 选择器2{}
-
群组选择器
作用：选择器的声明以逗号隔开的选择器列表
语法：h1,h2,p,span,#footer{}
-
子代选择器
作用：根据元素所在的上下级的关系来定义元素的样式，要求选择器之间只能存在父 子关系，即只有一层上下级关系。目的是缩小范围
语法：选择器1>选择器2
-
伪类选择器
作用：匹配元素的不同的状态
分类：
链接伪类
语法：
：link，定义尚未访问的链接的样式
：visited，定义访问过的链接的样式
示例：a:link{} a:visited{}
动态伪类
语法：
：hover,定义鼠标悬停在html元素上时的样式
：active，定义元素被激活时的状态
：focus，定义html元素获取焦点时的样式（多用在文本框、密码框）
目标伪类
元素状态伪类
结构伪类
否定伪类
-
-
三、尺寸、边框
-
尺寸
-
用于设置元素的宽度和高度
-
单位一般为 px 或 %
-
属性
宽度width
max-width:最大宽度
min-width：最小宽度
max-width和min-width与width相冲突。块级元素宽度默认为100%，如果一旦设置，以设置的为主
高度height
max-height 最大高度
min-height 最小高度
max-height，min-height 以 height 相冲突。块级元素默认没有高度，自适应,行内元素高度，以当前元素 字体大小高度为主
注意：如果使用 width 或 height 去限制元素大小的话，如果元素中的内容的宽 或 高 大于了元素本身的宽和高的话，那么就会导致内容溢出
-
-
溢出处理
-
属性：overflow
overflow-x : 横向溢出处理方式 overflow-y : 纵向溢出处理方式
-
取值
visible : 默认值，溢出正常显示 hidden : 溢出隐藏 scroll : 滚动，让元素显示滚动条，溢出时，滚动条可用 auto : 自动处理，元素溢出则显示滚动条，否则则不显示滚动条
-
注意
页面中所有的行内元素，默认情况下是不允许修改尺寸的
-
-
边框
-
简写方式（四个边框同一风格）
border：width style color
width:边框宽度，px为单位的数值 style:边框样式，solid 实线 ， dotted 虚线，dashed 虚线 color:颜色 ， rgb() , #rrggbb
-
单边定义
border-left/right/top/bottom:width style color;
-
定义边框宽度
四个边框宽度: border-width : width; 单边框宽度: border-left/right/top/bottom-width
-
定义边框样式
border-style: border-left/right/top/bottom-style:
-
颜色
border-color: border-left/right/top/bottom-color
颜色取值可以为 transparent，用于创建有宽度的不可见边框
-
边框倒角
将边框的直角倒成圆角
属性：border-radius
取值：数量 1个值或4个值 单位为具体数值或百分比
单独定义：
border-top-left-radius:左上角 border-top-right-radius:右上角 border-bottom-left-radius:左下角 border-bottom-right-radius:右下角
-
-
边框阴影
属性：box-shadow
取值：由多个属性值组成的值列表
h-shadow : 必须，阴影的水平位置,值为正，向右偏移，值为负，向左偏移 v-shadow : 必须，阴影的垂直位置,值为正，向下偏移，值为负，向上偏移 blur : 可选 ，模糊距离 spread : 可选，阴影的尺寸 color : 可选，颜色 inset : 可选，将默认的外部阴影，改为内阴影 常用操作： box-shadow:h-shadow v-shadow blur color;
box-shadow:0px 0px 1px #ddd;#模拟边框发光的效果
-
轮廓
绘制于元素周围的一条线，位于边框之外 语法：
outline:width style color;
outline-width: outline-style: outline-color:
四、框模型
-
框模型
-
框即页面上所有的元素
-
框模型（Box Model）,又称为盒子模型，定义框，处理元素内容、内边距、外边距、边框的样式
-
元素的实际的宽：左右的内外边距+左右边框+宽度
-
-
外边距margin
属性：margin margin-left margin-right margin-top margin-bottom
取值：px % 负值 auto
margin取值：
margin：value；四个方向的外边距
margin：value1 value2 ;上下 左右
margin：v1 v2 v3 ; 上 左右 下
margin：v1 v2 v3 v4;上 右 下 左
margin：0 auto #当前块级元素水平居中显示
注意：
1.一些块级元素（body，p,h1~h6），默认存在外边距，不想要的时候，设置为margin：0px就可以了
2. 当两个垂直外边距相遇时，将会合成一个外边距，最终外边距的值取两者中最大的那个
3.给子元素设置margin-top，默认会被识别成父元素的margin-top
解决方案：
1.给父元素加边框（border：1px solid transparent）
2.给父元素设置上内边距（padding-top）,同时整体高度减去padding-top的值
-
内边距 padding
内容区域与边框之间的空白，内边距会扩大元素边框所占用的区域
属性：padding padding-left/right/top/bottom
取值：
px %
padding取值：
padding：value；上下左右的内边距
padding：value1 value2 ;上下 左右
padding：v1 v2 v3 ; 上 左右 下
padding：v1 v2 v3 v4;上 右 下 左
五、背景
-
背景颜色
-
属性：background-color
-
取值：
合法颜色值
transparent 透明色
-
-
背景图片
-
属性：
background-image
-
取值：
url(图像的路径)
background-image：url()
-
背景重复
默认情况，背景图会在水平和垂直两个方向都出现重复的效果（平铺）
属性：background-repeat
取值：
repeat：默认值 水平垂直平铺
repeat-x:水平平铺
repeat-y:垂直平铺
repeat：no-repeat
-
背景图片尺寸
属性：background-size
取值：
value1 value2 宽度 高度
value1% value2%
cover： 把背景图片扩展至足够大，以便背景图像完全覆盖背景区域，图片的某些部分也许无法显示
contain:把背景图像扩展至最大尺寸，以便其宽度和高度完全适应内容区域
-
背景图片的固定
属性：background-attachment
取值：
scroll 滚动 默认值
fixed 背景图片固定
-
背景定位
改变背景图像在元素中的位置
属性：background-position
取值：
x y:
x表示水平方向移动的距离 +向右 - 向左
y表示垂直方向移动的距离 +向下 - 向上
x% y%：
0% 0%：显示在元素的左上方
100% 100%：显示在元素的右下方
50% 50% ：居中
left：靠左
center：水平或垂直方向的中间
top：靠上
bottom：靠下
-
背景属性
属性：background
取值：color url() repeat attachment position
常用方式：url（） repeat position
示例：background：url（） no-repeat -243px -122px
-
六、渐变
-
什么是渐变
两种或多种颜色之间的平滑过渡的效果，任何使用背景图片的地方都可以使用渐变
-
渐变分类
线性渐变、径向渐变、重复渐变
-
渐变的语法
属性：background-image
取值：
url() : 显示背景图 linear-gradient() : 线性渐变 radial-gradient() : 径向渐变 repeating-linear-gradient() : 重复线性渐变 repeating-radial-gradient() : 重复径向渐变
-
渐变的具体实现
-
线性渐变 background-image:linear-gradient(angle,color-point1,color-point2,color-point3 ... ); angle : 角度 或 方向。 取值： to top / (0deg) : 从下向上显示 to bottom / (180deg) : 从上向下显示 to left / (270deg) : 从右向左显示 to right / (90deg) : 从左向右显示 color-point : 颜色点，表示颜色的起始点、中间点以及结束点 取值：颜色值 位置; ed 0%
background-image:linear-gradient(to top,red 0%,green 50%,blue 100%);
-
径向渐变 radial-gradient([size at position],color-point1,color-point2,....);
size at position : 可以不写的。 size : 径向的圆的半径 position ：圆心所在位置，默认为元素的中间位置处 取值： x y ： 以元素的左上角为 0 0 x% y% ：以元素的宽和高的占比设置圆心位置 top left bottom right center
-
重复渐变 repeating-linear-gradient() repeating-radial-gradient()
-
-
浏览器兼容性
大部分浏览器的主流版本 均支持渐变属性
对于不支持的版本: Firefox : 添加前缀 -moz- Chrome 和 Safari : 添加前缀 -webkit- Opera : 添加前缀 -o- IE : 添加前缀 -ms-
background-image:linear-gradient(); background-image:-moz-linear-gradient();/火狐/ background-image:-webkit-linear-gradient();/Chrome Safari/ background-image:-o-linear-gradient();/Opera/
七、文本格式
-
字体属性
-
指定字体
font-family：value
-
字体大小
font-size:value;
当字体设置为一定数值时，则每个字符在页面的宽度和高度都是设置的值
-
字体加粗
font-weight:normal / bold / value;
-
字体样式
font-style:normal / italic（倾斜）;
-
小型大写字母
font-variant : normal / small-caps;
-
字体属性
font:style variant weight size family; font:bold 12px "微软雅黑";
-
-
文本格式
-
文本颜色
color：value
-
水平对齐
text-align：left/right/center
-
文字修饰
text-decoration：none\underline\line-through
-
行高
line-height：value 一行数据的高度
若行高比文本的大小大的话，文本将在此空间中垂直居中显示
-
首行文本缩进
text-indent：value
-
文本阴影
text-shadow：h-shadow v-shadow blor
-
八、表格
-
表格的常用样式属性
-
边距属性：padding
-
尺寸属性：width、height 设置表格和单元格的尺寸
-
border：设置表格的边框
-
垂直对齐方式：vertical-align：top\middle\bottom(用于td内的内容)
-
-
表格中特有的属性
-
边框合并（将table和td的边框合并在一起）
属性：border-collapse
取值：
separate 默认值 分离边框
collapse 合并
-
边框的边距
属性：border-spacing 设置相邻单元格之间的边框距离
注意：仅在border-collapse：separate时有效
取值：一个值，表示水平和垂直相同的间距
两个值，一个表示水平，一个表示垂直
-
显示的规则（自动表格布局）
定义表格布局方式
属性：table-layout
取值：
auto 列宽度由内容决定，默认值
fixed 列宽度由设置的值来决定
-
九、定位
-
定位的概述
-
定义：定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置
-
分类
普通流定位 、浮动定位、相对定位、绝对定位
-
-
浮动的具体解析
-
普通流定位，又称文档流定位
块级元素从上到下一个一个的排列
行内元素一行内从左到右的排列
-
浮动定位
定义：将元素排除在普通流之外，即脱离文档流
特点：
浮动的元素不占据页面的空间；
浮动元素会放置在包含框（父级元素）的左边或右边；
浮动后依然在包含框内
非块级元素浮动的话，会变成块级元素，允许修改宽和高
块级元素浮动后，宽度将变成自适应
浮动元素可以向左或向右浮动，直到碰见包含框的边缘或另一个已浮动的元素框为止
浮动元素边缘不会超过其父元素的边缘
浮动元素不会重叠
处理的问题：
让块级元素在同一行内显示
修改行内元素的宽和高
浮动的属性
属性：float
取值：none left right
清除浮动所带来的影响
属性：clear
取值：left right both
子元素浮动给父元素带来的影响：
问题：父元素内的所有子元素都浮动的话，父元素的高度则会变成0
解决方案：
1.给父元素设置高度
2.设置父元素为：overflow：hidden
3.在父元素内添加一个空的元素，给空元素添加clear：both；
-
-
定位常见类型
-
定位的属性
position 规定元素的定位类型
取值：static/relative/absolute/fixed
偏移属性 定义元素框的偏移属性
定义：top/bottom/left/right
取值：value
z-index 设置元素的堆叠顺序
取值：z-index:values
float/clear 浮动定位属性
-
相对定位
定义：元素框相对于它原来的位置，偏移某个距离
设置：
position：relative
通过top/bottom/left/right定位 出现的位置
使用场合：配合着绝对定位一起使用
-
绝对定位
特点：从文档流移出，不占据页面空间，即脱离文档流
绝对定位的初始位置：相对于最近的已定位（固定、相对、绝对定位）的祖先元素
如果元素没有已定位的祖先元素，那么它的位置就相对于body进行定位
设置：
position：absolute
通过top/bottom/left/right定位 出现的位置
使用场合：弹出菜单
-
固定定位
特点：让元素永远固定的显示在页面的某一位置处，不会随着滚动条的滚动而移动
设置：
position：fixed
通过top/bottom/left/right定位 出现的位置
-
-
堆叠顺序
属性：z-index
取值：负数、0、整数
只有已定位（relative、absolute、fixed）的元素才具备z-index
十、显示
-
显示方式
-
默认
-
显示方式
块级元素：div、h1、p......
行内元素：span、a.......
行内块：img
-
dispaly属性
作用：修改元素的默认显示方式
属性：display
取值：
none：让元素隐藏，且不占据页面空间
block：使行内元素变成块级元素
inline:使块级元素变成行内元素
inline-block:行内块，具备行内元素和块级元素的特点（成一行显示、允许修改宽和高）
使用场合：控制元素的显示和隐藏；将行内元素变成块级元素或行内块元素
-
-
显示效果
-
visibility：修饰元素的可见性
取值：
visible 默认值，可见的
hidden:元素不可见，占据页面空间
collapse：用于表格，了解
visibility:hidden与disply:none的区别
1.visibility:hidden是指页面的显示效果；disply:none是指页面的显示方式
2.visibility:hidden隐藏，使元素不可见，但仍占据页面的空间；disply:none，隐藏元素且不占据页面空间
-
opacity 透明度
取值：0-1 值越大，不透明度越高
-
vertical-aline 垂直方向对齐
使用：td、img
取值：
baseline 默认 基线对齐
top 顶部对齐
bottom 底部对齐
middle 居中对齐
放置在img中，控制的是img左右两端文本的垂直对齐方式
-
-
光标
-
作用：改变鼠标的显示效果
-
属性：cursor
-
取值
deault 默认的
pointer 手
crosshair +
text :I
wait:等待
help：？
-
十一、列表
-
列表的样式
-
list-style-type 控制列表中列表项标志的样式
取值：
none：无标记
decimal：数字，默认值
lower-roman:小写罗马数字
upper-roman ：大写罗马数字
-
list-style-image 使用图像来替换列表的标记
取值：url()
-
list-style-position 控制列表项标识的位置
取值：
outside 标记位于文本的左侧，且放置在文本以外 默认值
inside 标记放置在文本以内
-
综合
list-style：type url() position
-