css基础教程

最新推荐文章于 2024-03-21 02:42:55 发布
VIP文章 最新推荐文章于 2024-03-21 02:42:55 发布
阅读量1k 收藏 7
点赞数
文章标签： css html html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/content899/article/details/120344436
版权

css基础教程

文章目录

一、css简介

css指层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML的一个应用）文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。简单而言，css是用来控制网页的外观的一种代码语言，定义了如何显示HTML元素

二、css语法

选择器 {属性 ： 属性值 ； 属性 ： 属性值}

在这里插入图片描述

1、语法分为两部分：选择器 和 一条或多条声明

2、声明包含属性和属性值，属性和属性值之间用冒号链接，属性和属性之间用分号隔开

3、当一个属性有多个属性值时，属性值之间部分先后顺序，用空格隔开

三、css的引入方式

1、内部样式表（内联式）

写在标签内部，添加

<!DOCTYPE html>
<html>
	<head>
		<meta charset = "utf-8" />
		<title>css基础</title>
		<style>
			h3 {
     
				color: lightgreen ;
			}
		</style>
    </head>
    <body>
    	<h3>花开花落</h3>
    </body>
</html>

效果图：

在这里插入图片描述

2、外部样式表（外联式）

创建一个独立的css文档，利用标签进行链接，书写在标签内部

HTML界面：

<!DOCTYPE html>
<html>
	<head>
		<meta charset = "utf-8" />
		<title>css基础</title>
		<link rel = "stylesheet" type = "text/css" href = "css/one.css" />
	</head>
	<body>
		<div>你站在桥上看风景，看风景的人在桥上看你</div>
	</body>
</html>

CSS界面：

div {
   
	color : yellow;
	height : 30px;
	weight : 50px;
	background-color : #90EE90;
	border : 3px /* 宽度 */  solid  /* 实线 */  #333 /* 颜色 */;
}

效果图：

在这里插入图片描述

3、内联样式表（内嵌式）

直接书写在标签内部，通过标签的style属性来使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset = "utf-8" />
		<title>css基础</title>
	</head>
	<body>
		<div style = "color: aqua; background-color: #333333; height : 30px; weight = 50px">我生平看过许多次的云，走过许多的桥</div>
	</body>
</html>

效果图：

在这里插入图片描述

四、css选择器

选择器表示要定义样式的对象，可以是元素本身，也可以是一类元素或者指定名称的元素

1、元素选择器

以标签名作为选择器的一种方式，p/div/ul/li…

元素选择器{ 属性 ：属性值 ； 属性 ： 属性值；}

HTML界面：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>css选择器</title>
		<link rel = "stylesheet" type = "text/css" href = "css/one.css" />
	</head>
	<body>
		<p>人生若只如初见</p>
	</body>
</html>

CSS界面

p{
   
	color : #9ACD32;
}

效果图：

在这里插入图片描述

2、类选择器

在HTML中添加一个class属性，在css中利用 . 加class名的方式进行书写

.css{ 属性 ： 属性值 ； 属性 ： 属性值；}

HTML界面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>css选择器</title>
		<link rel = "stylesheet" type = "text/css" href = "css/one.css" />
	</head>
	<body>
		<p class = "p1">今天下雪了</p>
	</body>
</html>

CSS界面

.p1{
   
	color : aqua;
}

效果图：

在这里插入图片描述

【注】：class = " " 引号中是class名，ciass名的命名要是字母开头，可以结合下划线和数字。p1相当于是外号，所以可以有多个外号，如下：

HTML界面：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>css选择器</title>
		<link rel = "stylesheet" type = "text/css" href = "css/one.css" />
	</head>
	<body>
		<p class = "p1 p2">今天下雪了</p>
	</body>
</html>

CSS界面：

.p1{
   
	color : aqua;
}

.p2{
   
	height : 100px ;
	width : 200px ;
	background-color : blue ;
	border : aliceblue solid #00FFFF; 
}

效果图：

在这里插入图片描述

3、id选择器

在标签中为一个元素定义一个id属性，在css中通过#加id名的方式来进行表示

#id名{属性 ： 属性值 ；属性 ： 属性值 ；} id具有唯一性（一个页面中同一个id名不能出现两次）

HTML界面

<!DOCTYPE html>
<html>
	<head>
		<meta charset = "utf-8" />
		<title>css选择器</title>
		<link rel = "stylesheet" type = "text/css" href = "css/one.css" />
	</head>
	<body>
		<h2 id = "box">我是一个栗子</h2>
	</body>
</html>

CSS界面

#box{
   
	color : yellow ;
}

效果图如下：

在这里插入图片描述

4、群组选择器

当多个选择器有同样的样式设置时，可以将选择器用逗号分开，合并为一组

