1.css的简介

  •  css:层叠样式表 (层叠:一层一层的;样式表:很多的属性和属性值)
  • 使页面显示效果更好
  • 将页面内容和显示样式进行分离,提高了显示功能。

2.css和html的结合方式(4种)

  1. 在每一个html语言上都有一个属性style,把css和html结合起来

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div style="background-color: aquamarine;color:blueviolet"> 我睁开双眼踏入这个世界 </div>
</body>
</html>

2.使用html的一个标签实现<style>标签,写在head里面

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
background-color: aquamarine;
color:blueviolet;
}
</style>
</head>
<body>
<div > 我睁开双眼踏入这个世界 </div>
</body>
</html>

3.在style标签里面使用语句

@import url("文件的路径");

-第一步:创建一个css文件

<style type="text/css">
@import url("div.css");
</style>

4.使用头标签link,引入外部css文件

-第一步:创建一个css文件

-<link rel="stylesheet" href="div.css" />

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="div.css" />
</head>
<body>
<div > 我睁开双眼踏入这个世界 </div>
</body>
</html>

  • 第三种方式在某些浏览器下不起作用,一般使用第四种。

CSS学习笔记day1的更多相关文章

  1. CSS学习笔记

    CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...

  2. HTML+CSS学习笔记 (7) - CSS样式基本知识

    HTML+CSS学习笔记 (7) - CSS样式基本知识 内联式css样式,直接写在现有的HTML标签中 CSS样式可以写在哪些地方呢?从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式.嵌 ...

  3. HTML+CSS学习笔记 (6) - 开始学习CSS

    HTML+CSS学习笔记 (6) - 开始学习CSS 认识CSS样式 CSS全称为"层叠样式表 (Cascading Style Sheets)",它主要是用于定义HTML内容在浏 ...

  4. HTML+CSS学习笔记(5)- 与浏览者交互,表单标签

    HTML+CSS学习笔记(5)- 与浏览者交互,表单标签 1.使用表单标签,与用户交互 网站怎样与用户进行交互?答案是使用HTML表单(form).表单是可以把浏览者输入的数据传送到服务器端,这样服务 ...

  5. HTML+CSS学习笔记(4) - 认识标签(3)

    HTML+CSS学习笔记(4) - 认识标签(3) 1.使用<a>标签,链接到另一个页面 使用<a>标签可实现超链接,它在网页制作中可以说是无处不在,只要有链接的地方,就会有这 ...

  6. HTML+CSS学习笔记(3)- 认识标签(2)

    HTML+CSS学习笔记(3)- 认识标签(2) 1.使用ul,添加新闻信息列表 在浏览网页时,你会发现网页上有很多信息的列表,如新闻列表.图片列表, 这些列表就可以使用ul-li标签来完成.ul-l ...

  7. HTML+CSS学习笔记(2) - 认识标签(1)

    HTML+CSS学习笔记(2) - 认识标签(1) 1.语义化,让你的网页更好的被搜索引擎理解 标签的用途: 我们学习网页制作时,常常会听到一个词,语义化.那么什么叫做语义化呢,说的通俗点就是:明白每 ...

  8. HTML+CSS学习笔记(1) - Html介绍

    HTML+CSS学习笔记(1) - Html介绍 1.代码初体验,制作我的第一个网页 <!DOCTYPE HTML> <html> <head> <meta ...

  9. css学习笔记四

    广州天气变冷了,css学习笔记还是要总结. 总结: 1:几米页面静态页面主要是一列结构头部banner图,mainbody部分放文字内容和图书图片,底部是页面的版权信息 2:腾讯软件中心静态页面制作( ...

随机推荐

  1. springMVC(6)---处理模型数据

    springMVC(6)---处理模型数据 之前一篇博客,写个怎么获取前段数据:springMVC(2)---获取前段数据,这篇文章写怎么从后端往前端传入数据. 模型数据类型             ...

  2. 使用linux perf工具生成java程序火焰图

    pre.cjk { font-family: "Nimbus Mono L", monospace } p { margin-bottom: 0.1in; line-height: ...

  3. MicroPython可视化编程开发板—TurnipBit自制MP3教程实例

    转载请以链接形式注明文章来源(MicroPythonQQ技术交流群:157816561,公众号:MicroPython玩家汇) 当前我们都生活在一个有声有色的社会当中,欣赏美丽的景色,享受动人的音乐, ...

  4. angular4.0快速import依赖路径

    快捷键:ALT + ENTER 直接import对应的依赖路径

  5. [转]在Mac系统中安装配置Tomcat及和Eclipse 配置

    第一步:下载Tomcat 下载地址:http://tomcat.apache.org/download-70.cgi 直接下载如下选中即可: 第二步:   下载完成后 ,把解压的文件夹放到一个目录下 ...

  6. javascript 之this指针-11

    前言 在<javascript 之执行环境-08>文中说到,当JavaScript代码执行一段可执行代码时,会创建对应的执行上下文(execution context).对于每个执行上下文 ...

  7. 【有上下界的网络流】ZOJ2341 Reactor Cooling(有上下界可行流)

     Description The terrorist group leaded by a well known international terrorist Ben Bladen is bulidi ...

  8. Chris Richardson微服务翻译:微服务部署

    Chris Richardson 微服务系列翻译全7篇链接: 微服务介绍 构建微服务之使用API网关 构建微服务之微服务架构的进程通讯 微服务架构中的服务发现 微服务之事件驱动的数据管理 微服务部署( ...

  9. 在地铁上看了zabbix 的书发现 "报警执行远程命令"

    在地铁上看了zabbix 的书发现 "报警执行远程命令" 远程命令整个过程:  items -> triggers -> action -> remote com ...

  10. python入门之函数

    为什么要用函数 python的函数是由一个新的语句编写,即def ,def是可执行的语句--函数并不存在,知道python运行了def后才存在. 函数是通过赋值函数传递的,参数通过赋值传递给函数. d ...