【教程】CSS快速学习

最新推荐文章于 2024-04-03 14:15:31 发布

风舞雪凌月

最新推荐文章于 2024-04-03 14:15:31 发布

阅读量572

点赞数 3

分类专栏：教程文章标签： css html java javascript php

本文链接：https://blog.csdn.net/l1447320229/article/details/117633581

版权

教程专栏收录该内容

12 篇文章 3 订阅

订阅专栏

【教程】CSS快速学习

备注
一、CSS概述
二、关联方式
三、CSS选择器
- 1.基本选择器
- 2.扩展选择器
四、css属性
五、盒子模型

备注

2021/6/6 星期日
时隔好久终于抽空写好了html的快速学习，那么接下来就是css了

一、CSS概述

css全称Cascading Style Sheets，中文翻译为层叠样式表，主要功能是用来进行html的样式控制，对html进行美化。层叠主要是指多个样式可以作用于同一个html标签上。相比于使用html的属性，css控制html样式的能力强大了很多，并且可以将html标签和其样式控制的耦合度降低。

二、关联方式

css和html标签的结合方式有三种内联样式、内部样式、外部样式。

1.内联样式

内联样式是直接在html标签的属性中通过给style属性赋值的方式书写css代码，但是这种方式和html关联太过紧密，不推荐使用。

<div style="键1:值1;键2:值2;..."></div>

2.内部样式

内部样式通过包裹在<head></head>标签中的<style></style>标签行书写css选择器的方式与html代码结合,这种结合方式的css只能作用在当前的html页面中。

<head>
	<styel>
		div{
			键1:值1;
			键2:值2;
			...
		}
	</style>
</head>

3.外部样式

外部样式是先写好独立的css文件，再通过在<head></head>标签中使用<link>标签引入css到html中的方式完成的。这种方式提高了css代码的复用率和作用范围，更好的降低了html和css的耦合度，是最推荐使用的。

div{
	键1:值1;
	键2:值2;
	...
}

<head>
	<link rel="stylesheet" href="css文件路径">
</head>

另外，还有一种外部关联外部样式的方法，但是并不常用

<head>
	<style>
		@import "css文件路径";
	</style>
</haed>

三、CSS选择器

选择器是css用来筛选要生效的html标签的。分为基本选择器和扩展选择器

1.基本选择器

基本选择器有三种，元素选择器，类选择器和id选择器。
元素选择器：
元素选择器是用来选择某一种标签的选择器，语法为标签名称加大括号

标签名{
	键1:值1;
	键2:值2;
	...
}

例如：选择html中的所有段落标签字体改为红色

p{
	color:red;
}

类选择器：
我们可以为html标签添加class属性，类选择器可以选择具有相同class属性的html标签，语法为点加class名加大括号。

.class名{
	键1:值1;
	键2:值2;
	...
}

例如：选择html中所有class值为cls的标签，字体改为绿色

.cls{
	color:green;
}

id选择器：
我们可以为html标签添加id属性，与class不同，在一个html文件中标签的id值最好是唯一的，id选择器可以选择具有指定id属性的html标签，语法为#加class名加大括号。

#id值{
	键1:值1;
	键2:值2;
	...
}

例如：将html中某个id为test的标签字体改为蓝色

#test{
	color:blue;
}

选择器的优先级：
当一个标签同时被多个不同的选择器选中时，id选择器的作用级别最高，类选择器次之，元素选择器的作用级别最低。
例如:

<div>aaa</div>
<div class="cls">bbb</div>
<div class="cls" id="test">ccc</div>

.cls{
	color:red;
}
#test{
	color:green;
}
div{
	color:blue;
}

结果
abc

2.扩展选择器

1.通用选择器：
使用星号加大括号可以选择所有标签*{}
1.并选择器：
使用逗号分隔多个基本选择器可以使得他们同时生效

选择器1,选择器2,...{
	键1:值1;
	键2:值2;
	...
}

3.交选择器：
使用空格可以对一个选择器选出标签的子标签再进行选择

父标签选择器 子标签选择器...{
	键1:值1;
	键2:值2;
	...
}

例如：我们只想选中div标签中的那个p标签

<div>
	<p>aaa</p>
</div>
<p>bbb</p>

div p{
	color:red;
}

结果：

4.属性选择器：
有的时候我们需要选择具有某个属性的标签，这时候我们就可以使用标签名中括号属性值加大括号的方式选择。这种情况最多出现在input标签中

标签名[属性="值"]{
	键1:值1;
	键2:值2;
	...
}

例如：选择input标签中的文本输出框

<input type="text">
<input type="password">

input[type="text"]{
	color:red;
}

结果：
abc
css的选择器还有很多，这里就不过多赘述了。

四、css属性

css具有特别多的属性，这里我们只选择一些最常见最基础的简单介绍一下。

名称	作用
color	字体颜色
font-size	字体大小
text-align	对齐方式
line-height	行高
border	边框(四个边)
border-color	边框(四个边)颜色
border-?	边框某条边(left,right,top,bottom)
width	宽度
height	高度
background	背景

五、盒子模型

盒子模型是在界面设计中非常好用的一个模型，可以非常好的控制页面的布局。
盒子模型中主要涉及到了内边距(padding)和外边距(margin)，内外边距的确定主要和视角的选择有关，是一个相对的概念，我们假设界面中的一切内容都是盒子，那么当我们任意选中一个盒子，他和他里面的盒子间的距离就是内边距，他和他他外面的盒子间的距离就是外边距。
box
例如上图中，当我们选择绿色盒子时，他与黑色盒子之间的关系时外边距，他与蓝色盒子的关系时内边距；但当我们选择黑色盒子时，他与绿色盒子之间的关系时内边距；当我们选择蓝色盒子时，他与绿色盒子之间的关系时外边距。
每一个html标签都是一个盒子，当我们想要改变两个html标签的位置关系的时候就要用到盒子模型。一般当我们选定一个盒子，并用外边距来确定他和其他盒子的位置关系时比较简单不容易出错，但当我们使用内边距时就容易出现盒子的大小发生了改变的情况，此时我们可以使用box-size属性并设置为border-box即可。