1.1什么是CSS

翻译为“层叠样式表”或者“级联样式表”，

简称样式表。

1.2CSS的主要作用

它主要是用来给HTML网页来设置外观或者样式

外观或者样式：HTML网页中的文字的大小、颜色、字体，网页的背景颜色、背景图片！

1.3书写CSS的语法规则

Key

values

Key

values

,h1  {color:red; fornt-size:14px;}

选择器

声明

声明

l  Css代码是由选择器和一对括号组成

l  大括号里面是由一条一条的声明语句组成

l  每一条语句都要使用英文装填下面的分号

l  每一句语句是由“key:values”组成

l  Css中的属性值一般不加引号

l  在CSS中如果属性值为数值型数据的时候 一般情况需要加单位 单位一般都是px

l  在css中不能出现HTML标签

2.css代码的书写方式

2.1什么是书写方式

Css代码应该书写在什么地方！

书写方式分为三种：嵌入式、外链式、行内式

2.2嵌入式

什么是嵌入式？

将css代码嵌入到HTML文件中，嵌入式是通过HTML中<style>标签将CSS代码嵌入到HTML网页中！(<style></style>标签一般情况下可以放在任意位置，但通常情况下放在<head>标签中)

语法规则：

<head>

<style  type=”text/css”>

/*书写CSS代码*/

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

</style>

</head>

Eg:

如果我们使用的是HTML5的文档
 type属性可以省略不写！

2.3什么是外链式？

外链式是指单独写一个以
.css 为扩展名的文件，然后在<head></head>标签中使用<link />标签，将这个css文件链接到html文件中

注意：

Css文件不能单独的运行，必须依赖HTML文件！

Link标签可以有多个，一个HTML页面可以同时的引入多个单独的CSS

语法格式：

<link
rel=”stylesheet“ type=”text/css” href=”CSS文件的地址“>

代码示例：

我们一定要确认.css文件被引入，怎么确认？

2.4什么是行内式？

将CSS代码书写HTML标签的style属性中

Style是一个通用属性，每一个标签里面都拥有这个属性！

语法格式：

<标签名 style=”key:value;key:value;”></标签名>

总结：

l  使用嵌入式的方式来书写css代码，它只能作用域当前的HTML文件

l  使用外链式的方式来书写css代码，它可以作用于多个HTML

3.注释

格式：

/*注释内容*/

Sumlime 快捷键注释 Ctrl+Shift +/

注意：

Css中只能使用/*  */注释

<!--  --> 不能使用

4.选择器

4.1什么时选择器

选择器是指通过一定的语法规则选取到对应的HTML标记，然后给这个对应的HTML标记设置样式

选择器分为四大类：基本选择器、复合选择器、伪类选择器、属性选择器

4.2基本选择器

4.2.1通用选择器：

4.2.2标签选择器：

4.2.3类选择器

4.2.4Id选择器

4.3复合选择器

4.3.1多元素选择器

4.3.2后代元素选择器

效果：

4.3.3子元素选择器

效果图：

4.3.4相邻元素选择器

效果图：

5．尺寸样式属性

Eg:

问：<span></span>便签能够设置高度、宽度嘛？

答：不可以，因为span标签是一个行内元素，他不可以设置高度、宽度。只有块级元素才可以设置高度和宽度！

6.文本与字体属性

6.1文本属性

https://edu.aliyun.com/lesson_1895_16145#_16145

6.2字体属性

7.列表样式属性：

这里的列表指的是：无序列表和有序列表

因为在整个网页布局中无序列表是使用的最多的。

List_style_image:将列表前面的项目符号设置为一张图片  它的值是：：
url(图片的地址)

List-style:这个属性是一个简写属性 它集成了上面三个属性的功能。可以同时设置上面的三个属性。每一个属性值之前使用空格分隔！它的属性值可以有一个也可以有两个也可以三个。其属性值个数不定，位置也不定！

