[Java web编程]第2章 HTML与css网页开发基础(css3美化网页元素)
css属性(也还是不止这几种,甚至每一种属性有十几二十个,常用的这些我列出来,遇到不常用的或者没用过的,就查文档)
会使用CSS设置字体样式
font-family
font-size
font-style normal italic oblique
font-weight normal(400) bold(700) bolder lighter
font字体属性的顺序:字体风格→字体粗细→字体大小→字体类型(顺序固定)
和文本样式
color
text-align left right center justify(实现两端对齐文效果)
text-indent 首行缩进 2em
line-height
text-decoration none underline(下划线) overline(上划线) line-through(删除线)
vertical-align 垂直对齐方式,通常用于文本和图片的居中对齐,middle,top,bottom(不常使用该属性)
文本阴影 text-shadow:color x轴 y轴 模糊半径 如:text-shadow:red 10px 10px 20px;
会使用CSS设置超链接样式
a:link |
未点击前的 |
a:visited |
点击之后的 |
a:hover |
鼠标悬浮时 |
a:active |
点击未释放时 |
会使用CSS设置列表样式
list-style-type 设置列表项标记的类型none, disc(实心圆), circle(空心圆), square(实心正方形), decimal(数字)
·disc:圆形
·circle:空心圆
·square:方块
·decimal:十进制数字
·lower-roman:小写罗马数字
·upper-roman:大写罗马数字
·lower-alpha:小写希腊字母
·upper-alpha:大写希腊字母
·none:无符号显示
list-style-image 使用图像代替列表项的标记(不常用)list-style-image:url('sqpurple.gif');
list-style-position 在何处放置列表项的标记(不常用)
list-style
如:
LI.square { list-style: square inside; }
UL.plain { list-style: none; }
UL.check { list-style: url(/LI-markers/checkmark.gif) circle; }
OL { list-style: upper-alpha; }
OL OL { list-style: lower-roman inside; }
会使用CSS设置背景样式
1. background-color 背景颜色
特殊值:transparent 透明
2. background-image 背景图像
背景图像
background-image:url(图片路径);
背景重复方式
background-repeat属性
repeat:沿水平和垂直两个方向平铺
no-repeat:不平铺,即只显示一次
repeat-x:只沿水平方向平铺
repeat-y:只沿垂直方向平铺
背景定位
background-position 单位(px)
background:#C00 url(../image/arrow-down.gif) 205px 10px no-repeat;
背景图片的尺寸控制:背景尺寸 background-size
属性值 |
描述 |
auto |
默认值,使用背景图片保持原样 |
percentage |
使用%值 |
cover |
整个背景图片放大填充了整个div元素,但是div只是显示放大后图片的一角,一般配合background-position:center 来使用做满屏背景效果 |
contain |
保持图片本身宽高比例的基础上进行缩放 |
只有auto情况下,image才不会失真!
会使用CSS设置渐变效果
线性渐变(主要学习线性)
颜色沿着一条直线过渡:从左到右、从右到左、从上到下等
径向渐变(不广泛)
圆形或椭圆形渐变,颜色不再沿着一条直线变化,而是从一个起点朝所有方向混合
渐变浏览器兼容
IE浏览器是Trident内核,加前缀:-ms-
Chrome浏览器是Webkit内核,加前缀:-webkit-
Safari浏览器是Webkit内核,加前缀:-webkit-
Opera浏览器是Blink内核,加前缀:-o-
Firefox浏览器是Mozilla内核,加前缀:-moz-
如:
background:linear-gradient ( position, color1, color2,…);
background:-webkit-linear-gradient ( position, color1, color2,…);
background:-o-linear-gradient ( position, color1, color2,…);
background:-moz-linear-gradient ( position, color1, color2,…);
鼠标形状cursor
作用:CSS提供了多达13种的鼠标形状,供我们选择。 说明:
·hand 手形
·crosshair 十字形
·text 文本形
·wait 沙漏形
·move 十字箭头形
·help 问号形
·e-resize 右箭头形
·n-resize 上箭头形
·nw-resize 左上箭头形
·w-resize 左箭头形
·s-resize 下箭头形
·se-resize 右下箭头形
·sw-resize 左下箭头形
控制空白:white-space
作用:控制元素內的空白。 意思就是控制<p>段落内容变换
说明:
·normal 不改变,保持缺省值,在浏览器页面长度处换行。
·pre 要求文档显示中采用源代码中的格式。
·nowarp 不让访问者在元素內换行。