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 干啥用的 ...
随机推荐
- sql base and plsql and database
sql base: http://www.runoob.com/sql/sql-tutorial.html Oracle系统表整理+常用SQL语句收集: https://www.cnblogs.co ...
- Mysql安装本地数据库
1.下载解压:https://dev.mysql.com/downloads/mysql/ 2.配置环境变量path: D:\workPrograms\mysql-8.0.16-winx64\bin ...
- Linux 开(关) ICMP 回应(防止被ping)
临时生效的办法 关闭回应: [root@host ~]# echo 1 > /proc/sys/net/ipv4/icmp_echo_ignore_all // 客户端测试 ➜ ~ ping 0 ...
- 如何写更少的 if else
首先声明,不是要消除if 而是,减少一些不必要的if判断,使得代码更优雅,更重要的是提高可维护性 most easy use Ternary: var result = condiction? tru ...
- Mac OS X L2TP Client Setup
原文链接:http://www.softether.org/4-docs/2-howto/9.L2TPIPsec_Setup_Guide_for_SoftEther_VPN_Server/5.Mac_ ...
- c++中函数指针作为int传递
int f() { ; } typedef int (*method)(); int _tmain(int argc, _TCHAR* argv[]) { int value = (int)& ...
- SignalR 行实时通信最大连接数
SignalR 搭建实时刷新应用虽然非常方便,但是有个问题你必须考虑到,就是一般的浏览器,对于SignalR的全双工通信方式,绝大多数浏览器都只支持6个新窗口,如果你打开第7个,那么新的框口页面是不会 ...
- DNS 负载均衡
相关文章: 文章 网址 一个域名可以绑定多个IP吗?由此引发的调查 https://ask.zkbhj.com/?/article/139
- Linux shell 重定向学习笔记
在了解重定向之前,我们先来看看linux 的文件描述符. linux文件描述符:可以理解为linux跟踪打开文件,而分配的一个数字,这个数字有点类似c语言操作文件时候的句柄,通过句柄就可以实现文件的读 ...
- USD词汇表(USD Glossary)
这篇文章是在学习USD的过程中龟速写成的,目的是将USD的核心设计.相关概念的说明.以及配套API整理出来,为后续进行的USD开发工作提供中文资料支持. 实际上也只有充分理解了USD设计中的每一个知识 ...