HTML和CSS的入门小结

最新推荐文章于 2020-04-26 20:06:25 发布

Bangys

最新推荐文章于 2020-04-26 20:06:25 发布

阅读量388

点赞数

分类专栏：奇妙的小知识文章标签： html css

本文链接：https://blog.csdn.net/yongsan01/article/details/52232740

版权

奇妙的小知识专栏收录该内容

13 篇文章 0 订阅

订阅专栏

在Codecademy上敲完了HTML&CSS的course，可能是入门的关系，没有感觉很吃力
以下是自己整理的干货，只是一些最基本的语法和初学者容易忘记的地方

1.<!DOCTYPE html>，让浏览器知道该文档类型，位于首行
2.<head> <title>文档的标题</title> </head>
3.<a href="你的超链接">你的文本</a>
4.<img src="你的图片链接"/>，这个是自闭合标签
5.<p style:"xxxxxxxx">里面可以设置很多:

字号：font-size: 12 px
颜色：color: red
字体：font-family： Arial
背景色：background-color: brown
文本对齐：text-align: center/left/right

6.<strong>想要加粗的文本</strong>
7.<em>想要变成斜体的文本（强调：emphasize）</em>
8.HTML的注释：
9.表格

<table>
     <tr>这是行
            <td>这是列</td>
     </tr>
</table>

10.表格标题

<table>
  <thaed>
  <tr>
     <th colspan="2"(标题所占的单元格)>表格的标题</th>
  </thead>
</table>

11.span标签：<span sytle="xxxxx">想改变的文本</span>
12.盒子：<div></div>(division)
13.内联样式的css：

<p style="color: red">My little red</p>
等价于下面：
<style>
    p{
      color: red;
      }
</style>

14.<link ?; ?; ?/>需要三个属性(自闭合标签)：

type属性：一直是”text/css”
rel属性：一直是”stylesheet”
href属性：指向你的css文件地址

15.选择器：selector{ }
16.CSS的注释：/*我是被注释的*/
17.十六进制的颜色(hexadecimal)以#开头不区分大小写
18.字体可以同时输入多个，但只显示最前面用户电脑可识别的字体

p{
font-family: Tahoma, Verdana, serif;
 }

如果电脑不认识第一个，那么往后轮，轮到识别为止，用字体间用，隔开
19.CSS常见参数：

height、width：高、宽（单位px）
border-color：边框颜色
border-style：边框样式
border-width：边框粗度
border：1px solid blue（三个参数）
border-radius：设置边框弧度（单位px、%）
margin：边缘
text-align：文本对齐
text-decoration：文本的装饰，超链底的下划线（none为无）

20.*{ } ：通配符，用来匹配页面上的所有元素
21.指定类(可多个)：HTML中:class='xxx' CSS中: .xxx{ }
22.指定ID(只一个)：HTML中：id='xxx' CSS中: #xxx{ }
23.伪类选择符（Pseudo selectors）：ABC：nth-child(x){ }(x为序号)
24.mainDiv > div子代选择器（只对应用对象直接相应子节点有效）
mainDiv div 后代选择器（对应用对象内的所有响应子节点有效）
25.display属性：block、inline-block、line、none
26.边距：
margin：1px 2px 3px 4px =margin-top；margin-right；margin-bottom；margin-left
padding： 设置方式同margin
padding：4px（设置四个方向都是4px），边距的赋值也可以是负数
这里写图片描述
27.浮动： float：（left、right）
28.position：absolute （绝对定位）、relative（相对定位）、fixed（固定）