CSS笔记（全）

最新推荐文章于 2023-09-21 11:36:32 发布

发自己的光就好

最新推荐文章于 2023-09-21 11:36:32 发布

阅读量1k

点赞数 2

文章标签： css

本文链接：https://blog.csdn.net/qq_53677566/article/details/117405213

版权

本文详细介绍了CSS的基础知识，包括CSS选择器的种类，如标签选择器、类选择器、ID选择器、伪类选择器等，以及CSS添加方式，如内联样式、内嵌样式和外部样式。此外，还涵盖了CSS样式的各个方面，如单位、颜色、字体、文本、超链接、列表和表格的样式设置，以及重要的盒子模型概念。通过本文，读者可以深入理解CSS的使用方法。

摘要由CSDN通过智能技术生成

CSS基础

CSS特点：优先级如果用选择器选择了控制样式如果某一已经被选择的标签不想用CSS中的样式则这时可以在这个标签自己定义定义了以后因为存在优先级的关系标签执行的是你在此处写的样式不会执行CSS中的样式

一.概述

CSS：Cascading Styel Sheets层叠样式表，也称为级联样式表，用来设计网页风格。

注：内容和样式相分离，便于修改样式

二.CSS选择器

1.标签选择器

例：

<style type="text/css">
			p,h1{font-size:30px;
			color:blue;
			font-family:黑体;
			}
		</style>
	</head>
	<body>
		<p>类别1</p>
		<h1>类别2</h1>
	</body>

注：该样式立即生效

2.类别.one

以“.”开头，并可以任意命名

例：

<style type="text/css">
			.one{font-size:18px;}
		</style>
	</head>
	<body>
		<p class="one">类别1</p>
	</body>

注：该样式应用后生效

3.id #left

以“#”开始，并可以任意命名

例：

<style type="text/css">
			#one{font-size: 12px;}
			#two{font-size: 24px;}
		</style>
	</head>
	<body>
		<p id="one">文字1</p>
		<p id="two">文字2</p>
	</body>

类选择器与ID选择器区别：

(1)类选择器更灵活，可以给任意多的标记定义样式，但ID选择符在页面的标记只能使用一次（唯一性）

(2)ID选择符样式比类选择符样式优先级高

4.伪类选择器

一种特殊的类选择符
对链接的不同状态定义不同的样式效果

对标记的第一个字符或第一行设置样式

例：

<style type="text/css">
			a:link{color: aqua;;text-decoration: none;}  //未被访问链接的样式
			a:visited{color:black;;text-decoration: none;}  //被访问后链接的样式
			a:hover{color: aqua;;text-decoration: underline;}  //鼠标悬停时的样式
			a:active{color: aqua;;text-decoration: underline;}  //被激活时链接的样式
			p:first-letter{font-weight: bold;font-family: "黑体";} 
			p::first-line{font-size: 32px;}
		</style>
	</head>
	<body>
		<a href=""></a>
	</body>

5.属性选择器

定义属性选择器时，方括号“[]”将属性名包住

6.选择器的嵌套声明

如：

<style type="text/css">
			p span{
                //注意这里这个空格的意思
				color: red;
			}
		</style>
	</head>
	<body>
		<p><span>天使投资</span>是投资方式的一种</p>
	</body>

<style type="text/css">
			p,h1{
                text-align:center;
			}
		</style>
	<body>
		<p>欢迎访问论坛1</p>
		<h1>欢迎访问论坛2</h1>
	</body>

全局声明

<style type="text/css">
			*{
                text-align:center;
			}
		</style>
	<body>
		<p>欢迎访问论坛1</p>
		<h1>欢迎访问论坛2</h1>
	</body>

混合使用

//多个class选择器混用，用空格分开
<div class="one yellow left"></div>
//id与class选择器混用
		<div id="div1"  class="one yellow left">

三.CSS添加方法

1.行内添加（内联样式）

<p style="color: #FF0000; ....">  //可以添加多个属性
			天使投资是投资方式的一种
</p>

注：行内样式表只能影响单个元素

优先级最高

2.内嵌样式（常用）

<style type="text/css">
			p{
				color: red;
			}
</style>
	</head>
	<body>
	<p>天使投资指早期投资</p>
	</body>

Style标记是双标记，有type属性，必须放在头部
内部样式表只影响单个文件
适合文件很少，页面很少的情况

3.外部样式

css文件

p{
	color: #FF0000;
}

维护方便
可以在一个HTML文件中引用多个外部样式

CSS样式

一.单位与颜色

1.单位

px
em（）自动适应用户所使用的字体
%

1.绝对单位

2.相对单位

2.颜色

1.表示方法

