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. 如何有效防止sql注入

    SQL注入攻击是黑客对数据库进行攻击常用的手段之一,随着B/S模式应用开发的发展,使用这种模式编写应用程序的程序员也越来越多.但是由于程序员的水平及经验参差不齐,相当大一部分程序员在编写代码的时候,没 ...

  2. nginx进程模型解析

    nginx进程模型解析 概念   master会发送请求给worker,用于处理用户的请求,模型图如下 nginx进程分类   master进程(只有1个)    接受信号传递给worker   wo ...

  3. C#LeetCode刷题之#695-岛屿的最大面积（ Max Area of Island）

    问题 该文章的最新版本已迁移至个人博客[比特飞],单击链接 https://www.byteflying.com/archives/3736 访问. 给定一个包含了一些 0 和 1的非空二维数组 gr ...

  4. Flutter 容器 (1) - Center

    Center容器用来居中widget import 'package:flutter/material.dart'; class AuthList extends StatelessWidget { ...

  5. Elasticsearch第五篇：PlainElastic.Net 操作 Elasticsearch

    再次强调,我安装的Elasticsearch 版本是 7.8.0 ,C# 操作 Elasticsearch 的驱动有 NEST.Elasticsearch.net .PlainElastic.Net ...

  6. iNeuOS工业互联平台，WEB组态（iNeuView）集成图报组件，满足实时数据图形化展示的需求

    目       录 1.      概述... 1 2.      平台演示... 2 3.      应用过程... 3 4.      实时数据展示效果... 5 1.   概述 市场和开源社区有 ...

  7. SpringSecurity权限管理系统实战—六、SpringSecurity整合jwt

    目录 SpringSecurity权限管理系统实战-一.项目简介和开发环境准备 SpringSecurity权限管理系统实战-二.日志.接口文档等实现 SpringSecurity权限管理系统实战-三 ...

  8. golang学习笔记：Interface类型断言详情

    原文链接:https://www.2cto.com/kf/201712/703563.html 1. 用于判断变量类型 demo如下: switch t := var.(type){ case str ...

  9. 手把手教Linux驱动2-之模块参数和符号导出

    通过<手把手教Linux驱动1-模块化编程,玩转module>的学习,我们已经掌握了如何向内核加载一个模块,现在我们学习模块之间如何传递参数. 一.给模块传递参数 当我们加载一个模块到Li ...

  10. Word操作之参考文献自动关联和引用

    转载:https://blog.csdn.net/qq_40078121/article/details/88681605 编号选项->定义新编号格式: 选择插入->交叉引用选项: 然后选 ...