CSS基础语法

首页 > 代码库 > CSS基础语法

2024-11-19 10:53:02 204人阅读

一、引入CSS样式的三种方式

1、行內样式表：在HTML标签中，使用style=""的形式引用

优点：使用灵活，优先级权重最高

缺点：不符合w3c关于内容与表现分离的要求。代码杂乱，不利于后期维护、样式复用

2、内部样式表：在<head></head>标签中，使用style标签包裹css代码

特点：一定程度的实现了HTML与css的分离，但是分离不够彻底，没有办法多页面公用样式

3、外部样式表：讲css代码全部写到一个css文件中，使用link标签，将HTML文件与css 文件关联

优点：彻底实现HTML与css的分离，符合W3C规范，有利于多页面复用统一样式

【导入css文件的两种方式】

① 在<head>标签中，使用link链接

② 在<style>标签中，使用@import导入：

@import url("css/02-CSS导入方式和优先级.css");

[两种导入方式的区别]

① link属于标准HTML标签，而@import不是标签

② link可以兼容所有低版本浏览器，而@import只在css2之后能用

③ link是将两个文件连接起来，起桥梁作用；而@import相当于将css文件复制到HTML文件中

④ link会在HTML文件边加载的过程中，边链接css文件；

@import会在HTML文件全部加载完后，再导入css文件

综上所述，我们使用link链接的方式，加载css文件

二、选择器

（一）标签选择器：

1、写法：HTML标签名{ }

2、作用：根据选择器名称，选中页面中所有的HTML标

li{                              
 color: red;
 }

（二）类选择器（class选择器）

1、写法：.class名{ } 调用在HTML标签中，使用class=“class名”调用选择器

2、优先级：class选择器>标签选择器

.li1{                            
            color: blue;
            }

（三）ID选择器：

1、写法：#ID名{ } 调用：在HTML标签中，使用id=“id名”调用选择器

2、优先级：ID选择器>class选择器

#first{                           
            color: green;
            }

（四）通用选择器：

1、写法：*{ }

2、作用：选中页面中分所有的标签

3、优先级：最低

*{                             
 
 }

【选择器的注意事项】

1、class选择器与ID选择器的区别

①写法不同：class选择器使用.声明，而ID选择器使用#声明；

②优先级不同：当作用于同一标签时，ID选择器优先级高于class选择器；

③在同一个HTML文件中，ID是唯一的，所以id选择器只能作用于一个标签上。

但是class选择器可以作用于N个标签

2、选择器的命名规则：

只能有：字母、数字、下划线、减号组成

开头不能是数字

3、选择器的优先级排序：

①首先遵循的是“近者优先”原则，哪个选择器作用于最里层标签，则那个选

择器生效

②当作用于同一层标签时，优先级排序如下：

D选择器>class选择器>标签选择器>通用选择器

（五）交集选择器

1、写法：选择器1选择器2...

多个选择器之间紧挨着，没有任何分隔

2、作用效果：一个标签要满足交集选择器，则必须满足交集选择器中出现的

所有选择器

#first.li1{                  
            color: red;
            }

（六）并集选择器

1、写法：选择器1，选择器2，...

2、生效规则：只要满足并集选择器中的任意一个，即可生效

#first,.li1{                 
            color: red;
            }

（七）后代选择器

1、写法：选择器1 选择器2 ...选择器n 选择器之间用空格分割

2、生效规则：必须满足，后一个选择器是前一个选择器的后代，才会生效

ul .li1{                      
            color: red;
            }

（八）子代选择器

1、写法：选择器1>选择器2>...>选择器n 选择器之间用>分割

2、生效规则：必须满足，后一个选择器是前一个选择器的直接子代，才会生效。隔代，即中间包含其他标签，不会生效

div>ul>.li1{              
            color: red;
            }

【选择器的优先级】

1、第一原则：近者优先。作用于最里层的选择器生效

2、当作用于同一层时：每种选择器所占优先级，可以进行运算获得

标签选择器占权重1

