iis服务器助手广告广告
返回顶部
首页 > 资讯 > 精选 >前端基础入门二(CSS)
  • 807
分享到

前端基础入门二(CSS)

2023-06-03 11:06:10 807人浏览 泡泡鱼
摘要

学习。大纲学会使用CSS选择器熟记CSS样式和外观属性熟练掌握CSS各种选择器熟练掌握CSS各种选择器熟练掌握CSS三种显示模式熟练掌握CSS背景属性熟练掌握CSS三大特性熟练掌握CSS盒子模型熟练掌握CSS浮动熟练掌握CSS定位11.熟练

学习。大纲

  1. 学会使用CSS选择器
  2. 熟记CSS样式和外观属性
  3. 熟练掌握CSS各种选择器
  4. 熟练掌握CSS各种选择器
  5. 熟练掌握CSS三种显示模式
  6. 熟练掌握CSS背景属性
  7. 熟练掌握CSS三大特性
  8. 熟练掌握CSS盒子模型
  9. 熟练掌握CSS浮动

熟练掌握CSS定位
11.熟练掌握CSS高级技巧强化CSS


CSS的发展历程

html被发明开始,样式就以各种形式存在。不同的浏览器结合它们各自的样式语言为用户提供页面效果的控制。最初的HTML只包含很少的显示属性。

随着HTML的成长,为了满足页面设计者的要求,HTML添加了很多显示功能。但是随着这些功能的增加,HTML变的越来越杂乱,而且HTML页面也越来越臃肿。于是CSS便诞生了。


CSS初识

CSS(Cascading Style Sheets) 美化样式

CSS通常称为CSS样式表或层叠样式表(级联样式表),主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边距等)以及版面的布局等外观显示样式。

CSS以HTML为基础,提供了丰富的功能,如字体、颜色、背景的控制及整体排版等,而且还可以针对不同的浏览器设置不同的样式。


引入CSS样式表(书写位置)

CSS可以写到那个位置? 是不是一定写到html文件里面呢?


内部样式表

内嵌式是将CSS代码集中写在HTML文档的head头部标签中,并且用style标签定义,其基本语法格式如下:

<head><style type="text/CSS">    选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}</style></head>

语法中,style标签一般位于head标签中title标签之后,也可以把他放在HTML文档的任何地方。

type="text/CSS" 在HTML5中可以省略, 写上也比较符合规范, 所以这个地方可以写也可以省略。


行内式(内联样式)

内联样式,又有人称行内样式、行间样式、内嵌样式。是通过标签的style属性来设置元素的样式,其基本语法格式如下:

<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>

语法中style是标签的属性,实际上任何HTML标签都拥有style属性,用来设置行内式。其中属性和值的书写规范与CSS样式规则相同,行内式只对其所在的标签及嵌套在其中的子标签起作用。


外部样式表(外链式)

链入式是将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中,通过link标签将外部样式表文件链接到HTML文档中,其基本语法格式如下:

<head>  <link href="CSS文件的路径"  rel="stylesheet" /></head>

注意: link 是个单标签哦!!!

该语法中,link标签需要放在head头部标签中,并且必须指定link标签的三个属性,具体如下:

href:定义所链接外部样式表文件的URL,可以是相对路径,也可以是绝对路径。
type:定义所链接文档的类型,在这里需要指定为“text/CSS”,表示链接的外部文件为CSS样式表。
rel:定义当前文档与被链接文档之间的关系,在这里需要指定为“stylesheet”,表示被链接的文档是一个样式表文件。


三种样式表总结(位置)

前端基础入门二(CSS)

--结束END--

本文标题: 前端基础入门二(CSS)

