认识css
添加方式
选择器
- 区别
id是独一无二的，可以将多个tag赋予同一个class名字
- 案例如下
HTML
1. <!DOCTYPE html> 2. <html> 3. <head> 4. <meta charset="UTF-8"> 5. <title>coleak's css</title> 6. <link rel="stylesheet" type="text/css" href="css/style.css"/> 7. </head> 8. <body> 9. <div class="box1"> 10. <h1>hello world</h1> 11. <p> 12. <ul type="A"> 13. <li id="c1">苹果</li> 14. <ol> 15. <li>大苹果</li> 16. <li>小苹果</li> 17. </ol> 18. <li>香蕉</li> 19. <li>雪梨</li> 20. <li>西瓜</li> 21. </ul> 22. </p> 23. <p> 24. <b>end</b> 25. </p> 26. </div> 27. </body> 28. </html>
CSS
1. h1{ 2. color :greenyellow; 3. } 4. b{ 5. color : red; 6. } 7. #c1{ 8. color: green; 9. } 10. .box1{ 11. color: darkgoldenrod; 12. }
效果
文字属性
color:red; 文字颜色 #ffeeees
font-size:12px; 文字大小
font-weight:bolds 文字粗细(bold/normal)
font-family:”宋体”文字字体
font-variant:small-caps小写字母以大写字母显示
1. <!DOCTYPE html> 2. <html> 3. <head> 4. <meta charset="UTF-8"> 5. <title>coleak's css</title> 6. <link rel="stylesheet" type="text/css" href="css/style.css"/> 7. </head> 8. <body> 9. <div id="d1">111</div> 10. <p class="p1">2222</p> 11. <p class="p1">33333</p> 12. <p class="p2">coleak</p> 13. <p class="p3">第五行</p> 14. </body> 15. </html>
1. #d1{ 2. color: red; 3. } 4. .p1{ 5. font-size: 3px; 6. } 7. .p2{ 8. font-weight: 1000; 9. } 10. .p3{ 11. font-family: "仿宋"; 12. }
文本样式
text-align:center; 文本对齐(right/left/center)
line-height:10px; 行间距(可通过它实现文本的垂直居中)
text-indent:20px; 首行缩进
text-decoration:none;
文本线(none/underline/overline/line-through) underline/overline/line-through;
定义文本上的下划线/上划线/中划线
letter-spacing: 字间距
1. #d1{ 2. color: red; 3. text-align:center 4. } 5. .p1{ 6. font-size: 3px; 7. line-height:40px 8. } 9. .p2{ 10. font-weight: 1000; 11. text-indent:20px 12. } 13. .p3{ 14. font-family: "仿宋"; 15. text-decoration:underline; 16. letter-spacing: 10px; 17. }
边框
常见的写法 border:1px solid #foo;
单独属性:
border-widh:
border-style:
dotted 点状虚线
dashed（虚线）
solid（实线）
double（双实线）
border-color(颜色)
1. #border{ 2. border: 5px blue solid; 3. border-top-width: thin; 4. border-left-style: dotted; 5. border-right-style: dashed; 6. border-bottom-color: red; 7. }
盒子模型
padding：内边距
margin：外边距
外边距合并：
当两个盒子在一起时，只会取两个margin中最大的作为外边距，所以外边距只会有一份，不会有两份。
margin指定方式：
①顺时针方向指定，上右下左，使用空格隔开。
②上下一样，左右一样。
③左右边距一致，上下边距不一致：第一个是上边距，最后一个是下边距，中间的是左右边距。
给list加图片
1. <!DOCTYPE html> 2. <html> 3. <head> 4. <meta charset="UTF-8"> 5. <title>coleak's css</title> 6. <link rel="stylesheet" type="text/css" href="css/style.css"/> 7. </head> 8. <body> 9. <div class="mylists"> 10. <ul> 11. <li>List 1</li> 12. <li>List 2</li> 13. <li>List 3</li> 14. <li>List 4</li> 15. <li>List 5</li> 16. </ul> 17. </div> 18. </body> 19. </html>
1. .mylists li{ 2. list-style-image: url('../image/coleak.jpg'); 3. list-style:square//方形 4. }
float
1. <!DOCTYPE html> 2. <html> 3. <head> 4. <meta charset="UTF-8"> 5. <title>coleak's css</title> 6. <link rel="stylesheet" type="text/css" href="css/style.css"/> 7. </head> 8. <body> 9. <div class="block"> 10. <ul> 11. <li>List 1</li> 12. <li>List 2</li> 13. <li>List 3</li> 14. <li>List 4</li> 15. <li>List 5</li> 16. </ul> 17. </div> 18. <div class="block"> 19. <ul> 20. <li>List 11</li> 21. <li>List 22</li> 22. <li>List 33</li> 23. <li>List 44</li> 24. <li>List 55</li> 25. </ul> 26. </div> 27. <div class="block"> 28. <ul> 29. <li>List 111</li> 30. <li>List 222</li> 31. <li>List 333</li> 32. <li>List 444</li> 33. <li>List 555</li> 34. </ul> 35. </div> 36. <div class="block" style="margin-bottom: 1000px"> 37. </div> 38. </body> 39. </html>
1. .block{ 2. float: left; 3. /*从左到右*/ 4. color: red; 5. width: 33.3%; 6. border: 1px solid #FF0000; 7. box-sizing: border-box; 8. }
超链接
a:link：未单击访问时的超链接的样式，比如：a:link {color: #000;}a:visited： 单击访问后超链接的样式，比如：a:visited{color: #F00;}a:hover：鼠标移动到超链接上的样式，比如：a:hover{color: #CCC;}a:active：鼠标单击未释放的超链接的样式，比如：a:active {color: #999;}
1. a{ 2. text-decoration: none; 3. } 4. a:link {color:#FF0000;} 5. a:visited {color:#00FF00;} 6. a:hover {color:#FF00FF;} 7. a:active {color:blue;}
溢出
overflow 属性规定当内容溢出元素框时发生的事情。
visible 默认值。内容不会被修剪，会呈现在元素框之外。
hidden 内容会被修剪，并且其余内容是不可见的。
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit 规定应该从父元素继承 overflow 属性的值。
1. div { 2. background-color: #eee; 3. width: 200px; 4. height: 50px; 5. border: 1px dotted black; 6. overflow: visible; 7. }
visible
hidden
scroll
auto
overflow-x 和 overflow-y 属性规定是仅水平还是垂直地（或同时）更改内容的溢出：
overflow-x指定如何处理内容的左/右边缘。overflow-y指定如何处理内容的上/下边缘。
总结图
