CSS快速自学教程（W3school/MDN精简）

最新推荐文章于 2024-03-17 21:40:56 发布

Jimobbb

最新推荐文章于 2024-03-17 21:40:56 发布

阅读量728

点赞数 2

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

本文链接：https://blog.csdn.net/Jimobbb/article/details/109767949

版权

前端探索专栏收录该内容

2 篇文章 0 订阅

订阅专栏

前言

为了完成学校的综合设计作业中负责的前端项目，准备拾起八月份看的一点前端知识，接下来是CSS的部分
在html的学习中，我是用了W3school教程来看，这次发现MDN教程做的也比较不错，于是想结合着来学习
计划在这周内就简单了解CSS的性质，之后更多的在实践中应用

CSS基础教程

CSS简介

全称 Cascading Style Sheets 层叠样式表
基于CSS，提高html界面的工作效率。

CSS基础语法

CSS由两个部分组成：选择器和一条或多条声明
selector{ declaration1; declaration2; ···}
选择器一般是HTML对象
例：将h1元素的文字颜色定义成红色，字体大小为14px
h1 {color:red ; font-size:14px;}

对于值，可以有不同的写法
例如颜色red还可以写作十六进制颜色#ff0000
或者是rgb颜色值

如果值是若干单词，要写引号

多重声明
多重声明的常用格式如下

p {
  text-align: center;
  color: black;
  font-family: arial;
}

CSS 样式

背景色

background-color元素设置背景色
例：设置背景是灰色
p {background-color: gray;}

背景图片

background-image元素设置背景图片
body {background-image: url(/ddd/ddd/ddd);}

背景重复

background-repeat 需要在页面上对背景图像进行平铺。repeat-x表示只在水平方向重复，同理，repeat-y是在垂直方向重复

body { 
  background-image: url(/ddd/ddd/ddd);
  background-repeat: repeat-y;
  }

背景定位

background-position改变图像在背景中的位置
常用关键字:
center top bottom right left

百分数值显示

例如：

body { 
    background-image:url('/i/eg_bg_03.gif');
    background-repeat:no-repeat;
    background-position:66% 33%;
  }

此时代表着，一个图片放在水平2/3位置，垂直1/3位置
默认数值是0% 0% 就是top left的位置

长度值

元素内边距左上角偏移
例‘：50px 100px，指的是左上角向右移动50px，向下移动100px

背景关联

效果：图片不会随着页面的其他部分滚动
background-attachment: fixed
图片会固定在这个位置

CSS 文本

缩进文本

web界面段落的每一行缩进，具体属性是
text-indent 属性方便文本缩进，取值可以是负值，负边界的情况下，最好加入一个外边距和一些内边距
p {text-indent: -5em; padding-left: 5em}

百分比缩进

百分比缩进要相对于缩进元素父元素的宽度。若缩进值设置为20%，其影响元素的第一行会缩进其父元素的20%

例如，下例

div {width: 500px;}
p {text-indent: 20%;}

<div>
<p>比例缩进</p>
</div>

在这里插入图片描述

水平对齐

text-align 是一个基本的属性，它会影响一个元素中的文本行互相之间的对其
left right center 代表左对齐，右对齐，居中

<html>
<head>
<style type="text/css">
h1 {text-align: center}
h2 {text-align: left}
h3 {text-align: right}
</style>
</head>

<body>
<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
</body>

</html>

效果：在这里插入图片描述

间隔

word-spacing可以改变字之间的标准间隔，其默认值normal与等于设置0
letter-spacing可以改变字母之间的标准兼具，效果同上

字符转换

text-transform处理文本大小写，有四个值
none 不处理
uppercase 全大写
lowercase 全小写
capitalize 只对首字母大写

文本装饰

text-decoration 有常见五个属性
none 不处理
underline 下划线
overline 上划线
line-through 贯穿线（删除线）
blink 文本闪烁

处理空白符

white-space 会影响空格，换行，tab字符的处理
通过使用该属性，可以影响浏览器处理字之间和文本行之间的空白符的方式。

<html>
<head>
<style type="text/css">
p {white-space: normal;}
</style>
</head>

<body>

<p>This     paragraph has    many
    spaces           in it.</p>

<p>注释：当 white-space 属性设置为 normal 时，会合并所有的空白符，并忽略换行符。</p>

</body>

</html>

在这里插入图片描述
效果如上

CSS 定位

div，h1，p元素经常被称作块级元素，span,strong等为行内元素，因为内容显示在行内
CSS定位机制有三种：普通流，浮动流和绝对定位

CSS position属性的四个定位
static 正常生成，块级元素生成一个矩形框，作为文档流的一部分
relative 元素框偏移某元素，元素仍然保持其未定位前的形状
absolute 元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。
fixed 元素框的表现将position设置成absolute，不过其包含块是视窗本身

CSS相对定位

如果对一个元素进行相对定位，它将出现在它所在的位置上。然后可以通过设置垂直或水平位置，让元素相对的移动。

例如:

#box_relative{
	position: relative;
	left: 30px;
	top: 20px;
}

在这里插入图片描述

CSS 绝对定位

绝对定位使元素的位置与文档流无关，因此不占据空间。这一点与相对定位不同，相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。

#box_relative{
	position: absolute;
	left: 30px;
	top: 20px;
}

在这里插入图片描述

从图片中能感受到二者差别

CSS 浮动

浮动的框可以向左或向右移动，直到外边缘碰到包含框或另一个浮动框的边框为止
具体参考代码

Jimobbb

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
CSS快速自学教程（W3school/MDN精简）

前言为了完成学校的综合设计作业中负责的前端项目，准备拾起八月份看的一点前端知识，接下来是CSS的部分在html的学习中，我是用了W3school教程来看，这次发现MDN教程做的也比较不错，于是想结合着来学习计划在这周内就简单了解CSS的性质，之后更多的在实践中应用CSS基础教程CSS简介全称 Cascading Style Sheets 层叠样式表基于CSS，提高html界面的工作效率。CSS基础语法CSS由两个部分组成：选择器和一条或多条声明selector{ de
复制链接

扫一扫