表现标准语言CSS3学习 入门+导入方式
表现标准语言CSS3学习 入门+导入方式
如何学习：
css是什么
css怎么用(快速入门)
css选择器（重点+难点）
美化网页（文字、阴影、超链接、列表、渐变...）
盒子模型
浮动
定位
网页动画（特效效果）
1.1 什么是CSS
Cascading Style Sheet 层叠级联样式表
CSS：表现（美化网页）字体、颜色，边距、高度、宽度、背景图片、网页定位、网页浮动...
1.2 发展史
CSS1.0
CSS2.0 DIV（块）+CSS，HTML与CSS结构分离的思想，网页变得简单，SEO
CSS2.1 浮动、定位
CSS3.0 圆角、阴影、动画... 浏览器兼容性
1.3 快速入门
style 注释方式为/* */
- 放到HTML文件内部
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--规范 <style> 可以编写css代码,每一个声明，最好使用分号结尾。
语法：
选择器{
声明1;
声明2;
}
-->
<style>
h1{
color: red;
}
</style>
</head>
<body>
<h1>我是标题</h1>
</body>
</html>
- 与HTML分离
在html的同级目录下，建立css文件夹。
用link进行连接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--规范 link方式
-->
<link rel="stylesheet" href="css/Style.css">
</head>
<body>
<h1>我是标题</h1>
</body>
</html>
h1{
color: red;
}
css的优势
内容和表现分离
网页结构表现单一，可以实现复用
样式十分丰富
建议使用独立于html的css文件
利用SEO(Search Engine Optimization)：汉译为搜索引擎优化，容易被搜索引擎收录。
1.4四种css的导入方式
表现方式，就近原则！哪个离代码近，哪个就有优势。
- 行内样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--行内样式：在标签元素中，编写一个style属性，编写样式即可-->
<h1 style = "color: red">我是标题</h1>
</body>
</html>
- style标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* 注释 */
h1{
color: red;
}
</style>
</head>
<body>
<h1>我是标题</h1>
</body>
</html>
- 外部样式链接式link
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--规范 link方式
-->
<link rel="stylesheet" href="css/Style.css">
</head>
<body>
<h1>我是标题</h1>
</body>
</html>
h1{
color: red;
}
- 外部样式导入式@import 2.1中使用的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
@import url("css/style.css");
</style>
</head>
<body>
<!--行内样式：在标签元素中，编写一个style属性，编写样式即可-->
<h1 >我是标题</h1>
</body>
</html>
表现标准语言CSS3学习 入门+导入方式的更多相关文章
- Unity---动画系统学习(2)---模型3种导入方式、人形动画介绍、切割动画
1. 介绍 Unity中导入的模型主要是由3DMAX.Maya等建模软件制作的,后缀为.fbx的文件. 博主在Unity Asset Store里面下载了一套官方免费的模型和动画. 和一套地图,分享给 ...
- python学习笔记：模块——自定义模块的3种导入方式
一.定义 模块就是用一堆的代码实现了一些功能的代码的集合,通常一个或者多个函数写在一个.py文件里,而如果有些功能实现起来很复杂,那么就需要创建n个.py文件,这n个.py文件的集合就是模块.如果不懂 ...
- 【CSS】CSS3从入门到深入（复习查漏向
CSS3从入门到深入(复习查漏向 pre_section CSS:层叠样式表,决定网页表现 网页为多层结构,CSS为每一层设置样式,最后显示最上一层 CSS语句 = 选择器 + 声明块 形式 内联样式 ...
- 给深度学习入门者的Python快速教程 - 番外篇之Python-OpenCV
这次博客园的排版彻底残了..高清版请移步: https://zhuanlan.zhihu.com/p/24425116 本篇是前面两篇教程: 给深度学习入门者的Python快速教程 - 基础篇 给深度 ...
- 给深度学习入门者的Python快速教程 - numpy和Matplotlib篇
始终无法有效把word排版好的粘贴过来,排版更佳版本请见知乎文章: https://zhuanlan.zhihu.com/p/24309547 实在搞不定博客园的排版,排版更佳的版本在: 给深度学习入 ...
- 深度学习入门实战（二）-用TensorFlow训练线性回归
欢迎大家关注腾讯云技术社区-博客园官方主页,我们将持续在博客园为大家推荐技术精品文章哦~ 作者 :董超 上一篇文章我们介绍了 MxNet 的安装,但 MxNet 有个缺点,那就是文档不太全,用起来可能 ...
- CSS3基础入门02
CSS3 基础入门02 边框相关属性 border-radius 通过这个属性我们可以设置边框圆角,即可以将四个角设置为统一的圆角,也可以单独的设置具体的某一个角的圆角. grammer: borde ...
- 给深度学习入门者的Python快速教程
给深度学习入门者的Python快速教程 基础篇 numpy和Matplotlib篇 本篇部分代码的下载地址: https://github.com/frombeijingwithlove/dlcv_f ...
- HTML5+CSS3从入门到精通随书光盘 ISO 镜像视频教程
HTML5+CSS3从入门到精通(清华社“视频大讲堂”大系)通过基础知识+中小实例+综合案例的方式,讲述了用HTML5+ CSS3设计构建网站的必备知识,相对于权威指南.高级程序设计.开发指南同类图书 ...
- HTML5+CSS3从入门到精通 中文pdf版
HTML5+CSS3从入门到精通是通过基础知识+中小实例+综合案例的方式,讲述了用HTML5+ CSS3设计构建网站的必备知识,相对于专业指南.高级程序设计.开发指南同类图书,本书是一本适合快速入手的 ...
随机推荐
- YML Exception 以及 java.nio.charset.MalformedInputException: Input length = 1
在springboot项目中,第一次遇到的问题是 YML Exception java.nio.charset.MalformedInputException: Input length = 1 ,此 ...
- (已解决）问题：windows下，为THINKPHP配置apache虚拟主机。
1. 环境和需求 win10_x64,php7,apache24,thinkphp5. 现在,我要用apache给THINKPHP的一个项目设置一个虚拟主机,需要配置. 2. 步骤 a. 首先,找到h ...
- pycharm 导入requests库踩坑帖
requests库确认安装了,但是在pycharm里各种导入不了,简直要奔溃,后来看帖子,有博主"alt + enter"了一下,跳出了install选项,然后就可以了... 用个 ...
- Unity中常用的几种读取本地文件方式
使用的命名空间如下 using LitJson;using System.Collections.Generic;using System.IO;using System.Text;using Uni ...
- c++学习2 基础关键词
三 volatile强制访问内存 在一个变量的频繁使用中,系统为了提高效率,会自动将内存里面的数据放入CPU里的寄存器里.但在某些特殊场景下,放入寄存器这个操作反倒会导致CPU无法及时获取最新的一手数 ...
- 使用autoIt 上传文件（参数化）
1.编写autoit脚本:upload.au3 ControlFocus("打开", "", "Edit1") ;用于识别windwos窗口 ...
- AutoCAD2018
「AutoCAD_2018_SC.exe」https://www.aliyundrive.com/s/GvpR9yg6TWg 点击链接保存,或者复制本段内容,打开「阿里云盘」APP ,无需下载极速在线 ...
- Restful Fast Request 添加前置脚本，实现不同环境免设置token 直接请求
idea安装Restful Fast Request插件后,进行如下设置,并打开 项目全局参数 对话框 进入前置脚本 tab 编写如下groovy脚本代码(插件脚本语言默认支持groovy,该语言被称 ...
- doy 20 系统优化
系统优化 1.yum源的优化 CentOS base epel 自建yum仓库使用一个较为稳定的仓库wget -O /etc/yum.repos.d/CentOS-Base.repo h ...
- WEB应用中配置和使用springIOC容器是成功的
Sring web应用学习(1)https://www.cnblogs.com/xiximayou/p/12172667.html