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. 修改mac系统名字&&神秘bogon

    问题分析 你是否遇见过突然终端突然出现奇怪 bogon # name @ bogon in ~ [22:31:01] $ 这是因为终端会先向 DNS 请求查询当前 IP 的反向域名解析的结果,如果查询 ...

  2. .NET Core 微服务—API网关(Ocelot) 教程 [三]

    前言: 前一篇文章<.NET Core 微服务—API网关(Ocelot) 教程 [二]>已经让Ocelot和目录api(Api.Catalog).订单api(Api.Ordering)通 ...

  3. 初识HTML(二）

    目录 HTML表格 HTML列表 HTML表格 表格主要显示.展示数据. 表格基本语法:<table>定义一个表格,<tr>定义表格中的一行,<td>定义一行中的某 ...

  4. Hyperledger Fabric介绍

    转载地址 https://blog.csdn.net/xiaonu123/article/details/81006936 简介 Hyperledger介绍 超级账本(Hyperledger)项目是首 ...

  5. 虚拟机解释器与bytecode对接

    心头一直有个疑问,jvm虚拟是如何对接class中的字节码的?或者说在未进入 JIT优化阶段时,解释器是如何对接的? 大概阐述 hotspot通过C++代码在堆上申请一块空间,向里面填充一组指令,然后 ...

  6. Vue3 + Element ui 后台管理系统

    Vue3 + Element ui  后台管理系统 概述:这是一个用vue3.0和element搭建的后台管理系统界面. 项目git地址: https://github.com/whiskyma/vu ...

  7. TfidfVectorizer、CountVectorizer 和 TfidfTransformer 的简单教程

    TfidfVectorizer.CountVectorizer 和 TfidfTransformer 是 sklearn 中处理自然语言常用的工具.TfidfVectorizer 相当于 CountV ...

  8. SpringBoot--- 使用SpringSecurity进行授权认证

    SpringBoot--- 使用SpringSecurity进行授权认证 前言 在未接触 SpringSecurity .Shiro 等安全认证框架之前,如果有页面权限需求需要满足,通常可以用拦截器, ...

  9. 免费验证码接收网站&不停开小号方法

    手机号注册:免费验证码接收网站 0.http://getfreesmsnumber.com/ 9个外国网站,访问后要快点点击链接,否则2秒会检测出adblocker 1.http://smsrecei ...

  10. C++统计单词数

    [题目描述] 一般的文本编辑器都有查找单词的功能,该功能可以快速定位特定单词在文章中的位置,有的还能统计出特定单词在文章中出现的次数.现在,请你编程实现这一功能,具体要求是:给定一个单词,请你输出它在 ...