选择器1 ， 选择器2 ， 选择器3{属性 ： 属性值 ； 属性 ： 属性值 ；}

HTML界面：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>css选择器</title>
		<link rel = "stylesheet" type = "text/css" href = "css/one.css" />
	</head>
	<body>
		<p class = "box_1">我是盒子</p>
		<p class = "box_2">我是盒子</p>
		<p id = "box_3">我是盒子</p>
	</body>
</html>

CSS界面：

.box_1 , .box_2 , #box_3{
   
	height :50px ;
	width : 100px ;
	background-color : yellowgreen;
	border : beige solid #00FFFF; 
	color : red ;
}

效果图：

在这里插入图片描述

5、包含选择器

利用父级元素对子集元素进行设置

选择器爷 选择器父 选择器子{属性 ： 属性值 ； 属性 ： 属性值 ；}

HTML界面：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>css选择器</title>
		<link rel = "stylesheet" type="text/css" href = "css/one.css" />
	</head>
	<body>
		<div class = "box_a">
			<p>我是小白兔</p>
		</div>
	</body>
</html>

CSS界面：

.box_a p{
   
	color : #FF0000;
}

效果图：

在这里插入图片描述

6、伪类选择器

:hover{属性 ： 属性值 ； 属性 ： 属性值 ；}

HTML界面：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>css选择器</title>
		<link rel = "stylesheet" type="text/css" href = "css/one.css" />
	</head>
	<body>
		<a class = "act" href = "https://www.baidu.com">百度</a>
	</body>
</html>

CSS界面：

.act:hover{
   
	color : #FF0000 ;
}

效果图：

鼠标没划过：

在这里插入图片描述

鼠标划过：

在这里插入图片描述

7、通配符

对页面中所有的元素进行样式设置

*{属性 ： 属性值 ； 属性 ： 属性值 ；}

​ CSS界面：

*{
   
	margin : 0;       /*外边距*/
	padding : 0;      /*内边距*/
}

五、浮动

设置了浮动的属性的元素会向左或向右移动，设置元素水平方向的排列方式

第一步，让元素竖向排列

HTML界面：

<!DOCTYPE html>
<html>
	<head>
		<meta charset = "utf-8" />
		<title>浮动</title>
		<link rel = "stylesheet" type = "text/css" href = "css/one.css" />
	</head>
	<body>
		
		<div class = "box1">1</div>
		<div class = "box2">2</div>
		<div class = "box3">3</div>
		
	</body>
</html>

CSS界面：

*{
   
	margin : 0 ;
	padding :0 ;
}

