CSS样式总结

621 阅读6分钟

css介绍:

css全称为层叠样式表,通常又称为风格样式表,它是用来进行网页设计的。css拥有对网页对象和模型样式编辑的能力,并能够进行初步交互设计,是目前基于文本展示最优秀的表现设计语言。

一、css样式使用方法

在HTML页面中使用css样式有4种方法,分别为:1、内联样式(行内样式)

2、内部样式表(内嵌样式)

3、外部样式表(连接外部样式)

4、导入外部样式

1、内联样式

内联样式式混合在HTML标记力使用的,用这种方法,可以很简单的对某个标签元素单独定义样式。 <标记名 style="样式属性:样式属性值;样式属性:样式属性值:..."></标记名>

image-20210917202932782.png

2、内部样式表

在HTML中通过使用标签引入css样式。内部样式表续写在里面。

<style type="text/css">
    选择符1{样式属性:样式属性值;样式属性:样式属性值:...}
    选择符2{样式属性:样式属性值;样式属性:样式属性值:...}
    选择符3{样式属性:样式属性值;样式属性:样式属性值:...}
    ...
</style>
3、链接外部样式

外部样式是把css代码保存为一个单独的样式表文件,文件扩展名为“.css”,在页面中引入外部样式即可。

image-20210917210210912.png

4、导入外部样式

导入外部样式与链接外部样式的功能基本是一样的,大概意思就是链接是通过链接接css文件,而导入是直接将样式导入HTML文件中。

导入外部样式用import方式有以下几种方法

1、@import url(“样式表路径”);

2、@import url(样式表路径);

3、@import “样式表路径”;

4、@import ‘样式表路径’;

image-20210917211506283.png

二、选择器分类

标记选择器(标签选择器)

HTML页面是由很多标签组成的,有h1~h6、p、img等,所以这些标签名字也可以当标签选择器来使用。了解一下就好用处不大

image-20210917212307391.png

通用选择器

通用选择器用 ” * “ 号表示可以对所有元素生效是一个特殊的选择器,有些时候页面样式一直与自己编写的不符合就要检查代码中是不是这个选择器写错了。

ID选择器

ID选择器顾名思义每个样式与页面内容之间有固定的名字作为连接。

image-20210917213544580.png

类选择器

类选择器和id选择器几本一样

不同的是ID选择器 是 ” * “ id属性

类选择器用的是 ” . “ class属性

image-20210917214158643.png

属性选择器

[attribute] :用于选取带有指定属性和值的元素。

[attribute = value]:用于选取属性值中包含指定属性和值的元素。

[attribute ~ = value]:用于选取属性值中包含指定词汇的元素。

[attribute | =value] :用于选取带有已指定值开头的属性值的元素,该值必须是整个单词。

[attribute^ = value] :匹配属性值已指定值开头的每个元素。

[attribute$ = value ] :匹配属性值以指定值结尾的每个元素。

[attribute* = value] :匹配属性值中包含指定值的每个元素。

关系选择器
1、后代选择器

后代选择器又称为包含选择器,后代选择器可以选择作为某元素后代的元素,

后代选择器的基本语法格式:

E1 E2 {属性1:属性值1;属性2:属性值2;}

2、子选择器

子选择器只能作为某个元素的子元素。

语法格式:

E > F {属性1:属性值1;属性2:属性值2;}

3、相邻选择器

相邻选择器就是同一级别有一个共同的父元素

语法格式:

E + F {属性1:属性值1;属性2:属性值2;}

伪类选择器

语法格式:选择符:伪类{属性1:属性值1;属性2:属性值2;}

常用的伪类选择器有:

1、”:hover“。当鼠标悬浮在元素上方时,向元素添加样式。

2、”:link“。向未被访问的链接添加样式。

3、”:visited“。向已被访问的链接添加样式。

4、”:active“。向被激活的元素添加样式。

5、”:focus“。向拥有键盘输入焦点的元素添加样式。

6、”:first-child“。向元素的第一个子元素添加样式。

7、”:lang“。向带有指定lang属性的元素添加样式。

image-20210918091843297.png

以上几个已经被访问过的链接就会显示深蓝色,当鼠标移动到名称链接上时名称会变为绿色

image-20210918092045965.png

鼠标点击时名称会变为红色 所有颜色都可自行定义

image-20210918092242058.png

伪元素选择器

伪元素选择器并不是针对真正的元素对象使用的

语法格式:

选择符:伪元素{属性1:属性值1;属性2:属性值2;}

接下来写几个比较常用的伪元素选择器

  • E:first-letter 或者 E :: irst-letter 向文本的第一个字母添加特殊样式,仅用于块对象。
  • E: before 或者E : : before 可以和content属性一起使用,在元素之前添加内容。
  • E:after 或者 E:after 可以和content属性一起使用,在元素之后添加内容。
  • E:selection。设置对象被选择时的样式。

在css3中伪元素前面的单个冒号(:)要改为双冒号(::)

image-20210918104348136.png

选择器使用过程中的优先级

CSS全称为层叠样式表,因此对于页面中的某个元素,它允许同时应用多个样式进行叠加,然后呈现出页面最后多样的效果。

根据选择器类型从低到高排列:

  • 元素选择器(标签)和伪元素选择器。
  • 类选择器、属性选择器和伪类选择器。
  • ID选择器

根据引入方式从低到高排列如下:

  • 外部样式
  • 内部样式
  • 内联样式

内联样式>内部样式表>外部样式表, 也就是“就近原则” 简单了解即可

三、css单位

尺寸单位
  • %:百分比
  • in:英寸
  • cm:厘米
  • mm:毫米
  • px:像素
  • pt:point,大约1/72英寸;
  • em:它是描述相对于应用在当前元素的字体尺寸
  • rem:相对根元素字体尺寸的倍数,
颜色单位

RGB颜色可以进行简单了解,如果要学页面设计的话就要仔细学习了这里就只简单的给大家说一说

RGB为Red红色、Green绿色、Blue蓝色

这是光线的三原色,通过这三种颜色的组合可以组合初不同的颜色

而rgb(R,G,B)中这三个数值就代表这种颜色的多少

  • 颜色名:直接输入颜色名称(如:red)
  • rgb(xxx,xxx,xxx)输入颜色数值如:(255,230,250)最大值为255,最小值为0,通过数值大小来进行颜色的调换。
  • rgb(x%,x%,x%)百分比值:如:(20%,60%,80%)
  • rgba(xxx,xxx,xxx,alpha) alpha即为透明度,取值范围0~1,

image-20210918112250673.png

这次就先发这么多其余还有很多文字颜色样式等我稍后总结完以后再发!!!