css知识点，关于css的基本知识

编程之家2026-06-02812次浏览

本篇文章给大家谈谈css知识点，以及关于css的基本知识对应的知识点，文章可能有点长，但是希望大家可以阅读完，增长自己的知识，最重要的是希望对各位有所帮助，可以解决了您的问题，不要忘了收藏本站喔。

CSS基础知识点全面解析(转载)

基本

常识与实践

链接方式

基本

最基本的方式就是直接在html文件中指定元素样式，这种方式不推荐，因为将表现层和结构层混起来了

"style="background-image:url({{user.avatar}})"

内部链接

要为html直接增加css样式，需要在元素中增加开始和结束style标记，css规则放在里面

<style>

color: gray;

}

</style>

css文件外置

另一种方式将css文件外置，如style.css,作为样式表(stylesheets),然后从html众创建一个到这个文件的外部链接,用元素,用外部样式表的好处是要修改整个网站的样式，只要进入这个样式表，对css进行几处修改即可。如:

多样式表

使用多个样式表,顺序很重要，一个样式表会覆盖在它上面链接的样式表中的样式,有时会有一个样式表作为页面的基础样式，要修改样式，链接这个样式表，然后在下面提供自己的样式表，指定要修改的样式,如下所示:

简写

css属性太多，能不能不费吹灰之力就指定这些属性呢？可以把同一属性的值结合起来写成一句,即简写。

简写格式

padding

padding: 0px 40px 30px 20px;,顺序是上右下左,顺时针有木有,如果都相同可以用padding: 20px;

padding-top: 0px;

padding-right: 40px;

padding-bottom:30px;

padding-left: 20px;

margin

上面的padding格式同样对margin也适用,还有另一种方法,如果上下一样，左右一致,可以这样写:margin: 0px 20px,前面指定上下，后面指定左右。

border

边框属性简写 border: thin solid#007e73;,可以用你喜欢的任何顺序。

background

背景简写 background: white url(images/cocktail.gif) repeat-x;，同样顺序随便

字体

字体简写的格式稍微复杂一些:

font: font-style font-variant font-weight font-size/line-height font-family

选择

子孙选择器

父元素和子孙元素名之间有一个空格,子孙选择器会选择所有子孙，包括这个元素中嵌套的所有,不管嵌套多深,例如

color: black;

}

直接孩子

如果要选择直接的孩子,用>

color: black;

}

复杂选择

更复杂的选择,方法还是一样

color: blue;

}

规则添加

类

当我们用选择器选择元素使用一个规则时,会对所有该元素应用这个样式，所以如何单独地选择这些元素呢?这里就需要类class,class可以定义一类元素，对属于该类的所有元素应用样式.要将一个元素加入一个类，只需要增加属性”class”,并提供类名,如”greentea”:

...

</p>

类元素选择器

先选择这个类中的元素,再用”.”指定一个类,最后是类名,如:

p.greentea{

color: green;

}

添加类元素

如果想对所有<blockquote>也做同样的处理，可以:

blockquote.greentea,p.greentea{

color: green;

}

类选择器

如果想把<h1>,<h2>,<h3>,<p>和<blockquote>都增加到greentea呢？要对类中的所有元素都用同一样式可以用:

.greentea{

color: green;

}

/省略所有元素名,只有一个点,则会应用到所有成员/

多类元素

元素可以有多个类,例如:

<p class="greentea raspberry blueberry"

特定元素选择器

如果多个选择器都选择了一个元素呢？例如上面的3个类都与p元素匹配，并且都定义了color属性，那么那个会胜出?

id的作用

id属性用来唯一地命名元素,通常你想对多个元素重用某些样式，才能真正发挥类的作用。但是如果只有一个元素需要样式，或者页面上只有一个元素，那就应该使用id,每个元素只能有一个id，页面中只能有一个元素拥有特定id,一个元素有一个id，同时可以属于一个或多个类,id中不允许出现空格或其他特殊字符,如

选择元素

用id选择一个元素,需要在id前面使用一个#字符(类是[.]),id选择器只与页面中的一个元素匹配

color: red;

}//选择id为footer的任意元素

p#footer{

color: red;

}//选择id为footer的<p>元素

实践建议

继承

样式继承

层叠

媒体查询

link媒体查询

你可能想针对将要显示页面的设备调整页面的样式，可以用media属性,在link元素中增加这个属性.如

css媒体查询

可以直接在css中增加媒体查询,使用@media规则,把对所有媒体类型都通用的规则放在@media规则下面,例如

@media screen and(min-device-width: 481px){//当设备屏幕宽度大于480px时使用

margin-right: 250px;

}

@media screen and(max-device-width: 480px){//当设备屏幕小于等于480px时使用

margin-right: 30px;

}

