JavaEE02_css
JavaEE02_css
1、使用
导入方式
<style>
h1{
color: green;
}
style>
<h1 style="color:red">我是标题h1>
<link rel="stylesheet" href="css/style.css">
<style>
@import url("css/style.css");
style>
优先级：就近原则，谁离要显示的近就是谁的颜色
基本选择器
标签选择器：
<style>
/*标签选择器，会选择到页面上所有这个标签的元素，这里是 标签*/
h1{
color: red;
background: #b8faab;
border-radius: 24px;
}
p{
font-size: 80px;
}
style>
类选择器:
<style>
/*类选择器格式 .class的名称{}
好处可以多个标签归类，是同一个class
可以跨标签，h1和p等都可以*/
.xiaosi{
}
style>
<h1 class="xiaosi">标题1h1>
id选择器：
<style>
/*id选择器
#id名称{}
id必须全局唯一
不遵循就近原则
id选择器>class选择器>大于标签选择器*/
#xiaosi{
color: aqua;
}
.haishi{
color: bisque;
}
h1{
color: red;
}
style>
<h1 id="xiaosi" class="haishi">标题1h1>
因为id选择器>class选择器>大于标签选择器，所以这里是aqua色。
层次选择器：
<style>
/*后代选择器,在某个元素的后面*/
/*body p{*/
/* background: #b8faab;*/
/*}*/
/*子选择器，只有一代*/
/*body>p{*/
/* background: aqua;*/
/*}*/
/*相邻兄弟选择器，只有一个邻居，相邻向下*/
/*.active+p{*/
/* background: green;*/
/*}*/
/*通用选择器,当前元素的向下所有兄弟元素，子类元素不算*/
.active~p{
background: blue;
}
style>
选择器：
<style>
/*ul的第一个元素*/
ul li:first-child{
background: #b8faab;
}
/*ul的最后一个元素*/
ul li:last-child{
background: blue;
}
/*选中p1：定位到父元素，选择当前的第一个元素
选择当前p元素的父级元素，选中父级元素的第一个，并且是当前元素才生效
这里选中了父级的1，但1不是p标签元素，所以无效*/
p:nth-child(1){
background: blueviolet;
}
/*选中p元素父级第一个p类型的元素，所以这里可用*/
p:nth-of-type(1){
background: darkgreen;
}
style>
伪类选择器：
a:link 未单击访问时超链接样式
a:visited 单击访问后超链接样式
a:hover 鼠标悬浮其上的超链接样式
a:active 鼠标单击未释放的超链接样式
<style>
/*伪类:条件
光标悬停a标签给个背景色*/
a:hover{
background: darkgreen;
}
style>
属性选择器：
<style>
.demo a {
float: left; /*向左浮动*/
display: block; /*分块*/
height: 50px;
width: 50px;
border-radius: 10px; /*曲边*/
background: #b8faab;
text-align: center; /*文字左右居中*/
color: aqua;
text-decoration: none; /*去掉下划线*/
margin-right: 5px; /*间隔*/
font: bold 20px/50px Arial; /*伪类，调整字体*/
}
/*属性名=属性值（可以用正则）
= 绝对等于
*= 包含
^= 以这个开头
$= 以这个结尾
*/
/*存在id属性的元素 a[]{}*/
/*a[class="links item first"]{*/
/* background: yellow;*/
/*}*/
/*id=first的元素*/
/*a[id=first]{*/
/* background: yellow;*/
/*}*/
/*选中class中包含links的*/
/*a[class*="links"]{*/
/* background: yellow;*/
/*}*/
/*选中href里以http开头的*/
/*a[href^=http] {*/
/* background: yellow;*/
/* }*/
/*pdf结尾的*/
a[href$=pdf]{
background: yellow;
}
style>
2、修饰内容
span标签
<span id="title1">Javaspan>
字体：
font-family: 楷体,"Arial Narrow";
font-size: 50px;
font-weight: lighter;
color: #b8faab;
font: oblique bolder 16px "楷体";
文本样式：
超链接伪类：
<style>
/*默认颜色*/
a{
text-decoration: none;
color: #000000;
}
/*鼠标悬停状态*/
a:hover{
color: orange;
font-size: 50px;
}
/*鼠标按住未释放（不常用）*/
a:active{
color: green;
}
/* 伪类visited是以访问链接、link未访问链接，一般不用 */
/* text-shadow:阴影颜色，水平偏移，垂直偏移，阴影半径，负数往上往左偏移*/
#price{
text-shadow: #b8faab 10px 10px 1px;
}
style>
列表：
/*ul li
list-style
none:去掉圆点
circle：空心圆
disc：实心圆
decimal：数字
square：方形
*/
ul li{
height: 30px;
list-style: none;
text-indent: 1em;
background-image: url("../images/a.png");
background-repeat: no-repeat;
background-position: 220px 2px;
}
背景：
<style>
div{
width: 1000px;
height: 700px;
border:1px solid red;
/* 画框*/
background-image: url("images/a.png");
/* 默认垂直平铺 repeat*/
}
.div1{
background-repeat: repeat-x;
/* 水平平铺*/
}
.div2{
background-repeat: repeat-y;
/* 垂直平铺*/
}
.div3{
background-repeat: no-repeat;
/* 单个*/
}
style>
背景渐变：
<style>
body{
background-color: #0093E9;
background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);
/*可直接background，不用加-image，也可不用第一句背景色，需要上grabinet上找*/
}
style>
鼠标：
3、盒子模型
盒子模型图片
<style>
/*body总有一个默认的外边框margin ,设为0隐藏
padding:内边距
*/
/*h1,ul,li,a,body{*/
/* !*外边框*!*/
/* margin: 0;*/
/* !*内边框*!*/
/* padding: 0;*/
/* !*下划线*!*/
/* text-decoration: none;*/
/*}*/
/*border:粗细，样式，颜色*/
#box{
width:300px;
border:1px solid red;
}
style>
外边距
<style>
/*border:粗细，样式，颜色*/
#box{
width:300px;
border:1px solid red;
margin:0 auto;
/*上下为0 左右居中*/
}
/*外边框顺时针旋转
margin:0 上下左右都为0
margin:0 0 上下为0 左右为0
margin:0 0 0 0 上为0 左为0 下为0 右为0
*/
h2{
font-size: 16px;
background: #0093E9;
line-height: 30px;
margin:0;
}
input{
/*边框：solid实线，dashed虚线*/
border:1px solid black;
}
div:nth-of-type(1){
padding: 10px 2px;
}
style>
4、浮动
- 由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
- 浮动块会覆盖普通块的背景，但不覆盖内容，内容会被挤压到浮动块周围（环绕）。
- 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
- float ：left/top/right/bottom
float: right;
/*float:浮动,左右浮动*/
清除浮动，可以让文本不贴着浮动框
/*
clear:right; 右侧不允许有浮动元素
clear:left; 左侧不允许有浮动元素
clear:both; 两侧不允许有浮动元素
clear:none;
*/
所有的元素都浮动了，父盒子就失去了高度，所以要解决父级边框塌陷：
/* 方法1：最容易也是最蠢的方法，给父级边框加大小，就不会塌陷
方法2：在末尾加一个空的div
方法3：overflow: hidden;
超出边框时：hidden:隐藏
scroll:滚动条
方法4：伪类方法
#father:after{
content: ' ';
display: block;
clear: both;
}
*/
display
5、定位
相对定位
相对定位
相对于自己原来的位置进行偏移，但原位置依旧存在所以父级边框不会塌陷
向上偏移其实是距离上几个像素（事实上是向下偏移）,其他亦同理
position: relative;/*相对定位*/
top: -20px;
left: 20px;
偏移值：top,left,right,bottom。
绝对定位
定位：基于xxx定位，上下左右
1.没有父级元素定位的前提下，相对于浏览器定位
2.假设父级元素存在定位，我们通常会相对于父级元素进行偏移
3.在父级元素范围内移动
相对于父级或浏览器的位置，进行指定的偏移，绝对定位的话，它不在标准文档留中，原来的位置不会被保留
position: absolute;
right: 100px;
偏移值：top,left,right,bottom。
固定定位
/*fixed:固定定位，位置不会改变,这里是至于底部*/
position: fixed;
bottom: 0;
right: 0;
z-index
z-index: 999;/*zindex:层级，就类似ps的图层*/
6、其他
轮播实现
<html>
<head>
<meta charset="UTF-8">
<title>轮播图title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
list-style: none;
font-size: 12px;
}
#content{
width: 500px;
border: 1px solid gray;
position: absolute;
top: 50%;
left: 50%;
margin-left: -250px;
margin-top: -150px;
}
ul{
position: absolute;
right:180px;
bottom: 10px;
}
ul li{
float: left;
width: 33px;
}
ul li a{
padding: 5px 10px;
text-align: center;
background-color: lightgrey;
color: black;
font-weight: bold;
text-decoration: none;
}
ul li a:hover{
color: white;
background-color: gray;
}
#tabpic{
height: 300px;
overflow: hidden;
}
#p1,#p2,#p3{
width: 500px;
height: 300px;
}
/**
* 1、轮播的要点是：锚链接，通过锚链接实现图片切换
* 2、通过溢出隐藏，让图片只出现在指定的框中
* 3、溢出隐藏只能针对图片，不能针对整个父框，如果针对的是父框，会将菜单也隐藏
* 4、利用绝对定位将菜单定位到指定位置中
* 5、最后就是利用浮动菜单美化菜单效果。
*/
style>
head>
<body>
<div id="content">
<ul>
<li>
<a href="#p1">1a>
li>
<li>
<a href="#p2">2a>
li>
<li>
<a href="#p3">3a>
li>
ul>
<div id="tabpic">
<img id="p1" src="img/pic1.jpg"/>
<img id="p2" src="img/pic2.jpg"/>
<img id="p3" src="img/pic3.jpg"/>
div>
div>
body>
html>
圆角边框
<style>
img{
border-radius: 25px;
}
style>
border-radius: 50px 0 0 50px;
CSS 属性 border-radius 允许你设置元素的外边框圆角。当使用一个半径时确定一个圆形，当使用两个半径时确定一个椭圆。这个(椭)圆与边框的交集形成圆角效果。该属性是一个 简写属性，是为了将这四个属性 border-top-left-radius、border-top-right-radius、border-bottom-right-radius，和 border-bottom-left-radius 简写为一个属性。
空心圆:
<style>
div{
width:100px;
height:100px;
border:10px solid red;
border-radius: 100px;
}
style>
阴影
box-shadow: 10px 10px 100px yellow;
要求：块元素，块元素有固定宽度
过渡动画
<style type="text/css">
#transform div{
width: 50px;
height: 50px;
margin: 20px;
}
#rotate{
background-color: lightpink;
transition: all 3s ease;
/*过渡动画4个参数: 支持哪些动画效果all 过渡几秒 过渡速率ease 几秒后开始动画*/
}
#rotate:hover{
-webkit-transform: rotate(360deg);
}
#move{
background-color: deepskyblue;
transition: all 0.5s ease;
}
#move:hover{
-webkit-transform: translate(5px,-5px);
box-shadow: -5px 5px 5px rgba(50,50,50,0.5);
}
#scale{
background-color: greenyellow;
}
#scale:hover{
-webkit-transform: scale(0.6,0.6);
}
style>
head>
<body>
<div id="transform">
<div id="rotate">div>
<div id="move">div>
<div id="scale">div>
div>
body>
页面居中
<div style="width: 500px;display: block;text-align: center">
<img src="images/a.png" alt="">
div>
nd-color: deepskyblue;
transition: all 0.5s ease;
}
#move:hover{
-webkit-transform: translate(5px,-5px);
box-shadow: -5px 5px 5px rgba(50,50,50,0.5);
}
#scale{
background-color: greenyellow;
}
#scale:hover{
-webkit-transform: scale(0.6,0.6);
}
页面居中
<div style="width: 500px;display: block;text-align: center">
<img src="images/a.png" alt="">
div>