认识CSS/css的作用和优势/css的常见的样式规则/引入css样式表的常用方法/css的基础选择器/学习笔记

最新推荐文章于 2024-05-20 22:08:52 发布

noahsark747

最新推荐文章于 2024-05-20 22:08:52 发布

阅读量641

点赞数 1

文章标签： css html 前端

本文链接：https://blog.csdn.net/No1banana/article/details/122639949

版权

一、CSS能够做什么

1.CSS能够实现`结构`与`表现`相互分离

通过CSS可以用来灵活的摄者网页的样式，而HTML标签只用于搭建网页的基本结构即可

2.CSS的优势

节约成本：css3版本提供了很佛新特性，减少代码量与开发成本
提高性能：CSS3能够使用更少的代码制作图形化网站，

二、CSS样式规则

选择器{ 属性1: 属性值1 ; 属性2 : 属性值2 ; }

上面的样式示例中，选择器用于制定CSS样式作用的HTML对象，{}中的是具体的样式属性，以键值对形式出现，用“:” “;” 进行区分。

注意事项：

选择器严格区分大小写，声明不用区分大小写

属性之间用;隔开

属性的属性值由多个单词组成时，中间需要包含空格，且单词需要加上" "

编写CSS代码时使用/*注释语句*/来注释

CSS代码中空格不被解析，花括号以及分号之间的空格可有可无，因此可以使用空格或者tab等进行排版

如：

   <style> p{  color:green; font-size:16px; }</style>

三、引入CSS样式表的方法

行内式：也称为内联样式，是直接通过style属性来设置元素样式，语法如下：

  ```<标签名 style="属性1：属性值1；属性2：属性值2；">内容</标签名>```

  <body>

  <p style=" font-size:32px; color:#03c">我是文本内容1234567890</p>

  </body>

内嵌式：将CSS代码集中写在HTML文档的<head>标签中定义，基本语法如下：

<head> 
<style type="text/css">
p{ color:green; font-size:16px; }
</style></head>  
/*type属性主要用于声明代码的类型，html5中可以省略*/

链入式（实际开发中最常用）：将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中，通过<link/>标签链接到HTML文档中，语法如下：

  ```<head> <link href="css文件路径" type="text/css" rel="stylesheet"/></head>```优点在于可以同步加载HTML和CSS

导入式：导入式针对外部样式表文件。对HTML头部文档应用style标签，并在<style>标签内的开头处使用@import语句即可倒入外部的样式表文件，格式如下：


<style type="text/css">@import "css的文件路径，可以是相对路径和绝对路径";
      /*在此还可以存放其它css样式*/ 
      </style>

先加载HTML再加载CSS，运行不如链入式

四、CSS的基础选择器

CSS的基础选择器就是将`css样式`应用于特定的html元素首先需要找到目标的元素，执行这一项任务的样式规则。

标签选择器

是指用html标签名称作为选择器，为某一类标签指定统一的CSS样式

   <html>
   <head>
   <meta charset="UTF-8">
   <title>导入式</title>
   	<style>
   		p{
   				font-size: 24px;
   				color:green;
   		}
	   		h2{
	   			color: red;
	   			}
   	</style>
   </head>
   <body>
   	<h2>标题文本一</h2>
   	<p>段落文本1</p>
   	<p>段落文本2</p>
   	<p>段落文本3</p>
   	<p>段落文本4</p>	
   </body>
   </html>```

类选择器：使用. (英文.号)进行标识，后面紧跟类名

<html>
   <head>
   <meta charset="UTF-8">
   <title>导入式</title>
   	<style>
   		p{
   				font-size: 24px;
   				color:green;
   		}
   		h2{
   			color: red;
   		}
   		.b{
   			font-size: 36px;
   		}
   	</style>
   </head>
   <body>
   	<h2>标题文本一</h2>
   	<p>段落文本1</p>
   	<p>段落文本2</p>
   	<p>段落文本3</p>
   	<p class="b">段落文本4</p>	
   </body>
   </html>

类名区分大小写

ID选择器：使用#进行标识，后面紧跟ID名，使用方式和类名方式类似。

#id="id名字" {属性1:属性值1;}

ID名依然区分大小写，且ID名称一定要设置一个唯一的独立的ID名。

通配符选择器（所有选择器中作用最广泛）：

通配符选择器用*表示，他的作用效果最广泛。但实际开发中不建议使用通配符选择器。

###欢迎加入QQ群一同交流学习937864538

noahsark747

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
认识CSS/css的作用和优势/css的常见的样式规则/引入css样式表的常用方法/css的基础选择器/学习笔记

一、CSS能够做什么1.CSS能够实现结构与表现相互分离通过CSS可以用来灵活的摄者网页的样式，而HTML标签只用于搭建网页的基本结构即可2.CSS的优势节约成本：css3版本提供了很佛新特性，减少代码量与开发成本提高性能：CSS3能够使用更少的代码制作图形化网站，二、CSS样式规则选择器{ 属性1: 属性值1 ; 属性2 : 属性值2 ; }上面的样式示例中，选择器用于制定CSS样式作用的HTML对象，{}中的是具体的样式属性，以键值对形式出现，用“:” “;” 进行区分。
复制链接

扫一扫