Java-CSS美化网页元素
<p>
今天是11月份的<span>第一天</span>，地铁卡不打折了
</p>
font-family：字体类型
font-size:字体大小
font-style：字体风格
font-weight:字体粗细
font: 风格 粗细 大小 类型;
三.文本样式
text-align 设置元素水平对齐方式
text-indent 设置首行文本的缩进
line-height 设置文本的行高
text-decoration 设置文本的装饰
vertical-align 设置文本垂直方式
text-shadow 设置文字阴影 text-shadow: 颜色 x轴偏移位置 y轴偏移位置 模糊半径
四.超链接伪类
单击访问前
.class01:link{
color: green;
text-decoration: none;
}
单击访问后
.class02:visited{
color: pink;
text-decoration: none;
}
鼠标悬浮
.class03:hover{
color: aqua;
text-decoration: none;
}
单击未释放
.class04:active{
color: red;
text-decoration: none;
}
五.列表样式
list-style-type 列表项前图标
list-style-image 列表项前图片
list-style-image:url(../image/QQ图片20181101095555.png);
background-color 设置背景颜色
background-image 设置背景图像
background-repeat 设置图像是否平铺
background-position 设置背景图像位置
background: 背景颜色 背景图像 x轴偏移位置 y轴偏移位置 平铺;
七.渐变
IE浏览器是Trident内核，加前缀：-ms-
Chrome浏览器是Webkit内核，加前缀：-webkit-
Safari浏览器是Webkit内核，加前缀：-webkit-
Opera浏览器是Blink内核，加前缀：-o-
Firefox浏览器是Mozilla内核，加前缀：-moz-
background: -webkit-gradient(linear,left bottom,right top,from(red),to(blue));
background: linear-gradient(to bottom left,red,black);
1.本章目标
会使用CSS设置字体样式和文本样式
会使用CSS设置超链接样式
会使用CSS设置列表样式
会使用CSS设置背景样式
会使用CSS设置渐变效果
2.<span>标签
<span>标签 的作用
能让某几个文字或者某个词语凸显出来
示例：
<p>享受<span class="show">“北大式”</span>教育服务</p>
<p>在北大青鸟，有一群人默默支持你成就
<span id="dream">IT梦想</span></p>
<p class="bird">选择<span>北大青鸟</span>，成就你的梦想</p>
3.字体样式
4.字体类型
font-family属性
p{font-family:Verdana,"楷体";}
body{font-family: Times,"Times New Roman", "楷体";}
5.字体大小
font-size属性
单位： px（像素）、em、rem、cm、mm、pt、pc
6.字体风格
font-style属性
normal、italic(库里自带的)和oblique(自动将字体变斜体)
示例：
7.字体的粗细
font-weight属性
8.字体属性
font属性 family weight size style
字体属性的顺序：字体风格→字体粗细→字体大小→字体类型
p span {font:oblique bold 12px "楷体";}
9.文本样式
文本属性
10.文本颜色
color属性
RGB
十六进制方法表示颜色：前两位表示红色分量，中间两位表示绿色分量，最后 两位表示蓝色分量
rgb(r,g,b) : 正整数的取值为0～255
RGBA
在RGB基础上增加了控制alpha透明度的参数，其中这个透明通道值为0～1
示例：
color:#A983D8;
color:#EEFF66;
color:rgb(0,255,255);--------------最深的颜色
color:rgba(0,0,255,0.5);-----------透明度
11.排版文本段落
12.文本修饰和垂直对齐
文本装饰
text-decoration属性
垂直对齐方式
vertical-align属性：middle、top、bottom
13.文本阴影
浏览器兼容性
14.超链接伪类
15.使用CSS设置超链接
16.列表样式2-1
list-style-type
list-style-image
17.列表样式2-2
list-style:
li {
list-style:none;
}
网页背景R红--G绿--B蓝
背景颜色
background-color
背景图像
background-image
19.设置背景图像2-1
背景图像
background-image属性
background-image:url(图片路径);
背景重复方式
background-repeat属性
repeat：沿水平和垂直两个方向平铺
no-repeat：不平铺，即只显示一次
repeat-x：只沿水平方向平铺
repeat-y：只沿垂直方向平铺
20.设置背景图像2-2
背景定位
background-position属性
21.设置背景
背景属性
background属性
23.背景尺寸
背景尺寸 background-size
24.CSS3渐变
线性渐变
颜色沿着一条直线过渡：从左到右、从右到左、从上到下等
径向渐变
圆形或椭圆形渐变，颜色不再沿着一条直线变化，而是从一个起点朝所有方向 混合
浏览器兼容性
25.CSS3渐变兼容
IE浏览器是Trident内核，加前缀：-ms-
Chrome浏览器是Webkit内核，加前缀：-webkit-
Safari浏览器是Webkit内核，加前缀：-webkit-
Opera浏览器是Blink内核，加前缀：-o-
Firefox浏览器是Mozilla内核，加前缀：-moz-
26.线性渐变
左上向右下方向渐变：linear-gradient( left top ,red, blue)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
#grad1 {
height: 200px;
background: -webkit-linear-gradient(red,yellow,blue); /* Safari 5.1 to 6.0 */
background: -o-linear-gradient(red,yellow,blue); /* Opera 11.1 to 12.0 */
background: -moz-linear-gradient(red,yellow,blue); /* Firefox 3.6 to 15 */
background: linear-gradient(red,yellow,blue); /* 标准语法 (必须在最后) */
}
</style>
</head>
<body>
<h3>线性渐变 - 头部到底部</h3>
<p>从头部开始的线性渐变，从红色开始，转为黄色，再到蓝色:</p>
<div id="grad1"></div>
<p><strong>注意：</strong> Internet Explorer 9 及更早版本 IE 浏览器不支持渐变。</p>
</body>
</html>
总结
————————————————版权声明：本文为CSDN博主「运维方便面」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。原文链接：https://blog.csdn.net/kxindouhao5491/article/details/82011688
