CSS基础点
CSS的基础知识:
Cascading Style Sheets
目的:
样式和内容想分离,用英文关键词来指定各种样式属性的名字;
设置标签属性
维护者: 万维网联盟
主要版本: css1 css2 css2.1 css3 ---> 目前四个版本
样式规则三部分: 选择器 属性 值
应用方式:内联 外部(link) 内嵌(head)
伪元素:
在不影响实际文档的情况下对文档进行额外标记:
:before :after :first-line :first-letter ---> 块级元素才生效
伪类:
:link :visited :hover :active p:first-child
物理标签:
逻辑标签:
补充一个属性:
font-variant
部分知识点:
1 伪元素:添加到选择器的关键字,它允许一种样式,即所选元素的特定部分; 2 在不影响实际文档的情况下对文档进行额外标记: 3 为第一个字母、行或元素设置样式 插入内容 4 :first-letter 向文本的第一个字母添加特殊样式。 5 :first-line 向文本的首行添加特殊样式。 6 :before 在元素之前添加内容。 7 ===>声明 !DOCTYPE,那么 Internet Explorer 8 (以及更高版本)支持 content 属性。 8 :after 在元素之后添加内容。 9 (font-variant 设置变异字体 css1) 10 11 12 13 伪类: 14 注释:必须声明 <!DOCTYPE>,这样 :first-child 才能在 IE 中生效。 15 p:first-child 某元素下的第一个p元素 16 ul > li:first-child ul下的第一个li元素 17 包含: 18 :active :focus :hover :link :visited :first-child :lang
效果图:
HTML:
1 <div class="wraper"> 2 <div id="header"> 3 <h3>CSS</h3> 4 </div> 5 <nav class="navigation"> 6 <ul class="menu"> 7 <li><a href="JavaScript:void(0)">HTML</a></li> 8 <li><a href="JavaScript:void(0)">CSS</a></li> 9 <li><a href="JavaScript:void(0)">JavaScript</a></li> 10 <li><a href="JavaScript:void(0)">CodePen</a></li> 11 </ul> 12 </nav> 13 <section class="main"> 14 <div class="list"> 15 <!-- 新闻列表 --> 16 <p>文字加粗</p> 17 <ul> 18 <li>sdfsdf</li> 19 </ul> 20 21 22 </div> 23 </section> 24 <footer class="ft"> 25 <div class="note"> 26 <p class="first-line"> 27 Sdfsfsdffffffffffffffffffffffffffffffffffffffffsdfasdfsdfasfsdfsafsdfsfdsfdsfdasf. 28 sdfsfsdffffffffffffffffffffffffffffffffffffffffsdfasdfsdfasfsdfsafsdfsfdsfdsfdasf. 29 sdfsfsdffffffffffffffffffffffffffffffffffffffffsdfasdfsdfasfsdfsafsdfsfdsfdsfdasf. 30 sdfsfsdffffffffffffffffffffffffffffffffffffffffsdfasdfsdfasfsdfsafsdfsfdsfdsfdasf. 31 </p> 32 <p class="first-letter"> 33 Sdfsfsdffffffffffffffffffffffffffffffffffffffffsdfasdfsdfasfsdfsafsdfsfdsfdsfdasf. 34 sdfsfsdffffffffffffffffffffffffffffffffffffffffsdfasdfsdfasfsdfsafsdfsfdsfdsfdasf. 35 </p> 36 <!-- 多重伪类 --> 37 <p class="first-line first-letter"> 38 Sdfsfsdffffffffffffffffffffffffffffffffffffffffsdfasdfsdfasfsdfsafsdfsfdsfdsfdasf. 39 sdfsfsdffffffffffffffffffffffffffffffffffffffffsdfasdfsdfasfsdfsafsdfsfdsfdsfdasf. 40 </p> 41 42 </div> 43 44 </footer> 45 46 </div>
CSS文件:
1 body,div,h1,h2,h3,h4,h5,h6,ol,ul,nav{ 2 margin:0; 3 padding: 0; 4 } 5 nav,section{ 6 display: block; 7 } 8 ol,ul{ 9 list-style: none; 10 } 11 12 body{ 13 height: 100%; 14 font-family: sans-serif; 15 font-size: 16px; 16 background-color: gray; 17 } 18 19 .wraper{ 20 margin:0 auto; 21 width: 900px; 22 height: 100%; 23 background-color: green; /*1054197*/ 24 } 25 .navigation >.menu::after{ 26 display: block; 27 content: ""; 28 clear:both; 29 /*overflow: auto;*/ 30 } 31 .navigation >.menu >li{ 32 float: left; 33 height: 30px; 34 padding: 5px 10px; 35 text-align:center; 36 border:1px solid #ccc; 37 } 38 .navigation >.menu >li > a{ 39 display: inline-block; 40 } 41 .navigation >.menu >li > a:link{ 42 color: #FF0000 43 } 44 .navigation >.menu >li > a:visited{ 45 color: #00FF00 46 } 47 .navigation >.menu >li > a:hover{ 48 color: #FF00FF 49 } 50 .navigation >.menu >li > a:active{ 51 color: #0000FF 52 } 53 54 55 /*某元素下第一个子元素所有p元素设置为粗体*/ 56 p:first-child{ 57 font-weight: bold; 58 } 59 /*第一个li元素*/ 60 li:first-child{ 61 text-transform: uppercase; 62 } 63 64 p.first-line:first-line{ 65 color:#ff0000; 66 font-variant:small-caps; /*变异字体 转化为大写,大写字母字形变大,小写字母字形变小*/ 67 } 68 69 /*伪元素 :first-letter 为首字母设置特殊样式*/ 70 p.first-letter:first-letter{ 71 color:#ff0000; 72 font-size:xx-large; 73 }