css层叠样式表
css:定义HTML表现形式的描述性语言
cascading style sheets
层叠 样式 表
css样式1 行内样式，2内嵌样式，3外部样式
属性与属性值之间“：”连接 不同的属性值用“；”结束
内嵌样式是在<head>标签内，嵌套<style>标签来书写css
外部样式是一种连接一个外部的css文件来书写css代码的样式表
符合就近原则
行内样式>内嵌样式>外部样式
通配符选择器，用于选择页面中的所有标签
标签选择器是通过标签名进行选择，以便于设置样式的选择器
类选择器，也称class选择器，是对HTML标签的CLASS属性进行选择，设置样式的选择器
以.点开头（类选择器找点，id选择器#，通配符选择器找星号）
id选择器是对HTML标签的ID属性进行选择，设置样式的选择器具有唯一性
以#开头
id选择器>类选择器>标签选择器>全局选择器
群组选择器是同时对几个选择器进行操作的选择器，以逗号隔开
后代选择器：选择作为某标签后代的标签
伪类选择器不是选择一种标签，而是选择标签的一种状态
伪类找冒号 link访问前的状态visited访问后的状态hover鼠标滑过的状态active鼠标点击时的状态
权重的计算
通配符选择器0
标签1
类10
ID100
行内1000
font-family是定义文本的字体系列的css属性
font-style是定义文本是否倾斜的css属性normal正常 italic 斜体
font-weight是定义文本字体粗细的css属性bold加粗600以下细 600以上粗 （100-900）
描述 属性 属性值
字体系列 font-family 宋体,楷体,微软雅黑
字体大小 font-size 12px
字体粗细 font-weight bold | normal| 100-900
字体倾斜 font-style normal | italic
字体颜色 color rgb(255,0,0)|red|#ff0000
行高属性
line-height属性是定义行高的css属性
normal ：默认值
像素值 ：如24px
数值： 如：1.2。设置数字，参照物为当前字体大小
百分比：120%，基于当前字体大小的百分比
text-align是定义文本水平对齐的css属性
text-decoratio是定义文本修饰的css属性
text-indent：2em 首行缩进
overline -上划线
line-through -删除线
underline -下划线
none -没有线
背景颜色background-color
背景图background-image URL路径
背景平铺
repeat默认平铺方式，背景图水平和垂直平铺
no-repeat不平铺
repeat-x水平平铺
repeat-y垂直平铺
背景图位置background-position
background-attachment属性是设置背景附件的属性 fixed背景图固定
scroll背景图片随内容滚动
background复合属性
列表属性
列表项目符号 图形符号 列表位置
list-style-type是定义列表项目符号类型的CSS属性
disc实心圆
circle 空心圆
square实心方块
none 没有项目符号
list-style-image是自定义列表项目符号为图片的css属性
list-style-position:outside是设置列表项目符号位置的css属性
outside 项目符号外 inside项目符号内
border边框线
padding填充（内边距）
margin（外边距）
border-width:宽度值
border-color：颜色值
border-style：线型值（solid实线 ）
边框宽度默认3px 边框颜色默认文字颜色 边框线不能省
边框粗细为0：border：0px 边框线型为没有 border：none
padding-方向词（内边距）：top（上） bottom（下） left（左） right（右） 值不能为负值
值1=四个方向值一样 值1 上下边距（20px） 值2 左右（15px） 值1 上 值2 左右 值3 下值1 上 值2 右 值3 下
值4 左
（外边距）margin-方向值（可以为负值）上右下左
margin:0 auto 实现水平方向居中显示
浮动属性对页面元素设置水平方向布局的css属性
float属性使元素向左或右移动，实现水平方向的布局
left；左浮动 right 右浮动 none 不浮动
塌陷 添加一个副元素
clear属性是清除浮动影响的css属性
left；清除左浮动影响 right 清除右浮动 both 清除左右浮动 none不清除浮动
display:
inline （将元素转换为行内元素）
block（将元素转换为块元素）
inlinea-block（将元素转换为行内块元素）
none隐藏元素，不占空间
visibility：
visible （元素可见）
hidden （元素隐藏）
overflow :和隐藏无关，只和溢出有关
（visible：溢出内容可见
hidden;隐藏溢出内容
scroll;显示滚动条
auto：内容多显示滚动条，内容少不显示
overflow-x:横向方向溢出值
overflow-y:纵向）
方向溢出值
行内块元素：一行显示，宽高生效
img input
position 定位属性是使元素显示能够在页面任意位置的CSS属性
static 默认值，没有定位（静态定位）
relative 相对定位
absolute 绝对定位
fixed 固定定位
相对定位 relative （占原位置空间 参照物是元素的初始位置）
相对定位是元素相对于自身发生偏移的定位方式
绝对定位 absolute（不占原位置的空间 参照物是body）
绝对定位是相对于父元素发生偏移的定位方式
固定定位 fixed（不占原位置的空间 偏移时参照物是浏览器窗口）
固定定位是相对于浏览器窗口发生偏移的定位方式
z-index属性设置元素堆叠顺序的CSS属性
（数字：无单位的整数，可为负值 ）
默认情况下，后来居上（后写的覆盖先写的）
值越大越靠上
默认层是0层
auto：默认值
伪类选择器是根据元素不同状态自动选择不同样式的选择器
link （未被访问）
visited（访问过）
序号伪类选择器：
E:first-child{css样式}匹配父元素的第一个子元素E
E:last-child{css样式}匹配父元素的最后一个子元素E
E:nth-child(n){css样式}匹配父元素的正数第N个子元素E
E:nth-child(odd){css样式}匹配父元素的正数奇数子元素
E:nth-child(even){css样式}匹配父元素的正数偶数子元素E
E:nth-last-child(n){css样式}匹配父元素的倒数第N个元素E
获取焦点状态：input：focus
E:enabled{css样式}匹配处于可用状态的元素E
E:disabled{css样式}匹配处于不可用状态时的元素E
E:：selection{css样式}匹配处于选中状态的元素E
属性选择器：通过元素的属性和属性值来匹配元素的选择器
E[att=“val”]{css样式}
E表示元素
att表示属性
val表示属性值
以“[]”包含
双引号可改成单引号或者省略
E[att*=“val”]{css样式} 选择具有att属性且属性值为包含val的字符串的E元素。
‘*’是正则表达式中的符号，匹配表达式多次
E[att^=val]{css样式}
选择具有att属性且属性值为以val开头的字符串的E元素。
‘^’是正则表达式中的符号，匹配以.......开头
E[att$=val]{css样式}
选择具有att属性且属性值为以val结尾的字符串的E元素。
‘$’是正则表达式中的符号，匹配以.......结尾
关系选择器：兄弟选择器~
css3
盒子阴影：box-shadow
h-shadow 水平偏移量(可正可负)(必选)
v-shadow 垂直偏移量(可正可负)(必选)
blur 模糊程度(正值)(可选)
spread 阴影扩展长度值(可正可负)(可选)
color 颜色（不可以在数值中间）
inset 内阴影 默认外阴影
text-shadow 文本阴影
设置多重阴影用逗号隔开
文本阴影 （text-shadow）
没有扩展半径、内外阴影之说
border-radius （表示圆角边框的css的属性）
2个值 从左上角开始，顺时针给值，没有值的，与对角线相同
3个值 从左上角开始，顺时针给值，没有值的，与对角线相同
4个值 从左上角开始，顺时针
border-top-left-radius：值{左上角}
border-top-right-radius：值{右上角}
border-bottom-left-radius：值{左下角}
border-bottom-left-radius：值{左右角}
box-sizing是更改元素实际宽度和高度计算模式的css属性
content-box默认值，内容的宽度
border-box，content+border+padding的宽度和
背景线性渐变 linear-gradient
渐变方向：to top从下到上
to bottom从上到下
to left从左到右
to right从右到左
text-overflow设置单行文本超出盒子尺寸
white-space是设置如何处理元素内的空白的css属性
normal 默认值
nowrap 文本强制在一行显示
设置单行文本溢出显示省略号 ：
固定的width宽度值
强制文本一行显示 white-space：nowrap
溢出内容隐藏 :overflow :hidden
隐藏内容显示省略号:text-overflow :ellipsis
过渡动画 ：应用属性 持续时间 速度曲线 过度延时
过渡属性 transition-property
none没有属性发生变化
transition-duration指定过渡动画所持续的时间
默认值 0 不可为负值
transition-timing-function
linear 以相同速度开始至结束
ease默认值；慢速开始，然后变快，然后慢速结束
ease-in以慢速开始 ease-out以慢速结束
ease-in-out 以慢速开始和结束
定义关键帧@keyframes规则通过在动画序列中定义关键帧的样式来控制序列中
动画名称 必须值 关键帧 必须值 css样式 必须值
animation-name将关键动画绑定
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
