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 #字体类型浏览器默认的字体是微软雅黑,字体中有多个字体的时候,如果前面的字体没有就使用后面的字体 ...
随机推荐
- 004—Orcad创建简单分裂元件
004-Orcad创建简单分裂元件 以TPS545为例,先查看datasheet,管脚图,PCB封装.新建库,设置名称和part的数量,然后添加管脚,设定管脚属性.电源管脚要勾选Pin Visble. ...
- Unity 热更--AssetBundle学习笔记 1.0【AB包资源加载工具类的实现】
工具类封装 通过上文中对AB包加载API的了解和简单使用,对AB包资源加载的几种方法进行封装,将其写入单例类中,如代码展示. 确保每个AB资源包只加载一次: 在LoadAssetBundleManag ...
- code::blocks更改编译器配置
- 使用sshfs-win将linux服务器目录挂载到windows下
可以直接将服务器上的目录挂载到 Windows 的资源管理器,相当于多了一个磁盘,这样子就可以直接将数据下载到服务器上了,挺方便的. 原理说明 一般情况下,我们可以通过 samba 协议挂载远程服务器 ...
- 80x86汇编—寻址方式
文章目录 术语解释 8086寻址方式 直数寻址 寄存器间接寻址 寄存器相对寻址 基址变址寻址 比例变址寻址方式 基址比例变址寻址方式 术语解释 EA:有效地址,通过段地址:偏移地址组合得到的Effec ...
- MinIo对象存储文件上传，下载，预览，批量上传，创建桶等
MinIo 操作工具类 MinIo 旧中文文档 MinIo 英文文档 MinIo 官网地址 https://min.io/ package com.ming.utils; import io.mini ...
- 文件系统(四)：FAT32文件系统实现原理
FAT32是从FAT12.FAT16发展而来,目前主要应用在移动存储设备中,比如SD卡.TF卡.隐藏的FAT文件系统现在也有被大量使用在UEFI启动分区中. 为使文章简单易读,下面内容特意隐藏了很多实 ...
- .NET周刊【5月第3期 2024-05-19】
国内文章 WPF使用Shape实现复杂线条动画 https://www.cnblogs.com/czwy/p/18192720 文章介绍了利用WPF的Shape和动画功能,模仿CSS/SVG实现复杂的 ...
- Android OpenMAX（二）OMX Component实现基础
Android OpenMAX IL提供的API位于 frameworks/native/headers/media_plugin/media/openmax ,目录下存放有预定义的类型.组件句柄定义 ...
- 痞子衡嵌入式：不同J-Link版本对于i.MXRT1170连接复位后处理行为有所不同
大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是不同J-Link版本对于i.MXRT1170连接复位后处理行为. 痞子衡之前写过一篇旧文 <i.MXRT1170上用J-Link连 ...