CSS的基础

最新推荐文章于 2024-07-24 11:13:53 发布

SsWwJj02

最新推荐文章于 2024-07-24 11:13:53 发布

阅读量175

点赞数

文章标签： css html

本文链接：https://blog.csdn.net/S011212/article/details/111589669

版权

CSS基础学习

在这里插入图片描述

首先先给大家几个常用的，用于写html，css，javascrip的软件

notepad++
IntelliJ IDEA
WebStorm
Adobe Dreamweaver
Visual Studio code
Sublime Text
HBulider
Editplus

1、CSS的简介

1.1、CSS的概述

CSS 指层叠样式表 (Cascading Style Sheets)
样式定义如何显示 HTML 元素
样式通常存储在样式表中
把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效率
外部样式表通常存储在 CSS 文件中
多个样式定义可层叠为一

1.2 CSS的作用

如果单纯用HTML写的网页，通常都是不怎么好看的。
所以CSS的作用可以称为是网页的美容师
CSS也是一种标记语言。
CSS主要用于设置HTML种的文本内容（字体、大小、对齐方式等）、
图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。

小结
HTML主要做整体结构，显示元素内容。
CSS美化HTML，布局网页。

1.3 CSS的语法

1.3.1 CSS的语法规范

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。
如下图：在这里插入图片描述

选择器通常是您需要改变样式的 HTML 元素。
每条声明由一个属性和一个值组成。
属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。
如：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
     /*选择器{样式}*/
     h1 {
    
     	/*颜色改为红*/
     	color: red;
     }
	</style>
</head>
<body>
	<h1>初识CSS</h1>
	
</body>
</html>

效果如下图：
在这里插入图片描述

1.3.2 CSS的书写格式的4种引入方法

1、内嵌式引入
把style标签嵌套在head标签中

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		body{
    font-size:36px;}
	</style>
</head>
<body>
<p>内嵌式引入</p>
</body>
</html>

2、行内样式引入
直接在html标签中插入style标签

<h1 style="font-size:36px;">行内样式引入</h1>

3、外链样式引入
把css当成是一个文件，通过link标签引入到html中

<link rel="stylesheet" type="text/css" href="css/main.css">

4、嵌入样式引入

<style type="text/css">
  @import url("css/style.css");
  
</style>

【注】行内样式引入>其他三种引入样式，其他三种引入样式的显示取决于距离。

2、CSS的基础选择器

2.1 CSS选择器的作用

选择器就是根据不同的需求把不同的标签单独选出来，然后进行单独设置其标签样式。

2.2 CSS选择器的分类

CSS选择器分为基础选择器和复合选择器。
基础选择器分为：标签选择器、id选择器、类选择器和全选择器。
这里只讲述基础选择器。
1.标签选择器：通过标签的名字来命名的

 body{
   color:red;} p{
   color:red}

作用：能将某一类标签全部选择出来，比如所有的div标签或span标签。
优点：能快速为页面中同类型的标签统一样式。
缺点：不能设置差异化样式，只能选择全部的当前标签。

2.id选择器： 当标签中出现id属性的那么可以使用id选择器
Id选择器通常应用于某些标签中独有的样式
Id选择器的标识是#

	#one{
   
			color:gold;
		}

作用：作用于单一使用该选择器的标签
优点：能差异化设置样式，一一对应。
缺点：无法多次使用，只能使用一次。

3.类选择器：当标签中出现class属性的时候那么可以使用类选择器
类选择器通常应用于某几个标签具有相同的样式
类选择器的标识： .+标签

.pink{
   
			color:pink;
		}
<head>
</head>
<body>
<h1 class="pink">类选择器</h1>	
</body>

作用：能差异化设置样式，可以用于单个或多个标签。

最低0.47元/天解锁文章

SsWwJj02

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
CSS的基础

CSS基础学习首先先给大家几个常用的，用于写html，css，javascrip的软件notepad++IntelliJ IDEAWebStormAdobe DreamweaverVisual Studio codeSublime TextHBuliderEditplus1、CSS的简介1.1、CSS的概述CSS 指层叠样式表 (Cascading Style Sheets)样式定义如何显示 HTML 元素样式通常存储在样式表中把样式添加到 HTML 4.0 中，是为了解
复制链接

扫一扫