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 #字体类型浏览器默认的字体是微软雅黑,字体中有多个字体的时候,如果前面的字体没有就使用后面的字体 ...
随机推荐
- SQL server 自定义工资公式设计
目的: 工资系统中,在计算各工资项目的时候,用户能自定义公式.这里的讲述是从数据库方设计方面考虑,做简要的数据模拟和实体.存储过程的设计. 收集数据: 1.Employee员工信息数据(Employe ...
- 设计模式之装饰器-AOP
HelloWorld简单例子如下:此例子好好体会下继承 is a和组合 has a的异同. using System; using System.Runtime.InteropServices; na ...
- SpringBoot的@Resource和@Autowired+@Qualifier使用
1.区别 参考: https://blog.csdn.net/xhbzl/article/details/126765893 https://blog.csdn.net/qq_40263124/art ...
- 火山引擎A/B测试平台的实验管理重构与DDD实践
本次分享的主题是火山引擎数智平台VeDI旗下的A/B测试平台 DataTester 实验管理架构升级与DDD实践.这里说明的一点是,代码的第一目标肯定是满足产品需求,能够满足产品需求的代码都是好代码. ...
- virtualbox Ubuntn配置多站点
1.编辑站点文件: nano /etc/nginx/sites-available/default cd /etc/nginx/sites-available/ ls2. 把default的设置文件 ...
- Sublime-Text配置Less插件以及Sublime常用插件
在上一篇文章(node.js环境在Window和Mac中配置,以及安装cnpm和配置Less环境)中提到在Node.js中配置Less环境,今天介绍如何在Sublime中运用Less.默认已经下好了s ...
- HBase Meta 元信息表修复实践
作者:vivo 互联网大数据团队 - Huang Guihu.Chen Shengzun HBase是一款开源高可靠.高可扩展性.高性能的分布式非关系型数据库,广泛应用于大数据处理.实时计算.数据存储 ...
- Splashtop 免费60天 大赠送
这两天又是双11,又是 EDG 夺冠,可谓喜事连连.热闹不断.我们也给大家准备了一份长达两个月的免费福利,快乐加倍嗷. 福利详情: 1.分享这篇文章(不要设置分组可见). 2.发送您的 Splasht ...
- NumPy 数组复制与视图详解
NumPy 数组的复制与视图 NumPy 数组的复制和视图是两种不同的方式来创建新数组,它们之间存在着重要的区别. 复制 复制 会创建一个包含原始数组相同元素的新数组,但这两个数组拥有独立的内存空间. ...
- .NET实现获取NTP服务器时间并同步(附带Windows系统启用NTP服务功能)
对某个远程服务器启用和设置NTP服务(Windows系统) 打开注册表 HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Services\W32Time\Tim ...