CSS总结

最新推荐文章于 2023-08-18 20:40:23 发布

ljs1196

最新推荐文章于 2023-08-18 20:40:23 发布

阅读量201

点赞数

分类专栏： BS

本文链接：https://blog.youkuaiyun.com/li2534153206/article/details/79952552

版权

BS 专栏收录该内容

7 篇文章

订阅专栏

概念：

CSS（Cascading Style Sheet），中文译为层叠样式表，是用于控制网页样式应允许将样式信息与网页内容分离的一种标记性语言。

CSS的引入方式：

行内样式

	<div style="width:100px;height:100px;background-color:red;"></div>

内嵌样式

	<head>
	    <style type="text/css">
	      div{
	        width: 100px;
	        height: 100px;
	        background: red;
	      }
	    </style>
	</head>

链接样式

	<head>
	    <link rel="stylesheet" type="text/css" href="css/style.css">
	</head>

导入样式

	<head>
	    <style type="text/css">
	        @import "My.css"; 此处注意.css文件的路径
	    </style>
	</head>

导入方式优先级：

1.就近原则
2.理论上：行内>内嵌>链接>导入
3.实际上：内嵌、链接、导入在同一个文件头部，谁离相应的代码近，谁的优先级高

选择器

通过选择器我们可以选出我们想要修改样式的标签，从而进行样式设计。CSS选择器主要分为以下三种：

标签选择器

会直接选择某一类标签，针对这一类标签全部生效。优先级：1

类选择器

使用类选择器时，需要我们给标签写上类名，如<div class="div"></div>。类选择器会针对某一类具有相同类名的标签，同名 class 可以存在多个。优先级：10

ID选择器

使用 ID 选择器时，需要我们给标签写上 ID 名，如<div id="div"></div>。ID 选择器就会针对这一个 ID 名的标签，同名 ID 只能存在一个。优先级：100

选择器优先级：

如果选择器优先级相同，谁后引入谁生效；
如果选择器优先级不同，按照选择器优先级高低顺序生效

盒子模型

HTML中的每一个标签都可以看做一个盒子模型，盒子模型由content、padding、border和margin四部分组成，如下图所示

content：顾名思义即为内容部分。
padding：即内边距用于控制内容（content）与边框（border）之间的距离；
border：设置边框的样式；

margin：即外边距用于控制元素与元素之间的距离。

例子

<!DOCTYPE html>
<html>
<head>
    <title>盒模型</title>
    <meta charset="utf-8"/>
    <style>
        div{
            width: 100px;
            height: 100px;
            background: red;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>