前端——初识CSS

原创已于 2024-08-01 11:30:46 修改 · 761 阅读

15 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端 #备忘录模式

于 2024-07-11 09:58:13 首次发布

基本结构

CSS 全称层叠样式表或风格样式表，用于美化 HTML 网页。

Css 基本用法

选择器{
样式属性:值;

样式属性:值

...

}

在 HTML 中引入 CSS

在 HTML 文件中引入 CSS 样式的方法有:
行内样式:使用 HTML 标签的 style 属性设置 CSS 样式。
内部样式表:使用<style></style>标签设置 CSS 样式。
外部样式表:CSS 代码保存在.css样式表中，在 HTML文件中使用<1ink/〉标签引入样式表
样式优先级:就近原则。
越接近标签的样式优先级越高。
行内样式优先级>内部样式表优先级>外部样式表优先级

CSS3 基本选择器

标签选择器

一个 HTML, 文件由很多标签组成，每种HTML,标签都可以作为相应的标签选择器的名称。
标签选择器直接应用于 HTML 标签。
网页中相同的 HTML 标签，都会被设置样式。
标签选择器的基本用法:
标签名 {
样式属性:值;
样式属性:值;

类选择器

在 HTML 标签中，可以设置一个 class 属性，用于引用类样式。
一个 HTML, 标签可以引用多个类样式，类样式与类样式直接用空格隔开
具有相同类名的 HTML, 标签都会被设置样式，类选择器可以在页面中多次使用。

类选择器的基本用法

.类名 {
样式属性:值;

样式属性:值;

...

}

id 选择器

在 HTML, 标签中，可以设置一个 id 属性，用于引用特定的样式声明。
id属性的值在同一个 HTML 文档中必须是唯一的，即唯一标识符。
id 选择器在同一个页面中只能使用一次。
id 选择器的基本用法:
#id名称 {
样式属性:值;
样式属性:值;
...

}
基本选择器优先级
CSS3 基本选择器优先级:无论使用什么方式引入 CSS样式，都遵循id选择器 >类选择器 >标签选
择器。

Css3高级选择器

层次选择器
层次选择器在 CSS 中用来根据元素在 HTML 文档树中的层次关系，选择一个元素的特定的子元素或后代元素。
层次选择器的基本用法:
选择器类型描述
E F 后代选择器匹配E元素内的所有后代F元素
E>F 子选择器匹配E元素内的所有直接子F元素。
E+F 相邻兄弟选择器匹配E元素后面同级的、紧邻的兄弟F元素。
E F 通用兄弟选择器匹配E元素后面同级的所有兄弟F元素。

结构伪类选择器

结构伪类选择器在CSS中用来根据元素在文档结构中的特定位置或状态来选择元素。

基本用法
选择器         描述
E F:first-child                  匹配E元素的第一个子元素F。
E F:last-child                  匹配E元素的最后一个子元素F。
E F:nth-child(n)                  n=数字时，匹配E元素的第n个子元素F。n=even时，匹配E元素的偶数位的子元素F。n=odd 时，匹配E元素的奇数位的子元素F。F元素必须是E元素下的第n个子元素
E F:first-of-type                 匹配E元素下类型为F的第一个子元素。
E F:last-of-type                  匹配E元素下类型为F的最后一个子元素。
E F:nth-of-type(n)              匹配E元素下类型为F的第n个子元素

属性选择器

属性选择器在CSS中用来根据元素的属性及其值来选择这些元素。属性选择器的基本用法:
选择器                                  描述
E[attr]                匹配具有 attr属性的E元素
E[attr=val] 匹配具有 attr属性且 attr属性值为val(区分大小写)的E元素。
E attr =val 匹配具有 attr属性且 attr属性的值以 val 开头的E 元素。
E attr$=yal    匹配具有attr属性且 attr属性的值以 val结尾的E元素
Eattr*=val    匹配具有 attr属性目 attr属性的值包含 val的E元素:

CSS3 美化字体

字体类型

font-family 属性用于设置字体类型。
同时设置英文字体和中文字体时，要把英文字体写在中文字体之前。
字体类型可以设置多个，并按顺序匹配字体。
设置字体类型时，需要检查计算机中是否有该字体的存在。.font-family 属性的基本用法:
font-family:"字体名称"，"字体名称";

常见的字体大小单位

字体大小单位描述
px 指定字体大小为固定的像素值
rem 相对于根元素(即HTML元素)的字体大小。默认情况下 1rem=16px。
em 相对于父元素的字体大小。

字体风格属性

font-style 属性用于设置字体风格。
font-style 属性的基本用法:
font-style:字体风格值:

常见的字体风格属性值

字体风格描述
(默认值) normal标准字体样式。
italic 斜体字体样式(直接设置倾斜字体)
oblique 倾斜字体样式(让没有倾斜字体的文本有倾斜效果)

字体粗细

font-weight 属性用于设置字体风格。
font-weight 属性的基本用法:
font-weight:字体粗细值

常见的字体粗细

字体粗细描述
normal(默认值) 标准的字体。
bold 粗体字体。
bolder更粗的字体。
lighter更细的字体。
100~900定义由细到粗的字体。400等同于normal，700等同于bold

字体综合属性

font 属性用于设置字体的所有属性。
font 属性的基本用法:
font:字体风格字体粗细字体大小字体类型

CSS3 美化排版网页文本

文本颜色

color 属性用于设置文本颜色,
color 属性的基本用法:
color:颜色值:

常见的颜色值表示法

