CSS入门教程：概念、作用与导入方式解析

需积分: 11 104 浏览量更新于2024-08-04 收藏 1.65MB PDF 举报

"CSS课堂笔记概述及基本概念、导入方式" 在Web开发中，CSS（层叠样式表）是至关重要的技术，用于定义HTML或XML文档的视觉表现。CSS不仅能够静态地装饰网页，还能与JavaScript等脚本语言结合，动态调整网页元素的样式。本笔记将详细介绍CSS的基本概念、作用、规范以及导入方式。一、CSS概念 CSS全称为Cascading Style Sheets，其核心功能是定义HTML元素的外观和布局。通过CSS，开发者可以控制字体、颜色、布局、间距等多种样式特性。CSS的层叠特性意味着当多个样式定义应用于同一个元素时，它们会按照特定规则进行叠加，解决样式冲突并保持设计的一致性。二、CSS的作用与规范 1. 作用： - 修饰美化HTML网页，提升用户体验。 - 提高代码复用性，减少重复编写，提高开发效率。 - 实现内容与样式的分离，便于网页的后期维护和更新。 2. 规范： - CSS规则由选择器和声明组成，选择器指定要改变样式的元素，声明则包含属性和对应的值。 - 注释格式：`/* 这里是注释内容 */` - 声明的语法：选择器 { 属性：值; 属性：值; ... } - 值若包含多个单词，需用引号包围；声明间使用分号分隔。 - CSS不区分大小写，但与HTML文档交互时，class和id名称大小写敏感。三、CSS导入方式 1. 内嵌方式：直接在HTML元素中使用`style`属性插入CSS样式，如`<div style="color:blue;font-size:50px">...</div>`。 2. 内部方式：在`<head>`标签内使用`<style>`标签引入CSS，如`<style>div{...}</style>`。 3. 外部方式：将CSS代码存储在独立的`.css`文件中，然后在HTML中通过`<link>`标签引用，例如： ```html <link rel="stylesheet" type="text/css" href="div.css"> ``` 其中，`rel`表示当前页面与引用文件的关系，`type`指明文件类型，`href`指向CSS文件路径。 4. @import：在CSS文件内部使用`@import`规则引入其他CSS文件，如`@import url("other.css");` 了解这些基础知识后，开发者可以根据实际需求选择合适的CSS导入方式，实现高效且美观的网页设计。通过熟练掌握CSS，可以创建出响应式、易维护的现代Web页面。

link和@import方式的区别：

link所有浏览器都支持，@import某些版本低的IE不支持

@import是等待html加载完成才加载

@import不支持js动态修改

四、 CSS选择器

主要用于选择需要添加样式的html元素

4.1 基本选择器

元素选择器：在head中使用style标签引入在其中声明元素选择器:html标签{属性:属性值}

id选择器：给需要修改样式的html元素添加id属性标识，在head中使用style标签引入在其中声明

id选择器: #id值{属性:属性值}

class选择器：给需要修改样式的html元素添加class属性标识，在head中使用style标签引入在其

中声明class选择器: .class名{属性:属性值}

备注：以上基本选择器的优先级从高到低：id选择器，class选择器，元素选择器

4.2 属性选择器

<style type="text/css">

   @import url("div.css")

</style>

该内容放在head标签中

 span{color: red;font-size: 100px}

</style>  

创建id选择器：

<div id="s1">hello,everyone!</div>

<div id="s2">hello,everyone!</div>

 <div id="s3">hello,everyone!</div>

根据id选择器进行html文件修饰

 <style type="text/css">

#s1{color: red;font-size: 100px}

#s2{color: green;font-size: 100px}

#s3{color: blue;font-size: 100px}

 </style>

创建class选择器：

 <div class="s1">hello,everyone!</div>

 <div class="s2">hello,everyone!</div>

 <div class="s3">hello,everyone!</div>

根据id选择器进行html文件修饰：

 <style type="text/css">

   .s1{color: purple;font-size: 100px}

   .s2{color: pink;font-size: 100px}

   .s3{color: yellow;font-size: 100px}

 </style>

剩余12页未读，继续阅读

人工智能_SYBH

粉丝: 4w+
资源: 222

CSS入门教程：概念、作用与导入方式解析

前端学习全部知识点课堂笔记思维导图总汇

尚硅谷（李立超）——HTML5&CSS3笔记总结【持续更新】

css课堂笔记

Day05_CSS课堂笔记.md

Day04_HTML&CSS课堂笔记.md

Javaweb最新全套项目实战视频教程-CSS课堂笔记

Web前端CSS视频教程课堂笔记

斑码教育大前端课堂笔记-css第一天

前端课堂笔记知识总结. html css的相关知识点

CSS与CSS3美化页面课堂笔记.zip #资源分享达人#

最新资源