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 干啥用的 ...
随机推荐
- 对于Vue的v-if 和 v-showi
V-if : 1. 是条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当的被销毁和重建. 2. 是惰性的,如果初始渲染条件为假,则什么都不做,直到条件第一次变为真的时候,开开始渲染 ...
- IDEA远程连接Hadoop
IDEA远程连接Hadoop Win 1.Hadoop配置 下载并配置到本地环境 HADOOP_HOME D:\Tools\hadoop-2.7.7\hadoop-2.7.7 HADOOP_PREFI ...
- 网络操作基础（two）
P106 一.什么是活动目录?活动目录有哪些优点? 二.什么是域.域树.森林? 三.什么是信任?什么是域的方向及传递性? 四.如何管理活动目录的信任与站点? 解答! (一) 1.活动目录:提供了用于存 ...
- tensorboard No graph definition files were found No scalar data was found 解决方法
logdir后面的路径不要加引号!!!! tensorboard --logdir='D:\WorkSpace\eclipse\tf_tr\train\my_graph\' 删除引号,改为: tens ...
- 如何写更少的 if else
首先声明,不是要消除if 而是,减少一些不必要的if判断,使得代码更优雅,更重要的是提高可维护性 most easy use Ternary: var result = condiction? tru ...
- javascript常见问题总结
1.const obj = {a:6}; obj.b=8; obj.a=9;//obj为{a:9,b:8};const定义对象的时候是可以改变内容的. const b = "hello&qu ...
- Matlab高级绘图
http://blog.csdn.net/haizimin/article/details/50372630 图形是呈现数据的一种直观方式,在用Matlab进行数据处理和计算后,我们一般都会以图形的形 ...
- c++ 调用 wmi 获取数据
#define _WIN32_DCOM #include <iostream> using namespace std; #include <comdef.h> #includ ...
- php使用fastdfs
php的服务器地址:10.10.1.2 fastdfs tracker地址:10.15.1.2 fastdfs storage地址:10.16.1.2 将fastdfs的源码上传到php所在服务器,进 ...
- Java...点点点语法
https://blog.csdn.net/IT_faquir/article/details/49131173