CSS学习笔记day1
1.css的简介
- css：层叠样式表 (层叠：一层一层的；样式表：很多的属性和属性值)
- 使页面显示效果更好
- 将页面内容和显示样式进行分离，提高了显示功能。
2.css和html的结合方式（4种）
- 在每一个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的更多相关文章
- CSS学习笔记
CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...
- HTML+CSS学习笔记 (7) - CSS样式基本知识
HTML+CSS学习笔记 (7) - CSS样式基本知识 内联式css样式,直接写在现有的HTML标签中 CSS样式可以写在哪些地方呢?从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式.嵌 ...
- HTML+CSS学习笔记 (6) - 开始学习CSS
HTML+CSS学习笔记 (6) - 开始学习CSS 认识CSS样式 CSS全称为"层叠样式表 (Cascading Style Sheets)",它主要是用于定义HTML内容在浏 ...
- HTML+CSS学习笔记（5）- 与浏览者交互，表单标签
HTML+CSS学习笔记(5)- 与浏览者交互,表单标签 1.使用表单标签,与用户交互 网站怎样与用户进行交互?答案是使用HTML表单(form).表单是可以把浏览者输入的数据传送到服务器端,这样服务 ...
- HTML+CSS学习笔记(4) - 认识标签（3）
HTML+CSS学习笔记(4) - 认识标签(3) 1.使用<a>标签,链接到另一个页面 使用<a>标签可实现超链接,它在网页制作中可以说是无处不在,只要有链接的地方,就会有这 ...
- HTML+CSS学习笔记（3）- 认识标签（2）
HTML+CSS学习笔记(3)- 认识标签(2) 1.使用ul,添加新闻信息列表 在浏览网页时,你会发现网页上有很多信息的列表,如新闻列表.图片列表, 这些列表就可以使用ul-li标签来完成.ul-l ...
- HTML+CSS学习笔记(2) - 认识标签（1）
HTML+CSS学习笔记(2) - 认识标签(1) 1.语义化,让你的网页更好的被搜索引擎理解 标签的用途: 我们学习网页制作时,常常会听到一个词,语义化.那么什么叫做语义化呢,说的通俗点就是:明白每 ...
- HTML+CSS学习笔记(1) - Html介绍
HTML+CSS学习笔记(1) - Html介绍 1.代码初体验,制作我的第一个网页 <!DOCTYPE HTML> <html> <head> <meta ...
- css学习笔记四
广州天气变冷了,css学习笔记还是要总结. 总结: 1:几米页面静态页面主要是一列结构头部banner图,mainbody部分放文字内容和图书图片,底部是页面的版权信息 2:腾讯软件中心静态页面制作( ...
随机推荐
- springBoot系列教程01：elasticsearch的集成及使用
1.首先安装elasticsearch 集群环境,参考 http://www.cnblogs.com/xiaochangwei/p/8033773.html 注意:由于我的代码采用的是springbo ...
- linux大文件分包压缩和批量解压命令tar // tar 排除指定目录
压缩命令主要用到tar打包和split分割,命令如下: tar czf - aaa | split -b 1024m - bbb.tar.gz_ aaa可以是文件也可以是目录, 大小可以是b.k.m这 ...
- JS操作css样式用法
//html <div id="div1" style="background:red;"> 修改背景颜色 </div> <but ...
- Spring入门之IOC
IOC/DI: Spring最核心的灵魂,IOC/DI(控制反转/依赖注入)!,这里一定要理解他,理解这个思想.我会细说什么是IOC/DI.他的思想是什么.它带来了那些好处. 进入正题,先说说什么是i ...
- Excel Microsoft.Jet.OLEDB.4.0 外部数据库驱动程序中(1)的意外错误
昨天更新系统的bug,据说是微软要搞事情啊 删除以下更新就行: win7 KB4041678 KB4041681 SERVER 2008 R2 KB ...
- CSS（一） 引入方式 选择器 权重
Css(一) Cascading Style Sheet 层叠样式表 css注释方式/* */ 一.Css引入方式 1. 行间样式 style=" key:value; " &l ...
- Java关于BufferedWriter.newline()换行的注意事项
最近项目中需要导出文件,其实导出文件是一个挺简单的事情.但是却遇到了很奇怪的问题. 首先导出到文件需要用到 BufferedWriter.而换行则是通过 bw.newline() 方法,问题将出在 n ...
- npm 简单实用命令
npm -v 查看版本号 npm get global 返回false表示默认本地安装 true全局安装 npm set global=true 设置默认为全局安 ...
- Friday for Oldboy
计算机的硬件介绍 1. CPU的工作流程:取指令->解码->执行 . 程序状态字寄存器(Program Status Word,PSW)中有一个二进制位控制这两种模式. 内核态:当cp ...
- 运用C语言将图片转换成16进制的字符串（base64）
最近在写手机端的性能测试脚本的时候,发现手机在上传图片数据时,先将图片转换成一堆16进制的字符,将字符传输过去,服务器再将字符解码成图片 我们在loadrunner中测试时,就需要用C语言将图片编码. ...