阿里云前端路线 | CSS快速掌握的更多相关文章

  1. 阿里云数据库MySQL版快速上手！

    MySQL是全球最受欢迎的开源数据库,其在各Web应用中均有广泛部署.阿里云数据库MySQL版基于Alibaba的MySQL源码分支,经过双11高并发.大数据量的考验,拥有优良的性能和吞吐量.除此之外 ...

  2. 15分钟在阿里云Kubernetes服务上快速建立Jenkins X Platform并运用GitOps管理应用发布

    本文主要介绍如何在阿里云容器服务Kubernetes上快速安装部署Jenkins X Platform并结合demo实践演示GitOps的操作流程. 注意:本文中使用的jx工具.cloud-envir ...

  3. 阿里云RDS for MySQL 快速入门——笔记

    1初始化配置 1.1设置白名单 创建RDS实例后,需要设置RDS实例的白名单,以允许外部设备访问该RDS实例.默认的白名单只包含默认IP地址127.0.0.1,表示任何设备均无法访问该RDS实例. 设 ...

  4. vue 上传图片到阿里云(前端直传：不推荐)

    为何要这样做:减轻后端数据库压力(个人觉得于前端没啥用,谁返回来都行) 代码部分: <template> <div class="upLoad"> < ...

  5. 【HTML】实战阿里云src页面css模仿基础学习

    实战结果页面gif图片 阿里云src首页模仿完整代码(500行左右) <!DOCTYPE html> <html> <head> <meta charset= ...

  6. 利用阿里云提供的镜像快速更换本地的yum源

    打开网页:http://mirrors.aliyun.com/ 从“ 文件列表 ”找到自己的系统: Mirror Last update Help CPAN 2015-07-15 15:36:50   ...

  7. web前端之css快速入门

    css简介 css概述 CSS 指层叠样式表 (Cascading Style Sheets)样式定义如何显示 HTML 元素样式通常存储在样式表中把样式添加到 HTML 4.0 中,是为了解决内容与 ...

  8. 揭秘阿里云EB级大数据计算引擎MaxCompute

    日前,全球权威咨询与服务机构Forrester发布了<The Forrester WaveTM: Cloud Data Warehouse, Q4 2018>报告.这是Forrester ...

  9. 【阿里云产品公测】弹性伸缩服务ESS之试用初体验

    弹性伸缩服务ESS之试用初体验 作者:云郎 2014/10/15 阿里云弹性伸缩服务(Elastic Scaling Service)是根据用户的业务需求和策略,自动调整其弹性计算服务器(ECS)的管 ...

随机推荐

  1. 【模式识别与机器学习】——4.3离散K-L变换

    全称:Karhunen-Loeve变换(卡洛南-洛伊变换) 前面讨论的特征选择是在一定准则下,从n个特征中选出k个来反映原有模式. 这种简单删掉某n-k个特征的做法并不十分理想,因为一般来说,原来的n ...

  2. 百度小程序中swan.setPageInfo的用法

    现在百度智能小程序是百度最新的流量入口,现在很多做SEO优化.小程序开发的企业为了获取更多的流量不得不开发了,很多的技术人员不了解百度小程序的标题和关键词.描述等信息不知道在哪里设置. 以下是小编给你 ...

  3. Web组件的三种关联关系

    Web应用程序如此强大的原因之一是它们能彼此链接和聚合信息资源.Web组件之间存在三种关联关系: ●  请求转发 ●  URL重定向 ●  包含 存在以上关联关系的Web组件可以是JSP或Servle ...

  4. Ambiguous mapping. Cannot map 'xxxController' method

    @GetMapping public JsonResp<List<DtoLandRegion>> getLandRegionList() { List<DtoLandRe ...

  5. 2018-04-19：innodb和myisam区别

    福哥答案2020-04-19:

  6. dive：一款按层分析docker镜像的工具

    原文链接:https://www.freebuf.com/sectool/191596.html 要分析Docker镜像,只需使用image tag/id/digest运行: dive <you ...

  7. 第1篇 Scrum 冲刺博客

    每个成员在Alpha阶段认领的任务 钟智锋 内容 工时 客户端请求对局 1h 客户端请求移动/使用锦囊/技能/进化 1h 把对局信息转换成可传播的信息 2h 客户端通信 3h 编写博客和文档 1h 岑 ...

  8. IDEA常用快捷键Mac os和Windows对照--用到了就会更新

    之前公司用了一段的MacBookPro,离职后自己入手了一台MacBookPro.但是现在的公司中使用的电脑是古老的win7,两个系统的键盘有些许差别,而且快捷键也略有不同.最近因为疫情影响,在家远程 ...

  9. Object中toString方法

    在Java中,所有的对象都是继承自Object,自然继承了toString方法,在当使用System,out.println()里面为一个对象的引用时,自动调用toString方法将对象打印出来.如果 ...

  10. Apache Tika实战

    Apache Tika实战 Tika 简介 Apache Tika 是一个内容分析工具包,可以检测上千种文件类型,并提取它们的元数据和文本.tika在设计上十分精巧,单一的接口使它易于使用,在搜索引擎 ...