练习格式:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- 规范,<sytle>可以编写css的代码,每一个声明最好以“;”结尾 语法: 选择器{ 声明1; 声明2; 声明3; } --> <style> h1{ color: red; } </style> </head> <body> <h1>CSS测试</h1> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--内部样式--> <style> h1{ color: green; } </style> <!--外部样式--> <link rel="stylesheet" href="css/style.css" /> </head> <body> <!--优先级:就近原则--> <!--行内样式:在标签元素中,编写一个style属性,编写样式即可--> <h1 style="color: red">这是标签</h1> </body> </html>
拓展:外部样式两种方法
<!--外部样式--> <link rel="stylesheet" href="css/style.css" />
<!--导入式--> <style> @import url("css/style.css"); </style>
作用:选择页面上的某一个后者某一类元素
选择一类标签 标签{}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> h1{ color: orange; background: blue; border-radius: 10px; } </style> </head> <body> <h1>标签选择器</h1> </body> </html>
选择所有class一致的标签,跨标签,格式:.类名{}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*类选择器的格式 .class的名称{} 好处:可以多个标签归类,是同一个class,可以复用 */ .demo1{ color: blue; } .demo2{ color: red; } .demo3{ color: aqua; } </style> </head> <body> <h1 class="demo1">类选择器:demo1</h1> <h1 class="demo2">类选择器:demo2</h1> <h1 class="demo3">类选择器:demo3</h1> </body> </html>
全局唯一,格式:#id名{}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*id选择器:id必须保证全局唯一 #id名称{} 不遵循就近原则,优先级是固定的 id选择器 > 类选择器 > 标签选择器 */ #demo1{ color: aqua; } .demo2{ color: red; } #demo2{ color: orange; } h1{ color: blue; } </style> </head> <body> <h1 id="demo1">id选择器:demo1</h1> <h1 class="demo2" id ="demo2">id选择器:demo2</h1> <h1 class="demo2">id选择器:demo3</h1> <h1>id选择器:demo4</h1> <h1>id选择器:demo5</h1> </body> </html>
优先级:id > class > 标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*后代选择器*/ body p{ background: deeppink; } /*子选择器*/ body>p{ background: olive; } /*相邻兄弟选择器:只选择一个,相邻向下*/ .active+p{ background: blueviolet; } /*通用兄弟选择器,当前选中元素的向下的所有兄弟元素*/ .active2~p{ background: dodgerblue; } </style> </head> <body> <p>后代选择器p1</p> <p class="active">子选择器p2</p> <p>相邻兄弟选择器p3</p> <p class="active">通用兄弟选择器p4</p> <p>通用兄弟选择器p5</p> </body> </html>
在某个元素的后面
/*后代选择器*/ <style> body p{ background:red; } </style>
一代
/*子选择器*/ <style> body>p{ background:orange; } </style>
同辈 只选择一个,相邻向下
/*相邻兄弟选择器:只有一个,相邻(向下)*/ <style> .active+p{ background: red } </style> <body> <p class="active">p1<p> <p>p2</p> </body>
当前选中元素的向下的所有兄弟元素
<style> /*通用兄弟选择器,当前选中元素的向下的所有兄弟元素*/ .active~p{ background:red; } </style> <body> <p class="active">p1<p> <p>p2</p> </body>
伪类
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>伪类选择器</title> <style> ul li:first-child{ /*ul的第一个子元素*/ background: mediumaquamarine; } ul li:last-child{ /*ul的最后一个子元素*/ background: lightpink; } /* 选中p1:定位到父元素,选择当前的第一个元素 选择当前P元素的父级元素,选中父级元素的第一个,并且是当前元素才生效! */ p:nth-child(1){ background: greenyellow; } p:nth-of-type(2){ /*选中父元素下的第二个p元素*/ background: lightseagreen; } a:hover{ color: red; } </style> </head> <body> <a href="">鼠标移过来我变红色</a> <p>p1</p> <p>p2</p> <p>p3</p> <ul> <li>li01</li> <li>li02</li> <li>li03</li> </ul> </body> </html>
id+class结合
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>属性选择器</title> <style> .demo a{ float: left; display: block; height: 50px; width: 50px; border-radius: 10px; background: aquamarine; text-align: center; color: #ffffff; text-decoration: none; margin-right: 5px; line-height:50px; font: bold 20px/50px Arial; } /* 属性名,属性名 = 属性值(正则) = 表示绝对等于 *= 表示包含 ^= 表示以...开头 $= 表示以...结尾 存在id属性的元素 a[]{} */ a[id]{ background: deeppink; } a[id=first]{ /*id=first的元素*/ background: greenyellow; } a[class*="links"]{ /*class 中有links的元素*/ background: #1643b1; } a[href^=http]{ /*选中href中以http开头的元素*/ background: aquamarine; } a[href$=pdf]{ /*选中href中以http开头的元素*/ background: aquamarine; } </style> </head> <body> <p class="demo"> <a href="https://www.baidu.com/" class="links item first" id="first">百度</a> <a href="" class="links item active" target="_blank " title="test">链接</a> <a href="img/hello.html" class="links item">网页</a> <a href="img/str1.png" class="links item">png</a> <a href="img/str2.jpg" class="links item">jpg</a> <a href="abc" class="links item">链2</a> <a href="/fy.pdf" class="links item">pdf</a> <a href="/quit.pdf" class="links item">pdf2</a> <a href="dump.doc" class="links item">doc</a> <a href="kiko.doc" class="links item last">doc2</a> </p> </body> </html>
span标签:重点要突出的字,使用span标签套起来
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #title1{ font-size: 50px; } </style> </head> <body> 学习<span id="title1">CSS</span> </body> </html>
font-family:字体
font-size:字体大小
font-weight:字体粗细
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body{ font-family: 楷体; color: red; } h3{ font-size: 50px; } .p1{ font-weight: bold; } </style> </head> <body> <h3>学习CSS</h3> <p class="p1">P</p> </body> </html>
常用写法
/* 也可以填px,但不能超过900,相当于bloder */ font-weight:bolder; /*常用写法:*/ font:oblique bloder 12px "楷体"
颜色–>color
文本对齐方式–>text-align:center
首行缩进–>text-indent:2em
行高–>line-height:300px;
下划线–>text-decoration
text-decoration:underline/*下划线*/ text-decoration:line-through/*中划线*/ text-decoration:overline/*上划线*/ text-decoration:none/*超链接去下划线*/
img,span{vetical-align:middle}
<style> a{/*超链接有默认的颜色*/ text-decoration:none; color:#000000; } a:hover{/*鼠标悬浮的状态*/ color:orange; } a:active{/*鼠标按住未释放的状态*/ color:green } a:visited{/*点击之后的状态*/ color:red } </style>
/* 第一个参数:表示水平偏移 第二个参数:表示垂直偏移 第三个参数:表示模糊半径 第四个参数:表示颜色 */ text-shadow:5px 5px 5px 颜色
/*list-style{ none:去掉原点 circle:空心圆 decimal:数字 square:正方形 }*/ ul li{ height:30px; list-style:none; text-indent:1em; } a{ text-decoration:none; font-size:14px; color:#000; } a:hover{ color:orange; text-decoration:underline } /*放在div中,作为导航栏*/ <div id="nav"></div> #nav{ width:300px; }
背景颜色:background
背景图片
background-image:url("");/*默认是全部平铺的*/ background-repeat:repeat-x/*水平平铺*/ background-repeat:repeat-y/*垂直平铺*/ background-repeat:no-repeat/*不平铺*/
background:red url("图片相对路径") 270px 10px no-repeat background-position:/*定位:背景位置*/
body{ background-color: #0cd7f3; background-image: linear-gradient(43deg, #0093E9 0%, #80D0C7 46%, #23F549 100%); }