CSS学习笔记

最新推荐文章于 2023-06-20 20:15:31 发布

huangshaohui00

最新推荐文章于 2023-06-20 20:15:31 发布

阅读量97

点赞数

文章标签： css 学习前端

本文链接：https://blog.csdn.net/qq_51307593/article/details/125736358

版权

CSS
对于前端方面，学后端的同学可以看一下这篇基础学习笔记，记一下常用的标签就行了，后面的项目开发前端方面使用的前端模板比较多，所以这篇文章可以让你1小时快速入手css基础知识点。

一.CSS简介

1.什么是CSS？

Cascading Style Sheet【层叠样式表】
它是一种标记性语言，用于控制网页的样式及布局，
并且允许样式与数据相互分离。

通俗的说就是网页的外表。

2.为什么使用CSS？

1.实现数据与样式的分离，便于团队的开发。
2.样式的复用，便于网站日后的维护。
3.页面的精准控制，可以让页面更加美化

二.基本用法

1.css的基本语法

--我们希望将页面背景设置成绿色。
HTML:<body bgcolor="#ccc">
CSS:<body style="background-color: lightblue;">

CSS语言是由选择器，属性和属性值组成的。

语法：

选择器{
    属性:属性值
}
这里对选择器、属性和属性值进行说明：

选择器

选择器是用来在众多HTML节点中查找指定的一个或者多个节点。
然后对节点进行设置。

属性

属性是CSS的重要组成部分，它是修改网页元素样式的根本。

属性值

所有的属性都有一个或者一个以上的属性值。
属性的取值决定样式最终的变化。

注意：

属性和属性值必须写在{}里面
属性和属性值必须使用:分开。

2.引入CSS的方法

CSS的引入有3种：
1.内联方式
2.内部方式
3.外部方式

1.内联方式

每一个html标签都有一个 style 属性。
内联方式就在html标签中使用 style 属性设置节点的样式。

这种方式仅仅适合少量的设置。

使用相对较少。

2.内部方式

当页面有很多的元素需要被管理的时候，内联样式非常不合理。
因为会产生很多重复的劳动和操作。需要使用内部样式进行统一的管理。

在<head>标签中可以编辑一个<style>标签。
在<style>标签中可以编写css语法。

3.外部方式

在实际项目开发中，并不推荐使用前两种方式，因为实际开发项目页面一般不会很少。
使用内部方式进行开发的话，如果众多页面有相同的布局和样式，每个页面都要重复编写。
所以最好的方式就是样式能够重复利用。所以可以引入外部样式文件。

新建一个后缀为.css的样式文件。
然后将此文件使用：
<link href="../css/mystyle.css" rel="stylesheet"/>
导入到.html文件中。
然后所有的样式代码在.css文件中编写。

3.CSS样式的优先级

内联 > 内部 > 外部

!impoertant; 强制使用。不可被覆盖。
例如：
	color: red !important;

三.选择器

在对页面中元素进行样式修改的时候，首先要先找到页面中的元素，
然后在进行修改，CSS选择器就是使用不同方式来查找指定的元素的。

选择器的分类：
1.基本选择器
2.层次选择器
3.分组选择器
4.属性选择器
5.伪类选择器

1.基本选择器

元素选择器

以元素的名称作为选择器的名称。

使用该选择器会影响整个网页的元素。
比如：
	p{color: red;}
该样式会影响整个网页所有的p标签。

id选择器

每一个html标签都有id属性。用来标识该节点的唯一性。
id属性的值不能重复。
比如：
	<div id="app">
	#app{
		color: red;
		font-size: 10px;
	}

class选择器

每一个html标签都有class属性。class属性可以被重复。
所以是用来标识若干个节点为一组的作用。
比如：
	<div class="app">
	<span class="app">
    .app{
		color: red;
		font-size: 10px;
	}

2.层次选择器

选取直接子节点
```
#app > span
```
选取后代元素
```
#app  p
```
选取同级下一个元素
```
.main + span
```
选取同级下所有元素
```
.main ~ span
```

3.分组选择器

ul,span.success,div.d1

4.属性选择器

每一个html标签都可以自定义属性。
比如：
	<p hello="world">我是一个p标签</p>

查找包含指定属性的节点

<p hello="cccc"> √
<span hello="bbbb"> √
<div hello="aaaa"> √
[hello]{
	color: red;
}

查找包含指定属性和值的节点

<p hello="cccc">
<span hello="bbbb">
<div hello="aaaa"> √
[hello="aaaa"]{
	color: red;
}

查找以指定属性值开头的节点

<p hello="ykdongaaa">
<span hello="ykdongbbb">
<div hello="ykdongccc">
[hello^="y"]

查找以指定属性值结尾的节点

<p hello="ykdongaaa">
<span hello="ykdongbbb">
<div hello="ykdongccc">
[hello$="b"]

5.伪类选择器

伪类选择器常用于添加一些特殊效果。

a:link{color:red} 未访问过的样式
a:visited{}已访问的链接
a:hover{}鼠标滑过的样式
a:active{}已选中的样式

四.常用的CSS属性

1.字体样式

1.font-size	  字体大小
2.font-weight 字体加粗
3.font-family 字体形状
4.font-style  字体样式
5.font		  简写形式

2.文本样式

1.color	文本颜色
2.line-height	行高
3.text-aligin	文本对齐方式	
	取值: 
		left center	right
4.text-decration 文本修饰	  
	取值：
		underline 下划线  
		overline 上划线 
		line-through 贯穿线 
		none 去除修饰
5.text-transform 字母大小写
	取值：
		uppercase	字母大写
		lowercase	字母小写
		capitalize	首字母大写
6.letter-spacing 字符间距
7.word-spacing	 单词间距	只针对英文
8.text-overflow	 文本替换	取值：ellipsis 省略号

3.背景样式

1.background-clolor：背景颜色
2.background-image：背景图片
3.background-repeat：背景图片的平铺方式
	取值：
		no-repeat	不平铺
		repeat-x	横向平铺
        repeat-y	纵向平铺
4.background-attachment：背景图片的依附方式
	取值：
		fixed	无论页面如何滚动，背景图片不会跟随滚动。

4.列表属性

list-style-type：列表索引样式
	取值：
		none 不显示
list-style-image：列表的索引图片

5.表格属性

border-collapse: collapse; 单元格与单元格 和 内容与单元格的距离设置为 0

五.定位

CSS通过position属性实现对元的定位。有五种方式:
1.static	默认		  按照正常文档里进行显示。
2.relative	相对定位    相对于标签原来的位置进行定位。
3.absolute	绝对定位	相对于已经定位的父元素进行定位。如果没有父元素，或者父元素没有定位，则按照浏览器					    窗口进行定位。
4.fixed		固定定位	相对于浏览器窗口进行定位。
5.sticky		粘性定位	相对于已经浏览部分的浏览器进行定位。

六.浮动和清除浮动

通过浮动属性实现元素脱离正常文档流，向左边或者右边移动。
通俗的说就是可以让块级标签在同一行显示。如果一行显示不下则会换行。
常用的取值：
	left
	right

七.display

一般常用于与脚本配合使用。
来动态显示或者隐藏一个元素。

取值：
	none			不显示
	block			显示/将行内标记转换为块级标记
	inline-block	将元素转换为行内块级元素。

八.盒子模型【了解】

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

盒子模型的属性：

Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。