类（class）选择器占权重10

id选择器占权重100

行级样式表style=""占权重1000

例如：

.div1 #div2 div3 .div4 #li{ }221

.div1 .div2 #div3 #div4 #li{ }320

注意：只有交集、后代、子代选择器，才参与优先级的累加

交集选择器相当于写了多个选择器，没有总优先级

#div,div{}并集选择器相当于两个选择器，分别是：100 1

3、如果计算出的优先级完全相同，则后写的选择器生效

三、文本属性

（一）CSS中的颜色单位：

1、使用颜色名称表示：red/blue/green

2、使用十六进制数表示：#ffffff #000

3、使用rgb（255,255，0），三个数值分别表示red、blue、green，范围0-255

rgba(255,255,0,0.5)，第四位表示透明度，可选值0-1,0表示全透明，1表示不透明

（二）CSS常用文本属性：

1、字体字号类

① font-weight：字体粗细。bold加粗、normal正常、lighter变细；

也可以通过100-900数值设置，400=normal，700=bold

② font-style：设置斜体。italic倾斜、normal正常

③ font-size：字体大小。可以使用px单位，可以使用百分比（表示的是浏览器默认大小的百分比，浏览器默认字体大小为16px）

④ font-family:字体系列（字体族）。

>>>可以直接写字体名，也可以写字体系列名。

>>>常用字体系列：sans-serif 非衬线字体 serif 衬线字体

>>>可以接受多个值，多个字体间用逗号分隔，表示的是，从第一个字体开始显示，如果电脑不支持第一个，依次顺延。通常，最后一个值放字体系列名（字体族）。当前面的字体都不支持时，推荐浏览器从规定的字体族中选择一个字体显示

【font缩写形式】

font：italic bold 18px/1.8 "黑体","微软雅黑",sans-serif

>>>缩写形式的顺序

font-style font-weight font-size/line-height font-family;

>>>多个样式之间用空格分隔；

>>>字体大小与行高，必须作为一组，用/分隔；

>>>font-family的多个字体之间用,分隔

2、字体颜色

① color：字体颜色可以使单词、十六进制、RGB等

② opacity：透明度，可选值0-1

[opacity和rgba区别]

>>>rgba本身可以设置颜色，而opacity必须配合其他颜色属性来用

>>>rgba仅仅是让当前元素设置的颜色透明；

opacity，会让当前元素里面的所有文字、背景、子元素都透明

3、行距、对齐、其他类

① line-height：行高。

可以写px单位，可以直接写数字（表示默认行距的几倍）

可以写%（表示默认行距的百分比）

>>>行高重要作用：让单行文字在div垂直居中

设置行高=div的高度，即可让单行文字垂直居中

② text-align：设置区域内的行级元素水平对齐方式left/center/right

③ letter-spacing：字符间距，字与字之间的距离

④ text-decoration：文本修饰

下划线underline、上划线overline、删除线line-through、none

⑤ overflow：设置超出区域的文字显示方式

hidden：超出区域的文字直接隐藏，无法看到；

scroll：无论文字多少，都会显示水平和垂直方向的滚动条；

auto：（默认效果）文字少的时候没有滚动条，文字多的时候自动显示垂直滚动条

也可以使用overflow-x和overflow-y单独设置水平和垂直方向滚动条是否显示

overflow-y：scroll overflow-x：hidden

⑥ text-overflow：设置行末多余文字的显示方式：

>>>clip-多余文字裁剪掉 ellipsis-多余文字省略号显示

>>>显示省略号，需配合white-space: nowrap;使用

>>>【重点】设置行末显示省略号：

white-space: nowrap; 如果是中文，需设置行末不断行

overflow: hidden; 设置控件超出范围隐藏

text-overflow: ellipsis; 设置多余文本省略号显示

⑦ white-space: nowrap;：设置中文行末，不断行显示

⑧ text-indent：首行缩进

⑨ -webkit-text-stroke: 0.5px blue;：文字描边

