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 #字体类型浏览器默认的字体是微软雅黑,字体中有多个字体的时候,如果前面的字体没有就使用后面的字体 ...
随机推荐
- vue--v-if和v-show的区别（个人项目中的理解应用）
在面试的时候,一道vue基础到不能再基础的面试题叫做v-if与v-show的区别,当然答案网上一搜一大堆,基本两句话就能说明: 1.相同点:都是根据指令是否渲染该组件 2.不同点:v-if仅重新渲染当 ...
- 应用zabbix的实时导出（real-time export）功能
说明 zabbix作为监控软件,有时也会需要获取历史数据作进一步的分析,通常可以采用3种办法: 通过zabbix API定期获取(通过web) 通过后端数据库定期读取(通过db) 应用实时导出功能配合 ...
- HEOI2024省选游记
day 0 上午 没让不跑操的同学帮忙带着包 所以就直接背着跑的操,相当难受 吃完早饭就拿手机来机房了 不得不说看得出来 huge 这届确实打算换一种教学思路 以来就先强调了一堆意料之外的东西 包括但 ...
- 【Python爬虫案例】用python爬1000条哔哩哔哩搜索结果
目录 一.爬取目标 二.讲解代码 三.同步讲解视频 四.完整源码 一.爬取目标 大家好,我是 @马哥python说 ,一名10年程序猿. 今天分享一期爬虫的案例,用python爬哔哩哔哩的搜索结果,也 ...
- 01 go-zero入门--单体服务demo
目录 官方文档: 视频地址: 系统环境: 配置环境: 1. golang安装 2. go module配置 3. goctl安装 4.protoc,protoc-gen-go,protoc-gen-g ...
- nim 5. 读写文件
读文件 假设nim程序相同的文件夹下,有个people.txt文件,内容如下: Alice A. Bob B. Carol C. 读取这个文件的代码 import strutils let conte ...
- Java中Future 用来做异步任务返回
我们在开发中会有这种场景,我们要调用远程服务的一个方法,并且拿到返回值去使用.笔者最近项目中出现了一个ANR,具体是调用了远程服务,发生异常一直没有返回值,然后导致ANR. 怎么解决呢?找了一圈,发现 ...
- apisix~jwt-auth插件
在网关开启jwt-auth插件之后,你的网关就具有了jwt解析和校验的功能,主要是校验jwt token的有效性,包含过期时间和签名等. https://apisix.apache.org/docs/ ...
- css样式相关的惊艳的属性
CSS gap 简写属性用于设置行与列之间的间隙(网格间距). 规范的早期版本将该属性命名为 grid-gap,且为了保持与旧网站的兼容性,浏览器仍然会接受 grid-gap 作为 gap 的别名. ...
- vue我自己的动态菜单思路
1.在router里把所有的路由都加上. 2.后端存储路由path和其他设计需要的信息. 3.登录后,后端返回菜单树,根据权限不同,返回的菜单不同,并且还要返回每个path代表的页面具有的权限数组.可 ...