网页设计 2.CSS

最新推荐文章于 2022-09-10 09:33:39 发布

普通还不自信的程序员

最新推荐文章于 2022-09-10 09:33:39 发布

阅读量275

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/qq_41841482/article/details/105297419

版权

笔记专栏收录该内容

68 篇文章 0 订阅

订阅专栏

二、CSS

2.1 CSS介绍

CSS：层叠样式表

作用：
		通过CSS可以定义HTML元素如何显示；
		HTML相当于毛坯房，CSS相当于在毛坯房的基础上精装修

优点：
		通过CSS可以提高工作效率，可以让我们将HTML代码与样式分离

书写规范：
		格式：选择器{属性:属性值;属性:属性值}
				选择器：确定当前CSS修饰哪一个元素

2.2 CSS和HTML结合——内联结合

 <div><font style="font-size: 600px;color: #008000;">这是一个div</font></div>

优点：简单方便
缺点：复用性差

2.3 CSS和HTML结合——内部结合

<head>
		<meta charset="UTF-8">
		<title>CSS和html结合之内部结合</title>
		<style>
			font{
				font-size: 200px;
				color: darkgreen;
			}
		</style>
</head>
	<body>
		<div>
			<!--字体大小为:200px,字体颜色:绿色-->
			<font >这是一个font1</font><br />
			<!--字体大小为:200px,字体颜色:绿色-->
			<font >这是一个font2</font><br />
			<!--字体大小为:200px,字体颜色:红色-->
			<font style="color: red;">这是一个font3</font><br />
		</div>
	</body>

    		1, 需要在head标签中，使用style标签
			2，使用选择器选中元素(后面详细讲)
			3，编写css代码
			格式：
				选择器 {
					属性名1:属性值1;
					属性名2:属性值2;
				}

2.4 CSS和html结合——外部结合

<link rel="stylesheet" href="css/css01.css" />

实现：
新建一个css样式文件
使用link年派遣引入外部样式文件

2.5 CSS选择器

2.5.1 Id选择器

使用#引入，引用的是元素的id属性值

<head>
		<style>			
			font{
				font-size: 200px;
			}			
			#one{
				color: greenyellow;
			}			
			#two{
				color: limegreen;
			}			
			#three{
				color: darkgreen;
			}
		</style>
	</head>
	<body>
		<!--字体颜色：淡绿-->
		<font id="one">this is font one</font><br />
		<!--字体颜色：中绿-->
		<font id="two">this is font two</font><br />
		<!--字体颜色：深绿-->
		<font id="three">this is font three</font><br />
	</body>

2.5.2 类选择器

使用“.”描述，引用的是元素上的class属性值

<head>
		<meta charset="UTF-8">
		<title>类选择器</title>
		<!--
			类选择器:引用的是class属性值
			格式：
				.class属性值{
					属性名:属性值;
				}
			处理多个元素有相同样式效果的！！！
		-->
		<style>
			font{
				font-size: 200px;
			}
			
			.one{
				color: greenyellow;
			}
			
			.two{
				color: limegreen;
			}
			
			.three{
				color: darkgreen;
			}
			
		</style>
	</head>

	<body>
		<!--字体颜色：淡绿-->
		<font class="one">this is font one</font><br />
		<font class="one">this is font two</font><br />
		<!--字体颜色：中绿-->
		<font class="two">this is font three</font><br />
		<font class="two">this is font one</font><br />
		<!--字体颜色：深绿-->
		<font class="three">this is font three</font><br />
		<font class="three">this is font two</font><br />
	</body>

2.5.3 标签选择器

对页面上的标签进行统一设置，引用的就是标签的名称

<head>
		<meta charset="UTF-8">
		<title>标签选择器</title>
		<!--
			标签选择器/元素选择器
			格式：
				标签名{
					属性名:属性值;
				}
			
			将font标签中的文本颜色修改为红色
			将span标签中的文本颜色修改为蓝色
			将div标签中的文本颜色修改为绿色
			所有的文本大小都为300px
			
		-->
		<style>
			body{
				font-size: 200px;
			}
			font{
				color: red;
			}
			span{
				color: blue;
			}
			div{
				color: green;
			}
		</style>
	</head>
	<body>
		<font>this is a font</font><br />
		<span>this is a span</span><br />
		<font>this is a font</font><br />
		<div>this is a div</div><br />
		<span>this is a span</span><br />
		<font>this is a font</font><br />
		<div>this is a div</div><br />
	</body>

2.5.4 分组

多个选择器使用同一段CSS，那么就可以使用分组。选择器之间用“，”隔开

