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. docker找回构建时被删除的文件

    设想这样一个场景:当一个docker镜像被多次引用构建,在某次构建中某个文件被删除,如何找回被删除的文件? 要想回答这么一个问题,首先得熟悉下docker镜像的分层存储结构,镜像每一层都是只读的: 那 ...

  2. C#LeetCode刷题之#226-翻转二叉树（Invert Binary Tree）

    问题 该文章的最新版本已迁移至个人博客[比特飞],单击链接 https://www.byteflying.com/archives/4080 访问. 翻转一棵二叉树. 输入: 4    /   \   ...

  3. NOIP真题索引

    NOIP真题索引 NOIP2019 Day 1 格雷码 括号树 树上的数 Day 2 Emiya 家今天的饭 划分 树的重心 NOIP2018 Day 1 铺设道路 货币系统 赛道修建 Day 2 旅 ...

  4. JAVA-单例模式的几种实现方式

    一.什么是单例模式 单例:保证一个类仅有一个实例,并提供一个访问它的全局访问点. 单例模式是一种常用的软件设计模式之一,其目的是保证整个应用中只存在类的唯一个实例. 比如我们在系统启动时,需要加载一些 ...

  5. 蓝牙bluez命令

    记录一下自己平时调试蓝牙的命令,后续学习到再添加 sdptool命令: sdptool add SP    - 添加SPP: sdptool add --channel=1 DID SP DUN LA ...

  6. Jmeter 常用函数（12）- 详解 __machineName

    如果你想查看更多 Jmeter 常用函数可以在这篇文章找找哦 https://www.cnblogs.com/poloyy/p/13291704.html 作用 返回机器(电脑)名称 语法格式 ${_ ...

  7. linux云服务器搭建 express后台 nginx转发

    购买云服务器 或者自己在本地搭建一个虚拟机 (我用的是腾讯云云服务器(CVM),或者可以购买阿里云 ecs服务器) 购买完成后 配置安全组 允许http https ftp 端口 一般运营商会提供说明 ...

  8. 计算机网络-链路层（4）WiFi:802. 11无线LAN

    有几套有关无线LAN 的802. 11标准,包括802.11b.802.11a和802.11g. 802.11g是至今为止最为流行的技术.一些双模式(802.11a/g)和三模式(802.11a/b/ ...

  9. 操作系统-I/O（5）I/O软件的层次结构

    IO软件的设计目标: (1)高效率:改善设备效率,尤其是磁盘I/O操作的效率 (2)通用性:用统一的标准来管理所有设备 IO软件的设计思路: 把软件组织成层次结构,低层软件用来屏蔽硬件细节,高层软件向 ...

  10. 求求大厂给个Offer：Map面试题

    前言 文本已收录至我的GitHub:https://github.com/ZhongFuCheng3y/3y,有300多篇原创文章,最近在连载面试系列! 我,三歪,最近开始写面试系列.我给这个面试系列 ...