AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

css入门知识点复习总结

2023-08-24 51
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 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入门
coleak
目录
相关文章
派大鑫的工作室
|
2月前
|
机器学习/深度学习 前端开发 JavaScript
CSS动画知识点
CSS动画知识点
派大鑫的工作室
78 2
你都不懂
|
5月前
|
前端开发
CSS基础入门 —— 打造网页的华丽外衣
【7月更文挑战第31天】
你都不懂
37 4
小徐在进步
|
3月前
|
前端开发
【前端web入门第四天】02 CSS三大特性+背景图
本文详细介绍了CSS的三大特性：继承性、层叠性和优先级，并深入讲解了背景图的相关属性，包括背景属性、背景图的平铺方式、位置设定、缩放、固定以及复合属性。其中，继承性指子元素自动继承父元素的文字控制属性；层叠性指相同属性后定义覆盖前定义，不同属性可叠加；优先级涉及选择器权重，包括行内样式、ID选择器等。背景图部分则通过具体示例展示了如何设置背景图像的位置、大小及固定方式等。
小徐在进步
264 91
进步`于辰
|
1月前
|
移动开发 前端开发 JavaScript
[HTML、CSS]知识点
本文涵盖前端知识点扩展、HTML标签（如video、input、canvas）、datalist和details标签的使用方法，以及CSS布局技巧（如margin、overflow: hidden和动态height）。文章旨在分享作者的学习经验和实用技巧。
进步`于辰
34 1
[HTML、CSS]知识点
游客zi3qmblbcdexu
|
2月前
|
前端开发
CSS网页布局综合练习（涵盖大多CSS知识点）
CSS网页布局综合练习（涵盖大多CSS知识点）
游客zi3qmblbcdexu
26 3
游客zi3qmblbcdexu
|
2月前
|
前端开发
CSS网页布局综合练习（涵盖大多CSS知识点）
CSS网页布局综合练习（涵盖大多CSS知识点）
游客zi3qmblbcdexu
72 2
小徐在进步
|
3月前
|
前端开发
【前端web入门第三天】02 CSS字体和文本
本文详细介绍了CSS中字体和文本的相关属性。字体部分涵盖字体大小、粗细、样式、行高、字体族及`font`复合属性，通过具体示例展示了如何设置和使用这些属性。文本部分则讲解了文本缩进、对齐方式、修饰线及文字颜色等属性，并提供了实用的代码示例。此外，还简要介绍了调试工具中的一些细节，如错误属性标识和属性生效状态的控制。
小徐在进步
72 28
小徐在进步
|
3月前
|
前端开发 JavaScript
【前端web入门第三天】01 css定义和引入方式 四种标签选择器
本文档详细介绍了CSS的基础知识及其应用。内容涵盖了CSS的定义、CSS在HTML中的引入方式，包括内部样式表、外部样式表及行内样式表的使用场景与方法。此外，还深入解析了不同种类的选择器：标签选择器、类选择器、ID选择器以及通配符选择器的功能与应用场景，并提供了实例帮助理解。最后，通过具体的新属性示例，指导如何使用这些选择器来实现基本的盒子绘制。适合初学者系统学习CSS。
小徐在进步
55 15
小徐在进步
|
3月前
|
前端开发
【前端web入门第八天】定位、CSS精灵与一些其他CSS高级技巧
定位、CSS精灵与一些其他CSS高级技巧
小徐在进步
39 9
小徐在进步
|
3月前
|
前端开发
【前端web入门第六天】01 CSS浮动
这是关于CSS布局第六天学习目标的介绍，主要解决多个`&lt;div&gt;`标签在同一行显示的问题，即一个在左边，另一个在右边。文中介绍了标准流、浮动及flex布局的概念，重点推荐使用flex布局。文章详细讲解了浮动的基本使用、布局技巧及清除浮动的方法，包括额外标签法、单伪元素法、双伪元素法和`overflow`隐藏法，并提供了示例代码帮助理解。
小徐在进步
42 6

热门文章

最新文章

  • 1
    CSS 居中方法总结
  • 2
    CSS伪元素实现的3D按钮
  • 3
    CSS 魔法系列：纯 CSS 绘制各种图形《系列六》
  • 4
    符合WEB标准的下拉导航菜单（CSS菜单）演示
  • 5
    css属性列表 和 属性值含义
  • 6
    CSS3的新属性的一下总结
  • 7
    webpack window 使用sass来编译css样式
  • 8
    一款非常棒的纯CSS3 3D菜单演示及制作教程
  • 9
    IE6, IE7, IE8 CSS 兼容速查表
  • 10
    19个基于 HTML5 和 CSS3 开发的优秀应用程序
  • 1
    css结构伪类
    64
  • 2
    web前端之纯CSS实现简单酷炫的照片墙效果、排除元素的伪类、scale
    86
  • 3
    【Web前端】CSS基本语法规范和引入方式&&常见选择器用法&&常见元素属性
    59
  • 4
    HTML5/CSS3粒子效果进度条代码
    69
  • 5
    同样都是将物理设备虚拟化，思科的VSS和华为的CSS到底有啥区别？
    138
  • 6
    CSS 超出内容... 或者多行省略及两端对齐及超出多行居中显示
    56
  • 7
    CSS外边距重叠：原理、结果
    53
  • 8
    css 中可以让文字在垂直和水平方向上重叠的两个属性是什么？
    64
  • 9
    CSS常见用法 以及JS基础语法
    70
  • 10
    css设置内嵌样式阴影
    71

    • 相关课程

    更多
  • CSS 快速掌握
  • 零基础学前端HTML+CSS
  • 前端开发CSS基础
  • JavaScript 自学手册文档教程
  • JavaScript入门与实战
  • Vue.js完全自学手册图文教程

    • 相关电子书

    更多
  • 零基础CSS入门教程
  • JS零基础入门教程（上册）
  • 《零基础HTML入门教程》

    • 相关实验场景

    更多
  • 前端开发基础3：CSS3常见显示属性
  • CSS基础教程
    • 下一篇
    DataWorks