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 干啥用的 ...
随机推荐
- 个性化自己的DOS窗口
就是为了好看吧,感觉没啥大用 ============= 首先创建一个文本,写下如下命令 @echo off color D echo ======================== echo == ...
- spring+springmvc+hibernate 框架搭建
1.新建web项目,将所需jar包放到 lib 目录下 2.配置web.xml 配置文件 <?xml version="1.0" encoding="UTF-8&q ...
- 16. Antimalware （反病毒 3个）
Malwarebytes反恶意软件是为Windows的恶意软件扫描程序. 作者声称使用各种技术来查找其他恶意软件扫描仪检测不到的恶意软件. 有一个有限选项的免费试用版和支持能够运行扫描计划的完整版本, ...
- windows7 64位系统安装CPU版本TensorFlow（anaconda3.6）
1>下载anaconda3.6,https://www.anaconda.com/download/,选择64位的anaconda3.6,安装时候,路径可以自定义,但是要选择把路径添加到环境变量 ...
- 自己实现一个jQuery插件
<script src="https://cdn.staticfile.org/jquery/2.0.3/jquery.min.js"></script> ...
- 将多张图片打包成zip包，一起上传
1.前端页面 <div class="mod-body" id="showRW" style="text-align: center;font- ...
- Java高级特性 第15节 解析XML文档(3) - JDOM和DOM4J技术
一.JDOM解析 特征: 1.仅使用具体类,而不使用接口. 2.API大量使用了Collections类. Jdom由6个包构成: Element类表示XML文档的元素 org.jdom: 解析xml ...
- Day 23 面向对象（二）
一.对象独有的名称空间 在产生对象时就赋初值 class Student: def __init__(self,name,sex): self.name = name self.sex = sex # ...
- 18.23 inline函数功能
GUN的C关键字,在函数定义中函数返回类型前加上关键字inline,可以把函数指定为内联函数.关键字inline必须与函数定义放在一起才能使函数成为内联,仅仅将inline放在函数声明前面不起任何作用 ...
- innobackupex: error while loading shared libraries: libssl.so.6
我遇到过这个问题,但由于测试环境不允许上网,所以虽然搜到了一篇解决办法,但我也未亲自测试,先记录下来别人的解决办法. 参考文章:http://blog.itpub.net/29654823/views ...