.box1{
   
	width : 200px ;
	height :200px
最低0.47元/天 解锁文章
冰月黎
关注
  • 0
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
css教程
09-15
CSS基础教程 （css教程.pdf）
CSS 基础
weixin_30289831的博客
06-17 140
CSS 简介 CSS 概述 CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素 样式通常存储在样式表中 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题 外部样式表可以极大提高工作效率 外部样式表通常存...
css从入门到精通【超详细笔记】，初学者必备
最新发布
m0_58269520的博客
03-21 818
浮动设计的初衷为了解决文字环绕图片问题，浮动后一定不会将文字挡住，这是设计初衷，不能违背的。CSS 的 Float（浮动）使元素脱离文档流，按照指定的方向（左或右发生移动），直到它的外边缘碰到包含框或另一个浮动框的边框为止。说到脱离文档流要说一下什么是文档流，文档流是是文档中可显示对象在排列时所占用的位置/空间，而脱离文档流就是在页面中不占位置了。
学习CSS3这一篇就够了
热门推荐
轻松的小希
11-25 4万+
目录CSS第一章 CSS概述1.1、概述1.2、语法1.3、注释1.4、如何创建并引用1.4.1、外部样式表（外联式）1.4.2、内部样式表（内联式）1.4.3、内联样式（行内式）1.5、三种引入优先级第二章 CSS选择器2.1、id选择器2.2、class选择器2.3、标签选择器2.4、子代选择器2.5、后代选择器2.6、相邻兄弟选择器2.7、后续兄弟选择器2.8、交集选择器2.9、并集选择器2.10、通配符选择器2.11、伪类选择器2.11.1、anchor伪类2.11.2、input伪类2.11.3、
CSS入门教程
打代码是一天，不打代码也是一天
04-04 2614
CSS，层叠样式表（Cascading Style Sheet），给网页中的HTML标签设置样式CSS写在一个单独的文件中，通过link标签在网页中引入 2.2.2 内部样式 CSS写在网页的head标签中，用style标签包裹 2.2.3 行内样式 CSS写在标签的style属性中 三种CSS样式引入方式的区别选择器，就是选取（查找）需要设置样式元素的方式 2.3.1 元素选择器 通过元素名称，选取（查找）相同元素，然后对相同元素设置CSS样式 小结：1、无论嵌套多少层，只要元素名称相同都会被找到通过类
CSS基础教程
long_steve的博客
09-13 514
1
css基础教程之CSS基础语法
09-25
主要介绍了css基础教程之CSS基础语法,本文详细介绍了CSS的一些基础知识,需要的朋友可以参考下
样式表CSS 简明教程
路漫漫其修远兮
04-20 1027
转自www2.webshu.com样式表CSS在网页中占着极重要的地位，它的使用一直是热门讨论的话题。CSS是Cascading Style Sheet的简写，译为“层叠样式表单”。CSS几乎可以定义所有的网页元素，CSS虽然功能强大，但平时我们用到的是很少的，最常见的有：定义字体大小(用CSS定义的字体大小不会浏览器的字体设置而改变)、去掉超链下划线、超链接变色等等。下面详细、简练地讲如何使
css 简明教程 简明教程
07-17
css简明教程 ，适合于学了许多css知识，但没成体系的人阅读，通过这个教程，可以整理思路，贵在简明-----只讲重要的！
CSS学习教程之简单入门
cug-jdc的博客
07-12 487
层叠样式表（CascadingStyleSheet，简称：CSS）是为网页添加样式的代码。本学习教程主要介绍 CSS 的基础知识，并解答类似问题：怎样将文本设置为黑色或红色？怎样将内容显示在屏幕的特定位置？怎样用背景图片或颜色来装饰网页？做一个简单的入门。对于CSS的学习可以分为以下四个部分来阶梯型进行： CSS基础 该部分介绍 CSS 的基础知识，包括选择器和属性，编写 CSS 的规则，将CSS 应用于 HTML 的方法，如何在 CSS 中指定长度、颜色和其他单位，层叠与继承，盒模型基础以及 CS..
CSS零基础快速入门（详细教程）
小杨的博客
05-20 5089
CSS是层叠样式表，是一种用来表现HTML或XML等文件样式的计算机语言；CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化；CSS还能够对网页中元素位置的排版进行像素级精确控制。
CSS视频教程
hp1025的博客
12-28 516
本课程包含7章44个小节课程，内容涵盖：CSS基础、CSS选择器、CSS属性和属性值、CSS 边框和背景、CSS盒子模型、文本样式等。 http://www.codingdict.com/course/15 ...
css入门
Vincent_Dr_W的博客
04-10 311
什么是 CSS? CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素 样式通常存储在样式表中 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题 外部样式表可以极大提高工作效率 外部样式表通常存储在 CSS 文件中 多个样式定义可层叠为一个 样式解决了一个很大的问题 HTML 标签原本被设计为用于定义文档内容，如下实例： &...
CSS最详细的基础教程
黑夜人的博客
08-30 8625
层叠样式表CSS 绝对原创 CSS简介：Cascading Style Sheets(层叠样式表)的缩写，它是一种用来表现HTML或XML等文件样式的计算机语言。 CSS的作用： 是定义网页外观（例如，字体、背景、文本、位置、布局、边缘、列表及其他等),它也可以和JavaScript等浏览器端脚本语言合作做出许多动态效果。 所谓的样式表，是样式化HTML的一种方法，HTML
CSS基础教程（上） - 阿蜜果 - BlogJava
张宏双的专栏
01-01 1173
导读： 　　因为本人是个CSS盲，为了改善这种情况，特意扫了一下盲，前不久不买书时，看到一本不错的CSS基础书，顺手买了一本，觉得还不错，记了一下笔记，共享给大家。 　　一． CSS入门 　　1. CSS应用到(X)HTML的方法 　　1）内联样式 　　内联样式（inline style）通过Style属性应用于文档的特定标记。(X)HTML中的样式值通过name:value或proper
css入门基础详细教程
wtt561111的专栏
01-13 1429
css入门基础教程，特别详细，图文并茂。步骤浅显易懂。
css改变value颜色_CSS 基础教程：语法基础
06-06
要改变CSS中的value颜色，你需要使用CSS属性和值。通常使用的属性是color，可以改变文本的颜色。下面是一个例子： ```css p { color: red; } ``` 这会将所有的段落文本颜色改为红色。你可以将“red”替换为其他颜色名称，例如“blue”，“green”等。你还可以使用十六进制或RGB颜色值，例如： ```css p { color: #ff0000; /* 红色 */ color: rgb(255, 0, 0); /* 红色 */ } ``` 这些代码片段将产生相同的效果，将所有段落文本颜色设置为红色。更多关于CSS颜色的信息可以在CSS颜色教程中找到。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值