沫篝的幻想世界
0%

css

发表于 分类于

本来是想跟html分类在一起的，但为了看得更清晰，这里还是决定再开有一个篇章

  1. 内联方式（行内样式）
    就是在HTML的标签中使用style属性来设置css样式
    格式： <html标签 style=”属性:值;属性:值;….”>被修饰的内容</html标签>

<p style="color:blue;font-family:隶书">在HTML中如何使用css样式</p>
特点：仅作用于本标签。
style=”border: 1px solid red; padding: 20px”

  1. 内部方式（内嵌样式）
    就是在head标签中使用标签来设置css样式
    格式：

    特点：作用于当前整个页面
  1. 外部导入方式（外部链入）
    就是在head标签中使用标签导入一个css文件，在作用于本页面，实现css样式设置
    格式：

特点：作用于整个网站

他们的优先级：当样式冲突时，就是采用就近原则，是值css属性离被修饰的内容最近的为主。
若没有样式冲突则采用叠加效果。

下面我们做实验来验证一下:

1.css内联

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>css内嵌样式</title>
</head>
<body>
<h1 style="border: 5px solid green;">CSS内嵌</h1>
</body>
</html>

示例图

2.css内嵌

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>css内联样式</title>
	<style type="text/css">
		h1{
			border: 2px solid yellow;
			padding: 20px;
			#设置内边框大小
		}

	</style>
</head>
<body>
<h1>CSS内嵌</h1>
</body>
</html>

示例图:

3.css外链

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>css外链</title>
	<link rel="stylesheet" type="text/css" href="1.css">
</head>
<body>
<p>112121212</p>
</body>
</html>
1
2
3
4
5
6
p{
	border: 12px solid yellow;
	padding: 20px;
#边框粗细和线条样式颜色
#设置内边框大小
}

示例图:

4.优先级测试

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>css外联</title>
	<style>
			p{
			border: 2px solid green;
			padding: 20px;
		}
	</style>
	<link rel="stylesheet" type="text/css" href="1.css">
<!-- 就近原则，这里是优先采用外链 -->
</head>
<body>
<p>正常输出</p>
<p style="border: 2px solid blue;">内联输出</p>
</body>
</html>
！！这里的就近原则指的是离被修饰文本更近

示例图:

ok，接下来就是7个css选择器
1.html选择符（标签选择器）

1
2
3
4
5
6
<head>
<style>
p{}
h1{}
</style>
</head>

2.class类选择符 (使用点.将自定义名（类名）来定义的选择符)
定义： .类名{样式….} 

1
2
3
4
5
6
7
8
9
10
<head>
<style>
.md1{}	
.md2{}
</style>
</head>
<body>
<p class="md1">121212</p>
<h1 class="md2">121212</h1>
</body>

3.id选择符
定义： #id名{样式…..}
注意：id选择符只在网页中使用一次.

1
2
3
4
5
6
7
8
<head>
<style>
#md1{}
</style>
</head>
<body>
<p id="md1">121212</p>
</body>

选择符的优先级：从大到小 [ID选择符]->[class选择符]->[html选择符]->[html属性]
4.通配符选择器（通用选择器）
选择器名称为* 的选择器
语法：
{property: value;property: value}
功能，对所有html标签起作用。
一般用于页面的初始化工作，统一字体，边框，内外边距
{
font-size:20px;
color:#3366FF;
}
5.关联选择符（包含选择符）
格式： 选择符1 选择符2 选择符3 …{样式….}
例如： table a{….} /table标签里的a标签才采用此样式*/
h1 p{color:red} /只有h1标签中的p标签才采用此样式*/

6.组合选择符（选择符组）
格式： 选择符1,选择符2,选择符3 …{样式….}
h3,h4,h5{color:green;} /h3、h4和h5都采用此样式/
7.伪类选(伪元素)择符：
格式： 标签名:伪类名{样式….}

