//行内样式 <h1 style="color:red">我是标题</h1> //内部样式 <style> h1:{ color:green; } </style>
//外部样式
优先级：就近原则
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*标签选择器，会选择页面上所有这个标签的元素*/ h1{ color:#aa1133; background: greenyellow; border-radius: 24px; } p{ font-size: 70px; } </style> </head> <body> <h1>学Java</h1> <h1>学Java</h1> <p>喵喵喵</p> </body> </html>
类选择器（不能数字开头）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*类选择器 好处，可以多个标签归类，是同一个class，可以复用*/ .kk{ color: green; } .mm{ color: #aa1133; } </style> </head> <body> <h1 class="kk">标题1</h1> <h1 class="mm">标题2</h1> <h1 class="mm">标题3</h1> </body> </html>
id选择器（不能数字开头）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*id选择器 id必须保证全局唯一 不遵循就近原则， id选择器>class选择器>大于标签选择器*/ #mm{ color: red; } .kk{ color: #483780; } h1{ color: #000; } </style> </head> <body> <h1 id="mm">标题1</h1> <h1 class="kk">标题2</h1> <h1 class="kk">标题3</h1> <h1>标题4</h1> </body> </html>
/*后代选择器*/ body p{ background: red; } /*子选择器*/ body>p{ background: red; } /*相邻兄弟选择器,只有一个,相邻（向下）*/ <p class=“active”>kk</p> .active+p{ background: red; } /*通用兄弟选择器，当前选中元素的向下的所有兄弟元素*/、 .active~p{ background: red; }
/*ul的第一个子元素*/ ul li:first-child{ background: #aa1133; } /*ul的最后一个子元素*/ ul li:last-child{ background: #483780; }
/*选中p1:定位到父元素，选中当前的第一个元素*/ p:nth-child(1){ background: green; } /*选中父元素下的P元素的第二个*/ p:nth-of-type(2){ background: #483780; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .demo a{ float: left; display: block; height: 50px; width: 50px; border-radius: 10px; background: navy; text-align: center; color: grey; text-decoration: none; margin-right: 5px; font:bold 20px/50px Arial; } /* 属性名 正则表达式 =绝对等于 *=包含这个元素 ^=以这个开头 $=以这个结尾*/ /*存在id属性的元素*/ a[id]{ background: yellow; } a[id=first]{ background: greenyellow; } /*class中有links的元素*/ a[class*="links"]{ background: yellow; } /*选中href中以http开头的元素*/ a[href^=http]{ background: #aa1133; } </style> </head> <body> <p class="demo"> <a href="http://www.baidu.com" class="links item first" id="first">1</a> <a href="" class="links item active" target="_blank" title="test">2</a> <a href="images/123.html" class="links item ">3</a> <a href="images/123.png" class="links item">4</a> <a href="images/123.jpg" class="links item">5</a> <a href="abc">6</a> </p> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #title1{ font-size: 50px; } </style> </head> <body> 欢迎学习<span id="title1">java</span> </body> </html>
字体样式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body{ font-family: "Arial Black",楷体; color: aqua; } h1{ font-size: 50px; } .p1{ font-weight: bold; } </style> </head> <body> <h1>故事介绍</h1> <p class="p1">从前有座山</p> <p>山里有座庙</p> <p>hi boy</p> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- RGBA透明度 text-indent: 1em; 段落首行缩进 行高和块的高度一致，就可以上下居中--> <style> h1{ color: rgba(0,255,255,0.5); text-align: center; } .p1{ text-indent: 1em; } .p3{ background: #483780; height: 300px; line-height: 300px; } /* 下划线*/ .l1{ text-decoration: underline; } /* 中划线*/ .l2{ text-decoration: line-through; } /* 上划线*/ .l3{ text-decoration: overline; } /*超链接去下划线*/ a{ text-decoration: none; } </style> </head> <body> <p class="l1"></p> <p class="l2"></p> <p class="l3"></p> <h1>故事介绍</h1> <p class="p1">从前有座山</p> <p>山里有座庙</p> <p class="p3">hi boy</p> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*默认的颜色*/ a{ text-decoration: none; color: #000; } /*鼠标悬浮的颜色*/ a:hover{ color:orange; } /*鼠标摁住未放松*/ a:active{ color:greenyellow; } /*阴影颜色、水平偏移、垂直偏移*/ #price{ text-shadow: #3cc7f5 10px 10px 10px; } </style> </head> <body> <a href=""> <img src="images/test2.jpg" alt=""> </a> <p> <a href="#">偶然发现的一天</a> </p> <p> <a href="">喵喵喵</a> </p> <p id="price"> ￥99 </p> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>列表样式</title> <link rel="stylesheet" href="css/style.css" type="text/css"> </head> <body> <div id="nav" > <h2 class="title">全部商品分类</h2> <ul> <li><a href="#">图书</a> <a href="#">音像</a> <a href="#">数字商品</a></li> <li><a href="#">家用电器</a> <a href="#">手机</a> <a href="#">数码</a></li> <li><a href="#">电脑</a> <a href="#">办公</a></li> <li><a href="#">家居</a> <a href="#">家装</a> <a href="#">厨具</a></li> <li><a href="#">服饰鞋帽</a> <a href="#">个护化妆</a></li> <li><a href="#">礼品箱包</a> <a href="#">钟表</a> <a href="#">珠宝</a></li> <li><a href="#">食品饮料</a> <a href="#">保健食品</a></li> <li><a href="#">彩票</a> <a href="#">旅行</a> <a href="#">充值</a></li> </ul> </div> </body> </html>
#nav{ width: 300px; background: #a0a0a0; } .title{ font-size: 18px; font-weight: bold; text-indent: 1em; line-height: 35px; background: red; } /*list-style: none;去掉圆点 circl 空心圆 decima 数字 square正方形*/ ul{ background: grey; } ul li{ height: 30px; list-style: none; text-indent: 1em; } a{ text-decoration: none; font-size: 14px; color: black; } a:hover{ color: orange; text-decoration: underline; }
background: yellowgreen url("../images/向下.png")200px 10px no-repeat;
background-image: url("../images/向右.png");
background-repeat: no-repeat;
background-position: 150px 2px;
//https://www.grabient.com/
background-color: #4158D0;
background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
div{ width: 100px; height: 100px; border: 10px solid red; border-radius: 100px; } div{ width: 100px; height: 100px; border:10px solid darkred; border-radius: 50px 0px 0px 0px; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- block 块元素 inline 行内元素 inline-block 是块元素，但是可以内联，在一行--> <style> div{ width: 100px; height: 100px; border: 1px solid red; display: none; } span{ width: 100px; height: 100px; border: 1px solid red; display: inline-block; } </style> </head> <body> <div>div块元素</div> <span>span行内元素</span> </body> </html>
