CSS样式入门级教程

最新推荐文章于 2024-04-08 05:48:02 发布

总有一天你会出现在我身边

最新推荐文章于 2024-04-08 05:48:02 发布

阅读量547

点赞数

分类专栏： AAA 文章标签： css html css3

本文链接：https://blog.csdn.net/qq_45895931/article/details/125148597

版权

AAA 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

css样式入门

一、什么是CSS

Cascading Style sheet 层叠样式表：层叠性
通过定义CSS样式表，能让网页具有美观一致的界面，可以将网页制作得更加绚丽多彩。一个样式文件可以作用于多个页面，具有更好的易用性和扩展性，通过修改样式文件，能制作出内容相同，而外观不同的多姿多彩的页面。通过CSS可以实现内容和样式分离。方便后期维护。

二、CSS应用

1.内部样式表（在head中定义css）

<style type="text/css">
选择器
{ 
  样式属性1 : 值1 ;  
  样式属性2 : 值2 ;
  ...  
}
</style>

选择器：用于选择到某个html元素，然后为元素设置css样式(注意：所有符号用英文)

在这里插入图片描述

2.外部样式表

外部样式表的使用步骤：
1.定义好html页面内容
2.新建一个单独的css文件
3.在css文件中直接定义样式内容
4.在html文件中引用css文件

<!-- 引入外部的样式表文件 -->
<link rel="stylesheet" href="样式文件路径" type="text/css" />

好处：一个样式文件可以作用于多个页面，具有更好的易用性和扩展性，通过修改样式文件，能制作出内容相同，而外观不同的多姿多彩的页面。

<!-- 行内样式表 ：不推荐使用 -->
<h2 style="color:red; font-family:宋体;">内容</h2>

基础选择器

1.标签选择器

使用html标签名定义样式，匹配到的html元素，自动应用定义的样式

<!--定义css内部样式表:在head标签内部定义
	样式的作用:目的是修饰html内容
  -->
  <style type="text/css">
	/* 注释代码 
	选择器
	{
		样式属性1 : 值1 ;
		样式属性2 : 值2 ;
		...
	}	
	选择器:用于选择匹配页面中的特定元素
	标签选择器: 用html标签名做选择器，自动匹配对应的标签元素
	*/
	h2
	{
		font-size:40px; /*字体大小*/
		color: red;  /*字体颜色*/
		text-align:center;  /*居中*/
	}
	p
	{
		color:green;
		font-size:20px;
		text-align:center;
	}
  </style>

<h2>采桑子·当时错<sub>纳兰性德</sub></h2>
		<p>而今才道当时错，心绪凄迷。</p>
		<p>红泪偷垂，满眼春风百事非。</p>
		<p>情知此后来无计，强说欢期。</p>
		<p>一别如斯，落尽梨花月又西。</p>
		<h6>现在才知道当初我错了，心中凄凉迷乱，眼泪默默落下，满眼看到的都是春风，事物却非于从前。后来知道这是没有办法的，勉强自己说很快乐，像这样别离，梨花落完了 ，月亮已经在天的西方。</h6>

2.类选择器

进行更细致化、更灵活的样式控制要使用类样式
使用类样式(类选择器)的步骤：
1. 定义类样式: 在style标签中用".样式名"的方式定义类样式
2. 使用类样式: 在需要使用类样式的元素中通过class属性引用样式名

<html>
 <head>
  <title> New Document </title>
  <meta charset="utf-8">
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <style type="text/css">
	/*请让第2个p和第2个li变红*/
	/*进行更细致化更灵活的样式控制要使用类样式*/
	/*
	使用类样式(类选择器)的步骤：
	1. 定义类样式: 在style标签中用".样式名"的方式定义类样式
	2. 使用类样式: 在需要使用类样式的元素中通过class属性引用样式名
	*/
	.hs{
		color:red;
	}
  </style>
 </head>

 <body>
  <h1 class="hs">这是标题内容</h1>
  <p>这是第1个P标签</p>
  <p class="hs">这是第2个P标签</p>
  <p>这是第3个P标签</p>
  <p>这是第4个P标签</p>
  <ul>
	<li>这是第1个li</li>
	<li class="hs">这是第2个li</li>
	<li>这是第3个li</li>
	<li>这是第4个li</li>
  </ul>
 </body>
</html>

3.id选择器

id选择器: identifier 唯一的
id属性定义的元素在整个页面必须唯一，也就是id名是不能重复
id一般用于定义页面的布局元素 div,span
id在js中用于js获取对象的时候使用
id定义样式的步骤：
1. 在style标签中用 "#id名"的方式定义样式
2. 在需要使用id样式的元素中通过id属性引用id名来使用样式

<head>
  <title> New Document </title>
  <meta charset="utf-8">
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <style type="text/css">
	/*id选择器: identifier 唯一的
	  id属性定义的元素在整个页面必须唯一，也就是id名是不能重复
	  	  
	  id一般用于定义页面的布局元素 div,span
	  id在js中用于js获取对象的时候使用
	  
	  id定义样式的步骤：
	  1. 在style标签中用 "#id名"的方式定义样式
	  2. 在需要使用id样式的元素中通过id属性引用id名来使用样式
	*/
	#bt{
		color:blue;
	}
	#p2{
		color:green;
	}
	#li3{
		color:red;
	}
  </style>
 </head>
 <body>
  <h1 id="bt">这是标题内容</h1>
  <p >这是第1个P标签</p>
  <p id="p2">这是第2个P标签</p>
  <p>这是第3个P标签</p>
  <p>这是第4个P标签</p>
  <ul>
	<li>这是第1个li</li>
	<li>这是第2个li</li>
	<li id="li3">这是第3个li</li>
	<li>这是第4个li</li>
  </ul>
 </body>
</html>

优先级
样式权重: 对于同一个元素，只使用权重高的样式
!important: 10000
行内: 1000
id: 100
类: 10
标签: 1

总结

♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥

总有一天你会出现在我身边

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS样式入门级教程

Cascading Style sheet 层叠样式表：层叠性。通过定义CSS样式表，能让网页具有美观一致的界面，可以将网页制作得更加绚丽多彩。一个样式文件可以作用于多个页面，具有更好的易用性和扩展性，通过修改样式文件，能制作出内容相同，而外观不同的多姿多彩的页面。通过CSS可以实现内容和样式分离。方便后期维护。...
复制链接

扫一扫