<head>
		<meta charset="UTF-8">
		<title>选择器分组</title>
		<!--
			选择器分组:如果多个选择器中的css代码相同，那么就可以将这多个选择器划为一组。
			格式：
				id选择器,class选择,元素选择器{
					属性名:属性值;
				}
			font/span/div中的文本内容字体大小为200px,字体颜色为绿色
		-->
		<style>
			/*
			font{
				font-size: 200px;
				color: green;
			}
			span{
				font-size: 200px;
				color: green;
			}
			div{
				font-size: 200px;
				color: green;
			}
			*/
			
			#f1,.s1,div{
				font-size: 200px;
				color: green;
			}
			
		</style>
	</head>
	<body>
		
		<font id="f1">this is a font</font><br />
		<span class="s1">this is a span</span><br />
		<div>this is a div</div><br />
	</body>

2.5.5 派生选择器

通过依据元素在其位置的上下文关系来定义，可以使标记更加简洁。

<head>
		<meta charset="UTF-8">
		<title>衍生选择器</title>
		<!--
			衍生选择器/上下文选择器:依据元素所在的位置进行元素的选择
			格式：
				父选择器 子选择器{
					属性名:属性值;
				}
				父选择器：可以是id选择器、class选择器、元素选择器
				子选择器：可以是id选择器、class选择器、元素选择器
			需求：设置span中的font中内容样式。不准用id选择器、内联、class选择器
			先找到span,再找到font
		-->
		<style>
			
			span font{
				font-size: 200px;
				color: deepskyblue;
			}
			
		</style>
		
	</head>

	<body>

		<span>
			<font>这是一个font</font>
		</span>
		<div>
			<font>这是一个font</font>
		</div>
	</body>

2.5.6 选择器优先级

内联结合 > id选择器 > 类选择器 > 元素选择器