@media print{//如果要打印页面，使用该规则

body{

font-family: Times,"Times New Roman", serif;

}

实践建议

属性

盒模型

盒模型是css看待元素的一种方式，css将每个元素看作由一个盒子表示,每个盒子由一个内容区以及可选的内边距，边框和外边距组成。由内而外分别是:

border边框

color颜色

文本元素的字体颜色

body{

background-color: rgb(80%, 40%, 0%)//橙色

}

还可以指定0-255之间的一个数值,例如:

body{

background-color: rgb(204, 102, 0)//和上面颜色一致,255*80%= 204...

}

font-family字体

大多数计算机上通常只安装了部分字体,所以选择字体时要当心,通常指定的font-family包含一个候选字体列表,他们都来自同一个字体系列,候选字体用逗号分隔,大小写字母必须一致,最后总是放一个通用的字体系列名,如果一个字体名中包含多个单词,比如Courier New，如何指定？用引号,”Courier New”,如:

body{

font-family: Verdana, Geneva, Arial, sans-serif;<一一首选字体呈降序

}

字体系列

每个font-family包含一组有共同特征的字体。共有5个字体系列:

body{ font-size: small;}

h1{ font-size: 150%;}

h2{ font-size: 120%;}

注意老版IE不支持用像素指定的文本缩放

浏览器默认字体大小

其他属性

left指定一个元素的左边所在位置

top控制一个元素顶部的位置

background-image在元素后面放置一个图像,如

background-image: url(images/background.gif);

//用url括起来,注意没有引号

background-repeat背景图像是否重复

line-height: 1;//代表elixirs中的所有元素的行间距为其自己字体大小的1倍

}

width: 200px;

float: right;

}

background-color:#675c47;

color:#efe5d0;

text-align: center;

padding: 15px;

margin: 10px;

font-size: 90%;

clear: right;

}

width: 800px;

padding-top: 5px;

padding-bottom: 5px;

background-color:#675c47;

}

那么页面的宽度将被限制为800px，无论浏览器宽度如何变化都不会移动,但这会导致浏览器很宽时，右边有很多空白空间

凝胶布局 Jello

width: 800px;

padding-top: 5px;

padding-bottom: 5px;

background-color:#675c47;

margin-left: auto;

margin-right: auto;

}

绝对定位

position: absolute;

top: 100px;

right: 200px;

width: 280px;

}

display: table;

border-spacing: 10px;//于是不再需要div中的外边距

}

display: table-row;

}

display: table-cell;

background:#efe5d0 url(images/background.gif) top left;

font-size: 105%;

padding: 15px;

/ margin: 0px 10px 10px 10px;/

vertical-align: top;//确保表格两个单元格中的所有内容相对于单元格上边对齐，默认为中间对齐,可以设置为top,middle,bottom

}

display: table-cell;

background:#efe5d0 url(images/background.gif) bottom right;

font-size: 105%;

padding: 15px;

/ margin: 0px 10px 10px 10px;/

vertical-align: top;

}

html和css学习总结

本周我大概用了六天的时间完成了html和css的复习、制作考核网页以及完成了学长布置的五个学习小任务，总的来说，虽然完成了这一周的学习，但是对于一些知识点掌握的不是很牢固，使用不太熟练，之后还需要多加练习，对于本周的学习我有如下总结：

对于写网页需要的基础知识一定要牢牢掌握，比如，每个网页都需要的导航栏，一定要熟练掌握；下拉菜单最常用的是 ul和 li标签，也就是列表元素；对于一些标签，一定要知道是块级元素还是行内元素，要掌握他们之间的转换方法，这个也是非常常用的。对于css的盒子模型，一定要认真地学习，并且能熟练的运用。

是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。

弹性容器通过设置 display属性的值为 flex或 inline-flex将其定义为弹性容器。

弹性容器内包含了一个或多个弹性子元素。

注意：弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局。

弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。

当为父盒子设为flex布局，子元素的float、clear和vertical—align属性将失效

flex布局原理：通过给父盒子添加flex属性，来控制子盒子的位置好排列方式

flex布局父项常见的属性：

1.flex-diretion:设置主轴的方向

默认的主轴方向是x轴方向，水平方向；默认的侧轴方向是y轴方向，水平向下

属性值：row默认值从左到右

row-reverse从右到左

column从上到下

column从下到上

2.jusity-content:设置主轴上的子元素排列方式

属性值： flex-start默认值从头开始如果主轴是x轴，则从左到右

flex-end从尾部开始排列

center在主轴居中对齐（如果主轴是x轴则水平居中）

space-around平分剩余空间

space-between先两边贴边再平分剩余空间（重要）

3.flex-wrap:设置子元素是否换行

属性值： nowrap默认子元素不换行如果装不下，会缩小子元素的宽度，一块放到父元素中

wrap换行

