引入css的几种方式:
1.内部样式:通过style标签引入,通常会在head标签内部。
2.行内样式: 通过style属性。
3.外部样式:通过link标签
href:样式的地址 (必要)
rel : 引入文件和当前文件之间的关系 relationship, 样式表单的关系(必要)
4.import:在一个css文件中导入另外一个css文件 @import url("css的地址");
css优先级别的高低:范围越小,优先级越高(css的权重)
行内样式:style属性,优先级最高!!
引入css的3种选择器:
1.id:标签的id属性不能重复的,选中其中的一个元素,通过#id属性选中。
2.class:class属性可以重复的,并且可以添加在不同的元素上面。 通过 .c1 .c2 选中元素
3.标签:通过标签名选中所有的同名的标签
优先级别: id > class > 标签 (范围越小优先级越高)
font:
font-family:字体样式 宋体 黑体 隶书、、、
font-size: 字体的大小
font-weight: 字重 bold bolder 100 - 900
font-style: 斜体和正常 italic normal
font: font-style font-weight font-size font-family
text:
color:颜色 rgba(255,0,0,0); a表示透明度 0-1 0表示透明 1表示不透明
text-align:center right left 块标签里面的文本
text-indent:首行缩进
line-height:行高 通常会使用让 行高等于元素的高度 来调整文本的垂直居中;
text-decoration:文本的修饰 下划线underline 中间线line-through 顶线overline
text-shadow : color x-offset y-offset blur-radius;
color:阴影颜色
x-offset:x轴偏移量
y-offset:y轴偏移量
blur-radius:模糊半径
letter-spacing:字母间距
word-spacing: 单词之间的间距
white-spacing: 留白区域的控制
pre:空格和换行受保护
nowrap:不换行,除非遇到 br
text-transform none 正常显示可以包含大,小字符
capitalize 字符串第一个字符大写
uppercase 设置大写字符
lowercase 设置小写字符
vertical-align sub 设置文字为下标。
super 设置文字为上标。
top 文字 往上端靠齐。
middle 设置文字是在中线位置。
bottom 文字 往下端靠齐。
伪类:某种状态下的效果
a:link :未单击访问时超链接样式
a:hover :鼠标悬浮其上的超链接样式
a:active :鼠标单击未释放的超链接样式
a:visited :单击访问后超链接样式
列表样式: list-style
list-style-type: none 不显示列表的标号。
disc 实体的小圆点。
circle 空心的小圆点。
square 实心的小方块。
decimal 1,2,3...
lower-roman i,ii,iii...
upper-roman I,II,III...
lower-alpha a,b,c,d,e...
upper-alpha A,B,C,D,E...
list-style-position:
inside 列表项往右移
outside 列表项正常显示(默认)
list-style-image:将标号改为 图片
背景:background
background-color 十六进制 #ff0000;
英文名称 red;
三原色 rgb(255,0,0)
background-image url("bg.jpg") 背景图片
none 不设置背景图片
background-repeat repeat 将背景图案填满整个背景。
repeat-x 将背景图案在水平方向添满。
repeat-y 将背景图案在垂直方向添满。
no-repeat 图案只出现一次。
background-position top left 设置背景 上左方
top center 设置背景 上方中间
top right 设置背景 上右方
center left 设置背景 中间左方
center center 设置背景 中间
center right 设置背景 中间右方
bottom left 设置背景 左下 方
bottom 设置背景 正下方
bottom right 设置背景右 下
第一个位置 左右 第二个位置 上下
background-attachment scroll 设置背景图像会随视窗滚动 条的移动而移动。
fixed 设置背景图像不会随视窗滚动条 的移动而移动。
一个背景样式: background: silver url("img/1.jpg") no-repeat center;
background-size: contain 包含 铺满短边 图片等比例缩放
cover 平铺 铺满长边 图片等比例缩放
水平大小 垂直大小 100% 100% 图片会被拉伸
5.渐变:gradient 线性渐变lineaner-gradient和径向渐变radial-gradient
1)线性渐变lineaner: background-image: linear-gradient(direction方向, color-stop1, color-stop2, ...);
2)径向渐变radial-gradientbackground-image: radial-gradient(shape size at position, start-color, ..., last-color);
1)边框: 宽度 颜色 线型
border-width: 宽度
border-color: 颜色
border-style: 虚线 双线 点线 实线
none 不显示边线
dotted 点线
dashed 虚线
solid 实线
double 双线
2)设置边框时可以单独设置某一条边的颜色 宽度 线型;
上边线
border-top-color: red;
border-top-width: 10px;
border-top-style: solid;
也可这样设置: border-top: 10px solid red;
3)也可以同时设置四条边的颜色 宽度 线型
border-width: 2px 4px 6px 8px;
border-color: red green blue seagreen;
border-style: double solid dashed dotted;
如果是四个位置: 上 右 下 左
如果是三个位置: 上 左右 下
如果是两个位置: 上下 左右
4)border-radius:圆角
可以单独设置某一个角的角度 右上角 border-top-right-radius: 10%;
1)box-shadow: 盒子阴影
box-shadow: h-shadow v-shadow blur spread color inset;
h-shadow 必需的。水平阴影的位置。允许负值
v-shadow 必需的。垂直阴影的位置。允许负值
blur 可选。模糊距离
spread 可选。阴影的大小 (在阴影的宽高上 加减spread的值)
color 可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表
inset 可选。从外层的阴影(开始时)改变阴影内侧阴影
1)margin: 外边距
2)padding: 内边距(内填充)
四个位置:上右下左
三个位置:上左右下
两个位置:上下左右
w3c:盒子模型 content-box,给定的宽度是内容的宽度
div所占的高度:上外边距+上边框+上内边距+height+下内边距+下边框+下外边距
ie的盒子模型: border-box 给定的宽度是border的宽度
1)margin:调整元素的水平居中,元素自己必须有宽度.
margin: 0 auto;
2)上下相邻的两个元素,margin-botton和margin-top的时候,
当两个值都是正数的时候,取两者中的最大值;
当有负数存在时,结果是相加的后的值。
当两个值都是负数的时候,取两者绝对值大的那个;
当子元素紧贴父元素上方元素时,设置子元素的margintop时父元素也会一起向下移动。
min-height:最小高度
min-width:最小宽度
max-height:最大高度
max-width:最大宽度
over-flow:属性,溢出控制
overflow:hidden; 溢出隐藏
overflow:auto; 超出出现滚动条
overflow:scroll; 强制出现滚动条
常用的区块元素: div p ul li h1~h6 ol form table dl dd dt
常用的行内元素: strong span i big small cite em input select
行内块: img audio embed
以上元素的状态可以使用display属性进行转换。
区块:元素独自占据一行,宽高边距全部又有效。
行内元素:多个行内元素并排显示,不会换行,直到排满为止才会换行,添加宽高不起作用,宽和高内容进行支撑,水平方向的内外边距都产生效果,垂直方向不产生边距效果。
display:inline-block,缺点:元素之间如果存在换行会有一定的间隙。
float:浮动,飘起来,脱离原来(标准的文档流)的文档流。
父元素边框塌陷: 子元素全部浮动。
body:after:表示通过 css 给元素内部后面追加内容。
content: "sdfasdf"; 动态追加的内容
以下为追加内容 的css属性:
width: 100px;
height: 100px;
background: slategrey;
display: block;
clear: both;
:before:表示通过 css 给元素内部前面面追加内容。
display:none 就是 隐藏的意思
position: static
absolute 绝对定位;
relative 相对定位
fixed 固定定位 参考位置视窗左上角,脱离原来的文档流;
position: static
absolute 绝对定位 : 当祖先元素具有定位属性,就以具有定位属性的祖先元素的左上角给参考位置,
如果祖先元素没有定位属性,以视窗的左上角为参考位置。
绝对定位的元素会脱离文档流,让出自己的位置。
relative 相对定位 : 参考位置为自己的左上角(原本自己应该出现位置的左上角),不会脱离文档流,不会让出自己的位置,给绝对定位提供参考点。
fixed 固定定位 : 参考位置视窗左上角,脱离原来的文档流;
z-index:层级 值越大 越靠上 正整数。
transition:过度
transition-property :产生过度效果的属性 通常会写 all
transition-duration :过度效果持续的时间
transition-timing-function:过度效果的时间函数
ease:速度由快到慢(默认值)
linear:速度恒速(匀速运动)
ease-in:速度越来越快(渐显效果)
ease-out:速度越来越慢(渐隐效果)
ease-in-out:速度先加速再减速(渐显渐隐效果)
transition-delay:延时几秒执行
旋转:rotate(a);
参数a单位使用deg表示
参数a取正值时元素相对原来中心顺时针旋转
缩放:scale()函数可以只接收一个值,也可以接收两个值,只有一个值时,第二个值默认和第一个值相等
scaleX(1.5) 只缩放x轴 scale(1.5,0)
scaleY(1.5) 只缩放Y轴 scale(0,1.5)
scale(1.5)
skew(ax, ay);
可以仅设置沿着X轴或Y轴方向倾斜
skewX(ax):表示只设置X轴的倾斜
skewY(ay):表示只设置Y轴的倾斜
/*
添加执行动画效果
*/
/*animation: myAnimate 8s infinite linear alternate;*/
animation-name: myAnimate;/*动画的名字*/
animation-duration: 8s;/*动画持续的时间*/
animation-delay: 2s;/*延时2s执行动画*/
animation-direction: normal;/* 动画播放的方向: normal reverse alternate */
animation-iteration-count: 2;/*无数次 infinite*/
animation-timing-function: ease-in-out ;/*linear ease-in-out ease in ease out*/
}
/*
动画:需要有关键帧
*/
@keyframes myAnimate {
/*
定义动画过程中的关键帧
*/
0%{
left: 0;
top: 0;
background: skyblue;
}
25%{
left: 600px;
top: 0;
background: seagreen;
width: 100px;
}
50%{
left: 600px;
top: 600px;
background: sandybrown;
}
75%{
left: 0;
top: 600px;
background: saddlebrown;
}
100%{
left: 0;
top: 0;
background: #5c9815;
}