-webkit-表示只有webkit内核的浏览器生效，常见的有chrome、safari

⑩ text-shadow:文本阴影，有四个属性值，空格分隔

>>>水平阴影距离，正数表示阴影右移，负数左移；

>>>垂直阴影距离，正数表示阴影下移，负数上移；

>>>阴影模糊距离，0表示阴影一点不模糊；

>>>阴影颜色

eg:text-shadow: 5px 5px 2px blue;

四、css常用背景属性

1、background-color：背景色

2、background-image：背景图。

使用url("")选择背景图片。背景图和背景色同时存在时，背景图覆盖背景色

3、background-repeat：背景图的重复方式

no-repeat不平铺、repeat平铺、repeat-x x轴平铺epeat-y y轴平铺

4、background-size：背景图的大小

[指定宽度高度]

>>>宽度高度的指定，可以写px，也可以写%（父容器宽高的百分比）

>>>当写两个属性时，分别表示宽度、高度；

当写一个属性时，表示宽度，高度将会等比缩放

[其他属性]

>>> contain:图片等比缩放，直到宽或高中较大的一边缩放到100%为止（可能导致

较短的一边<100%，图片无法覆盖住全部区域）

>>> cover: 图片等比缩放，直到宽或高中较小的一边缩放到100%为止（可能导致

较大的一边>100%，图片超出区域显示不全）

5、background-position：背景图偏移量

>>> 指定位置：left/center/right top/center/bottom

当只写一个属性值时，另一个默认居中

>>指定坐标：两个属性分别表示：水平位移垂直位移

①坐标的值：可以是px单位，也可以是百分数

②当写px单位时：

水平方向：正数右移负数左移

垂直方向：正数下移负数上移（左负右正，上负下正）

③当写%比分数时：

一般只能是正数。表示的是，去掉图片的宽高，剩余空白区域的分布比

eg：background-position：30%; 水平方向去掉图片宽度，剩余区域3:7分

五、伪类选择器

1、写法：为类选择器，在选择器后面，用：分隔，紧接伪类状态；

eg： .a:link

2、超链接的伪类状态：

:link-未访问状态

:visited-已访问状态

:hover-鼠标指上状态

:active-激活选定状态（鼠标点下未松）

注意：当超链接多种伪类状态同时存在时，必选按照link-visited-hover-active的顺序，否则会导致部分选择器不生效

3、input的伪类状态：

:hover

:focus-获得焦点状态

:active

注意：当input的多种状态同时存在时，必选按照上面的顺序

4、其他标签，基本只用:hover事件

六、CSS盒模型

（一）margin:外边距

1、只写一个值：表示四周的外边距均为指定的值

2、写两个值：第一个数为上下外边距，第二个数为左右外边距

3、写三个值：分别表示上、右、下三个方向，左边默认等于右边

4、写四个值：表示上、右、下、左四条边顺时针方向

5、margin:0 auto;设置块级元素，在父容器中水平居中！

（二）padding：内边距

设置方式与margin完全相同

注意：设置padding，将会导致div区域被撑大！！！使用时必须注意div实际的宽高为多少

（三）边框

1、设置边框需要三个属性：宽度样式颜色

原则上，三个属性缺一不可，顺序可以随便修改

2、可以使用top、right、bottom、left分别设置四个边

（四）、当父盒子包裹子盒子，给子盒子添加margin-top时，子盒子与父盒子的上边线并不能分开，而是会导致，两个盒子同时下来

[解决办法]

1、给父盒子添加一点padding-top，不推荐使用，会导致父盒子结构多余1px padding

2、给父盒子添加1px的border-top，同样会导致1px的多余空间，不推荐使用

3、给父盒子或子盒子添加浮动，可能会由于浮动，一定程度的影响页面布局

4、给父盒子添加overflow属性，推荐使用的方式

（五）、border-radius 圆角

1、border-radius可以接收8个属性值，分别表示：

X轴（左上、右上、右下、左下角）/Y轴（左上、右上、右下、左下角）

