苏州网站开发费用详情,凡人网站建设,微信官网电脑版下载,成都网站建设公司创新互联使用CSS3美化的原因 用css美化页面文本,使页面漂亮、美观、吸引用户 可以更好的突出页面的主题内容,使用户第一眼可以看到页面主要内容 具有良好的用户体验 span标签 作用 能让某几个文字或者某个词语凸显出来 有效的传递页面信息用css美化页面文本#xff0c;使页面漂… 使用CSS3美化的原因 用css美化页面文本,使页面漂亮、美观、吸引用户 可以更好的突出页面的主题内容,使用户第一眼可以看到页面主要内容 具有良好的用户体验 span标签 作用 能让某几个文字或者某个词语凸显出来 有效的传递页面信息用css美化页面文本使页面漂亮、美观、吸引用户可以更好的突出页面的主题内容使用户第一眼可以看到页面主要内容具有良好的用户体验 字体样式 font声明属性 字体属性的顺序字体风格-字体粗细-字体大小-字体类型font-family设置字体类型宋体 楷体font-size设置字体大小 px;em;mm;cm;pc;ptfont-style设置字体风格 italic斜体 oblique斜体 normal正常 font-weight设置字体粗细 bold粗体 bolder更粗 lighter更细 normal默认 style.aa{color: #640000;font-weight: bolder}p{color: coral;line-height: 50px}#ss{text-align: center}/stylepspan classaa如何犁地、播种和收获/span 运行结果如下 文本属性 color设置文本颜色RGBtext-align水平线对齐 left左边 right右边 center中间 justify俩端对齐 text-indent设置行的缩进 line-height设置文本的行高text-decoration设置文本的装饰none默认值 underline下划线 overline上划线line-through设置文本删除线vertical-align垂直方式middle中间 ,top(顶部) ,bottom(底部)text-indent设置行的缩进 color属性 RGB 十六进制方法表示颜色前两位表示红色分量中间两位表示绿色分量最后的两位表示蓝色的分量rgb(r, g, b)正整数的取值为0~255 color:#A983D8;
color:#EEFF66;
color:rgb(0, 255, 255);
color:rgba(0, 0, 255, 0.5);运行结果如下 文本阴影
text-shadow:color Xpx Ypx 半径px text-shadow:color Xpx Ypx 半径px#jcyykt{font-family: 楷体;font-weight: bold;text-shadow: #999999 5px 5px 5px;text-align: center;font-size: 20px;
} 运行结果如下 文本装饰
text-decoration属性 none默认值 underline设置文本下划线 overline设置文本上划线 line-through设置文本删除线 underline设置文本下划线 .aa{color: #640000;text-decoration: underline;font-weight: bolder}pspan classaa如何犁地、播种和收获/span 运行结果如下 overline设置文本上划线 .aa{color: #640000;text-decoration: overline;font-weight: bolder}pspan classaa如何犁地、播种和收获/span 运行结果如下 line-through设置文本删除线 .aa{color: #640000;text-decoration: line-through;font-weight: bolder} 运行结果如下 CSS设置超链接 a:link——未单击访问超链接样式a:visited——单击访问后超链接样式a:hover——鼠标悬浮其上超链接样式a:active——鼠标单击未释放超链接样式设置伪类的顺序a:link-a:visited-a:hover-a:active a:hover——鼠标悬浮其上超链接样式 .aa:hover{color: #e91a5b;}鼠标悬浮其上效果 a:visited——单击访问后超链接样式 .aa:visited{color: #d45353;}pspan classaaa hrefbook_no01.gif如何犁地、播种和收获/a/span
单机访问后的效果 一个变色的超链接 style.ys:link{color: red}.ys:visited{color: black}.ys:hover{color: chartreuse}.ys:active{color: blue}
/stylea hrefhttps://home.firefoxchina.cn/?fromextra_start target_blank classys这是一个变色的超链接/a
运行如下 列表样式 list-style-type:none无标记符号text-decoration:none超链接list-style-type:disc实心圆默认list-style-type:circle空心圆list-style-type:square实心正方圆list-style-type:decimal数字 list-style-type:disc------实心圆默认 li{list-style-type:disc}ulli你好/lili你好/lili你好/lili你好/li/ul 如下图 list-style-type:circle--------空心圆 li{list-style-type:circle}ulli你好/lili你好/lili你好/lili你好/li/ul 如下图 list-style-type:square---------实心正方圆 li{list-style-type:square}ulli你好/lili你好/lili你好/lili你好/li/ul 如下图 list-style-type:decimal-------数字 li{list-style-type:decimal}ulli你好/lili你好/lili你好/lili你好/li/ul 如下图 可以去除列表前面默认的实心圆点 li{list-style:none;
}
#可以去除列表前面默认的实心圆点背景颜色
background-color(颜色) .bj{background-color: darkgreen;td畅销书排行img srcbang.gif classtb 如下图 背景图像 background-image图片路径 background: url(https://p0.itc.cn/q_70/images03/20201009/57c01ef4b6e24a958336bdd0d950fb22.gif); 代码示例 .listLeft{font-size:18px;color:black;text-indent:1em;line-height:35px;background:#red url(图片位置 20px 20px no-reapeat)
}#说明
#red:背景颜色
url():背景图片
20px 20px:背景定位
no-repeat:不重复显示背景重复方式 background-reqeat属性 ——reqeat沿水平和垂直俩个方向平铺 ——no-reqeat不平铺只显示一次 ——reqeat-x只沿水平方向平铺 ——reqeat-y只沿垂直方向平铺 背景定位 Xpos表示水平线位置 单位px Ypos表示垂直位置 单位px X% - Y%使用百分比表示背景位置 X - Y方向关键词 X水平线 left左边 right右边 center中间 Y垂直middle(顶部) ,center(中部) ,bottom(底部) 背景颜色-背景图像-背景定位-背景不重复显示 背景尺寸 background-size 属性值描述auto 默认值,使用背景图片保持原样 percentage 当使用百分值时,不是相对于背景的尺寸大小来计算的 而是相对于元素宽度来计算的 cover 整个背景图片放大填充了整个元素 contain 让背景图片保持本身的宽高比例,将背景图片缩放到 宽度或者高度正好适应所定义背景 css3渐变
linear-gradient(podition-渐变方向color1color2.....) 线性渐变 颜色沿一条直线过渡从左到右、从右到左、从上到下等 径向渐变 圆形或椭圆形渐变颜色不再沿着一条直线变化而是从一个起点朝所有方向混合 font-weight: bolder;background: linear-gradient(powderblue, cyan)}如下图