4.align-content:设置侧轴的子元素排列方式（多行需要换行）单行无效

属性值： flex-start默认值在侧轴的头部开始排列

flex-end在侧轴的尾部开始排列

center在侧轴中间显示

space-around子轴在侧轴平分剩余空间

space-between轴在侧轴先分布在两头，再平分剩余空间

stretch设置子项元素高度平分父元素高度

5.align-items:设置侧轴的子元素排列方式（单行）

属性值： flex-start从上到下

flex-end从下到上

center挤在一起（垂直居中）

stretch拉伸（默认值）使用时子盒子不要给高度

例如：子元素居中默认主轴是x轴

主轴居中 jusity-content:center

侧轴居中 align-items:center

6.flex-flow:复合属性，相当于同时设置了flex-diretion和flex-wrap

flex布局子项常见属性

1.flex定义子项目分配剩余空间，用flex来表示占多少份数

flex:<number>;默认值 0

2.align-self控制子项自己在侧轴的排列方式

3.order属性定义子项的排列顺序（前后顺序）

给父元素添加 display:grid

display关于网格的取值分为两个，grid(块网格)和 inline-grid(行内网格行内块)

grid容器从上向下排列

inline-grid容器从左向右排列

grid-template-row;规定行属性

grid-template-column;规定列属性

1.绝对大小（根据列数或者行数确定值得个数）

grid-template-row：200px 200px 200px

grid-template-column：200px 200px 200px

2.百分比（根据列数或者行数确定值得个数）

grid-template-row：33.33% 33.33% 33.33%

grid-template-column：33.33% 33.33% 33.33%

3.repeat函数

grid-template-rows: repeat(3,33.3%);

grid-template-columns: repeat(3,33.3%);

4.repead auto-fill自动填充

grid-template-rows: repeat(auto-fill,33.3%);

grid-template-columns: repeat(auto-fill,33.3%);

5.fr片段

grid-template-rows: 100px 1fr 300px;

grid-template-columns: 100px 1fr 300px

6.minmax

grid-template-rows:minmax(100px,200px) 200px 300px

grid-template-columns:200px 200px 200px

7.auto

grid-template-rows: 100px auto 300px;

grid-template-columns: 100px auto 300px

列间距

1.grid-row-gap: 10px;

grid-column-gap: 10px;

复合写法

grid-gap: 10px 10px;

指定区域

1.grid-template-areas:'a b c'

'd e f'

'g h i';

区域合并时需要让合并的区域名字相同

grid-template-areas:'a a c'

'd e f'

'g h i';

.box div:nth-child(1){

grid-area: a;

}

以上两种网页布局方式是我制作网页时比较常用的，也是学习前端必须掌握的。

除了以上这些，还有很多是我们需要掌握的，加油吧继续学习！！！！！！下周分享js学习总结

html5基本知识点

一、HTML的开发工具和使用的浏览器

开发工具：记事本等文本编辑器，Atom、VisualStudioCode( VSCode)、Brackets、Sublime text和Hbuider。

浏览器：Chrome、Firefox、IE、Safari、IPhone、Android。

二、HTML的基本要素

DOCTYPE描述文档的类型

html网页的根元素，写在网页的在外面

head网页的头部信息，写在html标记的里面

body网页的内容，写在html标记的里面

具体

1、DOCTYPE描述文档的类型，规定web浏览器关于页面使用哪个 HTML版本进行编写的指令。

网页可以使用的具体版本，网页中可以使用那些标记，每个版本的DTD版本均有不同

使用例子

HTML4的例子

