<span>标签:能让某几个文字或者某个词语凸显出来
<p>享受<span class="show">“北大式”</span>教育服务</p>
<p>在北大青鸟,有一群人默默支持你成就
<span id="dream">IT梦想</span></p>
<p class="bird">选择<span>北大青鸟</span>,成就你的梦想</p>
字体样式
font-family属性:设置字体类型:p{font-family:Verdana,"楷体";} body{font-family: Times,"Times New Roman", "楷体";} font-size属性:字体大小:单位:px(像素)em、rem、cm、mm、pt、pc h1{font-size:24px;} h2{font-size:16px;} h3{font-size:2em;} span{font-size:12pt;} strong{font-size:13pc;} font-style属性:字体风格:normal、italic和oblique font-weight属性:字体的粗细:normal bold bolder lighter font属性:p span{font:oblique bold 12px "楷体";} 字体属性的顺序:字体风格→字体粗细→字体大小→字体类型
文本样式
color属性:color:#A983D8;
color:#EEFF66;
水平对齐方式:text-align属性:首行缩进
left 把文本排列到左边。默认值:由浏览器决定
right 把文本排列到右边
center 把文本排列到中间
justify 实现两端对齐文本效果
文本装饰:text-decoration属性
垂直对齐方式:vertical-align属性:middle、top、bottom
none 默认值,定义的标准文本
underline 设置文本的下划线
overline 设置文本的上划线
line-through 设置文本的删除线
文本阴影:ext-shadow : color x-offset y-offset blur-radius;
超链接伪类
伪类样式 标签名:伪类名{声明;} a:hover { color:#B46210; text-decoration:underline; } a:hover 鼠标悬浮其上的超链接样式
列表样式
none 无标记符号 list-style-type:none; disc 实心圆 list-style-type:disc; circle 空心圆 list-style-type:circle; square实心正方形 list-style-type:square; decimal数字 list-style-type:decimal list-style: li { list-style:none; } 去除列表前面的小黑点
网页背景
背景颜色:background-color
背景图像:background-image:background-image:url(图片路径);
背景重复方式
background-repeat属性
repeat:沿水平和垂直两个方向平铺
no-repeat:不平铺,即只显示一次
repeat-x:只沿水平方向平铺
repeat-y:只沿垂直方向平铺
background属性:background:#C00 url(../image/arrow-down.gif) 205px 10px no-repeat;
/* 背景颜色 背景图片 背景定位 背景平铺方式*/
背景尺寸 background-size
线性渐变
颜色沿着一条直线过渡:从左到右、从右到左、从上到下等
径向渐变
圆形或椭圆形渐变,颜色不再沿着一条直线变化,而是从一个起点朝所有方向混合
语法:background:linear-gradient ( position, color1, color2,…)