2、缩写形式：

只写X轴，Y轴默认等于x轴；

四个角写不全，默认对角相等；

只写一个值，默认个值均等

eg：border-radius：50px 20px；

=border-radius：50px 20px 50px 20px;

=border-radius：50px 20px 50px 20px/50px 20px 50px 20px;

3、当圆角弧度>=正方形的一半，将会显示为圆形

（六）、border-image 图片边框

1、border-image:一共可以放10个属性值：

① 图片的路径：url（）

② 图片的切片宽度：四个值，分别代表上、右、下、左四条边；

通过4条切线切割，可以将图片分为9宫格。9宫格四个角分别对应边框

的四个角（不会进行任何拉伸），9宫格四个边分别对应四条边框（会根

据设置进行拉伸/平铺/重复等操作）

注意：写的时候，必须不能带px单位！！！

③ 边框的宽度：4个值，分别代表上、右、下、左四条边框的宽度；

注意：写的时候必须带px单位，与切片宽度用/分隔！

④ 边框的重复方式：stretch(拉伸)、round(铺满)、repeat(重复)

[round与repeat区别]

round：会对四条边进行适当的拉伸压缩，确保四条边可以重复整数次

repeat：会保持每条边的长度比例不变，可能导致四角处，无法显示一条

完整的边

2、属性值写法： border-image:① ②/③px ④;

3、border-image在website内核的浏览器中，必须带-webkit-前缀

（七）、box-shadow 盒子阴影

1、6个属性值，空格分隔：

①x轴阴影距离（必选）：可正可负，正-右移，负-左移；

②y轴阴影距离（必选）：可正可负，正-下移，负-上移；

③阴影模糊半径（可选）：只能为正数，默认为0，数值越大，阴影越模糊

④阴影扩展半径（可选）：可正可负，默认为0，数值增大，阴影扩大

数值减小，阴影缩小

⑤阴影颜色（可选）：默认为黑色

⑥内外阴影（可选）：默认为外阴影。inset-内阴影

（八）、outline 外围线：

显示在border外面，并且不会占据空间。可能会覆盖四周的内容

（九）盒子模型分类

1、标准盒子（W3C盒子）：我们设置的宽度和高度，仅仅包含content部分

再添加padding或border，会导致盒子变大

2、IE盒子（怪异盒子）：我们设置的宽度和高度，包含content+padding+border；再添加padding或border，会压缩content区域，但盒

子总大小不变；

[手动设置盒子类型]

box-sizing: border-box; 怪异盒子；

box-sizing: content-box; 标准盒子；默认效果。

七、浮动

1、标准流中的块级盒子，宽度将会自动伸为100%；

而浮动的块级盒子，宽度不会自动伸展，而是由内容撑开

2、当一个盒子浮动，标准流中未浮动的其他盒子，将视浮动盒子不存在而

占据浮动盒子原来的位置。（浮动盒子，会盖在这个盒子的上方）

但是，未浮动盒子中的文字内容，将会受到浮动盒子宽度的影响（未浮

动盒子中的内容，不会被浮动盒子盖住）

3、由于第二条的原因：

可以给受影响的盒子，添加clear属性，清除掉浮动盒子对自身的影响

clear可选值：left-清除左浮动影响，right-清除右浮动影响，

both-同时清除左右浮动影响（常用）

4、父盒子没有指定高度。如果子盒子没有浮动，则父盒子的高度可以被子盒子撑开

如果，父盒子中的方所有子盒子都浮动，则父盒子高度将变为0

[解决所有子盒子浮动，父盒子高度塌陷问题]

①给父盒子也添加浮动

②给父盒子添加overflow属性，推荐使用！！！

③在父盒子最后添加一个高度为0的空div。给这个div添加clear: both;属性，清除掉浮动

效果

八、定位

（一）相对定位 relative

1、使用position: relative; 设置元素为相对定位的元素；

2、使用top、left、bottom、right调整元素位置。当left和right同时存在时，

