css基础

最新推荐文章于 2024-07-19 14:29:49 发布
最新推荐文章于 2024-07-19 14:29:49 发布
阅读量224 收藏
点赞数
文章标签： css 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/pan303121/article/details/121323132
版权

  今天我们开始进行css的基础介绍。

首先，我们要知道什么是css。CSS是Cascading Style Sheets（层叠样式表单）的简称。CSS是一种用来表现HTML或XML等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

引入方式

css的引入方式有四种

1.行内样式

行内样式又叫做标签样式，它是在标签里面加上style属性

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>css样式</title>
</head>
<body>
	<h2 style="color:red;text-align:center">这是行内样式</h2>
</body>
</html>

2.内嵌样式

行内样式又叫做标签样式，它是在标签里面加上style属性

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>css样式</title>
	<style type="text/css">
       h2{
       	color: blue;
       	text-align: center;
       }
	</style>
</head>
<body>
	<h2>这是一个内嵌样式</h2>
</body>
</html>

3.外链样式

外链样式的建立分为三步

第一步：新建一个.css的文件，专门写css样式

第二步：head标签内写入link标签 (link标签可以存在在body标签内，但是不推荐使用)

第三步：link 里href属性 将css文件引入 （路径（绝对路径和相对路径））

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>css样式</title>
	<link rel="stylesheet" type="text/css" href="1.css">
</head>
<body>
	<h2>这是一个外链样式</h2>
</body>
</html>

4.导入样式

导入样式顾名思义就是导入css

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>css样式</title>
	<style type="text/css">
 		@import url("1.css");
	</style>

</head>
<body>
	<h2>这是一个导入样式</h2>
</body>
</html>

我们在HTML中输入该代码段后就可以导入1.css（自己建立）

优先级：

就近原则，修饰的样式距离body标签越近优先级越高 。

选择器

1.基本选择器

1、标签选择器

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>选择器</title>
	<style type="text/css">
    h2{color:red;}
	</style>
</head>
<body>

<h2>标签选择器</h2>



</body>
</html>

这样输出的h2标签为：标签选择器

2、ID选择器

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>选择器</title>
	<style type="text/css">
    
    #one{color:blue;}


	</style>
</head>
<body>
<p id="one">ID选择器</p>



</body>
</html>

这样输出的标签结果为：ID选择器

3、类选择器

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>选择器</title>
	<style type="text/css">

     .two{color:green;}


	</style>
</head>
<body>

<p class="two">类选择器</p>


</body>
</html>

这样输出的结果为：类选择器

4、通用选择器（通配符选择器）

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>选择器</title>
	<style type="text/css">
       p{color:pink;}
    #one{color:red;}
    .two{color:blue;}
    *{color:green;}
    </style>

</head>
<body>
<p>第一行</p>
<div id="one">第二行</div>
<div class="two">第三行</div>
<div>第四行</div>
<div>第五行</div>
<div>第六行</div>

</body>
</html>

从第四行开始输出标签的结果全为绿色，而通用选择器的作用就是将没有用其他选择器标记的标签统一选择。

2.包含选择器

包含选择器包含三种选择器

1、子代选择器 ------获取的某个标签的第一级子标签

2、后代选择器----- 获取某个标签内的所有子标签

3、分组选择器（也叫做逗号选择器，可以给多个标签加上样式，通过，隔开）

​
​
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>包含选择器</title>
	<style type="text/css">
	    /* 子代选择器 */
	   /* .list>ul{
	    	color: green;
	    }*/
	    /* 后代选择器 */
	   /* .list li{
	    	color: red;
	    }*/
	    /* 分组选择器 */
		h2,.list,#list{
			color: blue;
		}
	</style>
</head>s
<body>
	<h2>这是第一行</h2>
	<p id="list">这是第二行</p>
	<div class="list">
		<ul>
			<li>这是列表1</li>
			<li>这是列表2</li>
			<li>这是列表3</li>
			<li>这是列表4</li>
			<li>这是列表5</li>
		</ul>
		<li>这是列表6</li>
		<li>这是列表7</li>
		<li>这是列表8</li>
		<li>这是列表9</li>
	</div>
</body>
</html>

​

​

子代选择器限制列表1至5的颜色为绿色，而后代选择器限制列表1至9全为红色，但由于分组选择器的出现所有标签的颜色又为蓝色。

由此，我们可以知道优先级为 分组>后代>子代

3 属性选择器

简而言之就是选择标签中具有相同属性代码段进行选择

1. 选中某个标签的某个属性 

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>属性选择器</title>
	<style type="text/css">
	div[title]{
			color: red;}
</style>
</head>
<body>
  <div title="first">这是第一种属性选择器</div>
</body>
</html>

由于选择的是div[title]这个属性，所有输出的结果为：这是第一种属性选择器

2.确切的等于

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>属性选择器</title>
	<style type="text/css">

	input[type="text"]{
			background: yellow;
		}
	</style>
