【葵花编程宝典第一卷-CSS】

南风知我意唔

已于 2023-09-16 14:29:21 修改

阅读量147

点赞数 3

分类专栏： Web基础文章标签：前端 web css css3

于 2023-09-14 00:42:35 首次发布

本文链接：https://blog.youkuaiyun.com/m0_52446247/article/details/132867380

版权

Web基础专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了CSS的基础知识，包括选择器（标签、ID、类、通配符、组合和伪类选择器），层叠样式表的应用，以及如何设置字体、文本样式、边框、外边距、内边距、浮动和盒子模型。还涵盖了CSS布局技巧和文本对齐方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

此文章全是经常需要使用的CSS笔记，一方面方便自己查阅，毕竟自己整理的笔记，翻阅起来轻松；一方面是想分享出来，与各位朋友交流交流。本文章内容大部分参考的w3school。

前端功法篇-CSS

CSS:层叠样式表，负责HTML的页面布局

语法：

/*
选择器 {
	属性1: 值1;
	属性2: 值2;	
}
选择器指向需要设置样式的 HTML 元素。
*/
h1{
	color:Orange;
    font-size:20px;
}

/* */ 这是一条注释，css注释以/*开头，以*/结尾

1.选择器

1.1 简单选择器

1.1.1 标签选择器

/*给p标签设置属性*/
p {
    text-size = 20px;
    color = Orange;
}

1.1.2 id选择器

/*给id名为d1的标签设置属性,选择器以#开头接id名*/
#d1 {
    text-size = 20px;
    color = Orange;
}

1.1.3 类选择器

/*给class(类)名为c2的标签设置属性，选择器以.开头接类名*/
.c2 {
    text-size = 20px;
    color = Orange;
}

1.1.4 通配符选择器

/*给页面上的所有的 HTML 标签设置属性*/
* {
    text-size = 20px;
    color = Orange;
}

1.1.5 群组选择器

/*给多个需要设置相同属性的标签使用，使用逗号将选择器隔开，可以大程度的缩减代码量*/
p,#d1,.c1 {
    text-size = 20px;
    color = Orange;
}

1.2组合选择器

1.2.1 后代选择器

/*
	给所有在div标签里面的p标签设置属性，中间使用空格
		(此时的p就相当于div的后代标签)
*/
div p {
  	text-size = 20px;
    color = Orange;
}
/*
	如果html代码如下，则段落1、段落2、段落3全部会被改变为css代码里面的所需要设置的效果
    <div>
      	<p>段落 1。</p>
      	<p>段落 2。</p>
      	<section>
				<p>段落 3。</p>
	 	 </section>
    </div>
*/

1.2.2 子代选择器

/*
	给在div标签里面的子代p标签(一代，也就是div里面所有没被嵌套的p标签）设置属性，中间使用大于号
*/
div > p {
  	text-size = 20px;
    color = Orange;
}
/*
	如果html代码如下，则段落1、段落2全部会被改变为css代码里面的所需要设置的效果，段落3无影响
--------------------------------------------------------------------------------------
    <div>
      	<p>段落 1。</p>
      	<p>段落 2。</p>
      	<section>
				<p>段落 3。</p>
	 	 </section>
    </div>
*/

1.2.3 相邻选择器

/*
	给在div标签之后相邻的第一个p标签设置属性，中间使用加号
*/
div + p {
  	text-size = 20px;
    color = Orange;
}

/*
	如html代码这么写，只有段落3会被设置成css代码中所需要设置的效果，其他地方不受影响
--------------------------------------------------------------------------------------
	<p>段落666</p>
	<div>
          <p>div 中的段落 1</p>
          <p>div 中的段落 2</p>
    </div>
    <p>段落 3</p>
    <p>段落 4</p>
*/

1.2.3 相邻通用选择器

/*
	给在div标签之后所有的p标签设置属性，中间使用波浪号
*/
div ~ p {
  	text-size = 20px;
    color = Orange;
}