left生效；当top和bottom同时存在时，top生效。

3、定位机制：

① 相对定位是相对于自己原来的位置定位，当top等属性不指定时，元素位置不会发生改变；

② 相对定位，不会释放掉元素在原有文档流中的位置。不会影响其它文档流元素的位置

4、关于元素z轴重叠：

① 定位元素，默认的z轴高于普通文档流元素

② 同为定位元素，“后来者居上”。后面的盖住前面的。

③ 可以使用z-index手动调节定位元素的上下层z轴顺序

z-index默认为0.而且只能作用于定位元素。

（二）绝对定位

1、使用position: absolute;设置元素为绝对定位

2、定位机制：

① 相对于第一个非static【静态的，没有定位的】定位的祖先元素进行定位

（即，相对于第一个使用了relative、 absolute、fixed定位的先元素进行定位）

② 如果所有的祖先元素都未定位，则相对于浏览器左上角进行定位

③ 使用absolute的元素，会从文档流中完全删除。原有空间会被释放

（三）固定定位 fixed

1、使用position: fixed;设置固定定位

固定定位，是一种特殊的绝对定位，只是祖先元素无法使用定位锁住；

2、定位机制：

永远相对于浏览器的左上角进行定位，而且不随滚动条的滚动而滚动

[z-index 属性]

1、作用：根据z-index属性设置的数值，决定元素在z轴方向上的层叠次序

2、使用要求：

① z-index 只能给定位元素调整层叠次序。

relative、absolute、fixed

② 元素的z-index属性，要考虑父容器z-index的约束；

>>>如果父容器设置了z-index属性，则子容器的所有元素，将不能脱离

父容器层次的约束（即，父容器设置了z-index，则自容器只能以父容器的

数值为准。再给子容器设置z-index，只能调整子容器在父容器层次之内的

层叠次序）

>>>如果父容器没有设置z-index，或者设置为z-index:auto;

则子容器调整z-index将不受父容器影响

3、z-index:auto;&z-index:0;的异同：

① z-index:auto;是默认值，与z-index:0;处于同一平面；

② z-index:0;会约束子元素必须与父容器在同一平面

z-index:auto;不会约束子元素的层次

[clip属性]

1、作用：clip属性用于裁切图片标签，显示图片的指定区域；

2、使用要求：clip属性，只能作用于有absolute或fixed定位的图片标签上

3、clip属性，接收一个rect()函数，函数传入四个值，分别表示上、右、下、

左四条切线的位置

注意：与其他属性不同的是，rect中的四个值，上、下两个值的距离都是从上边量

取左、右两个值的距离都是从左边量取

（四）负边距的使用

1、实现块级元素在父容器中水平垂直居中

① 设置子容器为定位元素；

② left: 50%; margin-left: -width/2;

top: 50%; margin-top: -height/2;

2、使用负边距增大元素宽度

① 子容器的宽度，不指定；只指定高度，或者由内容撑开高度；

② margin: 0px -50px;可以使左右两边，均超出容器50px

九、CSS3新增属性

（一）display 属性

可以设置元素以何种状态显示

none：隐藏元素；

block：显示为块级元素；

inline：显示为行级元素；

inline-block：显示为内联块级元素。本身将是一个行级元素，但是，拥有块级元素的

所有属性。比如宽度、高度、margin、padding等

[常见的inline-block级别的标签]

[隐藏一个元素的方式]

1、宽度或高度设为0px，配合overflow: hidden;属性

2、display:none; 显示display:block;

3、opacity:0;设为全透明。但是元素的空间会占据

4、visibility: hidden;隐藏元素，但是元素所在空间依然会占据。

与opacity:0;效果很像

（二）CSS3新增的属性前缀

1、-webkit-:Chrome/Safari浏览器；

2、-moz-：火狐浏览器；

3、-ms-：IE浏览器；

4、-o-：Opera欧朋浏览器

（三）CSS 长度单位

1、px：表示像素。长度是固定的，表示占分辨率的几个像素点

