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. C#LeetCode刷题-图

    图篇 # 题名 刷题 通过率 难度 133 克隆图   18.7% 中等 207 课程表   40.0% 中等 210 课程表 II   40.0% 中等 310 最小高度树   29.5% 中等 3 ...

  2. C#LeetCode刷题之#876-链表的中间结点（Middle of the Linked List）

    问题 该文章的最新版本已迁移至个人博客[比特飞],单击链接 https://www.byteflying.com/archives/3836 访问. 给定一个带有头结点 head 的非空单链表,返回链 ...

  3. Qt信号与槽使用方法最完整总结

    在图形界面编程中(参考<C++最好的图形库是什么?>),组件之间如何实现通信是核心的技术内容.Qt 使用了信号与槽的机制,非常的高效.简单.易学,方便开发者的使用.本文详细的介绍了Qt 当 ...

  4. IOS 单例崩溃分析 2014-12-10 15:46:36

    单例模式是常用的模式,但是在单例应用中偶或引发崩溃让人匪夷所思.其实真的是单例引起的吗?未必.但是现象都指向了是单例引起的.今天我亲身经历了看似崩溃在单例上的一个例子,但实则不是,今天做个记录用于今后 ...

  5. 【算法•日更•第三十七期】A*寻路算法

    ▎写在前面 这是一种搜索算法,小编以前总是念成A乘寻路算法,没想到一直念错. 请大家都念成A星寻路算法,不要像小编一样丢人了. ▎A*寻路算法 ☞『引入』 相信大家都或多或少的玩过一些游戏吧,那么游戏 ...

  6. python字典的增删改查

    字典dict 知识点: {}括起来,以键值对形式存储的容器性数据类型: 键-必须是不可变数据类型,且是唯一的: -值可以是任意数据类型.对象. 优点:关联性强,查询速度快. 缺点:以空间换时间. 字典 ...

  7. 幂次方的四种快速取法（不使用pow函数）

    Pow(x, n) 方法一:暴力法 方法二:递归快速幂算法 方法三:迭代快速幂算法 方法四:位运算法 方法一:暴力法 思路 只需模拟将 x 相乘 n 次的过程. 如果 \(n < 0\),我们可 ...

  8. 虚拟化技术之kvm镜像模板制作工具virt-sysprep

    virt-sysprep这个工具来自libguest-tools这个工具包,它能够把kvm虚拟机对应的磁盘文件做成一个模板,后续我们启动虚拟机就可以基于这个镜像模板启动:什么是镜像模板呢?所谓模板就是 ...

  9. [转]camera的构成

    camera的构成 拍摄景物通过镜头,将生成的光学图像投射到传感器上,然后光学图像被转换成电信号,电信号再经过模数转换变为数字信号,数字信号经过DSP加工处理,再被送到电脑中进行处理,最终转换成手机屏 ...

  10. 运用sed命令高效地删除文件的特定行

    运用 sed 命令高效地删除文件的特定行 正常来说,我们想要删除文件中的某些行内容,一般都是先打开这个文件,然后找到要删除的内容,再然后选中这些行并按删除键进行删除,这在数据量很少时是没有问题的.但是 ...