【CSS】网页样式设置之CSS简介

最新推荐文章于 2021-12-13 22:45:22 发布

秋洛颍

最新推荐文章于 2021-12-13 22:45:22 发布

阅读量706

点赞数 1

文章标签： CSS 样式表 B/S

本文链接：https://blog.csdn.net/molihuakai_118/article/details/87949088

版权

【B/S】专栏收录该内容

20 篇文章 0 订阅

订阅专栏

一、来历

我们知道，从HTML诞生开始，样式就以各种各样的形式存在并修饰网页内容信息。CSS未出现时，我们会用各种属性来对HTML中的元素进行样式修饰，随着HTML的快速发展，慢慢的出现了很多的弊端：1.相同的属性设置，可能使用的是不同的属性来完成的。2.相同的操作，要重复写，可维护性和可重用性较低。而CSS的出现正是解决了这些弊端，并且使web编程变得更加高效和可重复。

CSS（Cascading Style Sheets）——层叠样式表，为HTML标记语言提供了一种样式描述，定义了其中元素的显示方式，（css与HTML不能分家）

二、CSS语言特点

1、继承性（有层级关系的元素）

大部分的CSS效果是可以直接继承给子元素的

2、层叠性

可以为一个元素定义多个样式规则，规则中的属性不冲突时，可以同时都应用到当前元素上。

3、优先级

在层叠性基础上，如果样式声明冲突的话。则按照默认的优先级去应用样式
由低到高：浏览器的默认设置——样式表（后定义着优先）——内敛方式

4、！important原则

显示调整样式属性优先级
样式属性：值！important；（！important加在谁的后面，就以谁为主）

5、多页面应用

CSS样式表可以单独存放在一个CSS文件中，这样我们就可以在多个页面中使用同一个CSS样式表。CSS样式表理论上不属于任何页面文件，在任何页面文件中都可以将其引用。这样就可以实现多个页面风格的统一。

三、CSS语法规范

1、使用css样式表方式

内敛方式——又称行内样式、内联样式

特点：将CSS内容定义在HTML标记中

语法：<ANY style=“样式声明1；样式声明2；。 … …”>

样式声明：
1》由样式属性名以及值来组成
2》属性名与值之间使用：做链接
3》多个样式声明之间用；做分隔（最后一个可以不用）

常用的样式属性和值
1》设置文本颜色的属性和值
属性：color
值：合法的颜色值（英文）
Ex：color：red
2》设置背景颜色的属性和值
属性：backGround
值：合法的颜色值（英文）
3》设置文字大小的属性和值
属性：font—size
值：以px或pt为单位的数值
Ex ：color：red

内部样式表——在网页中的一个独立的地方声明网页要用到的所有的样式
语法：

<head>
	<style>
	/* 注释*/
			样式规则一
			样式规则二
			样式规则。。。
	</style>
</head>

样式声明：明确样式规则里面内容是什么。
选择器：规范了页面中那些元素能够使用声明好的样式，其实就是为了匹配页面中的元素。
样式规则：由 选择器 和 样式声明 组成。（说明可以试用在谁的身上）

样式规则语法：
选择器{
样式声明1；
样式声明2；
}
例如：

Div{
	Color:red;
	Background:yellow;
	Font-size:16px;
}

外部样式表——在独立于任何网页的位置处，声明一个样式表文件（.css),在文件中声明样式，在使用的网页中进行引入。

使用步骤：
1.创建样式表文件，并编写样式
在xxx.css 文件中编写样式规则
2.在使用的网页上对样式表文件进行引入

<head>
	<link rel="stylesheet"  href="xxx.css"/>
</head>

2、CSS选择器

选择器作用：
规范了页面中那些元素能够使用声明好的样式，其实就是为了匹配页面中的元素。

选择器类型：

通用选择器
作用：可以与页面上的任意元素相匹配
语法：*{样式声明}

ex：
 *{
	font-size：12px；
	color：red；
}

元素选择器
作用：设置页面上某种元素的默认样式
语法：标记{样式声明}

ex： 
H3{color：red；}

类选择器
作用：定义页面上某个或某些元素的样式
特点：通过元素的class属性进行引用的选择器
语法：

 . 类名{样式声明}

注意：点不能省。类名不能以数字开头。由英文，-，_来组成

引用：＜ANY class=“类名”>

特殊用法：
1.分类选择器的定义方式，类选择器和元素选择器结合使用
语法：元素选择器 . 类选择器{}
ex：div.text{} 定义class为text的div元素的样式。
2.多类选择器的引用方式
让元素应用多个类选择器
语法：

id选择器
作用：与id属性联用，为了设置指定id元素的样式（专属定制）
语法：#ID值{…}

群组选择器
作用：将多个选择器放在一起进行样式的声明定义
语法：选择器1，选择器2，选择器3，…{…}

后代选择器
作用:通过元素的后代关系匹配元素
语法: 选择器1 选择器2{}

子代选择器
作用:通过元素的子代(一层的层级关系)关系匹配元素
语法:选择器1>选择器2{}

伪类选择器
作用:为了匹配元素不同的状态的选择器
语法: 所有的伪类都是以 : 为开始的
选择器 : 伪类选择器{…}

伪类	标记	说明	举例
链接伪类	: link	匹配元素尚未被访问时候的状态	a : link
链接伪类	: visited	匹配元素访问过的状态	a:visited
动态伪类	: hover	匹配鼠标悬停在元素上时的效果
动态伪类	: active	匹配元素被激活时的状态
动态伪类	:focus	匹配元素获取焦点时的状态

选择器级别
在这里插入图片描述
没有自定义的样式看继承，有自定义的直接看自定义群组选择器的权值不累加

秋洛颍

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
22
评论
【CSS】网页样式设置之CSS简介

一、来历我们知道，从HTML诞生开始，样式就以各种各样的形式存在并修饰网页内容信息。CSS未出现时，我们会用各种属性来对HTML中的元素进行样式修饰，随着HTML的快速发展，慢慢的出现了很多的弊端：1.相同的属性设置，可能使用的是不同的属性来完成的。2.相同的操作，要重复写，可维护性和可重用性较低。而CSS的出现正是解决了这些弊端，并且使web编程变得更加高效和可重复。CSS（Cascadin...
复制链接

扫一扫