2.6 伪类

			a:link {color: #FF0000}	/* 未访问的链接 */
			a:visited {color: #00FF00}	/* 已访问的链接 */
			a:hover {color: #FF00FF}	/* 鼠标移动到链接上 */
			a:active {color: #0000FF}	/* 选定的链接 */

注意：
a:hover 必须被置于a:link和a:visited之后
a:active 必须被置于a:hover之后

2.7 字体属性

属性	描述
font	简写属性。作用是把所有针对字体的属性设置在一个声明中。
font-family	设置字体系列。
font-size	设置字体的尺寸。
font-size-adjust	当首选字体不可用时，对替换字体进行智能缩放。（CSS2.1 已删除该属性。）
font-stretch	对字体进行水平拉伸。（CSS2.1 已删除该属性。）
font-style	设置字体风格。
font-variant	以小型大写字体或者正常字体显示文本。
font-weight	设置字体的粗细

2.8 文本属性

属性	描述
color	设置文本颜色
direction	设置文本方向。
line-height	设置行高。
letter-spacing	设置字符间距。
text-align	对齐元素中的文本。
text-decoration	向文本添加修饰。
text-indent	缩进元素中文本的首行。
text-shadow	设置文本阴影。CSS2 包含该属性，但是 CSS2.1 没有保留该属性。
text-transform	控制元素中的字母。
unicode-bidi	设置文本方向。
white-space	设置元素中空白的处理方式。
word-spacing	设置字间距。

2.9 背景属性

CSS允许使用纯色作为背景，也允许使用背景图像创建相当复杂的效果

属性	描述
background	简写属性，作用是将背景属性设置在一个声明中。
background-attachment	背景图像是否固定或者随着页面的其余部分滚动。
background-color	设置元素的背景颜色。
background-image	把图像设置为背景。
background-position	设置背景图像的起始位置。
background-repeat	设置背景图像是否及如何重复。

2.10 尺寸属性

控制元素的高度和宽度、增加行间距

属性	描述
height	设置元素的高度。
line-height	设置行高。
max-height	设置元素的最大高度。
max-width	设置元素的最大宽度。
min-height	设置元素的最小高度。
min-width	设置元素的最小宽度。
width	设置元素的宽度。

2.11 列表属性

允许放置、改变列表项标志，或将图像作为列表项标志

属性	描述
list-style	简写属性。用于把所有用于列表的属性设置于一个声明中。
list-style-image	将图象设置为列表项标志。
list-style-position	设置列表中列表项标志的位置。
list-style-type	设置列表项标志的类型

2.12 边框属性

规定元素边框的样式、宽度和颜色

属性	描述
border	简写属性，用于把针对四个边的属性设置在一个声明。
border-style	用于设置元素所有边框的样式，或者单独地为各边设置边框样式。
border-width	简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。
border-color	简写属性，设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色。
border-bottom	简写属性，用于把下边框的所有属性设置到一个声明中。
border-bottom-color	设置元素的下边框的颜色。
border-bottom-style	设置元素的下边框的样式。
border-bottom-width	设置元素的下边框的宽度。
border-left	简写属性，用于把左边框的所有属性设置到一个声明中。
border-left-color	设置元素的左边框的颜色。
border-left-style	设置元素的左边框的样式。
border-left-width	设置元素的左边框的宽度。
border-right	简写属性，用于把右边框的所有属性设置到一个声明中。
border-right-color	设置元素的右边框的颜色。
border-right-style	设置元素的右边框的样式。
border-right-width	设置元素的右边框的宽度。
border-top	简写属性，用于把上边框的所有属性设置到一个声明中。
border-top-color	设置元素的上边框的颜色。
border-top-style	设置元素的上边框的样式。
border-top-width	设置元素的上边框的宽度
border-radius	圆角边框的半径

2.13 盒子模型

CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框和外边距的方式。

element:元素内容

width:内容宽度

height:内容高度

border:元素边框

padding:边框到内容的距离,padding-left/top/right/bottom

margin:边框到其他元素(父元素/兄弟元素)的距离,margin-left/top/ right/bottom

box

2.13.1 内边距属性

属性	描述
padding	简写属性。作用是在一个声明中设置元素的所内边距属性。
padding-bottom	设置元素的下内边距。
padding-left	设置元素的左内边距。
padding-right	设置元素的右内边距。
padding-top	设置元素的上内边距。

2.13.2 边框属性

属性	描述
border	简写属性，用于把针对四个边的属性设置在一个声明。
border-style	用于设置元素所有边框的样式，或者单独地为各边设置边框样式。
border-width	简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。
border-color	简写属性，设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色。
border-bottom	简写属性，用于把下边框的所有属性设置到一个声明中。
border-bottom-color	设置元素的下边框的颜色。
border-bottom-style	设置元素的下边框的样式。
border-bottom-width	设置元素的下边框的宽度。
border-left	简写属性，用于把左边框的所有属性设置到一个声明中。
border-left-color	设置元素的左边框的颜色。
border-left-style	设置元素的左边框的样式。
border-left-width	设置元素的左边框的宽度。
border-right	简写属性，用于把右边框的所有属性设置到一个声明中。
border-right-color	设置元素的右边框的颜色。
border-right-style	设置元素的右边框的样式。
border-right-width	设置元素的右边框的宽度。
border-top	简写属性，用于把上边框的所有属性设置到一个声明中。
border-top-color	设置元素的上边框的颜色。
border-top-style	设置元素的上边框的样式。
border-top-width	设置元素的上边框的宽度。

2.13.3 外边距属性

属性	描述
margin	简写属性。在一个声明中设置所有外边距属性。
margin-bottom	设置元素的下外边距。
margin-left	设置元素的左外边距。
margin-right	设置元素的右外边距。
margin-top	设置元素的上外边距。

2.14 css定位属性概念

2.14.1 position 属性

通过使用 position 属性，我们可以选择 4 种不同类型的定位，这会影响元素框生成的方式。

position 属性值的含义：

static 
元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。 
relative 
元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。 
absolute 
元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。 
fixed 
元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。

提示：相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。

2.14.2 定位属性

属性	描述
position	把元素放置到一个静态的、相对的、绝对的、或固定的位置中。
top	定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。
right	定义了定位元素右外边距边界与其包含块右边界之间的偏移。
bottom	定义了定位元素下外边距边界与其包含块下边界之间的偏移。
left	定义了定位元素左外边距边界与其包含块左边界之间的偏移。
overflow	设置当元素的内容溢出其区域时发生的事情。
clip	设置元素的形状。元素被剪入这个形状之中，然后显示出来。
vertical-align	设置元素的垂直对齐方式。
z-index	设置元素的堆叠顺序。

2.15 块级元素和行内元素

2.15.1 display 属性

display 属性规定元素应该生成的框的类型

属性	描述
none	此元素不会被显示。
block	此元素将显示为块级元素，此元素前后会带有换行符。
inline	默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block	行内块元素。（CSS2.1 新增的值）

2.16 伸缩布局

属性	描述
flex-container	伸缩容器
main-axis	主轴,元素的排列方向，默认是row(水平方向)
cross-axis	侧轴，默认是column(垂直方向)
flex-item	伸缩元素

普通还不自信的程序员

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
网页设计 2.CSS

HTML一、HTML简介1.1 HTML概述HTML全称：Hyper Text Markup Language(超文本标记语言) HTML是一门用户创建网页文档的标记语言，网页本身是一种文本文件，在文本文件中添加标记符。浏览器来解析HTML标记的内容（文字的处理，画面排版安排，图片如何显示、音频、视频等等） HTML是用来创建网页的标记语言1.2 HTML特点1、简...
复制链接

扫一扫