03-CSS初步介绍
01 CSS编写规则
1.1 内联样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div style="color: red; font-size: 30px;">div元素</div>
</body>
</html>
1.2 内部样式
把样式单独抽离出来
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 选择器 -->
<style>
div {
color: red;
font-size: 30px;
background-color: orange;
}
</style>
</head>
<body>
<div>div元素</div>
</body>
</html>
如果存在多个同样的标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<!-- 选择器 -->
<style>
.div-2 {
color: red;
font-size: 30px;
background-color: orange;
}
</style>
<body>
<div>div元素</div>
<div class="div-2">第2div元素</div>
</body>
</html>
1.3 外部样式
定义一个公共的css文件,其它的html文件都引用这个文件
编写公共的样式
.title {
color: red;
font-size: 30px;
background-color: orange;
}
test1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<link rel="stylesheet" href="./css/styel.css">
<body>
<div class="title">test1中的title</div>
</body>
</html>
test2.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<link rel="stylesheet" href="./css/style.css">
<body>
<div class="title">test2中的title</div>
</body>
</html>
1.4 CSS样式很多的情况
实际工作中存在很多的css文件,如果一个个导入代码显得臃肿
可以写一个统一的入口
入口文件
@import url(./style1.css);
@import url(./style2.css);
style1.css
.div {
color: red;
font-size: 20px;
}
style2.css
.title {
color: red;
font-size: 30px;
background-color: orange;
}
html文件引入
test1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<link rel="stylesheet" href="./css/index.css">
<body>
<div>test1中的title</div>
</body>
</html>
test2.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<link rel="stylesheet" href="./css/index.css">
<body>
<div class="title">test2中的title</div>
</body>
</html>
02-CSS常用的5个属性
2.1 font-size(字体大小)
谷歌默认的字体大小为16px
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.title {
font-size: 24px;
}
</style>
<body>
<div class="title">test1中的title</div>
</body>
</html>
2.2 color(字体颜色)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.title {
color: red;
}
</style>
<body>
<div class="title">test1中的title</div>
</body>
</html>
2.3 background-color(背景色)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.title {
background-color: aqua;
}
</style>
<body>
<div class="title">test1中的title</div>
</body>
</html>
2.4 width(宽度)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.title {
background-color: aqua;
width: 120px;
}
</style>
<body>
<div class="title">test1中的title</div>
</body>
</html>
2.5 height
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.title {
background-color: aqua;
width: 120px;
height: 50px;
}
</style>
<body>
<div class="title">test1中的title</div>
</body>
</html>
03-CSS初步介绍的更多相关文章
- Html/CSS 初步介绍html和css部分重要标签
&初步介绍html和css部分重要标签& 注:开头书写:<!DOCTYPE html>表明对应标准html代码 先行总结重点 下方给出具体 CSS: 1. position ...
- 03 CSS介绍
03.CSS介绍 层叠样式表:就是给HTML标签添加养的,让他变的更加的好看 注释: /*单行注释*//*多行注释1多行注释2多行注释3*/通常我们在写CSS样式的时候也会用注释来划定样式区域(因为H ...
- 三、Android学习第三天——Activity的布局初步介绍（转）
(转自:http://wenku.baidu.com/view/af39b3164431b90d6c85c72f.html) 三.Android学习第三天——Activity的布局初步介绍 今天总结下 ...
- 3、CSS基本介绍
1.1 CSS基本介绍一.web 标准所谓的web标准指的就是一系列规范网页书写的要求,它是由W3C组织制定,在它里面要求网页的结构.样式.行为三者相分离.二.名词解释1.结构:就是通过HTML标签搭 ...
- Django 小实例S1 简易学生选课管理系统 0 初步介绍与演示
Django 小实例S1 简易学生选课管理系统 第0章--初步介绍与演示 点击查看教程总目录 作者自我介绍:b站小UP主,时常直播编程+红警三,python1对1辅导老师. 1 初步介绍 先介绍下这个 ...
- 一起学微软Power BI系列-官方文档-入门指南(1)Power BI初步介绍
我们在前一篇文章微软新神器-Power BI,一个简单易用,还用得起的BI产品中,我们初步介绍了Power BI的基本知识.由于Power BI是去年开始微软新发布的一个产品,虽然已经可以企业级应用, ...
- Java 集合系列 03 ArrayList详细介绍(源码解析)和使用示例
java 集合系列目录: Java 集合系列 01 总体框架 Java 集合系列 02 Collection架构 Java 集合系列 03 ArrayList详细介绍(源码解析)和使用示例 Java ...
- mxgraph进阶(二)mxgraph的初步介绍与开发入门
mxgraph的初步介绍与开发入门 前言 由于小论文实验需求,需要实现根据用户日志提取出行为序列,然后根据行为序列生成有向图的形式,并且连接相邻动作的弧上标有执行此次相邻动作的频次.为此,在大师兄徐凯 ...
- 新浪微博API使用初步介绍——解决回调地址的问题
# -*- coding: utf-8 -*- #python 27 #xiaodeng #新浪微博API使用初步介绍——解决回调地址的问题 #http://blog.csdn.net/monsion ...
- Python web前端 03 CSS属性
Python web前端 03 CSS属性 一.文字.文本属性 1.文字属性 font-family #字体类型浏览器默认的字体是微软雅黑,字体中有多个字体的时候,如果前面的字体没有就使用后面的字体 ...
随机推荐
- Ubuntu 20.04版本安装k8s控制节点与控制节点升级
一.环境配置 服务器配置:2核4G IP:192.168.10.23 主机名:master4将改主机加入此 集群 # 1.修改主机名 hostnamectl set-hostname master4 ...
- 五、Doris数据分布
在 Doris 中,数据都以表(Table)的形式进行逻辑上的描述 名词解释 数据分布:数据分布是将数据划分为子集, 按一定规则, 均衡地分布在不同节点上,以期最大限度地利用集群的并发性能 短查询:s ...
- R3_Elasticsearch Index Setting
索引的配置项按是否可以更改分为static属性与动态配置,所谓的静态配置即索引创建后不能修改.目录如下:生产环境中某索引结构(7.X后有变化) 索引静态配置 1.分片与压缩 index.number_ ...
- 【图形数据集】CIFAR-10 dataset数据集
文献引用:https://www.cs.toronto.edu/~kriz/cifar.html The CIFAR-10 dataset The CIFAR-10 dataset consists ...
- 简说Python之函数
目录 Python的函数 函数的简单调用 函数传参 返回值 计算圆形面积 变量作用域 局部变量 全局变量 就像平时玩的积木,函数就是一个个成块的积木,可以组合你想要的任何形状. Python的函数 函 ...
- 国外anonfiles网盘大文件下载器
各位注意了,这个网站很久以前是可以国内直接访问的,后来被墙了,但仍然可以使用代理下载,现如今,6天前大概2023年8月10号左右这个网站已经挂了,就是彻底不能用了,所有与之有关的东西比如网页,都是假的 ...
- GitLab 管理 NuGet 包
1 概览 在服务器上构建项目时,需要引用 nuget.org 之外的包,如公司内部开发的.第三方未发布到 nuget.org 上的.怎么办? GitLab 提供了 Package Registry 来 ...
- VMware最小化安装Centos7.6-无桌面
目录 安装包工具 新建虚拟机 安装 centos 7.6 系统 终端登陆系统 设置ip地址 关闭防火墙 关闭 SELINUX SELINUX=enforcing 硬盘挂载 桥接上网方式 安装包工具 V ...
- ansible(19)--ansible的playbook
目录 1. playbook简介 2. playbook编写规范 2.1 YAML语法规范 2.2 YAML语法要素 2.3 Playbook核心元素 2.4 Playbook的基础组件 3 Play ...
- WEB服务与NGINX（6）-location使用详解
目录 1. location的详细用法 1.1 精确匹配 1.2 区分大小写 1.3 不区分大小写 1.4 匹配URI开始 1.5 测试location的优先级 1.6 location的生产使用示例 ...