CSS
css的四种导入方式
第一种，直接在html文件写style
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--规范:<style>
语法：
选择器{
声明1;
声明2;
声明3;
}
-->
<style>
h1 {
color: blue;
font-size: 36px;
text-align: center;
}
</style>
</head>
<body>
<h1>Hello, world!</h1>
</body>
</html>
第二种，另外建立 css文件，外部样式，通过链接link
h1 {
color: blue;
font-size: 36px;
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--规范:<style>
语法：
选择器{
声明1;
声明2;
声明3;
}
-->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>Hello, world!</h1>
</body>
</html>
Vue不容易被收录
第三种：行内
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--行内样式，在标签中写style属性-->
<！--优先级，就近原则：行内样式 > 内部样式或外部样式，看谁离得近就用谁 -->
<h1 style="color: red">导入方式</h1>
</body>
</html>
一、选择器
三大选择器（指定标签全选或指定class属性的标签，和标签类型无关）
作用：选择页面上某一个元素
1、标签选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* 标签选择器，会选择所有h1标签 */
h1 {
color: blue;
font-size: 36px;
}
</style>
</head>
<body>
<h1>Hello, world!</h1>
<p>This is a paragraph.</p>
</body>
</html>
2、类选择器 class
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*类选择器的格式-.class的名称
好处，可以多个标签归类，是同一个class*/
.cjf{
color:red;
}
.cjj{
color:blue;
}
</style>
</head>
<body>
<h1 class="cjf">标题1</h1>
<h1 class="cjj">标题2</h1>
<h1 class="cjf">标题3</h1>
</body>
</html>
3、ID选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* id选择器格式：#id名称 {}
id只能保证全局唯一，不能复用
id选择器》class选择器》标签（元素）选择器
*/
#cjf{
color: red;
}
</style>
</head>
<body>
<h1 id="cjf">标题1</h1>
<h1 >标题2</h1>
<h1>标题3</h1>
<h1>标题4</h1>
<h1>标题5</h1>
<h1>标题6</h1>
</body>
</html>
层次选择器（指定元素的后面所有指定元素或后面一层指定元素，或指定元素旁边的元素－-没办法指定第几个，
１、后代选择器：在某个元素的后面
２、子选择器
３、相邻兄弟选择器
４、通用选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*p {
background: blue;*/
/*后代选择器*/
body p {
background: red;
}
/*子选择器*/
body > p {
background: green;
}
/*相邻兄弟选择器,是选中后旁边的兄弟元素，只有一个，向下的*/
.test + p {
background: yellow;
}
/*通用选择器，选中元素向下的同级指定元素，兄弟元素扩展版*/
.test~p {
background: purple;
}
</style>
</head>
<body>
<p>p0</p>
<p class="test">p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li></li>
<p>p4</p>
<li></li>
<p>p5</p>
<li></li>
<p>p6</p>
</ul>
</body>
</html>
结构伪类选择器（指定元素后面一层第几个指定元素，或由子元素推回元素再找回子元素--可以指定第几个）
所有带：冒号就是伪类
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*ul的第一个元素*/
ul li:first-child {
color: red;
}
/*ul的最后一个元素*/
ul li:last-child {
color: blue;
}
/*选中p1：定位父元素，选择当前第一个元素,如果不是P元素就不显示--按顺序 */
p:nth-child(1){
background-color: green;
}
/*选中p1：定位父元素，选择当前第一个P元素,--按类型 */
p:nth-of-type(1){
background-color: yellow;
}
</style>
</head>
<body>
<h1>This is a title</h1>
<p class="1">>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
</ul>
</body>
</html>
属性选择器－－重要（指定标签的指定属性或属性值）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.demo a{
float: left;
display: block;
height: 30px;
width: 30px;
border-radius: 10px;
background-color: #ccc;
text-align: center;
line-height: 30px;
color: #fff;
text-decoration: none;
margin-right: 10px;
font:bold 14px/30px Arial, sans-serif;
}
/*存在id属性的标签.id的值能用正值表达式
*class中有links的元素*/
a[id]{
background-color: #ff8c00;
}
a[id="first"]
{
background-color: #00bfff;
}
/*class中含有links的元素*/
a[class*="links"]
{
background-color: #008080;
}
/*htref中以http开关的元素*/
a[href^="http"]
{
background-color: #ff0000;
}
</style>
</head>
<body>
<p class="demo">
<a href="http://www.baidu.com" class="links item first" id="first">1</a>
<a href="http://blog.kuangstudy.com" class="links item active" target="_blank" title="test">2</a>
<a href="images/123.html" class="links item">3</a>
<a href="images/123.png" class="links item">4</a>
<a href="images/123.jpg" class="links item">5</a>
<a href="abc" class="links item">6</a>
<a href="/a.pdf" class="links item">7</a>
<a href="/abc.pdf" class="links item">8</a>
<a href="abc.doc" class="links item">9</a>
<a href="abcd.doc" class="links item last">10</a>
</p>
</body>
</html>
二、美化网页元素
字体样式-font
1、要突出的字体，用span包裹
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#title {
color: blue;
font-size: 24px;
}
</style>
</head>
<body>
欢迎学习<span id="title">Java</span>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/**
* 字体样式：font-family
字体大小：font-size
粗体：font-weight
颜色：color
*/
body{
font-family: 楷体;
}
</style>
</head>
<body>
欢迎学习
</body>
</html>
文本样式
1、颜色
2、文本对齐方式
3、首行缩进
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*
text-align: center; /* 让文本居中 */
text-indent: 2em; /* 首行缩进2em */
line-height: 1.5; /* 行高1.5倍 */
text-decoration: underline; /* 下划线 */
*/
h1{
color: red;
text-align: center;
}
p{
text-indent: 2em;
line-height: 1.5;
}
</style>
</head>
<body>
<h1>欢迎学习</h1>
<p>这里是HTML学习的地方，欢迎大家来学习。这里是HTML学习的地方，欢迎大家来学习。这里是HTML学习的地方，欢迎大家来学习。这里是HTML学习的地方，欢迎大家来学习。
</p>
</body>
</html>
文本阴影和超链接伪类
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*
*/
a {
color: red;
}
/*鼠标悬浮的颜色*/
a:hover {
color: blue;
}
/*鼠标按住未释放的颜色*/
a:active {
color: green;
}
/*阴影颜色*/
#price{
text-shadow: 1px 1px 1px #ccc;
}
</style>
</head>
<body>
<a href="#" >
<img src="baidu1.png" alt="">
</a>
<p>
<a href="#">图图图</a>
</p>
<p id="price">
￥100
</p>
</body>
</html>
列表样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* */
#nav {
width: 200px;
background: antiquewhite;
}
.title {
font-size: 18px;
font-weight: bold;
text-indent: 1em;
line-height: 35;
}
ul li {
height: 35px;
list-style: none;
text-indent: 1em;
}
ul{
background-color: rgba(245, 245, 245, 0.5);
}
a {
text-decoration: none;
font-size: 16px;
color: black;
}
a:hover {
color: red;
text-decoration: antiquewhite;
}
</style>
</head>
<body>
<div id="nav"
<h2 class="title">全部商品分类</h2>
<ul>
<li>
<a href="#">图书</a>
<a href="#">音像</a>
<a href="#">数字商品</a>
</li>
<li>
<a href="#">家用电器</a>
<a href="#">手机</a>
<a href="#">数码</a>
</li>
<li>
<a href="#">电脑</a>
<a href="#">办公</a>
</li>
<li>
<a href="#">家居</a>
<a href="#">家装</a>
<a href="#">厨具</a>
</li>
<li>
<a href="#">服饰鞋帽</a>
<a href="#">个性化妆</a>
</li>
<li>
<a href="#">礼品箱包</a>
<a href="#">钟表</a>
<a href="#">珠宝</a>
</li>
<li>
<a href="#">食品饮料</a>
<a href="#">保健食品</a>
</li>
<li>
<a href="#">彩票</a>
<a href="#">旅行</a>
<a href="#">充值</a>
<a href="#">票务</a>
</li>
</ul>
</div>
</body>
</html>
背景图像应用及渐变
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* */
div{
width: 1000px;
height: 700px;
border: 1px solid black;
/*颜色，图片，图片位置，平铺方式*/
background-image: url("baidu1.png");
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</body>
</html>
盒子模型及边框使用
margin:外边距-很多元素都会默认有外边距，养成好习惯，先设置为0
padding:内边距
border:边框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* body总会有一个默认的外边距 */
body{
margin: 0;
}
h2{
width:300px;
border: 1px solid #ec1c1c;
}
/* border:粗细，样式，颜色 */
#box {
width: 300px;
border:1px solid #fa1010;
}
form{
background-color: rgba(214, 255, 8, 0.26);
}
div:nth-of-type(1) input{
border: 3px solid #000;
}
div:nth-of-type(2) input{
border: 3px dashed #000;
}
div:nth-of-type(3) input{
</style>
</head>
<body>
<div id="box">
<h2>会员登录</h2>
<form action="#">
<div>
<span>用户名：</span>
<input type="text">
</div>
<div>
<span>密 码：</span>
<input type="password">
</div>
<div>
<span>邮箱：</span>
<input type="text">
</div>
</form>
</div>
</body>
</html>
内外边距及div居中
margin+border+padding+内容宽度=盒子宽度（就是其实网页内容）
圆角边框及阴影
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/**border-radius: 数据是按左上 右上 右下 左下顺时针*/
div{
width: 100px;
height: 100px;
border:10px solid red;
border-radius:0 50px 50px 0;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/**阴影*/
div{
width: 100px;
height: 100px;
border:10px solid red;
box-shadow: 10px 10px 100px #e6f861;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
display和浮动
display:方向不可控制
float:浮动会脱离标准文档流，要解决父级塌陷的问题
块级元素：独占一行h1\p\div\列表
行内元素：不独占一行span img stong
行内元素可以包在块级元素
块级元素：会根据块级元素里面的内容，有一个独占一行，高根据里面内容，的边框（无形）。
行内元素：会根据块级元素里面的内容，有一个宽高根据里面内容，的边框（无形）。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/**block块元素
inline-blokc 又是行内元素，又是块元素,可以把块元素变成行内元素，像把图片标签这种块元素变成行内元素
*/
div{
width: 100px;
height: 100px;
border:1px solid red;
display:inline-block;
}
span{
width: 100px;
height: 100px;
border:1px solid blue;
display: inline-block;
}
</style>
</head>
<body>
<div>div块元素</div>
<span>span行内元素</span>
</body>
</html>
这是一种实现行内元素排列的方式，但更多时候用float,向左浮动或向右浮动，但由于是浮动，是不受背面div的框框影响，有时里面的div甚至超过外面的div
clear:ringt:右侧不能有浮动元素
div 标签本身不传达任何特定的语义信息，它只是一个用于布局的容器
通常只用于布局分割，或样式
span标签也是差不多，只是用于文本的部分内容
overflow及父级边框塌陷的问题
如果里面的div用浮动，有时可能会超过外面的div,这时外面的div要设置太大不好看，就用overflow切掉多余的部分
解决父级边框塌陷
1\浮动元素增加空div
2\设置父元素的高度
3\在父级元素增加一个：overflow:hidden
4\在父类添加一个伪类（推荐）
#father:afer{
content:'';
display:block;
clear:both
)
定位
**相对定位 **
相对于自己
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/**
1,相对定位：相对于自己原来的位置进行偏移
*/
div {
margin: 10px;
padding: 10px;
font-size: 16px;
line-height: 25px;
}
#father {
border: 1px solid #000;
}
#first {
border: 1px solid #000;
position: relative;/*相对定位*/
top: -10px;/*向上偏移10px*/
}
#second {
border: 1px solid #000;
}
#third {
border: 1px solid #000;
}
</style>
</head>
<body>
<div id="father">
<div id="first">第一个盒子</div>
<div id="second">第二个盒子</div>
<div id="third">第三个盒子</div>
</div>
</body>
</html>
绝对定位
定位：基于XXX定位 ，上下左右
1、父级元素没有定位的前提下，相对于浏览器
2、假设父级元素存在定位 ，我们通常相对于父级元素进行偏移
3、在父级元素范围内移动
相对于父级或浏览器的位置，进行指定偏移，绝对定位的话，不在标准文档中，原来位置不会被保留
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/**
1,相对定位：相对于自己原来的位置进行偏移
*/
div {
margin: 10px;
padding: 10px;
font-size: 16px;
line-height: 25px;
}
#father {
border: 1px solid #000;
position: relative;/*相对定位*/
}
#first {
border: 1px solid #000;
position: relative;/*相对定位*/
top: -10px;/*向上偏移10px*/
}
#second {
border: 1px solid #000;
position: absolute;/*绝对定位*/
right:20px;/*向右偏移30px*/
}
#third {
border: 1px solid #000;
}
</style>
</head>
<body>
<div id="father">
<div id="first">第一个盒子</div>
<div id="second">第二个盒子</div>
<div id="third">第三个盒子</div>
</div>
</body>
</html>
**固定定位 **
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
height: 1000px;
}
div:nth-of-type(1){
width: 100px;
height: 100px;
background:red;
position: absolute;
right: 0;
bottom: 0;
}
div:nth-of-type(2){
width: 50px;
height: 50px;
background:blue;
position: fixed;
right: 0;
bottom: 0;
}
</style>
</head>
<body>
<div>div1</div>
<div>div2</div>
</body>
</html>
z-index及透明度
图层
z-index：默认是0，最高无限
浙公网安备 33010602011771号