red…
rgb（x,x,x） 0~255
rgb(x%,x%,x%)
rgba(x,x,x,x) 0~255 a 0.0~1.0透明度
#rrggbb

二.CSS字体样式

**font ：复合属性，**一次完成多个字体属性的设置，属性值与属性值之间必须使用空格隔开

例： font: bold 18px ‘宋体’；

font-family:字体系列
font-size：字号
font-style：设置字体样式

font-weight：粗体

<style type="text/css">
			#font1{
				color: blue;
				text-align: center;
				margin: 20px auto;
			}
			#font2{
				font-weight: 100;
			}
			#font3{
				font-weight: 1000;
			}
			#font4{
				font-size: 28px;
				font-style: italic;
				font-family: '幼圆';
			}
			#font5{
				font: bold italic 24px/1.5em small-caps  ;
			}
		</style>
	</head>
	<body>
		<h3 id="font1">设置字体变体，粗细，复合属性</h3>
		<hr color="aqua">
		<p>此段文字显示welcome to you!</p>
		<p id="font2">此段文字显示welcome to you!正常，较细字体</p>
		<p id="font3">设置小型大写字母，字体标准粗细</p>
		<p id="font4">设置字体粗细度为600，斜体、大小28px，行高50px，字体幼圆</p>
		<p id="font5">设置字体风格斜体，特粗，小型大写子母HTML，字号24px，行高1.5EM，字体黑体 </p>
	</body>
</html>

三.CSS文本样式

color：文本颜色

letter-spacing:字符间距 2px -3px

<style type="text/css">
			h1{
							letter-spacing: 2px;
			}
			h2{letter-spacing: -3px;}
		</style>
	</head>
	<body>
		<h1>标题内容</h1>
		<h2>文本段落主要内容</h2>
	</body>

line-height:行高 14px 1.5em 120%

<style type="text/css">
			p{
				font-size: 14px;
				line-height: 2em;
			}
		</style>
	</head>
	<body>
		<p>这里是web前端开发课程</p>
	</body>

<style type="text/css">
			p{
				font-size: 14px;
				height: 40px;
				font-size: 14px;
				background-color: #ccc;
				line-height: 40px;   //行高还有一个作用居中
			}
		</style>
	</head>
	<body>
		<p>这里是web前端开发课程</p>
	</body>

text-allign :对齐 center left right justify

<style type="text/css">
			h1{text-align: center;}
			.date{text-align: right;}
			.main{text-align: justify;}
		</style>
	</head>
	<body>
		<h1>CSS text-align 实例</h1>
		<p class="date">3月4号</p>
		<p class="main">当我年轻的时候</p>
	</body>

vertical-align:垂直对齐 top middle bottom

text-decoration:装饰线 none overline lint-through underline

<style type="text/css">
			h1{text-decoration: overline;}  /* 装饰线在文字上方 */
			h2{text-decoration: line-through;}   /* 装饰线穿过文字 */
			h3{text-decoration: underline;}   /* 装饰线在文字下方 */
		</style>
	</head>
	<body>
		<h1>标题一</h1>
		<h2>标题二</h2>
		<h3>标题三</h3>
	</body>

取消链接下划线

<style type="text/css">
				a{text-decoration: none;}
			</style>
		</head>
		<body>
			<ul>
				<li><a href="">链接1</a></li>
				<li><a href="">链接2</a></li>
				<li><a href="">链接3</a></li>
			</ul>
		</body>

text-indent:首行缩进 2em

四.css颜色与背景

颜色：关键字，rgb（）函数，十六进制数
background
- background-color:用于对指定元素设置背景颜色
- background-image：用于对指定元素设置背景图案
```
<style type="text/css">
			p{
				background-image: url(img/造型女孩.png);   
	            /* background-image: none; */
				height: 150px;
				line-height: 50px;
			}
		</style>
	</head>
	<body>
		<p>啦啦啦</p>
	</body>
</html>
```
- background-repeat：在背景图案小于指定元素的情况下，是否重复填充图案
  - repeat（默认）
  - no-repeat（不填充只有一个）
  - repeat-x（横向填充）
  - repeat-y（纵向填充）
- background-attachment：用于指定设置的图案背景在元素滚动时是否一起滚动
  - scroll：表示在文字页面滚动时，背景附件一起滚动。
  - fixed：表示在文字页面滚动时，背景附件固定不动
- background-position：用于指定背景图案的起始位置
- background复合属性：
可以使用它一次完成背景颜色，图像，重复，位置和附件的设置

例：

background：background-color background-image backgrouund-repeat background-position background-attachment

五.CSS超链接

链接的四种状态

a:link - 普通的未被访问的

a:visited -用户已访问的链接

a:hover -鼠标指针位于链接上方悬停

