CSS

2022-02-28 09:02:09

CSS的基础知识

基本概念

Css层叠样式表 html：文档页面的结构 css：样式 js：行为

基本语法

选择器：{

属性名1：属性值1；

属性名2：属性值2；

………..

}

选择器说明该样式加在那些元素上，属性名和属性值是样式的内容，每条后面用分号结尾（；）

使用方式

内联形式

使用了style属性，支队当前标签有效；并不利于维护和分工合作；

内部形式

在head里面使用<style>标签，样式对当前页面有效，内容和表现形式实现了一定程度的分离

外部形式

准备一个css文件

在html中引用css文件，在head中增加引用说明

内容和表现形式完全分离，而且任何需要改样式表中样式的页面都可以通过链接文件来实现。

颜色

自然界中颜色的数量是无穷的，计算机只能表示有限的颜色

颜色基本可以有三种基本颜色调和而成，红色 red ；绿色 green；蓝色blue

Css中颜色的表示方法

（1）16进制#ff0000掌握

（2）RGB rgb（128，0，0）掌握

（3）RGBA 在rgb颜色的基础上增加了一个表示透明的分量alpha

（4）HSL 用色调，饱和度，透明度三个分量来表示颜色 hsl（120，0，0）

（5）HSLA 在hsl颜色的基础上增加了一个表示透明的分量alpha

（6）预定义颜色 red yellow等掌握

background-color：背景颜色

基础属性

字体相关属性

属性	含义	取值
Font-family	字体体系	字体名称：宋体
Font-size	字体大小
Font-style	是否倾斜	Normal(正常)italic(倾斜)
Font-variant	是否大写	Normal/small-caps（小型大写）
Font-weight	字体粗细	Normal(400)/bold(700)/bolder/lighter/100/200/300…

可以简写，书写顺序

Font-style font-variant Font-weight Font-size Font-family

前面三个可以省略，使用默认值Font-size Font-family必须指定值

文本相关属性

文本颜色：color

文本装饰：text-decoration

文本方向：direction

文本对齐：text-align

大小写：text-transform

首行缩进：text-indent

字母之间的距离：letter-spacing

单词之间的距离：word-spacing

行高：line-height

背景相关属性

背景颜色：background-color

背景图片：background-image设置图片url地址

图片重复方式：background-repeat

Repeat：在水平、垂直两个方向复制

Repeat-x:在水平方向复制

Repeat-y：在垂直方向复制

背景位置：background-position

简写顺序：背景色背景图片重复方式位置

尺寸相关属性

高度：height

宽度：width

最大高度/最小高度：max-height/min-height

最大宽度/最小宽度：max-width/min-width

显示相关属性

隐藏元素的方法：

(1) visility：hidden 仅仅隐藏内容，该元素所占的位置依然存在

(2) display：none 不仅仅隐藏内容，而且不占位置

Display：可以设置元素显示模式

Display：block；内联元素以块级元素形式显示

Block：转块级元素

inline：将块级元素以内联（行内）元素形式显示，此时width和height属性无效

inline-block：将块级元素以内联（行内）元素形式显示，同时兼具块级元素的某些特征

可以使用width和height来设置所占位置的大小

盒子模型

外边距（margin）：

4个值（顺序：上右下左）bottom(下) top（上）left(左)right(右)

使用方式：

(1) margin：10px 表示上右下左间距都是10px

(2) margin-bottom：30px表示下边距为30px

(3) margin：10px 20px 30px表示上10px左右20px下30px

(4) margin：10px 20px 30px 40px表示上10px右20px下30px左40px

内边距（padding）:

(1) 也有上边距，与margin类似

边框(border)：

(1) 边框的宽度：border-width

(2) 边框的线条类型：border-style

(3) 边框的颜色：border-color

(4) 也可以使用更优化的书写方式

Border：1px solid red

（5）轮廓线：outline用法与border相同

选择器

选择器：指的是选择施加样式目标的方式

元素选择器

用标签名作为选择器，选中相应的元素

Id选择器

用id作为选择器，样式定义形式

#idname{

…..

}

属性选择器（class）

根据class属性来选择元素，样式的定义形式：

.classname{

……

}

关系选择器

CSS

并选择器

将相同的样式放在一起，使用的是并选择器，类名用英文状态下的“，”分割

写法：E,F()

CSS

通配符选择器

*{}

选中页面中所有的标签

CSS

伪类选择器

伪类名	描述
:active	选择激活的元素
:focus	选择有输入焦点的元素
:hover	选择鼠标悬停在上方的元素
:link	选择未访问的链接
:visited	选择已访问的链接
:first-child	选择第一个子元素

已访问和未访问

CSS

激活

CSS

伪元素选择器

伪元素名	描述
:First-letter	选择文本的首字母
:First-line	选择文本的首行
:after	在元素后面添加内容
:before	在元素前面添加内容