</head>
<body>
<input type="text" id="one" value="确切等于">
</body>
</html>

因为是确切等于input标签中的type="text"文本，所有输出的文本框的背景颜色为黄色

3. 某个属性含有某个值

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>属性选择器</title>
	<style type="text/css">
input[type*="e"]{
			background:green;}
	</style>
</head>
<body>
<input type="text" id="" class="" value="张三">
</body>
</html>

因为text单词中含有“e”，所有，输出文本框颜色为绿色。

4.某个属性以什么开始fen

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>属性选择器</title>
	<style type="text/css">
	input[type^="e"]{
			background: pink;}
</style>
</head>
<body>
<input type="email" id="" class="" value="以e开头">
</body>
</html>

因为email是以“e”开头的，所有文本框的颜色为粉色。

5.某个属性以什么结束

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>属性选择器</title>
	<style type="text/css">
	input[type$="rl"]{
			background: purple;}
	</style>
</head>
<body>
	<input type="url" id="" class="" value="以rl结束">
</body>
</html>

因为url的结尾为rl，所以文本框背景颜色为紫色

6.表示下一个标签 

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>属性选择器</title>
	<style type="text/css">
	
		 .msg + {
			color: red;}
	</style>
</head>
<body>
<div class="msg">这是第一行</div>
	<div title="这是一个标题">这是第二行</div>
</body>
</html>

由于msg的下一个标签为div，则输出的结果为这就是第二行。当然有的时候我们会遇到像上面一样输入下一标签没有反应的问题，原因就是浏览器版本不支持，这个时候我们就以上为例  .msg +<div>，这样就可以输出相同结果。

7.属性名称等于某个值

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>属性选择器</title>
	<style type="text/css">
	[title="这是一个标题"]{
			color: gray;
		}
	</style>
</head>
<body>
<div title="这是一个标题">相同属性</div>
</body>
</html>

因为title的属性名称为这是一个标题，则，结果为相同属性。

伪类选择器

同一个标签，根据不同的状态，有不同的样式，这就叫做伪类，使用的是冒号:表示的

:link    -------- 超链接点击之前的样式
:visited   -------- 链接被访问之后
:hover  ------ 悬停，鼠标放到标签上的样式
:active  --------被激活的时候，鼠标点击的时候，但是不松手的时候
:focus  -------- 某个标签获得焦点的时候

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>伪类选择器</title>
	<style type="text/css">
		/* 让超链接点击之前是红色 */
		a:link{
			color: red;
		}
		/* 让超链接点击之后是绿色 */
		a:visited{
			color: green;
		}
		/* 让鼠标悬停的时，放到标签上变成粉色 */
		a:hover{
			color: pink;
		}
		/* 让鼠标点击链接不松手的时候橙色 */
		a:active{
			color: orange;
		}
	</style>
</head>
<body>
	<a href="https://www.baidu.com/">进入百度</a>
</body>
</html>

注意：顺序是一定的，不可以改变，他们的顺序 :link :visited :hover :active

伪元素选择器

:after   ------- CSS2提供的
:before
::after   ----- CSS3提供
::before

注意：如果要使用before和after，一定要加上content（内容）属性

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>伪元素选择器</title>
	<style type="text/css">
       p::before{
       	content: "zhangsan";
       	color: red;
       }
       p::after{
       	content: "lisi";
       }
	</style>
</head>
<body>
	<p>这是一个段落</p>
</body>
</html>

而css的常见样式请进入

w3school 在线教程

完整阅读。