a:active -链接被点击的时候
- 有次序
  
  a:hover 必须位于a:link和a:visited之后
  
  a:active 位于a:hover之后

<style type="text/css">
			a:link{
				color: aqua;
				text-decoration: underline;
			}
			a:visited{
				color: aquamarine;
				text-decoration: underline;
			}
			
			a:hover{
				color: bisque;
				text-decoration: underline
			}
			a:active{
				color: blueviolet;
				text-decoration: line-through;
			}
		</style>
	</head>
	<body>
		<a href="">请点击这里</a>
	</body>

六.列表与表格

1.列表

属性：

list-style:所有用于列表的属性设置于一个声明中

list-style-image:为列表项设置图像（相当于设置列表最前面的小圆点）

<style type="text/css">
			.inside{
				list-style-image: url(img/造型女孩.png);
			}
			.outside{
				list-style-image: url(img/造型女孩.png);
			}
		
		</style>
	</head>
	<body>
		<ul class="inside">
			<li>HTML-网页设置</li>
			<li>网页样式</li>
			<li>网页交互</li>
		</ul>
		<ul class="outside">
			<li>HTML-网页设置</li>
			<li>网页样式</li>
			<li>网页交互</li>
	</body>
</html>

list-style-position:标志的位置

inside

outside

<style type="text/css">
			.inside{
				list-style-position: inside;
			}
			.outside{
				list-style-position: outside;
			}
		</style>
	</head>
	<body>
		<ul class="inside">
			<li>HTML-网页设置</li>
			<li>网页样式</li>
			<li>网页交互</li>
		</ul>
		<ul class="outside">
			<li>HTML-网页设置</li>
			<li>网页样式</li>
			<li>网页交互</li>
	</body>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5NnySE5B-1622378133094)(C:\Users\封纪元\AppData\Roaming\Typora\typora-user-images\1620952632364.png)]$

list-style-type:标志的类型

-none: 无标记

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dZuVQJZx-1622378133100)(C:\Users\封纪元\AppData\Roaming\Typora\typora-user-images\1620952809929.png)]$

…

2.表格

表格大小
- 宽：width
- 高：height
表格边框
- boder：
  - boder：1px solid black; (直接设置表格边框)
  - boder-collapse ：折叠边框

<style type="text/css">
			table tr td{
				width: 100%;
				height: 700px;
				border: 1px solid black;
			}
			table{
				 border-collapse: collapse;
			}
		</style>
	</head>
	<body>
		<table>
			<tr>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td></td>
				<td></td>
				<td></td>
			</tr>
		</table>
	</body>
</html>

奇偶选择器：

… ：nth-child(odd|enen)

<style type="text/css">
			tr:nth-child(odd){    //选奇数行
				background-color: #00FFFF;
			}
			tr:nth-child(1){  //选第1行
				background-color: #7FFFD4;
			}
			table tr td{
				border: 1px solid black;
			}
			table{
				width: 50%;
				height: 300px;
				border-collapse: collapse;
			}
		</style>
	</head>
	<body>
		<table>
			<tr>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td></td>
				<td></td>
				<td></td>
			</tr>
		</table>
	</body>
</html>

七.盒子模型

块级元素页面上区域，图片，导航，列表，段落，都可以是盒子

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-W5DDBUPi-1622378133111)(C:\Users\封纪元\AppData\Roaming\Typora\typora-user-images\1620955615585.png)]$

盒模型（MBPC模型）主要定义四个区域：
- 边界 margin
  - top
  - bottom
  - right
  - left
  - 合并：
- 边框 border
- 填充 padding
  - top
  - bottom
  - right
  - left
- 内容 content

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JRz3Riuv-1622378133116)(C:\Users\封纪元\AppData\Roaming\Typora\typora-user-images\1620955732190.png)]$

盒模型（续）

页面中所有元素都可以课成一个盒子，占据一定的页面空间

overflow属性（当内容溢出盒子时怎么办）
- hidden：超出部分不可见
- scroll：显示滚动条
- auto：如果有超出部分显示滚动条
boder属性
- border-width：thin,medium,thick, length。复合属性，分border-top-width,boder-right,boder-bottom-width,border-left-width四个子属性
- border-style:边框线形 none|dotted|dashed|solid|double|groove凹形线|ridge凸形线|inset嵌入线|outset嵌出线；复合属性，分top，right，bottom，left四个子属性
- border-color:颜色关键字|RGB值
- boder: 边框粗细边框样式边框颜色例：border:2px solid #ff33ee;
  $[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xOGzJGXW-1622378133119)(C:\Users\封纪元\AppData\Roaming\Typora\typora-user-images\1620957550940.png)]$