1
2
3
4
a:link {color: #FF0000; text-decoration: none} 	    /* 未访问的链接 */
a:visited {color: #00FF00; text-decoration: none} 	    /* 已访问的链接 */
a:hover {color: #FF00FF; text-decoration: underline} /* 鼠标在链接上 */
a:active {color: #0000FF; text-decoration: underline} /* 激活链接 */

这些了解一下就可以了
接下来让我们了解一下css的常用属性
1.color颜色属性
RGB颜色: 红(R)、绿(G)、蓝(B)三个颜色通道的变化
background-color: #CCCCCC;
RGBA颜色: 红(R)、绿(G)、蓝(B)、透明度(A)
background-color: rgba(0,0,0,0.5);
2.字体属性 (font)
font-size: 20px (字体大小)
font-family: Arial (选择字体)
font-style: （normal默认字体 ，italic斜体 , oblique倾斜的字体）
font-weight: bold (粗体)
3.文本属性
text-indent: 30px （首行缩进）
text-overflow: (溢出时输出…)
white-space:nowrap (强制在同一行输出文本)
text-align: 文本的位置：left center right
text-decoration: 字体画线：none无、underline下画线，line-through贯穿线
text-shadow: 文本的文字是否有阴影及模糊效果
text-shadow:1px 1px rgba(0,0,0,0.3);
letter-spacing: 文字或字母的间距
line-height：行高
color:颜色
4.边框
border:宽度 样式 颜色;
border-color;
border-style; 边框样式：solid实线，dotted点状线，dashed虚线
border-width:
border-left-color;
border-left-style;
border-left-width:
CSS3的样式
border-radius：圆角处理
box-shadow: 设置或检索对象阴影
5.背景属性：background
background-color: 背景颜色
background-image: 背景图片
background-repeat：是否重复，如何重复?(平铺)
background-position：背景定位
6. 内补白（内补丁）
padding： 检索或设置对象四边的内部边距,如padding:10px; padding:5px 10px;
padding-top： 检索或设置对象顶边的内部边距
padding-right： 检索或设置对象右边的内部边距
padding-bottom：检索或设置对象下边的内部边距
padding-left： 检索或设置对象左边的内部边距

  1. 外补白（外补丁）
    margin： 检索或设置对象四边的外延边距,如 margin:10px; margin:5px auto;
    margin-top： 检索或设置对象顶边的外延边距
    margin-right： 检索或设置对象右边的外延边距
    margin-bottom： 检索或设置对象下边的外延边距
    margin-left： 检索或设置对象左边的外延边距

  2. Position定位
    position: 定位方式：absolute(绝对定位)、fixed(固定)（relative定位参考，可对内部相对absolute定位）
    z-index: 层叠顺序，值越大越在上方。
    top: 检索或设置对象与其最近一个定位的父对象顶部相关的位置
    right: 检索或设置对象与其最近一个定位的父对象右边相关的位置
    bottom: 检索或设置对象与其最近一个定位的父对象下边相关的位置
    left: 检索或设置对象与其最近一个定位的父对象左边相关的位置
    让我们来做个小练习

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    <!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8">
    	<meta name="viewport" content="width=device-width, initial-scale=1">
    	<title>DIV box</title>
    	<style type="text/css">
    		.div1{
    			width: 200px;
    			height: 500px;
    			background-color: blue;
    			float: left;		
    		}
    		.div2{
    			width: 500px;
    			height: 200px;
    			background-color: pink;
    			/*background-color: yellow;
    			border: 10px solid pink;
    			margin-top: 100px;
    			margin-left: 200px;*/
    			float: left;
    		}
    		.div3{
    			background-color: yellow;
    			width: 500px;
    			height: 300px;
    			float: left;
    		}
    		.div4{
    			width: 700px;
    			height: 500px;
    		}
    	</style>
    </head>
    <body>
    	<div class="div4">
    		<div class="div1"></div>
    		<div class="div2"></div>
    		<div class="div3"></div>
    	</div>
    </body>
    </html>

    示例图:

    接下来来做一些理论练习

  3. CSS指的是什么？ A
    A. 层叠样式表
    B. 网页编程语言
    C. 网页制作软件
    D. 图像处理软件

  4. CSS的主要作用是什么？ D
    A. 美化网页
    B. 制作动画
    C. 编写代码
    D. 设计网站结构

  5. 如何使用CSS选择器选择页面上的所有段落？ A
    A. p { }
    B. #p { }

C. .p { }
D. * { }

  1. 下列哪个CSS属性用于设置文本颜色？ A
    A. color
    B. font
    C. text
    D. size

  2. 下列哪个CSS属性用于设置背景图片？ A
    A. background-image
    B. background-color
    C. background-position
    D. background-size

  3. CSS中的“z-index”属性用于控制什么？ B
    A. 元素的透明度
    B. 元素的堆叠顺序
    C. 元素的宽高
    D. 元素的背景色

  4. 下列哪个CSS选择器用于选择具有特定类的元素？ B
    A. id选择器
    B. 类选择器
    C. 标签选择器
    D. 属性选择器

  5. CSS中的“box-shadow”属性用于实现什么效果？ C
    A. 文本阴影
    B. 图片阴影
    C. 元素阴影
    D. 边框阴影

  6. 如何使用CSS将元素的显示方式设置为块级元素？ B
    A. display: inline;
    B. display: block;
    C. display: none;
    D. display: flex;

  7. 下列哪个CSS属性用于设置元素的内边距？ A
    A. padding
    B. margin
    C. border
    D. width

二、填空题（每题3分，共15分）

  1. CSS选择器分为标签选择器、类选择器、id选择器和伪类选择器四种。

  2. CSS中用于设置字体大小的属性是font-size。

  3. 要使一个元素在页面中居中显示，可以使用CSS的text-align属性和margin属性。

  4. CSS中，background-color属性用于设置元素的背景颜色。

  5. CSS的margin属性用于设置元素之间的外边距。

三、简答题（每题10分，共30分）

  1. 简述CSS的层叠规则。
    CSS层叠规则是指多个样式运用于同一个元素，浏览器最终的展示，元素的优先级如下:
    内联>id选择符>，class（类选择器）,伪类选择符>html选择符（标签显示器）同优先级按最后的执行

  2. 解释CSS中“盒模型”的概念，并列举其组成部分。
    CSS盒模型包括内容，外边距（margin），内边距（padding），边框(border),内容为主体，展示文本内容，图片等，内边距指内容与边框的距离，边框将包裹着内边距和内容，外边距指的是盒子与其他元素的距离。

  3. 描述如何使用CSS创建一个简单的导航栏。
    用< ul>定义结构，< li>设置列表项，可以通过float或display:inline-block属性来使内容水平排列。

四、应用题（每题15分，共30分）

  1. 编写CSS代码，实现以下要求：

  • 页面背景色为浅灰色（#f0f0f0）

  • 段落文字颜色为深蓝色（#000080），字体大小为16px，行高为1.5

  • 所有链接在未被点击时显示为红色（#ff0000），点击后变为绿色（#00ff00）

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
     body{
      	blackboard-color: #f0f0f0;
      }
      p{
      	font-color: #000080;
      	font-size: 16px;
      	line-height: 1.5;
      }
    a {
    	font-color: #ff0000;
    }
    a hover{
    	font-color: #00ff00;
    }
    a:link /* 未访问的链接 */
    a:visited  /* 已访问的链接 */
    a:hover/* 鼠标在链接上 */
    a:active/* 激活链接 */
  1. 编写CSS代码，实现以下要求：

  • 创建一个宽度为300px、高度为200px的div元素，背景色为黄色（#ffff00）

  • 在div元素内部放置一个宽度为50%、高度为50px的矩形，背景色为蓝色（#0000ff），并居中显示

  • 为div元素添加边框，宽度为2px，颜色为黑色（#000000）

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    .div{
    	widen: 300px;
    	height: 200px;
    	background-color: #ffff00;
    	border: 2px solid #000000;
    	display: flex;
    	justify-content: center;
    	align-items: center;
    }
    .div .box{
    	width: 50%;
    	height: 50px;
    	background-color: #0000ff;
    }

五、综合题（每题5分，共5分）

描述CSS在网页设计中的重要性，并举例说明其在实际项目中的应用。

CSS在网页设计中扮演着至关重要的角色。它允许开发者以{独立于HTML的方式控制网页的外观和布局，从而实现更加美观、易于维护和响应式的网站}通过使用CSS，开发者可以统一设置页面的字体、颜色、间距等样式，提高网页的可读性和用户体验。此外，{CSS还支持动画、过渡和变换等效果，为网页增添动态和交互性}。

在实际项目中，CSS的应用广泛而深入。例如，在构建企业官网时，可以使用CSS来{定义网站的整体风格，包括配色方案、字体选择和布局方式}，以确保网站的一致性和品牌识别度。在电商网站中，CSS可以用来设计商品展示页面的样式，如商品图片的排列、价格标签的样式以及购买按钮的样式等，以提升用户的购物体验。此外，CSS还可以用于响应式设计，{使网站能够在不同设备和屏幕尺寸上良好地显示和运行}。

还有一份改日再整理