/*
	如html代码这么写，段落3、段落4、段落5都会被设置成其css代码中需要设置的属性效果
--------------------------------------------------------------------------------------
	<p>段落666</p>
	<div>
          <p>div 中的段落 1</p>
          <p>div 中的段落 2</p>
    </div>
    <p>段落 3</p>
	<span>
		<p>段落4</p>
	</span>
    <p>段落 5</p>
*/

1.3伪类选择器

伪类选择器用于定义元素的特殊状态下的样式，如：

  	1. 设置鼠标悬停在元素上时的样式
  	2. 为已访问和未访问链接设置不同的样式
  	3. 设置元素获得焦点时的样式 ( 例如当光标停留在文本框中的时候，此时input文本框则获得焦点 )

语法：

选择器:CSS伪类{

属性：属性值；

}

/*未访问的链接*/
a:link {
  color: #FF0000;
}

/*已访问的链接*/
a:visited {
  color: #00FF00;
}

  /*鼠标悬停链接 */
a:hover {
  color: #FF00FF;
}

 /*已选择的链接 */
a:active {
  color: #0000FF;
}

1.4伪元素选择器

CSS 伪元素用于设置元素指定部分的样式。

语法：

选择器::CSS伪元素{

属性：属性值；

}

选择器	例子	例子描述
::after	p::after	在每个 <p> 元素之后插入内容。
::before	p::before	在每个 <p> 元素之前插入内容。
::first-letter	p::first-letter	选择每个 <p> 元素的首字母。
::first-line	p::first-line	选择每个 <p> 元素的首行。
::selection	p::selection	选择用户选择的元素部分。

1.5属性选择器

为带有特定属性的 HTML 元素设置样式

语法：

标签名直接跟css属性选择器{

属性=属性值;

}

例如:
/*选取所有带有 target="_blank" 属性的 <a> 元素：*/
a[target="_blank"] { 
 background-color: yellow;
}

所有 CSS 属性选择器:

选择器	例子	例子描述
[attribute]	[target]	选择带有 target 属性的所有元素。
[attribute=value]	[target=_blank]	选择带有 target=“_blank” 属性的所有元素。
[attribute~=value]	[title~=flower]	选择带有包含 “flower” 一词的 title 属性的所有元素。
[attribute\|=value]	[lang\|=en]	选择带有以 “en” 开头的 lang 属性的所有元素。
[attribute^=value]	a[href^=“https”]	选择其 href 属性值以 “https” 开头的每个元素。
[attribute$=value]	a[href$=“.pdf”]	选择其 href 属性值以 “.pdf” 结尾的每个元素。
[attribute=value]	a[href*=“w3school”]	选择其 href 属性值包含子串 “w3school” 的每个元素。

2. CSS的使用方式

外部 CSS
内部 CSS
行内 CSS

2.1 外部 CSS

HTML 页面必须在 head 部分的 <link> 元素内包含对外部样式表文件的引用

<!--html代码
	link标签中的href属性来引用外部CSS,即href的属性值为外部css文件的路径
-->
<!DOCTYPE html>
<html>
    <title>外部CSS</title>
    <head>
    	<link rel="stylesheet" type="text/css" href="myCss.css">
    </head>
    <body>
        <h1>h1标题</h1>
        <p>p标签段落</p>
    </body>
</html>

/*myCss.css文件的内容*/
body {
  background-color: Orange;
}

p {
    	text-size = 20px;
    	color = Orange;
}

2.2 内部CSS

内部样式是在 head 部分的

<!DOCTYPE html>
<html>
    <head>
		<title>内部CSS</title>
    	<style>
				body {
                  background-color: Orange;
                }

				p {
                        text-size = 20px;
                        color = Orange;
                }
		</style>
    </head>
    <body>
        <h1>h1标题</h1>
        <p>p标签段落</p>
    </body>
</html>

2.3 行内 CSS

