CSS——基础知识

Xiao8830

已于 2022-10-28 19:40:04 修改

阅读量995

点赞数 1

分类专栏：前端文章标签： css html 前端

于 2022-10-26 08:59:07 首次发布

本文链接：https://blog.csdn.net/m0_60867520/article/details/127525417

版权

前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

通过上一篇博客的HTML程序——简历，可以看到我们的文字是很死板的，颜色是很单调的，要想让网页的样式变得好看，就需要借助CSS，CSS就相当于我们的ps技术一样

基本语法

选择器 + {一条/N条声明}
选择器就是要操作的对象，比如说div
声明就是要修改的属性，格式为键值对

<style>
	div {
	color: red;
	font-size: 10px;
	}
</style>

<div>hello</div>

CSS要写到style标签中（就如同html要写到html的标签中），style标签放在页面的任何位置都可以，但是一般我们习惯于放到head标签中

注释

和html不同，CSS用的注释是多行注释，这和C语言及java是相同的，不过也不支持//这种注释

<style>
	div{
		/* 这是注释 */
	}
</style>

引入方式

内部样式

也就是把CSS放到html的内部，一般放到head标签里

这样做可以让样式和页面分离开，但是分离的也并不彻底

行内样式（內联样式）

每个标签都可以有自己的style属性，直接可以在里面写CSS，这样的话就不用写选择器了

<div style="color:red">一条语句</div>

这样写只能用在简单样式上，太长的CSS语句将显得代码十分丑陋，并且难读，并且这样写只针对这个标签生效

如果我们在别的地方用内部样式的方法修改这个div的属性，例如把color改成绿色，那么这种改动并不会生效，因为行内样式的优先级高于内部样式，因此行内样式的效果会覆盖其他的样式

外部样式

创建一个CSS文件，在html文件中，用link标签将CSS文件导入，这样的话可以彻底分离两者的代码

例如：先创建一个style.css 的文件

div {
	color: red;
}

然后创建一个test.html的文件

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>test</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<div>要变红的语句</div>
</body>

我们通过link中的href属性，把CSS的路径导入html文件中，使得样式生效

<link rel="stylesheet" href="CSS文件路径">

这样做有可能收到浏览器的缓存的影响，修改后不一定能立即生效，这时需要我们强制刷新（ctrl + F5）
并且，如果我们两个html文件都想用这个CSS样式的话，只需要都拿link导入CSS文件即可，不需要将CSS代码写两份

基本规范

大括号

推荐展开写大括号，而不是 { 和 } 在同一行

大小写

CSS不区分大小写，一般统一用小写字母

空格

一般冒号后加空格，选择器和 { 之间加空格

选择器

不同的选择器可以针对不同的标签的样式进行修改

标签选择器

上面写的代码都是标签选择器，选择的都是html中的基本标签，例如我们选择了div标签，就会把所有的div标签的样式都修改，不能差异化的改变样式

类选择器

<style>
	.blue {
		color: blue;
	}
</style>

<div class="blue">要被改成蓝色了</div>
<div>改不成蓝色</div>

在html中，每个标签都可以有自己的class属性，也就是类属性，当我们在CSS中用 . 开头就表示CSS的类名

这样的话即使是不同的标签，只要是相同的类名，就可以获得相同的样式，即使是相同的标签，类名不一样，那么样式就不一样了

id选择器

html中的每个元素都有id属性，并且这个值是在页面中唯一的

<style>
	#red {
		color: red;
	}
</style>
<div id="red">要变红了</div>

#开头的表示这是id选择器，通过id选择器，我们可以选到一个确定的元素上
类名是可以重复的，id是不能重复的

通配符选择器

<style>
	* {
		color: red;
	}
</style>

*会选择页面中的所有标签，让所有标签都变成红色

复合选择器

将多个基础选择器组合起来

后代选择器（包含选择器）

也就是选择某个父元素中的某个子元素

父元素 子元素 {样式声明}

中间要有空格分隔开

<ol class="one">
	<li>不会选到</li>
	<li><a href="#">会选到</a></li>
</ol>

<style>
	.one li a {
		color: red;
	}
</style>

这样的话就是选择的.one类下的li标签中的a标签，只有a标签会变红，其他父类标签不会变红
可以看到，这种后代选择器，不仅仅可以选择儿子辈，还可以选择孙子辈

子选择器

父元素>子元素 { 样式声明 }

这种只能选择儿子辈，不能选择孙子辈

并集选择器

也就是对不同的选择器，应用相同的样式

元素1, 元素2 { 样式声明 }

伪类选择器

选中元素的不同的状态
:hover 把鼠标放到该元素上的状态
:active 用鼠标点击该元素的状态

<style>
	button:hover {
		color: orange;
	} 
	button:active {
	color: red;
	}
</style>

当我们把鼠标放到按钮上时，按钮会变橙色，当我们点击该按钮时，该按钮会变成红色

常用元素属性

字体

使用font-family设置字体，需要保证自己的电脑上有这个字体

font-family: '宋体';

使用font-weight设置字体的粗细，值为100-900，越大越粗

font-weight: 700;

使用font-size设置字体的大小，单位是px（像素）

font-size: 40px;

颜色

