一、CSS样式定义与应用:
1.使用标签style属性应用CSS样式:
<HTML标签 style="属性名1:属性值; 属性名2:属性值; ...">...</HTML标签>
2.内部使用(只能当前网页使用),将<style></style>样式定义在Html页面的<head><head/>中,设置指定HTML标签样式,在HTML5中<style>可以省略type="text/css":
<head>
<style>
选择器1 { <!-- 可以使用HTML标签名作为选择器 -->
属性名1:属性值;
属性名2:属性值;
...
}
选择器2 { <!-- 可以使用HTML标签名作为选择器 -->
属性名1:属性值;
属性名2:属性值;
...
}
...
</style>
</head>
3.外部引入(可以多个网页使用),将<style></style>样式定义在以.css为扩展名的文件中,在指定网页中使用<link>标签引入:
x.css文件中定义样式:
选择器1 { <!-- 可以使用HTML标签名作为选择器 -->
属性名1:属性值;
属性名2:属性值;
...
}
选择器2 { <!-- 可以使用HTML标签名作为选择器 -->
属性名1:属性值;
属性名2:属性值;
...
}
...
x.html中引入x.css文件,rel="stylesheet"表示引入的是样式文件,href指定样式文件路径。type="text/css"表示外部文件为css样式,HTML5中可以省略:
<head>
<link rel="stylesheet" href="x.css文件路径">
</head>
二、选择器分类:
1.基础选择器:
(1)标签选择器,使用html标签作为选择器,所有此html标签都应用该样式:
html标签名 { /* 使用HTML标签名作为选择器 */
属性名:属性值;
}
(2)类选择器:
定义样式,以 .类名 定义,该类名定义的样式允许多处使用:
.类名1 {
属性名:属性值;
}
.类名2 {
属性名:属性值;
}
使用样式,在html标签中使用class属性应用该样式,多个类名之间用空格隔开:
<span class="类名1 类名2 ..."></span>
(3)id选择器,
定义样式,在id名前加#,该id名定义的样式只能在一处使用:
#id名 {
属性名:属性值;
}
使用样式,在html标签中使用id属性应用该样式:
<span id="id名"></span>
(4)*通配符选择器,使用*作为名称,当前网页所有html标签均使用此样式,
* {
属性名:属性值;
}
2.复合选择器:
(1)后代(包含)选择器,对<html父标签>内部指定的<子孙标签>生效:
定义样式,类名被html父标签引用:
.类名或html父标签 html子标签 html孙标签 { /* 此处html子孙标签可以一级或多级,多级时用空格隔开 */
属性名:属性值;
}
对<html子标签+孙标签>使用样式(样式定义为 .类,才需要):
<html父标签 class="类名">
<html子标签>
<html孙标签>...</html孙标签>
</html子标签>
</html父标签>
(2)子标签选择器,对<html父标签>内部的子标签生效:
定义样式,类名被html父标签引用:
.类名或html父标签>html子标签 { /* 父子标签之间用>隔开 */
属性名:属性值;
}
对<html子标签>使用样式(样式定义为 .类,才需要):
<html父标签 class="类名">
<html子标签>...</html子标签>
</html父标签>
(3)交集选择器,满足 <html标签> and class="类名",才应用此样式,
定义与样式:
html标签.类名 { /* .表示与关系 */
属性名:属性值;
}
对<html标签>使用样式:
<html标签 class="类名">...</html标签>
(4)并集选择器,多个选择器之间为or关系,满足任何一个选择器,就应用此样式,
定义与样式:
.类名, html标签, #id名 { /* ,表示或关系,多个选择器之间用,隔开 */
属性名:属性值;
}
对<html标签1>和<html标签2>使用样式:
<html标签1>...</html标签1>
<html标签2 class="类名">...</html标签2>
(5)链接伪类选择器:
定义与样式:
/* 标签名:link为未访问的链接、标签名:visited为已访问的链接、标签名:hover鼠标移动到链接上、标签名:active选定的链接 */
html标签名:link { /* a为<a></a> */
属性名:属性值;
}
使用样式:
<html标签名>...</html标签名>
(6)属性选择器(CSS3新增选择器,权重为10):
定义样式:
/*
html标签名[属性名] //匹配带有此属性的标签
html标签名[属性名="属性值"] //匹配带有此属性,且值与"属性值"相等的标签
html标签名[属性名^="属性值"] //匹配带有此属性,且值以"属性值"开头的标签
html标签名[属性名$="属性值"] //匹配带有此属性,且值以"属性值"结尾的标签
html标签名[属性名*="属性值"] //匹配带有此属性,且值包含"属性值"的标签
*/
html标签名[属性名] {
...
}
使用样式:
<html标签名 属性名="属性值">...</html标签名>
(7)结构伪类选择器(CSS3新增选择器,权重为10):
定义样式:
/*
html标签名:first-child //匹配父元素中此标签的第1个子元素
html标签名:last-child //匹配父元素中此标签的最后1个子元素
html标签名:nth-child(数值或even偶数或odd奇数或公式) //匹配父元素中此标签的第n个子元素或偶数或奇数或公式(未知数为n,列公式)
html标签名:first-of-type //匹配此标签第1个
html标签名:last-of-type //匹配此标签最后1个
html标签名:nth-of-type(数值或even偶数或odd奇数或公式) //匹配此标签第n个或偶数或奇数或公式(未知数为n,列公式)
*/
html父标签名 html子标签名:first-child {//父标签名+空格+子标签名:匹配规则,适用同级下所有标签为一种类别
...
}
或
html父标签名 html标签名:first-of-type { //父标签名+空格+指定标签名:匹配规则,适用同级下有不同类别的标签
...
}
使用样式(无需引入):
<html标签名>...</html标签名>
(8)伪元素选择器(CSS3新增选择器,权重为1):
定义样式:
/*
html标签名::before //在标签内的"原串文本"最前面插入"待插入的文本"
html标签名::after //在标签内的"原串文本"末尾插入"待插入的文本"
*/
html标签名::before {
content: "待插入的文本" //必须添加content
...
}
使用样式(无需引入):
<html标签名>原串文本</html标签名>
3.选择器权重:
(1)权重说明:
加了"!important"标记的属性(最大) > 使用标签style属性(1,0,0,0) > id选择器(0,1,0,0) > 类或伪类选择器(0,0,1,0) > 标签选择器(0,0,0,1) > *通配符选择器或者继承自父选择器(0,0,0,0)
!important使用:
html标签 {
color: red!important; /* !important跟在属性值后面 */
}
(2)权重计算:
权重以逗号分隔成四位,每次相加只找对应逗号的值进行相加,数值不能跨逗号计算:
例1:
.类名 html子标签 { /* 0,0,1,0 + 0,0,0,1 = 0,0,1,1 */
属性名:属性值;
}
例2:
html父标签 html子标签 { /* 0,0,0,1 + 0,0,0,1 = 0,0,0,2 */
属性名:属性值;
}
三、CSS样式:
1.注释:
/* 注释内容 */
2.常用属性名与属性值:
(1)font:
font-size(字体大小): 数值px;
font-family(字体): "中文字体" | 英文字体;
中文字体要加引号,如宋体、黑体、微软雅黑等,英文字符可以不用加引号,可以使用Unicode替换字体文字,允许多个值,值之间使用","分隔,优先使用前面的
font-weight(字体粗细): lighter(细体) | normal(正常体,等同于400) | bold(粗体,等同于700) | bolder(特粗体) | 100-900数值;
font-style(字体风格): normal(正常) | italic(斜体) | oblique(倾斜的字体);
font(font所有属性简写,属性值用空格隔开,顺序不能改,font-size值和font-family值不能省略,其他可以): font-style值 font-weight值 font-size值 font-family值;
(2)color(颜色值): 固定值 | 十六进制 | RGB代码;
固定值,为red、blue、green等
十六进制,#ff00aa(两两相同时可以简写为#f0a)
RGB代码,rgb(50%, 20%, 30%)或rgb(50, 100, 255)
(3)text-align(文本对齐方式): left | center | right;
(4)text-indent(首行缩进,1em为1个字宽度): 数值em;
(5)text-decoration(文本超链接样式): none | blink(闪烁) | underline(横线在文本下面) | overline(横线在文本上面) | line-through(横线穿过文本);
(6)text-overflow: clip(切除超长的文字) || ellipsis(超出文字以...显示);
(7)white-space: normal(默认,会自动换行) || nowrap(强制一行显示)
(8)line-height(行间距): 数值px;
(9)line-height(行高): 数值px;
行高=高度,内容居中
行高大于高度,内容偏下
行高小于高度,内容偏上
(10)背景属性(background-image+background-position可以实现精灵技术,整个页面一张大图,每块图标取部分显示成背景):
background-color(背景颜色值): color属性值;
background-image(背景图片): none | url(图片地址);
background-repeat(背景平铺) repeat(纵向和横向上平铺) | no-repeat(不平铺) | repeat-x(横向平铺) | repeat-y(纵向平铺);
background-position(背景位置,必须搭配background-image,值为数值px | 固定值(top、bottom、center、left、right)):横向值 纵向值;
background-attachment(背景随着界面滚动或固定): 值为scroll(滚动)、fixed(固定);
background(背景所有属性简写,属性值用空格隔开): 背景颜色值 url(图片地址) 背景平铺属性值 背景滚动属性值 背景位置值;
background(背景透明,最后一位设透明度,值0-1): rgba(0, 0, 0, 0, 0.5);
background-size: 宽度px 高度px; //设置背景图片宽高
background-size: 宽度百分比% 高度百分比%; //设置背景图片宽高
background-size: cover; //等比例放大背景图填满,有部分图片不显示
background-size: contain; //等比例放大背景图,宽或高有一个填满就不会放大,有部分会空白
3.边框border:
border-collapse: collapse(合并相邻边框);
border-radius(边框圆角半径): 数值px || 百分值%; //正常浏览器版本
-moz-border-radius(边框圆角半径): 数值px || 百分值%; //兼容firefox浏览器老版本
-ms-border-radius(边框圆角半径): 数值px || 百分值%; //兼容ie浏览器老版本
-webkit-border-radius(边框圆角半径): 数值px || 百分值%; //兼容safari、chrome浏览器老版本
-o-border-radius(边框圆角半径): 数值px || 百分值%; //兼容opera浏览器老版本
方式1(key为border-width、border-style、border-color,value见如下):
border-width(边框线粗细): medium(默认宽度) || thin(小于默认宽度) || thick(大于默认宽度) || 数值px;
border-style(边框样式): none(无边框) || hidden(隐藏边框) || dotted(点线) || dashed(虚线) || solid(实线) || double(双线,间隔为border-width值) || groove(3D凹槽) || ridge(菱形框) || inset(3D凹边) || outset(3D凸边);
border-color(边框颜色): blue(颜色值);
方式2(上边加top,下边加bottom,左边加left,右边加right):
border-top-width: 1px;
border-top-style: none;
border-top-color: blue;
方式3(key为border,value为border-width border-style border-color组合,空格分开,没有顺序):
border: 1px dashed blue;
4.内边距padding:
padding-top: 数值px;
padding-right: 数值px;
padding-bottom: 数值px;
padding-left: 数值px;
padding: 数值px; //上下左右一样值,值为0清除默认内边距
padding: top与bottom数值px left与right数值px; //上下一样,左右一样
padding: top数值 right数值 bottom数值 left数值; //简写,按顺序写
5.外边距margin(使用overflow:hidden解决合并塌陷问题):
(1)常用属性:
margin-top: 数值px;
margin-right: 数值px;
margin-bottom: 数值px;
margin-left: 数值px;
margin: 数值px; //上下左右一样值,值为0清除默认外边距
margin: top与bottom数值px left与right数值px; //上下一样,左右一样
margin: top数值 right数值 bottom数值 left数值; //简写,按顺序写
(2)水平居中(auto表示填满):
width: 数值; //必须指定宽度
margin-left: auto; //使用auto居中
margin-right: auto; //使用auto居中
或
margin: 0 auto; //使用auto居中
或
margin: auto; //使用auto居中
6.垂直居中(只对行内与行内块生效):
vertical-align: baseline(和文字的基线对齐) || top(顶部对齐) || middle(垂直居中) || bottom(底部对齐)
7.阴影(CSS3新增):
box-shadow: 水平阴影px(必须) 垂直阴影px(必须) 模糊距离px 阴影宽度px 阴影颜色 inset(内阴影)或outset(外阴影); //按顺序写
8.显示模式转换,布局隐藏/显示:
(1)显示模式转换:
分类:
块级标签:一个标签独占一行,可以设宽高,默认为标签的宽高:
行内标签:多个标签在同一行,不能设宽高,默认为内容的宽高:
行内块标签:多个标签在同一行,可以设宽高,默认为内容的宽高:
模式转换:
display: inline(块转为行内);
display: block(行内转为块,并显示布局);
display: inline-block(块、行内转为行内块);
(2)布局隐藏/显示:
display: none(隐藏布局,不占位);
visibility: visible(显示) || hidden(隐藏,占位);
9.overflow控制布局内容超出后显示效果:
overflow: hidden(切掉超出部分) || auto(加垂直滚动条) || scroll(加水平与垂直滚动条) || visible(全显示,默认);
10.布局浮动显示(不占位置,可以行内显示):
(1)使用浮动显示:
浮动布局对齐父布局,不会超过父布局的内边距;
当前浮动布局与上个同级浮动布局顶部对齐;
当多个浮动布局一行显示不下时,多出的浮动布局自动显示在下一行。
float: none(布局不浮动,默认) || left(布局左浮动) || right(布局右浮动) //设置浮动显示
(2)清除浮动:
方式1:
.样式名{ //定义CSS
clear: left(清除左侧同级布局浮动效果) || right(清除右侧同级布局浮动效果) || both(清除两边同级布局浮动效果);
}
<div class="样式名" /> //使用CSS,在浮动布局同级下最末尾加一个空标签应用清除浮动CSS
方式2(在父布局CSS中添加overflow属性):
overflow: hidden;
方式3(对指定布局CSS使用:after伪元素清除浮动):
.样式名:after{
content: "";
display: block;
height: 0;
visibility: hidden;
clear: both;
}
方式4(对指定布局CSS使用:before+:after双伪元素清除浮动):
.样式名:before,
.样式名:after{
content: "";
display: table;
}
.样式名:after{
clear: both;
}
11.布局定位(将布局固定在指定位置,对布局添加样式):
(1)使用定位:
position(定位模式):
static(静态定位,默认值,无定位) ||
relative(相对定位,相对布局原来的位置进行top等值的移动,占位置) ||
absolute(绝对定位,父布局设置了定位,以父布局位置进行top等值的移动,否则以爷爷布局,上层如果一直没有定位,则以整个页面进行定位,不占位) ||
fixed(固定定位,固定在指定位置,以页面可视位置进行top等值的移动,不占位);
top: 数值px;
bottom: 数值px;
left: 数值px;
right: 数值px;
(2)使用绝对定位实现水平居中:
position: absolute;
left: 50%;
margin-left: -布局宽度一半值px;
(3)使用绝对定位实现垂直居中:
position: absolute;
top: 50%;
margin-top: -布局高度一半值px;
(4)设置堆叠顺序:
z-index: 数值; //数值越大显示在越上面
12.鼠标样式:
cursor: default(白箭头图标) || pointer(手掌图标) || move(十字移动图标) || text(I形状图标) || not-allowed(红色禁止图标)
13.轮廓线:
outline: none || outline-color || outline-style || outline-width;
outline: 0; //平常使用此方式,去掉效果
outline: none; //平常使用此方式,去掉效果
14.防止拖拽<textarea>(对此标签使用以下样式):
resize: none;
15.指定CSS使用的版本:
box-sizing: border-box(CSS3盒子模型) || content-box(CSS盒子模型);
四、2D与3D转换(CSS3新增样式):
1.2D转换:
transition: all 秒数值s; //持续时间
transform-origin: x轴px(或百分比) y轴px(或百分比); //设置中心点,默认为标签中心
transform-origin: top bottom left right center; //同上,值可以随意组装,可以以左上角、右上角、左下角、右下角等为中心点
(1)移动translate(行内标签无效):
transform: translate(x轴偏移值px或百分比%, y轴偏移值px或百分比%) || || translateX(x轴偏移值px或百分比%) || translateY(y轴偏移值px或百分比%); //以自身宽度或高度的百分比
(2)旋转rotate:
transform: rotate(度数deg); //deg为单位,正值为顺时针,负值为逆时针
(3)缩放scale:
transform: scale(x轴倍数, y轴倍数); //倍数小于1为缩小,大于1为放大,x和y值一样时,可以只改一个
transform: scale(倍数); //x和y值一样时,可以只写一个
(4)综合使用(组合使用时按此顺序:translate -> rotate -> scale):
transform: translate(x, y) rotate(度数deg) scale(x轴倍数, y轴倍数); //以空格间隔
2.2D动画:
(1)使用@keyframes定义动画:
@keyframes 动画名 { //定义CSS样式
0%或from {//动画开始
transform: 上面的2D转换方法;
}
百分比% {//动画中间,无需求可以不写,也可以写多个中间动画
transform: 上面的2D转换方法;
}
...
100%或to {//动画结束
transform: 上面的2D转换方法;
}
}
(2)在标签的CSS中使用动画:
方式1:
animation-name: 动画名; //调用动画
animation-duration: 数值s; //持续时间
animation-timing-function: ease(慢->加快->慢) || linear(匀速) || ease-in(慢->正常) || ease-out(正常->慢) || ease-in-out(慢-正常-慢) || steps(完成动画需要的步长); //运动曲线
animation-delay: 0s; //延迟开始时间
animation-iteration-count: 次数 || infinite(无限次); //播放次数
animation-direction: normal(下一次顺向播放) || alternate(下一次逆向播放);
animation-play-state: running(运行状态) || pause(暂停状态);
animation-fill-mode: forwards(结束后保持当前位置) || backwards(结束后回到初始位置);
方式2(简写):
animation: name动画名 duration时间 timing-function运动曲线 delay延迟时间 iteration-count播放次数 direction播放方向 fill-mode动画结束后保持的位置
3.3D转换:
transition: all 秒数值s; //持续时间
其他2D属性此处也能用;
perspective: 数值px; //透视视距(给父元素添加此样式),设置眼睛到屏幕的距离,值越小物体越大
transfrom-style: flat(默认,不开启) || preserve-3d(开启); //开启3D显示效果(给父元素添加此样式)
(1)移动translate3d:
transform: translate3d(x轴值px, y轴值px, z轴值px) || translateX(x轴值px) || translateY(y轴值px) || translateZ(z轴值px, z值越大物体越大);
(2)旋转rotate3d:
transform: rotate3d(x轴px, y轴px, z轴px, 旋转角度deg) || rotateX(度数deg) || rotateY(度数deg)|| rotateZ(度数deg);
五、移动端常用:
1.去掉移动端网页默认效果:
html标签名 { //定义CSS样式
box-sizing: border-box;
-webkit-box-sizing: border-box;
-webkit-tap-highlight-color: transparent; //清除手机端网页点击高亮效果
-webkit-appearance: none; //允许iOS端网页自定义按钮与输入框样式
img, a{ -webkit-touch-callout: none; } //禁用手机端网页长按弹出系统菜单
}
2.流式布局(百分比布局):
html标签 { //定义CSS样式
width: 百分比%
height: 百分比%;
max-width: 最大宽度px;
max-height: 最大高度px;
min-width: 最小宽度px;
min-height: 最小高度px;
}
Web前端:CSS及CSS3摘要
最新推荐文章于 2022-12-05 17:32:09 发布