CSS基础知识点全面解析（转载）

2023-02-27 17:35:01html-css011

CSS基础知识点全面解析（转载）,第1张

基本

常识与实践

链接方式

基本

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

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

内部链接

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

<style>

p {

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

}

分类: 电脑/网络

问题描述:

在网页制作里什么是CSS样式 CSS是什么意思 ?

解析:

CSS是Cascading style Sheets的简称，中文译作“层叠样式表单”，我把它叫作“层叠样式表”，我感到这样顺口一

点，没别的意思。实际上它是一组样式。你可能对CSS这个名词比较陌生，实际上无论你用Inter Explorer还是

Netscape Navigator在网上冲浪，几乎随时都在与CSS打交道，在网上没有使用过CSS的网页可能不好找。不管你用什么工

具软件制作网页，都有在有意无意地使用CSS。用好CSS能使你的网页更加简炼，为什么同样内容的网页，有的人做出来有

几十KB，而高手做出来只有十几KB，CSS在其中的作用是不言而喻的。我把我在使用CSS中的一些小经验以及一些网友来信

提问的问题整理出来，供诸位参考。

1、CSS在网页制作中一般有三种方式的用法，那么具体在使用时该采用哪种用法？

当有多个网页要用到的CSS，采用外连CSS文件的方式，这样网页的代码大大减少，修改起来非常方便；只在单个网页

中使用的CSS，采用文档头部方式；只有在一个网页一、两个地方才用到的CSS，采用行内插入方式。

2、CSS的三种用法在一个网页中要以混用吗？

三种用法可以混用，且不会造成混乱。这就是它为什么称之为“层叠样式表”的原因，浏览器在显示网页时是这样处

理的：先检查有没有行内插入式CSS，有就执行了，针对本句的其它CSS就不去管它了；其次检查头部方式的CSS，有就执行

了；在前两者都没有的情况下再检查外连文件方式的CSS。因此可看出，三种CSS的执行优先级是：行内插入式、头部方

式、外连文件方式。

3、在Dreamweaver3中如何使外部文件式CSS？

在Dreamweaver3中使用外连文件式CSS并没有特殊要求，同样是用记事本创建一个*.css文件，在网页的<head>与

</head>之间加上一句这样的代码：<link rel="stylesheet" href="在这里填上你的CSS文件地址（相对路径+文件

名）" type=text/css>就行了。

4、如何用Dreamweaver3快速创建CSS外连式文件？

对于一个初接触CSS的网页设计人员来讲，要用记事之类的编辑器，去创建一个CSS外连式文件是相当困难的。由于

Dreamweaver3对CSS支持的很好，用它来帮助就轻松多了。具体可以这样操作：

1）先在纸上写好在网站的网页中可能要用到的格名称，然后在Dreamweaver3的编辑窗中调出CSS面板，一个一个地定

义，并在一个空白页上适当地写一点相关内容，边定义边试用，效果不满意，立即修改；

2）全部定义好后，再用记事本创建一个空的CSS外连式文件，把在<head>与</head>之间的那段定义好的CSS复制

到CSS文件中去，就大功告成了。整个过程就是点鼠标，方便吧？

5、在Dreamweaver3中采用行内插入式CSS要手动写代码吗？

不用！先用CSS面板定义好要用的CSS，然后，在要插入CSS的标记插入：class="page_speeder_800630679"，再把你刚才定义的CSS从<head>

后面拖到这个双引号中来，把花括号以外的部分删去就行了。

6、在方档头部方式和外连文件方式的CSS中都有“”，好象没什么用，不要可以吗？

这一对东东的作用是为了不引起低版本浏览器的错误。如果某个执行此页面的浏览器不支持CSS，它将忽略其中的内

容。虽然现在使用不支持CSS浏览器的人已很少了，由于互联网上几乎什么可能都会发生，所以还是留着为妙。

7、如何给一部分文字加背景色？

给文字加上不同颜色，在DW3中只要在属性面板上选取文字的颜色就行了，非常方便，但要给部分文字加不同的背景色

却没有相应的功能，我们可以先做一个定义背景色的CSS（如：bgstyle），在DW3中点几下鼠就完成了。如一个定义淡黄色

背景的CSS是这样的：

<!--

.bgstyle { background: #FFFFCC}

-->

</style>

在要用时选取那段文字，再在CSS面板上点一下“bgstyle”就行了。

8、如何给部分文字加背景图像？

与加背景色操作类似，中是在背景在选择加载图象就是了，一个定义好的加背景图象的CSS例子的代码是这样的：

<!--

.imgbgstyle { background-image: url(/logo.gif)}

-->

</style>

在要用时选取那段文字，再在CSS面板上点一下“imgbgstyle”就行了。

9、如何使页面的背景在文字“滚动”时背景图案静止不动？

要使背景图案不随文字“滚动”的CSS是这样的：

<!--

BODY { background: purple url(/bg.jpg)

background-repeat:repeat-y

background-attachment:fixed

}

-->

</style>

10、如何定义字间距？

在DW3中CSS的属性定义对话框（style Definition for .style1)的“Block”上的“letter spaceing”属性定义的就

是字间距，它指的是每一个字符之间的额外间距，经长度为单位，正负值均可，当取负值时产生字符挤在一起的效果。下

面代码是一个定义好的字间距CSS例子：

<!--

.style1 { letter-spacing: 3px}

-->

</style>

11、如何给文字加上划线、下划线、删除线和闪烁？

