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初步介绍的更多相关文章

  1. Html/CSS 初步介绍html和css部分重要标签

    &初步介绍html和css部分重要标签& 注:开头书写:<!DOCTYPE html>表明对应标准html代码 先行总结重点 下方给出具体 CSS: 1. position ...

  2. 03 CSS介绍

    03.CSS介绍 层叠样式表:就是给HTML标签添加养的,让他变的更加的好看 注释: /*单行注释*//*多行注释1多行注释2多行注释3*/通常我们在写CSS样式的时候也会用注释来划定样式区域(因为H ...

  3. 三、Android学习第三天——Activity的布局初步介绍（转）

    (转自:http://wenku.baidu.com/view/af39b3164431b90d6c85c72f.html) 三.Android学习第三天——Activity的布局初步介绍 今天总结下 ...

  4. 3、CSS基本介绍

    1.1 CSS基本介绍一.web 标准所谓的web标准指的就是一系列规范网页书写的要求,它是由W3C组织制定,在它里面要求网页的结构.样式.行为三者相分离.二.名词解释1.结构:就是通过HTML标签搭 ...

  5. Django 小实例S1 简易学生选课管理系统 0 初步介绍与演示

    Django 小实例S1 简易学生选课管理系统 第0章--初步介绍与演示 点击查看教程总目录 作者自我介绍:b站小UP主,时常直播编程+红警三,python1对1辅导老师. 1 初步介绍 先介绍下这个 ...

  6. 一起学微软Power BI系列-官方文档-入门指南(1)Power BI初步介绍

    我们在前一篇文章微软新神器-Power BI,一个简单易用,还用得起的BI产品中,我们初步介绍了Power BI的基本知识.由于Power BI是去年开始微软新发布的一个产品,虽然已经可以企业级应用, ...

  7. Java 集合系列 03 ArrayList详细介绍(源码解析)和使用示例

    java 集合系列目录: Java 集合系列 01 总体框架 Java 集合系列 02 Collection架构 Java 集合系列 03 ArrayList详细介绍(源码解析)和使用示例 Java ...

  8. mxgraph进阶(二)mxgraph的初步介绍与开发入门

    mxgraph的初步介绍与开发入门 前言 由于小论文实验需求,需要实现根据用户日志提取出行为序列,然后根据行为序列生成有向图的形式,并且连接相邻动作的弧上标有执行此次相邻动作的频次.为此,在大师兄徐凯 ...

  9. 新浪微博API使用初步介绍——解决回调地址的问题

    # -*- coding: utf-8 -*- #python 27 #xiaodeng #新浪微博API使用初步介绍——解决回调地址的问题 #http://blog.csdn.net/monsion ...

  10. Python web前端 03 CSS属性

    Python web前端 03 CSS属性 一.文字.文本属性 1.文字属性 font-family #字体类型浏览器默认的字体是微软雅黑,字体中有多个字体的时候,如果前面的字体没有就使用后面的字体 ...

随机推荐

  1. 移动端、微信小程序兼容性问题汇总（持续更新……

    1. safari浏览器字体不能自动随网页缩放调整大小 -webkit-text-size-adjust:100% 2. 点击<button><input>有灰色透明背景 -w ...

  2. vue-cli快速搭建项目的几个文件(一)

    ===========app.vue文件============= <template>   <div id="app">       <router ...

  3. 16、数据库加固-mysql 加固

    1.修改 DBA 登录密码 shell 下执行: mysqladmin -u root password 非首次修改:mysqladmin -u root password -p原密码 在 mysql ...

  4. Ubuntu 20.04 安装和配置MySql5.7的详细教程

    Ubuntu 20.04 安装和配置MySql5.7的详细教程 https://www.jb51.net/article/202399.htm

  5. Golang 之 casbin（权限管理）

    目录 1. 权限管理 官网 编辑器测试 1.1.1. 特征 Casbin的作用 Casbin不执行的操作 1.1.2. 怎么运行的 1.1.3. 安装 1. 示例代码 xormadapter 2. 示 ...

  6. WEB服务与NGINX（7）-实现自定义错误页面

    1. 自定义错误页面 error_page code ... [=[response]] uri; 定义错误页,以指定的响应状态码进行响应,此指令由ngx_http_index_module模块提供 ...

  7. FE宝典

    前端学科面试宝典 蔡威 [电子邮件地址] HTML5.CSS3..................................................................... ...

  8. C语言：输入一个整数并让其逆反输出。123-＞321

    主要思想为: a)计算输入的位数有多少个 b)计算出最高位的单位(若最高位为是万位, 那么需要一个变量存储最高位数值1000) c)用取模的方法从个位数开始进行取出每一个单位上的数字 d)从个位数开始 ...

  9. grafana模板参考

    空的,把面板都删除了 { "__inputs": [ { "name": "DS_PROMETHEUS", "label" ...

  10. vue-i18n 初体验

    vue-i18n 初体验 使用vue,如何国际化呢?采用 vue-i18n.(i18n,internationalization,i和n中间省略18个字符) vue-i18n 官网地址 https:/ ...