行内样式是在单个元素中style的属性值里设置CSS属性

<!DOCTYPE html>
<html>
    <head>
        <title>行内CSS</title>
    </head>
    <body style="background-color: Orange;">
        <h1>h1标题</h1>
        <p style="text-size = 20px;color = Orange;">p标签段落</p>
    </body>
</html>

2.4 层叠顺序

页面中的所有样式将按照以下规则“层叠”为新的“虚拟”样式表:

选择器优先级:id选择器>类选择器>标签选择

行内样式（在 HTML 元素中）
外部样式和内部样式
- 如内部外部同时对某一元素设置css属性,将使用最后读取的样式表中的值
浏览器默认样式

行内样式具有最高优先级，并且将覆盖外部和内部样式以及浏览器默认样式

3. CSS背景设置

3.1 background-color

background-color 属性指定元素的背景色。

/*background-color 属性指定元素的背景色。*/
body {
	background-color: green;
}

补充：opacity设置页面的不透明度，也就是其属性值越大，越不透明，数值越小，越透明

opacity的属性值可以取0~1之间，页面不透明度默认为1；也可以取百分数，在0%~100%之间，页面不透明度默认为100%

3.2 background-image

background-image 属性指定用作元素背景的图像

/*background-color 属性指定元素的背景色。url地址可以不用双引号也可以使用双引号。*/
/*url地址如果一开始加上双引号，在填入地址值的收，某些工具应该时没有提示，而不加双引号会有代码提示*/
body {
	background-image: url("xxx");
}

默认情况下，图像会重复，以覆盖整个元素。

3.3 background-repeat

默认情况下，background-image 属性在水平和垂直方向上都重复图像。这个时候可以通过为background-repeat设置相关属性值来调节想要的效果

/*水平方向重复*/
background-repeat: repeat-x;

/*垂直方向重复*/
background-repeat: repeat-y;

/*不重复*/
background-repeat: no-repeat

补充：有的时候虽然背景图片不重复，在这种不重复的情况下，由于背景图片眼花缭乱出现的效果可能对我们观看文字造成干扰。那么这个时候可以设置background-position 属性来解决此问题。

background-position 属性用于指定背景图像的位置。

/*把背景图放在靠左100px，靠上200px的位置*/
background-position: 100px 200px;

3.4 background-attachment

background-attachment 属性指定背景图像是应该滚动还是固定的（不会随页面的其余部分一起滚动）

/*固定背景图像,不会随页面的其余部分一起滚动（相对与当前页面，无论上下怎么滚动，该图片一直看得见，固定在某一位置）*/
background-attachment: fixed;

/*背景图像随页面的其余部分的滚动一起滚动(相对与当前页面，如果上下滚动页面，该背景图片会跟随着页面内容一起滚动)*/
background-attachment: scroll;

不设置background-attachment属性，默认时scroll,跟着页面内容，随着向下滚动，背景图向上滚走了

3.5 背景设置一条龙

不管时背景颜色还是背景图片，在设置背景的时候，为了省事一点，可以使用一行代码，同时把背景相关的属性设置好

/*
	在使用简写属性时，属性值的顺序为：

    background-color
    background-image
    background-repeat
    background-attachment
    background-position

属性值之一缺失并不要紧，只要按照此顺序设置其他值即可。
*/
body {
  background: #ffffff url("xxx") no-repeat right top fixed;
  margin-right: 200px;
}

4. CSS边框设置

CSS border 属性允许指定元素边框的样式、宽度和颜色。

4.1 边框样式

/*border-style 属性指定要显示的边框类型。*/
/*
	允许以下值：

    dotted - 定义点线边框
    dashed - 定义虚线边框
    solid - 定义实线边框
    double - 定义双边框
    groove - 定义 3D 坡口边框。效果取决于 border-color 值
    ridge - 定义 3D 脊线边框。效果取决于 border-color 值
    inset - 定义 3D inset 边框。效果取决于 border-color 值
    outset - 定义 3D outset 边框。效果取决于 border-color 值
    none - 定义无边框
    hidden - 定义隐藏边框

border-style 属性可以设置一到四个值（用于上边框、右边框、下边框和左边框）。
*/
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;} /*混合（4条边）*/

