首页 > 代码库 > 前端css学习_Day15
前端css学习_Day15
CSS基本概念
css语法结构
每个css由两部分组成：选择器和声明,声明又包括属性和属性值(json格式key:value)
选择器
有如下几种：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>css爱之初体验</title> 6 <style type="text/css"> 7 #show2{color:gold;font-size: 40px} 8 .s1{color: red;font-size: 15px} 9 span{color: #0000cc;font-size: 20px} 10 .s2 span{ 11 color: #05B2D2;font-size: 40px; 12 } 13 p,h1,a{color: #0000cc;font-size: 5px} 14 #show1{color:gold;} 15 .show {color:pink;} 16 h1 {color:red;} 17 * {color:green;} <!--通用选择器--> 18 </style> 19 </head> 20 <body> 21 <!--行内样式--> 22 <div style="color: red;font-size: 35px">css第一部分</div> 23 <!--标签选择器--> 24 <span>css爱之初体验1</span> 25 <!--id选择器--> 26 <div id="show2">css爱之初体验2</div> 27 <!--类选择器--> 28 <div class="s1">css爱之初体验3</div> 29 <!--包含选择器--> 30 <div class="s2"> 31 <span>css爱之初体验4</span> 32 <a>css爱之初体验5</a> 33 </div> 34 <!--分组选择器--> 35 <p>css爱之初体验6</p> 36 <h1>css爱之初体验7</h1> 37 <a>css爱之初体验8</a> 38 <div>css爱之初体验9</div> 39 <!--行内样式>id选择器>类选择器>标签选择器>通用选择器--> 40 <h1 id="show1" class="show" style="color:gray;">这是选择器优先级测试</h1> 41 </body> 42 </html>
样式表
内部样式和行内样式，上文已写。
外部样式:
使用内容样式容易和html代码混淆，我们单独把样式内容单独写入一个文件，叫外部样式，使用link标签引入。如下：
<head> <meta charset="UTF-8"> <title>css爱之初体验</title> <link href="a.css" type="text/css" rel="stylesheet"> </head>
前端css学习_Day15
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。