颜色值表示法使用方式           描述
单词表示法 black                 red表示红色、green 表示绿色blue 表示蓝色等。
RGB表示法    rgb(r,g,b)              RGB 即红绿蓝三原色模式，r、g、b参数的取值范围为0~255.
十六进制表示法  #FAFAFA   RGB 的十六进制表示方式。
RGBA表示法 rgba(134,132)       可以和 RGB 表示法相互转换。在 RGB的基础上增加了alpha 透明度,取值范围为 0~1，0为完全透明。

文本水平对齐方式

text-align 属性用于设置文本水平对齐方式。

基本用法

text-align:水平对齐方式
水平对齐方式描述
left(默认值) 左对齐
right 右对齐。
center 居中对齐。
justify 两端对齐。

文本垂直对齐方式

vertical-align 属性用于设置文本垂直对齐方式，该属性比较不常用。

基本用法

垂直对齐方式;vertical-align:

常见的垂直对齐方式

文本垂直对齐方式

垂直对齐方式                描述
baseline(默认值)         基线对齐。
middle 垂直居中。
top                               顶部对齐。
bottom 底部对齐。

文本首行缩进

text-indent 属性用于设置文本首行缩进,
基本用法

text-indent:缩进大小;

文本行高

line-height 属性用于设置文本行高。
基本用法

line-height:行高大小/倍数

文本装饰

text-decoration 属性用于设置文本装饰。
text-decoration 属性的基本用法:
text-decoration:装饰值:

常见的文本装饰

文本装饰                           描述
(默认值)none                标准文本
underline                设置文本下划线。
overline                设置文本上划线。
line-through                设置文本删除线。

文本阴影

text-shadow 属性用于设置文本阴影,
text-shadow 属性基本用法:
text-shadow:阴影颜色 x轴位移轴位移模糊半径

常见配置

配置                              描述
阴影颜色                  如果不设置，默认使用文本颜色。
x轴位移                x>0 时阴影向右偏移。
y轴位移                y>0 时阴影向下偏移。
模糊半径                模糊半径值越大阴影越模糊

CSS3 美化超链接

超链接伪类
超链接标签〈a>/a〉会根据用户单击访问前、鼠标悬浮在超链接上、单击未释放、单击访问后的四个状态显示不同的超链接样式。

通过超链接伪类，可以设置超链接标签的多态样式。

超链接伪类

伪类名称描述
a:link                单击访问前的超链接样式
a:visited           单击访问后的超链接样式
a:hover            鼠标悬浮在其上的超链接样式。
a:active 单击未释放的超链接样式
伪类的设置顺序，必须遵循 link、visited、hover、active 的顺序。

CSS3 美化列表

list-style-type/list-style 属性用于设置列表样式。

基本用法

list-style-type:列表样式:
list-style:列表样式:
常见的列表样式:
列表样式                描述
none                无标记符号
disc           实心圆点。
circle                空心圆点。
square           实心正方形。
decimal 数字。

CSS3 美化背景

背景颜色

background-color 属性用于设置网页元素的背景颜色。background-color 属性的基本用法:
background-color:颜色值

背景图片

background-image 属性用于设置网页元素的背景图片。background-image 属性的基本用法:
background-image:url(“图片路径");

背景平铺

基本用法

background-image 属性设置的背景图片默认情况下会自动向水平方向和垂直方向重复平铺。background-repeat 属性用于设置网页元素背景图片的平铺方式。

背景平铺方式

背景平铺方式描述
repeat                   沿水平和垂直两个方向平铺。
no-repeat 不平铺，背景图片只显示一次。
repeat-X                只沿水平方向平铺。
repeat-y                只沿垂直方向平铺:

背景定位

background-position 属性用于设置网页元素背景图片的定位。

基本用法

background-position:定位方式

背景定位方式

定位方式                          描述
Xpos pos          使用像素值表示背景图片的位置。
Xpos                 表示水平偏移，X>0时背景图片向右偏移。
Ypos                 表示垂直偏移，Y>0时背景图片向下偏移。
X% Y%             使用百分比表示背景图片的位置。
方向关键字       方向关键词:left、right、center、top、bottom。
使用方向关键字自由组合，默认为center。

背景尺寸

background-size属性用于设置网页元素背景图片的尺寸。background-size 属性的基本用法:
background-size:尺寸大小;

背景尺寸大小           描述
auto   背景图片尺寸保持原样
X% Y%             使用百分比表示背景图片的尺寸大小。
cover                背景图片缩放充满整个容器
contain             在背景图片保持宽高比的情况下，缩放到宽度或高度正好适合整个容器。

背景属性

background 属性用于简写背景样式。
background 属性的基本用法:
background:背景颜色背景图片背景定位背景平铺

CSS3 渐变

线性渐变
线性渐变是颜色沿着一条直线过渡:从左到右、从上到下等。

基本用法
background-image:linear-gradient(渐变方向，颜色1，颜色2);
渐变方向
渐变方向                          描述
to bottom        颜色1从顶部到底部向颜色2渐变
to right 颜色1从左边到右边向颜色2渐变
to top left        颜色1从右下到左上向颜色2渐变，
注意：不同的浏览器对渐变的支持不一样，为了适配浏览器，在编写样式的时候需要在用法上加上每种浏览器对应的前缀。

常见的浏览器样式前缀
样式前缀                描述
-ms-             适配 IE浏览器
-webkit-        适配Chrome内核浏览器和Safari 浏览器
-o-                适配欧朋浏览器
-moz一适配 Firefox 火狐浏览器