本文链接: https://www.lsjlt.com/news/234093.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • 前端基础入门二(CSS)
    学习。大纲学会使用CSS选择器熟记CSS样式和外观属性熟练掌握CSS各种选择器熟练掌握CSS各种选择器熟练掌握CSS三种显示模式熟练掌握CSS背景属性熟练掌握CSS三大特性熟练掌握CSS盒子模型熟练掌握CSS浮动熟练掌握CSS定位11.熟练...
    99+
    2023-06-03
  • 前端基础入门四(JavaScript基础)
    目标:掌握编程的基本思维掌握编程的基本语法我们先来学习JavaScript基础,后续会讲解JavaScript高级。重点内容变量的声明及使用数据类型类型转换运算符JavaScript介绍JavaScript是什么JavaScript是一种运...
    99+
    2023-06-03
  • 前端零基础入门学习!前端真不难
    现在互联网发展迅速,前端也成了很重要的岗位之一,许多人都往前端靠拢,可又无能为力,不知所措,首先我们说为什么在编程里,大家都倾向于往前端靠呢?原因很简单,那就是,在程序员的世界里,前端开发是最最简单的编程,甚至都不能叫做编程,因为它真的很简...
    99+
    2023-06-03
  • 前端开发TypeScript入门基础教程
    TYPESCRIPT 官网 github TypeScript是一种由微软开发的开源、跨平台的编程语言。它是JavaScript的超集,最终会被编译为JavaScript代码。 可...
    99+
    2024-04-02
  • Python基础知识入门(二)
    Python基础知识入门(一) Python基础知识入门(三) Python基础知识入门(四) Python基础知识入门(五) 一、数字类型        Python 数字数据类型用于存储数值。数据类型是不允许改变,如改变数字数据类型的...
    99+
    2023-09-06
    开发语言 python 基础学习
  • python前端HTML和CSS入门
    前端阶段课程介绍1 ~ 4 : HTML及CSS5 ~ 6 : JavaScript 7 ~ 10 : jQuery 00-知识点预习1、HTML基本结构2、HTML的常用标签3、...
    99+
    2023-01-31
    入门 python HTML
  • Web前端基础入门有哪些学习内容
    本篇内容介绍了“Web前端基础入门有哪些学习内容”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!  1前端第...
    99+
    2024-04-02
  • 前端入门:css是什么
    CSS(Cascading Style Sheets),即层叠样式表,是一种用于描述 HTML 文档显示样式和布局的标记语言。CSS 能够让开发者创建更好的网页设计和效果,并可以使 HTML 文档变得更加清晰简洁。CSS 能够控制网页的外观...
    99+
    2023-05-14
  • JavaScript Jasmine:零基础入门,轻松掌握前端测试
    什么是JavaScript Jasmine? Jasmine是一个开源的、行为驱动的测试框架,用于编写前端测试。它使用简洁的语法和清晰的输出,让您轻松测试您的JavaScript代码。Jasmine被广泛用于测试各种JavaScript...
    99+
    2024-02-11
    JavaScript Jasmine 前端测试 单元测试 行为驱动开发
  • 【前端基础】ajax
     ajax是什么?ajax——asynchronous JavaScript and xml:异步的js和xml它能使用js访问服务器,而且是异步访问服务器给客户端的响应一般是整个页面,一个html完整页面!但在ajax中因为是局...
    99+
    2023-06-03
  • Django零基础入门之调用漂亮的HTML前端页面
    引言:    Django如何调用HTML前端页面呢? Django怎样去调用漂亮的HTML前端页面呢?  就直接使用render方法即可!...
    99+
    2024-04-02
  • python-基础入门
    列表shoplist = ['apple', 'mango', 'carrot', 'banana']shoplist[2] = 'aa'del shoplist[0] #删除第一个元素shoplist.insert('4','www') ...
    99+
    2023-01-31
    入门 基础 python
  • PHP基础入门
    1.2 PHP简介 1.2.1 概述 PHP是Hypertext Preprocessor的缩写,(超文本预处理器)是一种在服务器端运行的开源的脚本语言。 LAMP组合(Linux,Apache,My...
    99+
    2023-09-26
    php 服务器 mysql
  • Python:基础入门
    #Python 逻辑运算: and,or,not #Python中没有&&,||,!等短路逻辑运算符而是用and,or,not分别替代 print("================================ 逻辑运算...
    99+
    2023-01-31
    入门 基础 Python
  • Java 入门基础
    Java软件工程师是指运用Java这个开发工具去完成软件产品的软件程序设计、开发、测试、维护升级等工作的人员。::::::::::::::::::::::::::::::::::::::::::::::::::::::::Java 入门基础...
    99+
    2023-06-02
  • HTML基础入门
      一、浏览器   浏览器是指可以显示网页服务器或者文件系统的HTML文件(标准通用标记语言的一个应用)内容,并让用户与这些文件交互的一种软件   1,浏览器种类   主流浏览器:Chrome,Firefox,Safari,Opera  ...
    99+
    2023-01-30
    入门 基础 HTML
  • python入门基础
    新的开始,新的奋斗!从今天起开始学习python的相关知识! 首先python的基本的关键字和基本的分支结构都跟C语言差不多,这里主要介绍python中比较特别的一些基础内容,包括列表,元组和字符串 列表 创建列表 空列表...
    99+
    2023-01-30
    入门 基础 python
  • Flutter基础入门
    文章目录 一、Flutter基础知识1.Flutter简介和发展历史2.Flutter安装和配置3.Dart语言基础知识Dart语言特性Dart基本语法空安全 Null safetyDart异...
    99+
    2023-10-25
    flutter android ui
  • 前端基础之CSS_2
    摘要 盒子模型 浮动 清除 溢出 定位 模态框 rgba 与 opacity透明区别  一、CCS盒子模型 margin:标签与标签之间的距离,主要用于控制标签周围间的间隔,从视觉上达到相互分开的目的。...
    99+
    2023-01-31
    基础
  • 前端开发入门
    前端开发的前世今生在web1.0时代,前端和后端还没分离开来,前后端职责混乱。Ajax技术的出现,web2.0时代到来,此时前端后端开始分离开来,前后端职责清晰了,前端只要专注于前端开发,后端可以专注于业务逻辑开发,前端与后端的衔接就是AP...
    99+
    2023-06-03
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作