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 #字体类型浏览器默认的字体是微软雅黑,字体中有多个字体的时候,如果前面的字体没有就使用后面的字体 ...
随机推荐
- dotnet 在 UOS 国产系统上使用 Xamarin Forms 创建 xaml 界面的 GTK 应用
在前面几篇博客告诉大家如何部署 GTK 应用,此时的应用是特别弱的,大概只是到拖控件级.尽管和 WinForms 一样也能写出特别强大的应用,但是为了提升一点开发效率,咱开始使用 xaml 神器写界面 ...
- 魔方OA 数据字典
https://gitee.com/mojocube/mc-oa/blob/master/Data/%E6%95%B0%E6%8D%AE%E5%BA%93%E8%84%9A%E6%9C%AC.sql ...
- 开发日志：企业微信实现扫码登录（WEB）
一:获取扫码登陆所需的参数:appid,secret,agentid 登录企业微信:https://work.weixin.qq.com/ 扫码登录文档:https://work.weixin.qq. ...
- OLAP系列之分析型数据库clickhouse主从副本模式(三)
一.测试单分片,单副本或多副本模式 # 1.停止集群 systemctl stop clickhouse-server # 修改配置文件 vim /etc/clickhouse-server/conf ...
- Oracle和达梦：相似度函数：UTL_MATCH
UTL_MATCH介绍: Oracle的UTL_MATCH包是一个提供字符串匹配和相似度计算功能的工具包.它包含了一系列函数,用于执行字符串比较.相似度计算和模式匹配等操作. UTL_MATCH包中的 ...
- RK 平台安装 ubuntu 系统
一.简介 之前有介绍到 ARM 平台移植 ubuntu 的操作流程,在 RK 系列的平台同样适用,所以这里就不介绍怎么一步步的去对 ubuntu 进行移植,而是怎么将移植的过程编写成脚本,这样便可以在 ...
- 使用AI在原神里自动钓鱼，扫描Git仓库泄露的密码 【蛮三刀酱的Github周刊第三期】
大家好,这里是的Github精彩项目分享周刊,我是每周都在搬砖的蛮三刀酱. 我会从Github热门趋势榜里选出 高质量.有趣,牛B 的开源项目进行分享. 榜单取自实时Github Trending排行 ...
- Linux环境下：程序的链接, 装载和库[动态链接]
静态链接库在程序编译阶段就完成了链接工作,完成链接后,依赖的库就都打入了可执行文件中,所以文件大小一般会比较大. 而动态库链接库是在程序运行时才被链接的,所以磁盘上只要保留一份副本,因此节约了磁盘空间 ...
- mongodb单个服务部署
mongodb3.2.8安装步骤: 1.系统准备 (1)redhat或cnetos6.2以上系统 (2)系统开发包完整 (3)ip地址和hosts文件解析正常 (4)iptables防火墙&S ...
- Fastapi获取其他第三方回调
flask.django获取第三方回调数据,可以用request.data直接获取全部参数.而很多同学不知道fastapi如何获取回调的全部参数,其实可以通过request.body(). 如: @p ...