CSS知识点

最新推荐文章于 2024-08-17 12:45:11 发布

孤寂无风

最新推荐文章于 2024-08-17 12:45:11 发布

阅读量144

点赞数

文章标签： css

本文链接：https://blog.csdn.net/qq_36305934/article/details/111823083

版权

下图是我自己整理的知识点，供参考。
在这里插入图片描述
一.引入方式
1.内嵌式引入
把style标签嵌套在head标签中

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	
	<style type="text/css">   <!--在这里噢-->
		body{font-size:36px;}

	</style> 
</head>
<body>

</body>
</html>

2.行内样式
如其名

<b style="font-size:56px;">干饭人干饭人干饭都是人上人</b>

3.外链样式
把css当成是一个文件，通过link标签引入到html中

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

4.嵌入样式
内嵌和外链一种综合性的使用，不太常用了解即可

<style type="text/css">
  @import url("css/style.css");

</style>

另外，这4种引用方式存在优先级之分，即"行内样式>剩下的其它三种形式，样式的显示取决于距离"

二.选择器
1.标签选择器
直接引用标签的选择器

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css"> 

         p{font-size:16px;}  <!--小猪佩奇的字体大小-->

	</style> 
</head>
<body>

         <p>小猪佩奇</p>

</body>
</html>

(以下省略head和body部分）

2.id选择器
给标签命名id后，用"#"+id名称来引用（需要注意的是，id的命名需要做到望文生义，就是说让人看到就知道这个id的意思，用的好可以增加代码的可读性）

#one{}  <!--id为one的标签的设置-->

<p id="one">打工人</p>

3.类选择器
类似于id选择器，用class来命名标签，"."+class名称引用（同样要做到望文生义）

.two{}  <!--class为two的标签的设置-->

<p class="two">打工人</p>

需要注意的是，id和class的命名都不能直接用数字来命名，而是得用英文或英文+数字。

4.全选择器
使用*号来表示对整个html中的所有标签都起作用

*{margin:0;
  padding:0;
  }

基本上在每个网页中，都要设置这个，用来消除浏览器的边距误差。

三.伪类
伪类作用于链接上，可以实现你对链接的不同交互效果。

1.link
用于未访问的链接

a:link{
     <!--此处为你没有点击过的链接所展示的效果-->
}

2.visited
用于以访问链接

a:visited{
     <!--当你点击链接后，该链接会展示出点击后的效果-->
}

3.hover
当鼠标移动到链接上时

a:hover{
      <!--当你鼠标悬停在链接上时链接产生的效果-->
}

4.active
按下链接后

a:active{
     <!--按下链接后链接会发生变化-->
}

以上4种用法均可用在不同的链接类型上（文字，图片等链接），想要的效果需自行设置（放大缩小，颜色变换的等）

四.盒子模型
很多网站的样式设计都是用盒子模型来做的，其重要性不言而喻。
简单的说就是把网页的每个内容分成一个个盒子，每个盒子再细分成小盒子，以此类推（可以理解为盒子套盒子）。
分好之后再对每个盒子进行样式设计，组合起来就可以展示出你想要的效果。

盒子分为四个部分，内容，内边距，外边距，边框
在这里插入图片描述

1.内容（即元素）
里面是你想要展示的东西

2.内边距padding

"盒子名称"{
     padding:0px 0px 0px 0px;
     padding:0px 0px;
     padding:0px;     <!--可使用百分比，即 0% -->
}

四个值分别对应上，右，下，左
两个值则是上下，左右
一个值是全部一起
也可单独设置

{
   padding-left:0px;
   padding-right:0px;
   padding-top:0px;
   padding-bottom:0px;
}

外边距同理.

3.外边距margin

"盒子名称"{
      margin:     <!--用法同上-->
}

4.边框border
可以设置边框大小，边框线的类型，线的颜色

{
    border:1px solid black;
}

这种是同时设置四条边的样式，也可单独设置每条边的，用法同边距一样

边框线，分别为点状，实线，双线，虚线

{
     border-style:dotted solid double dashed; 
}

颜色,可用颜色代号或者英文

border-color:#666666

五.元素
用display标签

{
    display:inline;   <!--设置为内联元素-->
}

即盒子与盒子可以同行显示，但不能设置宽和高

{
    display:block;   <!--设置为块状元素-->
}

盒子与盒子不能同行显示，但可以设置宽高

display:none;   <!--隐藏元素-->

这个可以让元素内容不显示。

六.定位
分为3种，相对定位，绝对定位，浮动

1.相对定位

{
   position:relative;  <!--移动该元素，但元素仍然占据原来
                           的空间。因此，移动元素会导致它
                           覆盖其它框-->
}

在这里插入图片描述
2.绝对定位

{
    position:absolute;
    <!--可以让元素处于界面的任何位置，但不占据原来的空间了-->
}

在这里插入图片描述
3.浮动

{
   float:left/right;  <!--左浮动或者右浮动-->
}

举个栗子，

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
#one{
	width: 50px;
	height: 50px;
	background-color: red;
}
#two{
	width: 50px;
	height: 50px;
	background-color: green;
}
#three{
	width: 50px;
	height: 50px;
	background-color: yellow;
}
	</style>
</head>
<body>
	<div id="one">123</div>
	<div id="two">123</div>
	<div id="three">123</div>
</body>
</html>

在这里插入图片描述
他们是这样，当给红色进行浮动时，它会
假设你把这三个正方形看成3个不同平面，那么把红色的浮起来后，绿色的就会去填补红色原来的位置，但是红色在上面，所以红色会覆盖绿色。

左浮动右浮动一个样。

如果不想在哪一侧有浮动元素，可以用clear清除浮动

{
  float:left;
  clear:none;
  
  <!--none是两边都不能，left和right是单边不能-->
}

以上则是我对css的一些理解，如有不对敬请指正！

孤寂无风

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS知识点

下图是我自己整理的知识点，供参考。一.引入方式1.内嵌式引入把style标签嵌套在head标签中<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css">  body{font-size:36px;}
复制链接

扫一扫