使用color设置字体颜色

直接写单词：red，green，orange
rgb/rgba的格式
#16进制的数字

color: red;
color: #ff0000;
color: rgb(255, 0, 0);

对齐

text-align: [值];

值有以下几种：

center ：居中
left ：左对齐
right ：右对齐

装饰

text-decoration: [值];

值有以下几种：

underline ：下划线
overline ：上划线
line-through ：删除线
none ：什么线都没有

缩进

text-indent:[值];

值的单位有px和em
px代表像素，1px代表一个像素
em代表当前元素的文字大小
如果是负数，代表左缩进，如果是正数代表右缩进

行高

概念

HTML中的文字有多条基准线，按照高度从上往下依次是

顶线
中线
基线（英文单词的四线格的第三条线）
底线

其中我们这里的行高的概念，就是上下行两个文字的相对应的基本线的距离差，比如说上行文字的顶线到下行文字的顶线的距离就是行高

设置方式

line-height:[值];

这个值一般用像素来表示，例如30px
还可以用normal表示，chrome浏览器中的normal行高是21px

背景

背景颜色

background-color:[值];

这里的color的设置方式和上面的文字的color是一致的

背景图片

背景图片的引入

background-image: url(图片路径)；

和之前的引入css文件的路径一样，相对路径是基于html的

背景图片的显示方式

background-repeat: [值]

值有以下几种：

repeat ：平铺
no-repeat ：不平铺
repeat-x ：水平平铺
repeat-y ：垂直平铺

默认是repeat

背景图片的显示位置

background-position: x y;

这里的值可以是上面这样的精确指定坐标
还可以是方位名词（top，right，bottom，right，center）
还可以既有方位名词，也有精确坐标

注意：

如果只制定了一个方位名词，例如top，则另一个方位（水平）默认居中
如果参数只有一个精确值，则指定的是水平坐标
这里的x从左到右是从0到max，y从上到下是0到max

背景图片的尺寸

background-size: [值];

这里的值有以下几种形式

具体数值例如10px 20px，代表宽度为10像素，高度为20像素
百分比：按照父元素的大小进行比例的设置
cover：尽量的大，使图片可以完全覆盖背景
contain：保证图片能够完整的显示

圆角矩形

我们的html中的button默认是方方正正的，看着十分难看，使用下面这个属性，可以让按钮变得圆润一些

border-radius: [值]

这里的值是一般是像素的数值，例如10px，代表矩形内切圆的半径大小，可以推断出，如果我们的按钮是个正方形，边长是20px，那么如果这个值设置成10px，我们将得到一个圆形的按钮

还可以展开写，分别设定矩形的四个角的radius值

border-top-left-radius:2em;
border-top-right-radius:3em;
border-bottom-right-radius:4em;
border-bottom-left-radius:5em;

还可以组合在一起，直接在radius中设置4个值

border-radius: 10px 20px 30px 40px;

这种是顺时针排列，也就是说左上是10px，右上是20px，右下是30px，左下是40px

元素显示模式

之前我们提到块级元素是独占一行的，行内元素是不独占的，事实上，这两个概念还有以下特性

块级元素

独占一行
高度，宽度，边距，行高都可以控制
宽度默认和父级元素一样
是一个容器，里面可以添加行内元素和块级元素

行内元素

不独占一行
不能设置高度，宽度，行高
可以设置内边距，不能设置外边距
行内元素中只能有文本或者行内元素，不能有块级元素

切换显示模式

display: [值];

我们可以用上面这个代码，指定值，使得行内元素与块级元素相互切换
值有以下几种：

block ：改为块级元素
inline ：改为行内元素
inline-block ：改为行内块元素
noen ：不显示这个元素

盒模型

每个HTML元素都相当于是一个矩形的盒子，里面有这几个属性

content 内容
border 边框
padding 内边距
margin 外边距

边框

和我们的画框一样

基础属性调节

粗细

border-width:[值];

值一般就是像素

样式

border-style:[值];

值有以下几种：

solid 实线边框
dashed 虚线边框
dotted 点线边框
可以通过上下左右设置不同方位上的边框上的属性

如果我们的内容是100px100px，边框每个方位都是5px，那么最终我们的盒元素的大小是110110px，也就是说边框会撑大我们的盒子

那么，我们可以通过下面这个代码来避免边框撑大盒子

box-sizing: border-box;

内边距

也就是内容和边框之间的距离
我们可以通过上下左右，来设置不同方位的内边距大小

padding-top
padding-bottom
padding-left
padding-right

如果padding只有一个元素，如10px，那么设置的是上下左右的边距都是10px
如果是两个元素，例如10px，20px，则设定的事上下边距为10px，左右是20px
如果是三个元素，例如10px，20px，30px，那么设定的是上边距为10px，左右是20px，下边距为30px
如果是四个元素，则默认方向是顺时针，上右下左

可以看出来，这种设定方式非常乱，建议大家还是规规矩矩的单独设定每一个方位的属性

外边距

两个块级元素之间的距离
写法和内边距一致

弹性布局

<div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
</div>
<style>
div {
	width: 100%;
	height: 150px;
	background-color: red;
}
div>span {
	background-color: green;
	width: 100px;
	}
</style>