2、%：表示相对于默认值的百分比

3、em：长度与元素的字号挂钩。表示几倍字号

4、rem：与根元素的字号挂钩。即，与<html>标签的font-size挂钩

如果不设置则默认字号为16px

[em与rem区别]

em是与当前元素自身的font-size挂钩，如果当前元素没有设置，则向上查找

最近的祖先元素字号，直到根字号

rem与当前元素字号无关，直接与跟字号挂钩。

（四）CSS3背景属性

1、background-clip: 设置背景图或背景色的裁切显示区域

>>> border-box 从边框外缘开始显示

>>> padding-box 从边框内缘开始显示

>>> content-box 从文字内容区域开始显示

>>> 如果不在显示区域的背景图或背景色，会被裁切掉不显示

2、background-origin:设置背景图从哪里开始定位

>>> border-box：背景图左上角从边框外缘开始；

>>> padding-box：背景图左上角从边框内缘开始；

>>> content-box：背景图左上角从文字内容区域开始；

3、background-origin 不会改变背景图显示区域的大小，只是决定背景图的左上

角从哪里开始定位

background-clip 只负责裁切出显示区域，但是并不关心背景图定位在哪

4、background-attachment:背景图的附着方式

>>> scroll：背景图跟随区域滚动。默认效果

>>> fixed：背景图充满整个区域，并且背景图是固定的，不随滚动条滚动

5、background 缩写形式

background：background-color background-image background-repeat background-attachment background-position

（五）transition:过渡属性，接收四个属性值

① 设置哪个CSS属性，参与过渡；可以直接指定all/none

② 过渡多少时间完成。通常.3s .5s

③ 过渡的样式效果。通常选ease

④ 过渡延时几秒后再开始。可以省略不写

transition属性可以同时定义多个过渡效果，用逗号隔开

eg：transition: width .3s ease,height .3s ease;

（六）transform 定义变换属性

1、常用的变化函数：

>>>translate(10px,10px)平移，第二个不写默认为0

>>>scale(1.5)缩放，第二个不写，默认等于第一个

>>>rotate(90deg) 旋转，默认绕z轴转可以使用rotateX()等

>>>skew(20deg,20deg) 扭曲，水平、垂直方向扭转多少度；

2、transform可以同时实现多种变换，用空格分隔

eg：transform: scale(1.5) skew(20deg,20deg);

3、transform-origin:定义变换起点，常用于旋转变换

可选值：left/center/right top/center/bottom

也可以直接定义x、y轴坐标点，第一个数为x轴

例如：transform: rotate(90deg);

transform-origin:right bottom;

表示：绕右下角旋转90°

（七）CSS3动画的使用

1、声明一个关键帧（动画）

@keyframes name{

from{ }

to{ }

}

阶段的写法：

① 可以直接使用from-to的写法

② 可以设置0%-100%的写法，但开头和结尾必须是0%和100%

2、在CSS选择器中，使用animation调用声明好的动画；

【animation的缩写形式】

Animation-name:动画名称，就是我们声明的关键帧name

Animation-duration：动画持续时间

Animation-timing-function：动画速度曲线

Animation-delay：动画开始的时间，延迟

Animation-iteration-count：动画播放次数，默认为1.无限次表示infinite

Animation-direction：动画在下一个是否逆向播放，默认为normal表示不进行逆向播放，alternate表示下一次将逆向播放（100%-0%）

Animation-fill-mode：表示动画结束后停留在何种状态。要使用这个属性，动画的执行次数必须是有限次。（forwards：表示动画停留在结束状态 backwords：表示动画停留在初始状态，默认效果）

>>> Animation-name和Animation-duration必须要设置，其他的选填；

>>> Animation可以同时设置多个动画，多个动画之间用逗号分隔

animation: frame1 1s,frame2 2s;

CSS基础语法

声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉：投诉/举报工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。

联系
我们

首页 > 代码库 > CSS基础语法

CSS基础语法

看完仍有疑问？有类似问题直接问程序猿