css入门知识点复习总结-阿里云开发者社区

css入门知识点复习总结

2023-08-24 32

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： css入门知识点复习总结

认识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 指定如何处理内容的上/下边缘。

css入门知识点复习总结

认识css

添加方式

选择器

文字属性

文本样式

边框

盒子模型

给list加图片

float

超链接

溢出

总结图

热门文章

最新文章

相关课程

相关电子书

相关实验场景