提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

前端第二周——CSS

前端CSS
2023-09-27 14:22:11 时间

关于css

一.那么什么是css呢

css就是为第一周学习的html加一层漂亮的羽毛 使得网页漂亮
在这里插入图片描述

二.css的一些重要知识点

css的知识繁多而零碎，总体的学习规划是有重点的的学，结合文本教程和视频，多练习。不练习，学也是白学。

1.首先从选择器开始

基础选择器

  1. 标签选择器
    就是规定标签，如这样
 p {
  text-align: center;
  color: red;
}

选中p标签

2. 类选择器
起一个名字，用class来修改样式

 <style>
.center {
  text-align: center;
  color: red;
}
</style>
</head>
<body>

<h1 class="center">居中的红色标题</h1>
<p class="center">居中的红色段落。</p>
  1. id选择器
 #para1 {
  text-align: center;
  color: red;
}
</style>
</head>
<body>

<p id="para1">Hello World!</p>

需要注意的是id只能用一次
4. 通配符选择器

 * {
  text-align: center;
  color: blue;
}

就是用*把所有都选中了
其实在实际开发中最常用的是类选择器与标签选择器

组合选择器

CSS 中有四种不同的组合器：

  • 后代选择器 (空格) - div p

  • 子选择器 (>) - div>p

  • 相邻兄弟选择器 (+) - div+p

  • 通用兄弟选择器 (~) - div~p

重点来喽
我们的伪类选择器

  • 什么是伪类？ 伪类用于定义元素的特殊状态。

例如，它可以用于：

  • 设置鼠标悬停在元素上时的样式
  • 为已访问和未访问链接设置不同的样式
  • 设置元素获得焦点时的样式
/* 未访问的链接 */
a:link {
  color: #FF0000;
}

/* 已访问的链接 */
a:visited {
  color: #00FF00;
}

/* 鼠标悬停链接 */
a:hover {
  color: #FF00FF;
}

/* 已选择的链接 */
a:active {
  color: #0000FF;
}

CSS - :first-child 伪类
:first-child 伪类与指定的元素匹配：该元素是另一个元素的第一个子元素

2.css的使用

三种使用 CSS 的方法
有三种插入样式表的方法：

  • 外部 CSS
  • 内部 CSS
  • 行内 CSS
    外部样式在 HTML 页面 部分内的 元素中进行定义：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

内部就如之前举的例子。都是内部样式表
这就是行内样式表

<!DOCTYPE html>
<html>
<body>

<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>

</body>
</html>

3.css背景

在这里插入图片描述
使用背景图片默认的有平铺效果

background-image: url("/i/photo/tree.png");
  background-repeat: no-repeat;
  background-position: right top;

如这样用no-repeat来避免平铺
而position规定了图像的位置

4.文本

1.文本颜色用color来定义
2.对齐方式用text-align：center/left/right;
3.在这里插入图片描述

4.文本的缩进
在这里插入图片描述

5.字体

CSS字体属性定义字体，加粗，大小，文字样式。
在这里插入图片描述
字体样式
这个属性有三个值：

  • 正常 - 正常显示文本 normal
  • 斜体 - 以斜体字显示的文字 italic
  • 倾斜的文字 - 文字向一边倾斜 oblique

字体大小

  • font-size 属性设置文本的大小。
  • 可以规定像素也能用em

6.列表

ul.a {
list-style-type: circle;
} 小圆点

ul.b {
list-style-type: square;
} 小方块

ol.c {
list-style-type: upper-roman;
}罗马数字

ol.d {
list-style-type: lower-alpha;
}小写字母样式
可以如上把前面的小符号换为我们想要的

7.表格

在这里插入图片描述
注意：上例中的表格拥有双边框。这是因为 table 和 和 元素都有单独的边框。
border-collapse 属性设置是否将表格边框折叠为单一边框：
border-collapse 属性设置是否将表格边框折叠为单一边框：

  table {
  border: 1px solid black;
}

在这里插入图片描述
text-align 属性设置 或 中内容的水平对齐方式（左、右或居中）。

默认情况下， 元素的内容居中对齐，而 元素的内容左对齐。

要使 元素的内容也居中对齐，请使用 text-align: center：

8.盒子模型 ——挺重要滴

在这里插入图片描述

  • Margin(外边距) - 清除边框外的区域，外边距是透明的。

  • Border(边框) - 围绕在内边距和内容外的边框。

  • Padding(内边距) - 清除内容周围的区域，内边距是透明的。

  • Content(内容) - 盒子的内容，显示文本和图像。

    元素的高度与宽度
    总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
    元素的总高度最终计算公式是这样的：
    总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距
    边框——border
    在这里插入图片描述
    可以通过 border-width 属性为边框指定宽度。
    border-color属性用于设置边框的颜色。可以设置的颜色：
    注意： border-color单独使用是不起作用的，必须得先使用border-style来设置边框样式

可以设置四边的边框
{
    border-top-style:dotted;
    border-right-style:solid;
    border-bottom-style:dotted;
    border-left-style:solid;
}

同样padding与margin用法与border类似
只不过有时候加了padding与margin会把盒子撑大
在这种情况下可以把盒子加个边框
简写时注意
在这里插入图片描述
同时在为盒子设置了宽度后可以用margin：auto设置为居中

9.显示与可见性

隐藏元素 - display:none或visibility:hidden
隐藏一个元素可以通过把display属性设置为"none"，或把visibility属性设置为"hidden"。但是请注意，这两种方法会产生不同的结果。

visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。
块状元素与行内与行内块元素在这里插入图片描述
用display来做转化
如a链接用display：block；转换为块状元素从而可以设置高度宽度
同理用inline，inline-block转换为行内元素，行内块元素

10.定位

在这里插入图片描述
1.static是默认
2.fixed是固定住

在这里插入图片描述
3.relative 表示的是相对位置
是相对其本身位置的相对位置

在这里插入图片描述

4.absolute

position: absolute; 的元素相对于最近的定位祖先元素进行定位（而不是相对于视口定位，如 fixed）。

然而，如果绝对定位的元素没有祖先，它将使用文档主体（body），并随页面滚动一起移动。

注意：“被定位的”元素是其位置除 static 以外的任何元素。

5.sticky可以做一个粘性定位
position: sticky; 的元素根据用户的滚动位置进行定位。

粘性元素根据滚动位置在**相对（relative）和固定（fixed）**之间切换。起先它会被相对定位，直到在视口中遇到给定的偏移位置为止 - 然后将其“粘贴”在适当的位置（比如 position:fixed）。

z-index来重叠元素 来实现这样的效果
在这里插入图片描述

11.overflow

用来添加滚动条
在这里插入图片描述

12.浮动float——又一个大重点

用float来使得元素在一行更加简单
一句口诀 纵向用标准流，横向用浮动
在这里插入图片描述

相关文章