<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN""">

HTML5的例子

2、<html></html>网页文档中的根标记

html标签有三个特殊的属性

manifest指定网页缓存文件，可以让用户离线的时候也可以访问文件。

xmlns设置html名空间，比如把网页设置成xhml的时候可以使用这个值。

lang设置网页的描述语言，比如中文是zh；英文是en。

3、<head></head>头部标签在网页中只能有一个，设置HTML文档的头部信息，里面内容不会在页面中显示出来·。

head里面的标记

<meta>标记

<title>定义网页的标题

<link>链接

meta标记

4、<body></body>只能有一个，显示网页的主体内容。

代码示例：

请点击输入图片描述

1<!DOCTYPE html> 2<html lang="en"> 3<head> 4<meta charset="UTF-8"> 5<title>网页标题(显示在浏览器上)</title> 6<meta name="description" content="网页内容的简单描述"> 7<meta name="keywords" content="网页关键词"> 8<link rel="/css/style.css"> 9<script src="/js/script.js"></script>10</head>11<body>12<header>网页头部内容</header>13<main>网页主要内容</main>14<nav>网页的导航内容</nav>15<footer>网页的页脚内容</footer>16</body>17</html>

请点击输入图片描述

三、写在<head>中的标签

（一）、<meta>标签

name描述信息的名称，来标记这是一个什么样的信息

http-equiv描述行为

content描述的内容

charset指定网页的编码

1、name属性

1<meta name="author" content="nyw">23<meta name="description" content="meta标记学习">45<meta name="keywords" content="HTML,meta">6

2、http-equiv属性

1<meta http-equiv="refresh" content="30">23<meta http-equiv="refresh" content="5,url=dom.html">4

http-equiv描述网页的行为，行为 refresh刷新，内容为5，表示5秒后跳转到 dom.html这个文档。

3、content属性

特殊属性

content-type指定http头部信息的文字编码（最为常用）

default-style指定优先使用的样式单（stylesheet）

refresh用于网页的自动刷新或是页面跳转

set-cookie设置页面的cookie（现在已经不再推荐使用）

4、charset属性

指定网页的编码，推荐使用UTF-8来增加网页的兼容性。

代码实例：

为搜索引擎抓取机器人准备一些信息

这段代码可以禁止搜索引擎缓存和跟踪网页。

代码实例：

请点击输入图片描述

1<!DOCTYPE html> 2<html lang="en"> 3<head> 4<meta charset="UTF-8"> 5<title>网页标题(显示在浏览器上)</title> 6<meta name="author" content="nyw"> 7 8<meta name="description" content="meta标记学习"> 910<meta name="keywords" content="HTML,meta">1112<meta http-equiv="refresh" content="30">1314<meta http-equiv="refresh" content="5,url=dom.html">1516<meta name="robots" content="noindex,nofollow">1718</head>19<body>20</body>21</html>

请点击输入图片描述

（二）、title、base标记

title和base标记都是写在head标签中

title：设置网页的标题

写法：<title>内容</title>。

base：指定网页跳转基准URL，如果不指定的话默认为当前网站的当前路径。

写法：<base rel="external nofollow" rel="external nofollow" rel="external nofollow" href="">

base属性值：

href指定网页跳转到基准URL，如果不指定的话则默认为当前网站的当前路径。

<base rel="external nofollow" rel="external nofollow" rel="external nofollow" href="">这是将页面跳转到百度的网站打开。

target指定链接的跳转帧如果不指定的话，则是在当前页面中跳转。

<base target="_blank">网页中的链接都应该在新的窗口中打开。

terget属性值：

_blank在新窗口中打开被链接的文档

_self默认值，在相同框架中打开被链接的文档

_parent在父框架集中

_top在整个窗口中打开被链接文档·

framename在指定框架中打开被链接文档

（三）、link标记

link标记：链接外部文件时使用的标记，可以把外部文件的内容引入到当前文件中来，使当前网页实现更多的功能。

link属性：

href：指定链接外部路径的路径和文件名，要设置全路径并且带文件名

rel：引用文件，引用资源的类型定义

我们在使用link标签引用外部文件的时候，外部文件的类型是多种多样的。

alternate代替文档（种子，其他语言版本，其他格式等等）

author网页的作者

help帮助文件的链接

icon网页的图标

next如果是连续网页的时候，指定下一个网页

prefetch把链接外部资源时提前缓存起来。

prev如果是连续网页

media链接文件或是资源属于哪一种资源。

hreflang链接文件的语言种类

type链接文件的mi/me类型（比如说，图片图标文本）

sizes根据link链接文件的类型，来指定文件的大小

代码示例：

链接网页图标：

网站的图标指定，可以显示在浏览器的图标栏，也可以被手机读取作为网站的图标存入收藏夹

12<link rel="icon">34<link rel="icon" rel="external nofollow" href="img/favicon.png" type="image/png">5<link rel="shortcut icon" rel="external nofollow" href="img/favicon.ico" type="image/x-icon">6<link rel="apple-touch-icon" rel="external nofollow" href="img/apple-touch-icon.png" type="image/png">

注意：后面的href和前面type标注的类型要一致，这样既可以显示在浏览器，又可以显示在手机上

链接外部样式单

1<link rel="stylesheet">2<link rel="stylesheet" rel="external nofollow" href="style1.css" media="screen">3<link rel="stylesheet" rel="external nofollow" href="style2.css" title="主题样式文件">4<link rel=" alternate stylesheet" rel="external nofollow" href="style3.css" title="可选样式单">

说明：

alternate会在浏览器中会弹出一个对话框，供用户可以进行选择

media表示媒体类型为屏幕，可以是手机，但不包括打印机和投影仪

title对这个link进行简单的说明

网站RSS种子指定

为搜索引擎的准备的网页的URL

如果你还想了解更多这方面的信息，记得收藏关注本站。

AI定制祝福语惊艳你的朋友圈一键生成祝福语的ai助手dnf星光独角兽怎么获得(星光独角兽还能获得吗)