css、css3快速入门

这篇文章讲的是css和css3

上期回顾：html、html5、浏览器内核差异
大概内容包括：css基本语法，选择器，雪碧图，单位，盒模型，浮动与定位，绘制三角形，太极图，心形图，响应式布局，过渡与动画，chrome调试，ps基本使用…纯css的轮播图，企业级css开发技巧

没安装开发工具？

推荐vscode或者Atom、notepad++
量图工具ps

ps网盘下载
提取码：q9rx

什么是css？

CSS 指层叠样式表 (Cascading Style Sheets)

再拥有样式之前，我们的网页长这个样子…

听说有css基本语法规范？ 没错，这就是今天的主角，css！
这一行下去，h1标题标签就变成红色了，字体的大小就变成了25px
三部分，哪个东西？做哪方面？做成啥样？

要想修改样式，就得先选择要修改的元素
先给元素一个标识，然后用选择器来选择

选择器是开启css之门的钥匙！

有空就挨个试试，早晚就都掌握了
没空就先学两个，class选择器和后代选择器
通用选择器一般只有一个功能，清除默认内外边距

        * {margin: 0;padding: 0;}

我们把css代码写在哪里呐？

行内很少写：
<p style="color: sienna; margin-left: 20px">
This is a paragraph
</p>内联写法：
<head>
<style type="text/css">hr {color: sienna;}p {margin-left: 20px;}body {background-image: url("images/back40.gif");}
</style>
</head>外联写法：
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>浏览器会从文件 mystyle.css 中读到样式声明，并根据它来格式文档。
外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。
样式表应该以 .css 扩展名进行保存。下面是一个样式表文件的例子：hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}

常用的样式属性和值

这是跟背景颜色有关的5个属性，下面一个一个介绍：

如果你想要背景颜色覆盖背景图片的话可以这么写

background-attachment: fixed;
背景图不会随着内容滚动

上面5个背景的属性，一般用简写，写上url() 然后no-repead
css3增加了3个关于背景图的属性，我们可以用background-size设置尺寸

很多个小图标拼在一起，形成一张图片就是雪碧图！
目的：图片有个src属性，会向服务器发请求拿图片，一堆小图标就要发一堆请求，太费劲！所以把一堆小图标放在一个图里，一次发过来。
可是怎么让它们一个一个显示呐？

背景图就到此为止了，大概两件事：
一个是设置普通的背景图！
一个是学会使用雪碧图！

/* 设置上背景图地址，别重复，设置上铺满*/
.box{
background: url(../笔记/笔记的图片/逗号表达式.png) no-repeat;
background-size: cover;
}
/* 小盒子设置宽高，然后挪动背景图位置，直到露脸的是正确的那一部分*/
.box2{
width: 50px;
height: 50px;
background: url(./捕获.png);
background-position: -285px 65px;
}

网页上有很多字，大大小小，红红绿绿~
下面介绍Text文本样式、Fonts字体样式~
网页上的字，从此就变cool了呐！

ul、ol、li有默认属性，使用的时候一律干掉，代码如下：

ul,ol,li{
margin:0;
padding:0;
list-style:none;
}

table有两个相关的属性要看

css的尺寸单位有两类
绝对单位：px
相对单位：em，rem，vh,vw
px就是逻辑像素，跟物理像素有一定的比例，我写个1px，如果比例是1，那么就代表屏幕一个发光点
em是你在此处的font-size的大小，rem我们学习js之后连同原理一起讲，vh是屏幕高度的1%,vw是屏幕宽度的1%

css hark是什么？
为了兼容800年前的老浏览器，用一种作弊的方式达到浏览器兼容
所以我们不学这玩意，这玩意一点用没有！！！

盒模型

margin和padding的百分比参照的是自己的width宽度

显示与隐藏
display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。
visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。
opacity:0这个是控制透明程度，0就看不见了，1就是完全不透明，取值只能在0到1之间

定位-----------position属性！
顾名思义，确定位置~
可以通过这玩意，控制一个元素，放在页面任意位置！

实际应用：子绝(absolute)父相(relative)，儿子在父亲肚子里上下左右自由的挪动。
补充**

css、css3快速入门相关推荐

CSS3快速入门：五、浮动
浮动在CSS中,浮动是非常重要的一个功能,主要是用来控制行元素或者块元素并列显示或者向左或者向右浮动. CSS系列文章目录 CSS3快速入门:一.三种CSS导入方式 CSS3快速入门:二.CSS ...
CSS3快速入门：三、美化网页
美化网页 CSS系列文章目录 CSS3快速入门:一.三种CSS导入方式 CSS3快速入门:二.CSS选择器 CSS3快速入门:三.美化网页 CSS3快速入门:四.盒子模型 CSS3快速入门:五.浮动 ...
html+css+js+快速入门
html 1.a标签  <a name="top">顶部</a> <!--target:表示窗口在哪里打 ...
CSS3 快速入门教程 -笔记【狂神说Java】
文章目录 1.CSS概述 1.1.什么是CSS 1.2.发展历程 1.3.快速入门 1.4.CSS的三种导入方式 2.选择器 2.1.基本选择器 2.2.层次选择器 2.3.结构伪类选择器 2.4.属 ...
HTML+JS+CSS+xml快速入门
一. HTML 1.HTML是什么 HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写,由开发者编写的HTML文件会在浏览器中被加载和解析,然后通过一个页面表 ...
Confluence 6 CSS 编辑快速入门
希望编辑空间的 CSS 样式表: 进入空间后,然后从边栏的底部选择空间工具(Space tools) > 外观和感觉(Look and Feel) . 然后选择样式表(Stylesheet) ...
CSS+HTML快速入门链接样式雪碧图（案例）
目录一.伪类的使用 1.html部分: 二.横向主菜单 1.images图片部分: 2.css部分: 3.html部分: 三.外部样式 1.css部分: 2.html部分: 四.制作顶部菜单(综合) ...
Html+Css+JavaScript快速入门
--------HTML基础-------- Hyper Text Markup Language:超文本标记语言. 什么是超文本:不仅仅是文本,还包括文本的样式(字体大小颜色等),还包括多媒体( ...
HTML5+CSS3快速入门每日一篇网页制作实战（附代码）DAY06-DAY07
myday6-day07 网页的制作实战(附自己的代码)(仿一个网站的网页) 网页效果图自己的代码实现: <!DOCTYPE html> <html lang="en&q ...

css、css3快速入门

这篇文章讲的是css和css3

css、css3快速入门相关推荐

最新文章

热门文章