4.2 边框宽度

/*border-width 属性可以指定四个边框的宽度。*/

border-width: 5px 20px; /* 上边框和下边框为 5px，其他边为 20px */

border-width: 5px 10px 6px 11px; /* 上边框 5px，右边框 10px，下边框 6px，左边框 11px */

4.3 边框各边

/*为每一侧指定不同的边框,如：*/
  border-top-style: dotted;
  border-right-style: solid;
  border-bottom-style: dotted;
  border-left-style: solid;

补充：border-color 属性用于设置边框的颜色。

4.4 边框属性一条龙

/*
以在一个属性中指定所有单独的边框属性。

border 属性是以下各个边框属性的简写属性：
    border-width
    border-style（必需）
    border-color
*/
p {
  border: 5px solid red;
}

a {
  border-left: 6px solid red;
}

4.5 圆角边框

border-radius 属性用于向元素添加圆角边框

p {
  border: 2px solid red;
  /*数值越大，边框脚越远，这个数值最大不超过边框（四边形）最短边的一半*/  
  border-radius: 5px; 
}

5. CSS 外边距

CSS margin 属性用于在任何定义的边框之外，为元素周围创建空间。可用于设置元素每侧（上、右、下和左）的外边距

margin-top
margin-right
margin-bottom
margin-left

6. 字体和文本样式

6.1 字体样式

color字体颜色;
font-size字体大小;
font-weight 字体的粗细。
font-family 字体的类型,eg:“宋体”
font-style 字体倾斜
font:倾斜粗细大小/行高类型;

6.2 文本样式

text-align 文本水平对齐
text-decoration 文本修饰
line-height 行高
letter-spacing 字符间距
text-indent首选缩进

盒子模型

padding内边距
margin外边距
在这里插入图片描述

注意，能使用外边距就不使用内边距

拓展样式

文本溢出:overflow: 
	visible(全部显示)|
	hidden(超出部分隐藏)|
	croll(超出部分用滚动条展示);
display:
	none(隐藏)/
	block(将元素将显示为块级元素)/
	inline(将元素将显示为行级(内联)元素)

定位

position定位

static(静态定位,默认),relative(相对定位),absolute(绝对定位),fixed(固定定位).

relative(相对定位)

相对自身原来的位置发生偏移,元素没有脱离标准文档流, 还是占着原来的位置,不影响周围元素.
作用:微调元素距离.

absolute(绝对定位)

绝对定位相对设置了position的父标签来定位的,如果当前元素所有父标签没有设置position,相对于浏览器容器左上角(原点)定位.

绝对定位的元素脱离标准的文档流,不占原页面的位置,那么后面元素会受影响.
作用:作二级漂浮菜单.

fixed(固定定位)

相对浏览器窗口定位.配合设置元素层次的属性一起使用.
z-index:数字(层次);0层是当前标准html页面,大于0层.
作用:作流氓广告.

浮动(float)

float:left/right;

让块级元素变成行级元素.注意:浮动元素会影响后面紧跟着的元素.

后面元素不想受影响,要用clear:left/right/both;

css布局妙招

(重点记住)
1:整体布局:div+css
2:导航条/左右侧菜单:div+ul-li+css
3:图文混排:div+dl-dt-dd+css
4:规整表单:form+table
5:文本水平居中:text-align:center;
6:文本垂直居中:line-height
7:模块水平居中:margin:0px auto;配置width属性一起设置.
8:微调元素位置,首选外边距,其次内边距,最后才会考虑相对定位.
9:如果一行既有文字又有图片,文字想与图片垂直居中对齐,设置图片的vertical-align: middle;