在DW3中CSS的属性定义对话框(style Definition for .style1)的“Type”上的“decoration”属性定义的就是这些

内容，要注意的是闪烁属性有些版本的浏览器不支持，少用为好。下面是一个定义好上述效果的CSS例子：

<!--

.style1 { text-decoration: underline overline line-through blink}

-->

</style>

其中： “underline”是定义下划线；“overline ”是定义上划线；“ line-through”定义的是删除线；“blink”

定义的是文字闪烁。

12、如何使网页具有“首行缩进”功能？

由于DW3输入空格不方便，利用“首行缩进”将弥补这个不足。在DW3中CSS的属性定义对话框（style Definition

for .style1)的“Block”上的“text-indent”属性定义的就是“首行缩进”，所谓“首行”是指每段内容的第一行，也

就是直接按回车键就形成了一个新的段落。缩进最好以“em”（字符）为单位，比如：汉字编排要求每段开始缩进两个汉

字，设置好的CSS如下所示：

<!--

.style1 { text-indent: 2em}

-->

</style>

在DW3要注意：在DW3中CSS的属性定义对话框（style Definition for .style1)的“Block”上的“text-indent”右

面的缩进单位选择框中“ems”指的就是“em”。

13、在用表格进行排版时，能使某一方向上的内容离开表格线一点吗？

可以！在DW3中CSS的属性定义对话框（style Definition for .style1)的“Box”上的“margin”定义的就是内容离

开边缘的距离，分别可定义四个方向：“top”“bottom”“left”“right”。下面就是定义在左边离开“10px”的CSS例

子代码：

<!--

.style1 { margin: 0px 0px 0px 10px}

-->

</style>

14、能给某部分内容加边框吗？

用CSS可以给某部分内容加边框，在DW3中CSS的属性定义对话框（style Definition for .style1)的“Border”定义

的就是边框线，“top”“bottom”“left”“right”四边可分别定义线的粗细和颜色，这些定义好后不要忘记在下面的

“style”中定义线型，否则将看不边框线，因为默认的线型是“none”。下面是一个定义了上边框为：蓝色细线；左边框

为：绿色中粗线的CSS例子：

<!--

.style1 { border: solidborder-width: thin 0px 0px mediumborder-color: #0000FF black black #00FF00}

-->

在瞬息万变的前端开发世界中，很难找到一个真正有意义的概念，并且将其清晰明了的向广大人民群众普及。

把目光投向CSS，一个重大转折就是CSS预处理器的出现（在工具方面来看），其中， Sass 应该是最为著名的一个。此外，还有 PostCSS ，它和Sass略有不同，但是殊途同归——都是用浏览器不能解析的语法编写，并且最终编译成浏览器能够理解的语法。

现在，又有一位新的成员出现了，它就是 CSS模块。本文就将介绍CSS模块化的诸多优点，以及如何编写模块化的CSS。

首先，让我们从官方文档入手：

事实稍微有一些复杂。由于类名需要默认具有局部作用域，这就涉及到一些初始设置、一个编译过程，以及其他一些难以琢磨的东西。

但是最终，我们会为CSS模块化带来的好处而开心：CCS模块将作用域限制于组件中，从而避免了全局作用域的问题。我们再也不用操心为组件寻找一个好的命名了，因为编译过程已经帮你完成了这个任务。

CSS模块需要在构建步骤进行管道化，这也就是说，它不是自动驱动的。它可以看成是 webpack 或 Browserify 的一个插件。其基本工作方式是：当你在一个JavaScript模块中导入一个CSS文件时（例如，在一个 React 组件中），CSS模块将会定义一个对象，将文件中类的名字动态的映射为JavaScript作用域中可以使用的字符串。举个具体的例子：

如下是一个简单的CSS文件。其中， .base 类名不需要是工程中唯一的，因为它将不会是真正被解析的类名。它可以看成是在JavaScript模块中使用的类在样式表中的别名。

下面是该CSS类在JavaScript组件中的使用方式：

最终，它将生成下面这个东西（当使用webpack的默认步骤时）：

当然，生成的类名可以通过配置，使得它的长度更短或者遵循一些特定的模式。当然了，这些最终都不重要（虽然短的类名意味着更短的样式表），重点在于这些类名是动态生成的、唯一的且和正确的样式表一一对应的。

这就是CSS模块工作的方式了。这时，你可能会想，“这到底是个什么玩意儿，我甚至。。。”。OK，停下！我知道你想说什么。现在就让我一一解答你可能有的疑虑。

这看起来太丑了

确实如此。但是类名并不要求一定要长的好看对不对？只要可以将样式正确的应用于元素就可以了嘛。而CSS模块化方法完成的非常好，所以我觉得，这不是一个问题。

这非常难debug啊

由于需要有一个编译的步骤，所以直接debug是非常困难的。其实，像Sass直接debug也是相当不容易的，所以我们才有了 sourcemaps 。对于CSS模块，我们也可以设置sourcemap。

其实，我还想说的是，虽然在模块中，类的名字是自动生成而不可预知的，但是对于模块来说，它还是比样式表更容易debug的。只要你知道当前在开发者工具中查看的样式属于哪个模块，在相应的样式表中也是很容易定位。

这使得样式不容易复用啦！

这句话既对也不对。一方面来说，确实如此。但这是因为模块将CSS样式和组件相绑定，从而不会发生全局样式的冲突。这其实是一件好事，我相信你也会同意的对不对。