天天的博客
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS基础语句
weixin_53968665的博客
12-25 1364
CSS
CSS——CSS基础知识
流楚丶格念的博客
06-26 8014
文章目录CSS的发展历程CSS 网页的美容师CSS初识引入CSS样式表（书写位置）内部样式表行内式（内联样式）外部样式表（外链式）三种样式表总结（位置）CSS样式规则外链案例内链案例 CSS的发展历程 从HTML被发明开始，样式就以各种形式存在。不同的浏览器结合它们各自的样式语言为用户提供页面效果的控制。最初的HTML只包含很少的显示属性。 随着HTML的成长，为了满足页面设计者的要求，HTML添加了很多显示功能。但是随着这些功能的增加，HTML变的越来越杂乱，而且HTML页面也越来越臃肿。于是CSS便诞生
CSS基础（超详解）
热门推荐
m0_52896041的博客
11-30 2万+
Css (层叠样式表)是种格式化网页的标准方式， 用于控制设置网页的样式，并且允许CSS样式信息与网页内容(由HTML语言定义)分离的一种技术。
CSS基础
书启鸿蒙知秋枫
12-28 5962
层叠这个词说明了一种情况，使用不同的选择器可能会同时选择到同一个标签，对这一个标签的同一个属性设置不同的值，就会产生样式重叠。CSS里不仅要使用选择器找到标签，找到标签以后还需要使用CSS的属性键值对设置标签的属性。使用类选择前，需要先给符合一定规律的标签按照特点进行分类，给这些标签添加class属性，再通过class属性来找到对应的元素。CSS不仅可以给HTML的标签添加样式，同时还可以对HTML里的标签进行布局，修改标签的位置。可以根据属性值的不同，给特定的标签设置样式。
CSS基础知识
ashfiqa的博客
01-21 2103
这是对于前端CSS的基础知识的一个简单概括，里面讲述了很多基础的东西，欢迎大家来看一下。 CSS 全称 Cascading Style Sheets，CSS是为了修改HTML的样式，让HTML的界面变得更完善，如果说HTML是网页的结构，那么CSS就是网页化妆师。
CSS基础知识总结
Lotus_fragrance的博客
04-29 3280
一、基础认识 css的中文又叫做：层叠样式表。 语法：选择器 + {属性名： 属性值}、 css引入方式：1.内嵌式，写在style标签中。通常放在head中。2.行内式：写在style标签中，写在标签中。3.外联式：单独写一个css文件，通过link把该文件引入。 二、选择器 选择器 在html中写法 在css中写法 标签选择器 就是标签本身 div{ } 类选择器 class= "banner" .banner { }.
CSS基础 知识点总结
星星之火的语言c学习
08-18 2657
① CSS指的是层叠样式表，用来控制网页外观的一门技术② CSS发展至今，经历过CSS1.0 CSS2.0 CSS2.1 CSS3.0这几个版本，CSS3.0是CSS最新版本① 选择器就是选中你想要的元素，就是指用一种方式把你想要的那个元素选中，只有把这个元素选中，你才能为它添加样式② 五种常用的选择器元素选择器id选择器class选择器后代选择器群组选择器③ 语法选择器属性1：取值1；属性2: 取值2；...属性n: 属性n;① 元素选择器。
css基础知识
健康平安的活着的专栏
05-12 1875
一 css 1.css 用于控制网页样式的一种标记语言，通过使用css可以使网站外观更加美观，结构更加简化。 2.css的语法： 选择符{属性:属性值}；属性必须要包含在{}中，并且之间用属性和属性值“：”分隔。当有多个属性时，用“；”进行区分。 3.选择符： 通配符选择符，* 代表所有元素，如 *{font-size:12px}; 类型选择符 如 <p class="red"> 这是第一个段落 </p> 选择符的写法： p.red{color:red}...
CSS基础入门（详细总结笔记）
程序员阿龙的博客
08-12 3358
CSS基础入门，详细总结
项目CSS基础样式模板
小琳爱分享的博客
07-23 1153
项目CSS基础样式模板
CSS基础代码
03-27
**CSS基础代码详解** 在网页设计中，CSS（Cascading Style Sheets）是不可或缺的一部分，它用于控制网页的布局和样式。本资料包包含了作者学习CSS时编写的代码，非常适合CSS初学者作为学习素材。通过阅读和理解这些...
css基础教学1
08-03
CSS基础教学1 CSS是 Cascading Style Sheets 的缩写，译为层叠样式表，是一种用于描述网页样式的语言。CSS主要用于控制网页的布局、颜色、字体、背景等各种样式元素。 在本教程中，我们将学习如何使用CSS对...
css 基础样式 base.css
04-28
css基础样式
Tailwind CSS：颠覆常规的实用主义设计利器
艾恩小灰灰的博客
07-18 543
Tailwind CSS 是一个实用类优先的 CSS 框架，它不提供预设的组件或设计系统，而是通过一系列小而功能明确的实用类，允许开发者快速构建自定义的设计。与 Bootstrap、Foundation 等传统框架相比，Tailwind 更强调灵活性和可定制性。Tailwind CSS 通过其独特的实用类优先方法，为前端开发带来了新的视角。它不仅简化了样式编写，还提高了开发效率和代码的可维护性。
CSS实现从上往下过渡效果
Rverdoser的博客
07-18 276
属性改变时（即鼠标悬停时），它会在0.5秒内完成平滑的从上往下移动50像素的变化。要在CSS中实现一个从上往下的过渡效果，你可以使用。类定义了一个方框，并指定了一个过渡效果，使得当。
关于css中flex布局垂直居中失效问题的原因
最新发布
zuo-yiran的博客
07-19 355
flex布局垂直居中失效原因
CSS基础到进阶：掌握网页布局的艺术
2301_79375313的博客
07-19 454
CSS不仅是样式表，更是实现创意布局和优秀用户体验的强大工具。通过不断学习和实践，你将能够掌握更多高级技巧，创造出令人惊叹的网页作品。
XHTML与CSS基础知识入门指南
本篇教程是关于XHTML与CSS基础知识的教学，旨在为有一定HTML和CSS基础的网页开发者提供一个从表格布局向Web标准（div+css）过渡的学习路径。对于初次接触网页制作的新手，需要具备基本的网页基础知识，包括了解表格...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值