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>
<!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>
<!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>