css美化页面
如果在我们一行文字中，想让某个文字凸显出来，使用span！
1.字体样式
font-style:字体的风格 italic normal
font-weight:字体的粗细 normal(默认400) bold(700) bolder 最大到900
font-size:字体的大小 10px 2em rem pc pt
font-family:字体的类型，比如我们的楷体，隶书,宋体。。。。。
font：风格 粗细 大小 类型
在一起设置属性的时候，四种属性顺序不能颠倒！
2.文本样式
color:文本颜色 red 16进制颜色码 rgb rgba
rgb(red,green,blue)正数取值 0-255
rgba(red,green,blue,alpha)
alpha的取值必须是0-1 0不显示 1正常显示
text-align:文本元素的水平对齐方式
center left right justify(两端对齐)
line-height:文本的行高!
如果想设置文本的垂直居中line-height的值必须等于height的值
text-indent:设置首行缩进
p{
text-indent:2em; 设置p首行缩进2个字符
}
text-decoration:文本的装饰
none:默认值
underline:下划线
overline:上划线
line-through:删除线
text-shadow:文本阴影
3.display 可以实现 块元素和行内元素的互换！
inline inline-block block
4.超链接伪类
结构伪类选择器：
div:nth-of-type() :nth-child
css伪类是一个特殊的类！ 它针对于我们设置的css选择器起作用！
css伪类的语法：
选择器:伪类名｛
属性:属性值;
｝
:link ==> 还没有点击超链接的样式
:visited ==> 点击之后超链接的样式
:hover ==> 鼠标悬停在超链接的样式
:active ==> 鼠标点击未释放超链接的样式
love hate
如果同时给一个选择器设置超链接伪类样式，那么顺序是必须不变的！
5.列表样式
list-style-type 列表符号样式
none 无符号
disc 实心圆
circle 空心圆
decimal 数字 .....
list-style-image 列表图片 url
list-style-position 列表符号是否被li包含，默认是ul包含
list-style 列表样式
如果同时设置了type和image 那么image会覆盖type！和书写先后顺序没关系！
6.背景样式
background-color:背景色
background-image:背景图片
background-position:背景位置
background-repeat:背景重复方式
repeat:默认方式 水平和垂直都平铺
no-repeat:不平铺，只有一个图片
repeat-x:水平平铺
repeat-y:垂直平铺
background: 背景色 背景图片 背景位置 平铺方式
虽然没有固定顺序，但是我们有个默认的写法！
如果我们相对背景图片的大小进行设置！那么请使用background-size
background-size:contain;
background-size：背景图片的尺寸
auto:默认值，使用图片的大小
cover:让整个图片正好填充整个盒子
contain：让图片自动的方法或者缩小 适应盒子的大小
percentage：使用百分比 手动的校正图片在盒子中的大小
7.渐变属性
linear-gradient:(方向,color1,color2)
to top :方向
red:第1个颜色
black:第2个颜色
IE浏览器是Trident内核，加前缀：-ms-
Chrome浏览器是Webkit内核，加前缀：-webkit-
Safari浏览器是Webkit内核，加前缀：-webkit-
Opera浏览器是Blink内核，加前缀：-o-
Firefox浏览器是Mozilla内核，加前缀：-moz-
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>span标签</title>
<!--span标签
想让某些文字凸显出来
-->
<style type="text/css">
div:first-child span{
color: red;
} div:last-child span{
color: green;
}
/*同时设置body中的子元素span的风格 粗细 大小 类型*/
body>span{
font: oblique bold 50px "楷体";
color: red;
} </style> </head>
<body>
<div><span>今天</span>是个好日子！</div>
<div><span>明天</span>也是个好日子！</div>
<span>a</span>bcdefg
</body>
</html>
span标签
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>字体样式</title> <style type="text/css"> div{
/*01.设置字体的类型*/
font-family:"楷体" ;
/*02.设置字体的风格*/
font-style: italic;
/*03.设置字体的大小 可以设置数值*/
font-size:small;
/*04.设置字体的粗细 可以设置数值*/
font-weight: bold;
}
/* 简写方式==》同时设置 字体的 风格,粗细,大小 ，类型 顺序不能发生变化*/
span{
font:italic bolder 60px "楷体";
}
</style>
</head>
<body> <div><span>今天</span>是个好日子！</div>
<div><span>明天</span>也是个好日子！</div>
</body>
</html>
字体样式
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>display属性</title>
<!-- 实现 块元素和 内联元素的相互转换 --> <!-- 需求：
01.设置块元素2和3 在一行显示
02.设置块元素2和3 的边框和宽度 高度 ==>因为已经变成了内联元素 所以宽度 高度 无效
03.我们想块元素2和3 在一行显示 但是 还能设置 宽度 高度 ？？？display: inline-block;
04.把内联元素3 变成块元素 并且设置 宽度 高度
-->
<style type="text/css">
div:nth-of-type(2),div:nth-of-type(3){
/* display: inline; 内联元素*/
display: inline-block; /* 行内块元素*/
border: 1px solid red;
height: 50px;
width: 50px;
}
span:nth-child(3){
border: 1px solid red;
display:block;/*块元素*/
height: 50px;
width: 50px;
} </style> </head>
<body> <span>内联元素1</span>
<span>内联元素2</span>
<span>内联元素3</span> <div>块元素1</div>
<div>块元素2</div>
<div>块元素3</div> </body>
</html>
display属性
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>文本样式</title> <style type="text/css">
/* 01.设置文本的颜色
RGB： red green blue
rgb(red ,green,blue) 每个颜色的数值范围是0-255
rgba(50,100,50,0.2) 最后一个参数 设置透明度 alpha 取值是0-1
16进制的颜色码 #020202
前两位代表R的分量
中间两位代表G的分量
后两位代表B的分量 02.设置文本的对齐方式
text-align center right left 03.设置文本的垂直居中
我们设置的line-height的值要和 盒子的 height属性值一致！ 04.文本的装饰
text-decoration: line-through; 删除线
text-decoration: underline; 下划线
text-decoration: overline; 上划线
05.文本的阴影
text-shadow:red 2px 3px 1px ;
red:阴影的颜色
2px：x轴的位移
3px：y轴的位移
1px：阴影的模糊范围 值越小 看到的文本越清晰
*/
div{
/*color: rgb(50,100,50);只是设置文本颜色*/
color: rgba(50,100,50,0.8); /*设置颜色的同时设置透明度*/
text-align: left;/*水平居中方式*/
text-indent: 2em;/*首行缩进*/
border: 1px solid red;
height: 100px;
line-height:100px ; /*行高*/
text-decoration: underline;
text-shadow:red 2px 2px 1px ;/*文本的阴影*/
} </style> </head>
<body>
<div>现价 500</div>
<div>原价 900</div>
</body>
</html>
文本样式
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>超链接伪类</title>
<!--
a:link 我们还没有访问超链接时的样式
a:visited 访问之后超链接的样式
a:hover 鼠标悬停在超链接上的样式
a:active 鼠标点击未释放
顺序一定不能有误！
--> <style type="text/css">
a:link{
color: red;
}
a:visited{
color: greenyellow;
}
a:hover{
color: deeppink;
}
a:active{
color: yellow;
} div[id="haha2"]:hover{
color: red;
text-shadow: pink 2px 2px 1px;
} span:hover{
background: red;
} </style> </head>
<body> <span>haha</span>
<a href="#">大家辛苦了！</a> <div id="haha">哈哈</div>
<div id="haha1">哈哈1</div>
<div id="haha2">哈哈2</div>
</body>
</html>
超链接伪类
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>列表样式</title> <style type="text/css">
/*01.去掉列表前面实心圆点
list-style-type: none;
list-style-type:设置前面默认的样式 02.把默认的小圆点换成图片
list-style-image: url("../images/a.jpg"); 03.设置li和图标的关系
li是否包含前面的小图标
*/
li{
list-style-position: inside;
/* list-style-image: url("../images/a.jpg");
list-style-type: disc;*/
}
</style>
</head>
<body>
<ul>
<li>第1项</li>
<li>第2项</li>
<li>第3项</li>
<li>第4项</li>
</ul>
</body>
</html>
列表样式
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>背景样式</title> <style type="text/css"> div{
border: 1px solid red;
height: 200px;
width: 200px;
background-color: aqua; /* 01.给div增加背景颜色*/
background-image: url("../images/b.png"); /* 02.给div增加背景图片 图片会把颜色覆盖，其实颜色在图片后面*/
background-repeat: no-repeat;/*03.设置图片的填充方式*/
/* background-position: 20px 10px;04.设置图片定位 设置size时 需要 注释*/
/* background:color image position repeat ; 简写的规范*/
/*
background-size:contain;
background-size：背景图片的尺寸
auto:默认值，使用图片的大小
cover:让整个图片正好填充整个盒子
contain：让图片自动的方法或者缩小 适应盒子的大小
percentage：使用百分比 手动的校正图片在盒子中的大小 100%;
*/
} </style> </head>
<body>
<div></div> </body>
</html>
背景样式
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>渐变属性</title>
<!--
01.线性渐变
颜色按照从上到下或者从左到右 等顺序发生的变化
02.径向渐变
不是按照直线的顺序！ 圆形，椭圆！从一个点向所有的方向混合！
--> <style type="text/css">
div{
border: 1px solid red;
height: 200px;
width: 200px;
background: linear-gradient(to left top,red,green);
/* to top :方向
red:第1个颜色
black:第2个颜色
IE浏览器是Trident内核，加前缀：-ms-
Chrome浏览器是Webkit内核，加前缀：-webkit-
Safari浏览器是Webkit内核，加前缀：-webkit-
Opera浏览器是Blink内核，加前缀：-o-
Firefox浏览器是Mozilla内核，加前缀：-moz-
*/
} </style> </head>
<body> <div></div> </body>
</html>
渐变属性