HTML与CSS基础-优快云博客

本文链接：https://blog.youkuaiyun.com/w_zhongke/article/details/48469823

近来在慕课网上系统的学习了一次HTML和CSS，现在记录下来备忘

html:

1. 强调标签：

strong：使用粗体标识；em：使用斜体表示；span标签是没有语义的，是为了设置单独样式。

2. 文本引用

<q>...</q>标签：短文本引用；<blockquote>...</blockquote>：长文本引用。

3. 换行：<br/>。在html中是忽略空格、回车的。空格：&nbsp；

4. 添加水平横线：<hr/>

5. 地址标签：<address>...</address>

6. 标志代码

一行代码：<code>...</code>；一段代码：<pre>...</pre>

7. 列表

无序列表：<ul>...</ul>；有序列表：<ol>...</ol>

8. 表格标签

① <table>...</table>：整个表格以<table>标记开始、</table>标记结束

② <tbody>...</tbody>：当表格内容非常多时，表格会下载一点显示一点，加上<tbody>标签后，表格会等内容全部下载完毕才会显示

③ <tr>...</tr>：表格的一行

④ <td>...</td>：表格的一个单元格，一行中包含几对<td>就有几列

⑤ <th>...</th>：表格的头部的一个单元格，表格表头

⑥ <caption>...</caption>：表格标题

9. 超链接

<a href=”#” tilte=” “>...</a>。在新窗口打开加入属性 target=”_blank”

10.图片

11.表单提交

12.文本区域

13.单选框、复选框

14.使用下拉框

单选：<select><option value=”” selected=”selected>...</option></select>

多选：<select multiple=”multiple”><option ...>...</option></select>

15.label标签：当用户单击选中该label标签时，浏览器就会自动将焦点转到和标签相关的表单控件上，用for属性关联

css

1. 外联式写法：

2. 类选择器与ID选择器：

① ID选择器只能在文档中使用一次，类选择器可以使用多次

② 可以使用类选择器词列表方法为一个元素同时设置多个样式，而ID不行，如 class=“stress bigsize”

3. 子选择器：使用”>”表示，用于选择指定标签元素的第一代子元素，如： .food>li{...}

4. 包含选择器：使用空格，选择指定标签元素下的子元素，如： .first span{...}

5. 通用选择器： *{...}

6. 伪类选择符：比较常用的就是 a:hover{...},鼠标滑过的状态

7. 分组选择器：为html多个标签设置同一个样式，可使用分组选择符(,) 如 h1,span{...}

8. css选择器的权值计算规则：标签的权值为1；类选择符的权值为10；ID选择符的权值最高位100；继承权值最低。

9. 为某些权值设置具有最高权值使用 !important 要写在分号前面

10.CSS格式化排版

① 设置字体： font-family:”MicrosoftYahei”;

② 字号颜色： font-size:12px;color:#666;

③ 粗体： font-weight:bold;

④ 斜体： font-style:italic;

⑤ 下划线： text-decoration:underline;

⑥ 删除线： text-decoration:line-through;

⑦ 缩进： text-indent:2em;

⑧ 行间距： line-height:1.5em;

⑨ 中文字间距、字母间距：lettr-spacing:50px; 单词间距设置：word-spacing:50px;

⑩ 对齐： text-align:center(left/right);

11.元素分类

① 块状元素有：div、p、h1...h6、ol、ul、dl、table、address、blockquote、form

② 内联元素有：a、span、br、i、em、strong、label、q、var、cite、code

③ 内联块状元素有：img、input

12.块级元素特点：(块状元素内联 display:inline;)

① 每个块级元素都是从新的一行开始，并且其后的元素也另起一行

② 元素的高度、宽度、行高以及顶和底边距都可设置

③ 元素宽度在不设置的情况下，是它本身父容器的100%

13.内联元素特点：

① 和其他元素都在一行

② 元素的高度、宽度及顶部和底部边距不可设置

③ 元素的宽度就是它包含的文字或图片的宽度，不可改变

14.内联块状元素 (设置为内联块状元素：display:inline-block;)

① 和其他元素在一行

② 元素的高度、宽度、行高以及顶和底边距都可以设置

15.盒子模型

① 盒子模型的边框就是围绕着内容及补白的线，这条线可是设置其粗细、样式和颜色。

[example] div{border:2px solid red;}

分开写就是: dashed(虚线) dotted(点线) solid(实线)

div{border-widtd:2px;border-style:solid;border-color:red;}

② 盒子模型单独设置一个边框：

div{border-bottom|border-top|border-right|border-left:1pxsolid #ccc;}

③ 盒模型的宽度和高度

④ 填充

填充可以分为上、右、下、左（顺时针）

[example] div{padding:20px 10px 15px 30px}

也可以分开写成：div{padding-top:20px;padding-right:10px;padding-bottom:15px;padding-lefg:30px;}

如果上下左右都一样可以写成: div{padding:10px;}

16.流动模型（默认的网页布局模式）

① 块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，默认状态下，块状元素的宽度都为100%。即块状元素都会以行的形式占据位置。

② 内联元素都会在所处的包含元素内从左到右水平分布显示

17.浮动模型

让两个块状元素并排显示，可以浮动

18.层模型

① 绝对定位：[position:absolute],使用top等属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。

② 相对定位：[position:relative],相对定位完成的过程首先按static方式生成一个元素，然后相对于以前的位置移动，移动的方向和幅度由top等属性确定，偏移前的位置保留不动。

③ 固定定位：[position:fixed],固定定位的元素会是种位于浏览器窗口内视图的某个位置。

④ Relative与Absolute组合使用：参照定位的元素必须是相对定位元素的前辈元素；参照定位元素必须加入position:relative；定位元素加入position:absolute，便可以使用top等来进行偏移定位

19.代码简写

① 盒模型代码简写：top、right、bottom、left值相同，可缩写为：margin:10px;

② 如果top和bottom值相同，left和right值相同，可缩写为：margin:10px 20px;

③ 如果left和right值相同，可缩写为: margin:10px 20px 30px;

④ 颜色值缩写：设置的颜色是16进制的色彩值时，如果每两位的值相同，可以缩写一半。

⑤ 字体缩写：使用字体简写至少要指定font-size和font-family属性；在font-size和line-height中间要加入”/” [ font:12px/1.5em “宋体”，sans-serif;],缩写顺序：font-style font-variant font-weight font-size font-family

20.长度： 1em = font-size

21.水平居中设置

① 定宽块状元素：设置margin:auto; width也要设置

② 不定宽块状元素：三种方法：加入table标签；设置display:inline；设置position:relative和left:50%

22.垂直居中

① 父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的 height 和 line-height 高度一致来实现的

② 父元素高度确定的多行文本、图片、块状元素：使用插入table（包括tbody、tr、td）标签，同时设置vertical-align:middle（vertical-align只有在父元素是td或th才有效）； display:table-cell /*IE8以上及Chrome、Firefox*/、vertical-align：middle /* IE8以上及Chrome、Firefox */

html 和 css

css