【橙果工作室】【网站组】2021.11.11内容

最新推荐文章于 2024-07-14 10:25:44 发布

叶桉筠

最新推荐文章于 2024-07-14 10:25:44 发布

阅读量151

点赞数

分类专栏：前端文章标签： css css3 html

本文链接：https://blog.csdn.net/weixin_51415487/article/details/121273815

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

HTML/CSS 2021.11.11

表格

<table border="1">
    <tr>
        <th>header</th>
        <th>header</th>
    </tr>
    <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
    </tr>
</table>

header	header
row 1, cell 1	row 1, cell 2
row 2, cell 1	row 2, cell 2

表格的表头使用 <th> 标签进行定义。

大多数浏览器会把表头显示为粗体居中的文本

双十一了，做一个个人简历吧

列表

无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。

无序列表使用 <ul> 标签，里面的内容用<li>标签

<ul>
<li>第一行</li>
<li>第二行</li>
</ul>

第一行
第二行

可以用它做一个todo list

同样，有序列表也是一列项目，列表项目使用数字进行标记

有序列表始于

标签，列表项使用数字来标记。

<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

Coffee
Milk

自定义列表不仅仅是一列项目，而是项目及其注释的组合。

自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。

<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

Coffee

- black hot drink

Milk

- white cold drink

列表项内部可以使用段落、换行符、图片、链接以及其他列表等等

CSS

复习

选择器：

常用的两种选择器：“id” 和 “class” 选择器。

id以 “#” 号开头

class以 “.” 号开头

class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。

盒模型（重点）

CSS box-model

你会发现盒模型会很多次的出现在网站里

Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。

Remark 重要: 当您指定一个 CSS 元素的宽度和高度属性时，你只是设置内容区域的宽度和高度。要知道，完整大小的元素，你还必须添加内边距，边框和外边距。

.div { 

   width: 300px; 

   border: 25px solid green;  

  padding: 25px;  

  margin: 25px; }

调整盒子的位置一般用外边框：

调试左右：用margin-left，right
调试上下：用margin-top，bottom

CSS 可以通过以下方式添加到HTML中:

内联样式- 在HTML元素中使用"style" 属性
内部样式表 -在HTML文档头部 <head> 区域使用<style> 元素来包含CSS
外部引用 - 使用外部 CSS 文件

*最好的方式是通过外部引用CSS文件.

CSS修饰标签的样式，有 “内联” 和 “外引” 两种方式。

对于大部分标签，以上两种方法均可，且修改父级标签，子级标签特性也会改变。但某些标签确无法通过修改父级标签来改变子级标签特性，如a标签，修改其颜色特性，必须直接修改 a 标签的特性才可。

<a href="#" style="color:red;" rel="nofollow">只能使用"内联"方式</a>

CSS主要是`<div></div>`盒模型的使用和其他属性的使用

比如文字相关属性：

用 font-family（字体） ， color（颜色） ，和 font-size（字体大小） 属性来定义字体的样式:

<h1 style="font-family:verdana;">一个标题</h1> 
<p style="font-family:arial;color:red;font-size:20px;">一个段落。</p>

运行结果：
在这里插入图片描述

使用 text-align（文字对齐） 属性指定文本的水平与垂直对齐方式：

CSS定位(position)：

五种属性值：

static

HTML 元素的默认值，即没有定位，遵循正常的文档流对象。

静态定位的元素不会受到 top, bottom, left, right影响。

fixed

元素的位置相对于浏览器窗口是固定位置。

即使窗口是滚动的它也不会移动

！ Fixed定位使元素的位置与文档流无关，因此不占据空间。

Fixed定位的元素和其他元素重叠。

relative

相对定位元素的定位是相对其正常位置。

移动相对定位元素，但它原本所占的空间不会改变。

相对定位元素经常被用来作为绝对定位元素的容器块。

absolute

绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>

absolute 定位使元素的位置与文档流无关，因此不占据空间。

absolute 定位的元素和其他元素重叠。

sticky

sticky 英文字面意思是粘，粘贴，所以可以把它称之为粘性定位。

position: sticky; 基于用户的滚动位置来定位。

粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。

它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。

元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。

这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。

注意: Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 需要使用 -webkit- prefix 。
在这里插入图片描述

CSS使用实例：

CSS 实例 | 菜鸟教程 (runoob.com)

这上面有很多例子，其实我们在使用css的过程中可以随时去学习网站上查看相应属性，有些属性可能使用的频率很低，记不住。
所以我们可以随用随找，有很多常用的技巧在这上面
在这里插入图片描述

在这里插入图片描述

叶桉筠

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【橙果工作室】【网站组】2021.11.11内容

HTML/CSS 2021.11.11表格<table border="1"> <tr> <th>header</th> <th>header</th> </tr> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td>
复制链接

扫一扫