02-03 CSS快速入门
css四种引入方式：
test.html:
p{
color: gold;
font-size: 20px;
}
title.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title> <!--<style>--> #插入式
<!--p{-->
<!--color: rebeccapurple;-->
<!--font-size: 40px;-->
<!--}--> <!--a{-->
<!--text-decoration: dashed;-->
<!--}-->
<!--</style>--> <!--链接式-->
<!--<link href="test1.css" rel="stylesheet">--> <!--导入式-->
<style>
@import "test1.css";
</style>
</head>
<body> <!--第一种引入方式-->
<!--<div style="color: red;background-color: beige">hello yuan </div>--> <div>hello div</div> <p>hello p</p> <a href="">点我</a>
</body>
</html>
选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/**{*/ /*一号选择器
/*color:red;*/
/*}*/ /*#little_P{*/ /*二号宝宝
/*background-color: blue;*/
/*}*/ /*.PP{ !*三号宝宝*/
/*color:fuchsia;*/
/*}*/ </style>
</head>
<body>
hello body <div>hello div</div>
<p id = 'little_P'>pppppp</p>
<p class = "PP">ppp</p>
<p class = "PP">pp</p>
</body>
</html>
组合选择器：
1.块级元素可以包含内联元素 但内联元素不能包含块级元素 它只能包含
其他内联元素。
2.有几个特殊的块级元素只能包含内联元素 不能包含块级元素
3.li内可以包含div
4.块级元素与块级元素并列 内敛元素与内敛元素并列。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/**{*/ /*一号选择器
/*color:red;*/
/*}*/ /*#little_P{*/ /*二号宝宝
/*background-color: blue;*/
/*}*/ /*.PP{ !*三号宝宝*/
/*color:fuchsia;*/
/*}*/ /*little_P,div.cuihua{ 组合*/
/*color:crimson;*/
/*}*/ /*.div1 div{*/
/*color:sienna;*/
/*}*/
/*.div1 div>P{*/
/*color:aqua;*/
/*}*/ /*.div1 + div{*/
/*background-color: chartreuse;*/
/*}*/ /*p div{*/
/*color: red;*/
/*}*/ </style>
</head>
<body>
hello body <div class="cuihua">hello div</div>
<p id = 'little_P'>pppppp</p>
<p class = "PP">ppp</p>
<p class = "PP">pp</p>
<div1 class="div1">
<div class="div2">
<!--<a href = "">a</a>-->
<p class="P">pphahahahha</p>
<div3>woshi duv3 heihei</div3>
</div>
</div1>
</body>
</html>
属性：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
[alex]{
color:green;
}
[alex="dasb"]{
font-size:30px;
/*font-family:"Time new roman"*/
}
</style>
</head>
<body>
<div>hello1</div>
<div alex="sb LI">alex</div> /*attention space
<div alex="dasb">div alex1</div>
<p alex="dasb">ppalex</p>
<div>hello1</div> </body>
</html>
伪类：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title> <style> a:link{
color: red;
} a:visited {
color: blue;
}
a:hover {
color: green;
}
a:active {
color: yellow;
} .box{
width: 100px;
} .top,.bottom{
width: 100px;
height: 100px;
background-color: chartreuse;
} /*.top:hover{*/
/*background-color: red;*/
/*}*/ /*.box:hover .bottom{*/
/*background-color: red;*/
/*}*/ .add:after{
content: "欢迎加入前端学习";
color: red;
}
</style>
</head>
<body> <a href="css_引入方式.html">hello-world</a> <div class="box">
<div class="top"></div>
<div class="bottom"></div>
</div> <div class="add">hello yuan</div>
</body>
</html>
优先级：
所谓CSS优先级 即是指CSS样式在浏览器中被解析的先后顺序
样式中的特殊性描述了不同规则的相对权重。它的基本规则是：
1.内联样式表中的权值最高 style=“”
2.统计选择符中的ID属性个数 #id
3.统计选择符中的class个数 .class
4.统计选择符号中HTML标签个数 p
附加说明：
1、纹内的样式优先级是1,0,0,0，所以始终高于外部定义.
这里文内样式指的是如<div style="color:red>blah</div>的样式
而外部定义指经由<link>或<style>卷标定义的规则
2. 有 ！important 声明的规则高于一切
3、如果声明冲突 仍然比较优先权
4、如果优先权一样 则按照源码中的顺序决定 后来者居上
5.由继承而得到的样式没有specificity的计算 它低于一切其他规则
背景属性：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p{
color: rgba(22, 46, 122,0.8); font-size:20px;
font-weight: 900;
font-style:italic; background-color: aliceblue;
/*background-image: url("haha.jpg");*/
}
. back{
width:800px;
height:800px;
background-image: url("haha.jpg");
background-repeat: no-repeat;
background-position: center;
}
</style>
</head>
<body>
<p>独在异乡为异客
每逢佳节倍思亲</p>
<div>
class back
</div>
</body>
</html>
文本属性：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
text-transform: capitalize;
word-spacing: 20px;
letter-spacing: 10px;
text-indent: 150px;
height: 100px;
background-color: aquamarine;
text-align: center;
/*line-height: 100px;*/
}
</style>
</head>
<body> <div>介绍文本属性介绍文本属性介绍文本属性介绍文本属性介绍文本属性介绍文本属性介绍文本属性介绍文本属性介绍文本属性介绍文本属性介绍文本属性介绍文本属性介绍文本属性介绍文本属性介绍文本属性介绍文本属性介绍文本属性介绍文本属性介绍文本属性</div> <div>hello world hello world hello world hello world hello world hello world hello world</div>
</body>
</html>
列表属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.div2,p,a,span{
width: 100px;
height: 100px;
} .div2{
background-color: yellow;
/*display: inline;*/
display: none;
} p{
background-color: red;
/*display: inline;*/
} span{
background-color: palevioletred;
display: inline-block;
}
a{
background-color: green;
display: inline-block;
}
.outer{
word-spacing: -8px;
}
</style>
</head>
<body> <div class="div2">divvvvv</div>
<p>pppppp</p> <div class="outer">
<span>spannnnnn</span>
<a href="#">click</a>
</div> </body>
</html>
内外边距
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title> <style>
.div1{
width: 200px;
height: 200px;
background-color: antiquewhite;
border: 40px solid rebeccapurple;
/*padding: 40px;*/
/*margin: 20px;*/
/*margin-bottom: 40px;*/
/*margin: 10px 20px 30px 40px;*/
/*margin-top: 30px;*/
/*margin-bottom:40px;*/
} .div2{
width: 200px;
height: 200px;
background-color: lightblue;
/*border: 20px solid red;*/
/*padding: 5px;*/
/*margin-top: 40px;*/
}
/*.outer{*/
/*height: 1000px;*/
/*background-color: aquamarine;*/
/*!*border: 1px red solid;*!*/
/*!*padding: 1px;*!*/
/*overflow: hidden;*/
/*}*/ /*.outer2{*/
/*width: 1000px;*/
/*height: 1500px;*/
/*background-color: firebrick;*/
/*}*/
/*body{*/
/*border: 2px solid darkcyan;*/
/*margin: 0px;*/
/*}*/
</style>
</head>
<body> <!--<div class="outer2">-->
<!---->
<!--<div class="outer">--> <div class="div1">hello div1</div>
<div class="div2"></div>
<!--<span>uuu</span><span>ooo</span>-->
<!--</div>-->
<!--</div>--> </body>
</html>
浮动：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.div1{
width: 100px;
height: 100px;
background-color: beige;
float: left; }
.div2{
width: 200px;
height: 100px;
background-color: rebeccapurple;
float: left;
clear: left; }
.div3{
width: 100px;
height: 200px;
background-color: green;
float: left;
clear: right; }
.div4{
width: 200px;
height: 200px;
background-color: yellow;
float: left;
} </style>
</head>
<body> <div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div> </body>
</html> <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
* {
margin:0;padding:0;
} .container{
border:1px solid red;
width:300px;
overflow: hidden;
}
#box1{
background-color:green;
width:100px;
height:100px;
float: left;
}
#box2{
background-color:deeppink;
float:right;
width:100px;
height:100px;
}
#box3{
background-color:pink;
height:40px;
} .clearfix:after{
content:"";
display: block;
clear: both;
}
</style>
</head>
<body> <div class="container">
<div id="box1">box1 向左浮动</div>
<div id="box2">box2 向右浮动</div>
</div>
<div id="box3">box3</div>
</body>
</body>
</html>
定位属性：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style> /**{*/
/*margin: 0px;*/
/*}*/ .div1{
width: 200px;
height: 100px;
background-color: beige; }
.div2{
width: 200px;
height: 100px;
background-color: rebeccapurple;
position: relative;
position: absolute;
left: 100px;
top: 100px; }
.div3{
width: 200px;
height: 200px;
background-color: green;
/*position: relative;*/
/*top:-100px;*/
/**/ }
.div4{
width: 200px;
height: 200px;
background-color: yellow; } .outer{
position: relative;
}
.returnTop{
width: 80px;
height: 50px;
position: fixed;
bottom: 20px;
right: 5px;
background-color: gray;
color: white;
text-align: center;
line-height: 50px;
}
</style>
</head>
<body> <div style="height: 200px;background-color: aqua"></div>
<div class="outer">
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
</div> <div style="height: 2000px;background-color: darkgoldenrod"></div> <div class="returnTop">返回顶部</div> </body>
</html>
02-03 CSS快速入门的更多相关文章
- CSS快速入门（四）
目录 CSS快速入门(四) 浮动 float属性 clear属性 浮动解决的问题及其影响 解决父标签塌陷的方法 浮动案例 定位 什么是脱离文档流 定位的两种方法 position定位 static定位 ...
- Html与CSS快速入门01-基础概念
Web前端技术一直是自己的薄弱环节,经常为了调节一个简单的样式花费大量的时间.最近趁着在做前端部分的开发,果断把这部分知识成体系的恶补一下.内容相对都比较简单,很类似工具手册的学习,但目标是熟练掌握. ...
- Html与CSS快速入门02-HTML基础应用
这部分是html细节知识的学习. 快速入门系列--HTML-01简介 快速入门系列--HTML-02基础元素 快速入门系列--HTML-03高级元素和布局 快速入门系列--HTML-04进阶概念 示例 ...
- Html与CSS快速入门03-CSS基础应用
这部分是html细节知识的学习. 快速入门系列--HTML-01简介 快速入门系列--HTML-02基础元素 快速入门系列--HTML-03高级元素和布局 快速入门系列--HTML-04进阶概念 边框 ...
- Html与CSS快速入门04-进阶应用
这部分是html细节知识的学习. 快速入门系列--HTML-01简介 快速入门系列--HTML-02基础元素 快速入门系列--HTML-03高级元素和布局 快速入门系列--HTML-04进阶概念 之前 ...
- HTML/CSS快速入门
Web概念 JavaWeb 使用java语言开发基于互联网的项目 软件架构 C/S架构:Client/Server 客户端/服务器 用户本地有一个客户端程序,在远程有一个服务端程序 如QQ,英雄联盟. ...
- 第02章 Python快速入门
007.快速入门,边学边用 008.变量类型 print(type(变量)) 查看变量的了类型 现在常用的变量的类型有整型.浮点型.字符型 009.List基础模块 类型转换:str(8 ...
- JavaScript学习02（js快速入门）
快速入门 基本语法 JavaScript的语法和Java的语法类似,每个语句以;结束,语句块用{...}.但是JavaScrip并不强制要求在每个语句的结尾加;,浏览器中负责执行JavaScript代 ...
- CSS快速入门例子
CSS入门应用 01-结合方式01 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " ...
- #001 CSS快速入门讲解
CSS入门讲解 HTML人+CSS衣服+JS动作=>DHTML CSS: 层叠样式表 CSS2.0 和 CSS3.0 版本,目前学习CSS2, CSS3只是多了一些样式出来而已 CSS 干啥用的 ...
随机推荐
- mysql 主主+主从笔记
环境 Ubuntu 14.04.4 LTS *3 分别是master1(192.168.42.28), master2(192.168.42.29), slave1(192.168.42.33)测试下 ...
- 防F12扒代码：按下F12关闭当前页面
只要按下那神秘的审查元素.按下那神秘的F12键,奇迹出现了!网站变成了空白页,可谓杀防君子放火必备佳品!一段JavaScript代码即可实现上述功能,插入到 footer.php 的 </bod ...
- java web(二): servlet的简单使用和介绍
前言:通过编写一个servlet类,向浏览器发送hello world来阐述servlet. 一:创建动态web项目 1. 首先切换到javaEE视图. 在ecplise左边即项目管理器哪里右键点击新 ...
- flagr a/b 测试特性开关&&微服务动态配置工具
flagr a/b 测试特性开关&&微服务动态配置工具 简单运行 docker docker run -it -p 18000:18000 checkr/flagr 运行界面 说明 参 ...
- Lunar Lander 月球冒险
发售年份 1979 平台 街机 开发商 雅达利(Atari) 类型 飞行模拟 https://www.youtube.com/watch?v=McAhSoAEbhM
- 创建一个dynamics 365 CRM online plugin (九) - Context.Depth
让我们来看看官方文档是怎么讲的 https://docs.microsoft.com/en-us/previous-versions/dynamicscrm-2016/developers-guide ...
- Python importlib(动态导入模块)
使用 Python importlib(动态导入模块) 可以将字符串型的模块名导入 示例: import importlib module = 'module name' # 字符串型模块名 test ...
- mvc项目远程发布到windows server服务器
1.安装IIS的时候需要将这两个选项勾选起来 2.确保 管理服务委派 这个选项存在 3.添加委派规则 4.配置IIS管理用户,后续需要用这个用户进行发布连接 5.配置站点的IIS权限 选择刚才在前面设 ...
- JS:Math 对象方法
Math 对象方法方法 描述Math.ceil(x) 对数进行上舍入.(向上取整:大于等于x的最小整数)Math.floor(x) 对数进行下舍入.(小于等于x的最大整数)Ma ...
- MSIL 教程
Microsoft Intermediate Language (MSIL) is a language used as the output of a number of compilers (C# ...