JAVA学习-CSS入门
CSS
代码分离
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<link rel="stylesheet" href="../css/styel.css">
<h1>第一个css</h1>
</body>
</html>
h1{
color: bisque;
}
这就是html css代码分离
CSS三种导入方式
行内样式 内部样式 外部样式
行内样式：直接写在标签内
<h1 style="color:red">
hello
</h1>
内部样式：写在html文件内
<style>
h1{color:red;}
</style>
<h1>
hello
</h1>
外部样式就是内容与表现分离，单独一个css文件
CSS优先级：遵循就近原则，谁离内容近谁生效
基本选择器
- 标签选择器
- 类选择器
- id选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*
标签选择器 会修改所有相同标签
font-size:字体大小
border-radius:设置背景边框圆角
background:背景
*/
p{
color:red;
font-size: 50px;
}
h1{
border-radius: 20px;
background: aqua;
}
</style>
</head>
<body>
<p>hello</p>
<p>hello,world</p>
<h1>你好</h1>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*
类选择器格式： .class类的名称{} 类标签一定要有.
类选择器可以直接跨标签类型分类 只要是同一个class都一起修改
*/
.hello{
color: red;
font-size: 20px;
}
</style>
</head>
<body>
<p class="hello">hello</p>
<h1 class="hello">hello</h1>
<h2 class="hello">hello</h2>
<h2 class="hello">hello</h2>
<h2>hello</h2>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*
id选择器：id全局唯一性
用于单一定向修改
格式：#id名称{}
貌似id的开头为数字无效
*/
#w{
color:red;
}
</style>
</head>
<body>
<h1 id="w">hello</h1>
<h1>hello</h1>
<h1>hello</h1>
</body>
</html>
优先级：id选择器>类选择器>标签选择器
层次选择器
后代选择器
某个元素后面的所有后代 都要修改 这个元素可以是任何标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body p{
background: red;
}
</style>
</head>
<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<p>p4</p>
<ul>
<li><p>p5</p></li>
<li><p>p6</p></li>
<ol>
<li><p>p7</p></li>
<li><p>p8</p></li>
</ol>
</ul>
</body>
</html>
这个是选择了body元素后面所有的p标签，所以，全红！
子选择器
只有一代！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body>p{
background: red;
}
</style>
</head>
<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<p>p4</p>
<ul>
<li><p>p5</p></li>
<li><p>p6</p></li>
<ol>
<li><p>p7</p></li>
<li><p>p8</p></li>
</ol>
</ul>
</body>
</html>
只看一代，所以只红前四个！
相邻兄弟选择器
只对选择标签的下一个，必须相邻，进行修改，注意！只修改一个！只修改一个！只修改一个！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.nihao + p{
background: red;
}
</style>
</head>
<body>
<p class="nihao">p1</p>
<p>p2</p>
<p>p3</p>
<p>p4</p>
<ul>
<li><p>p5</p></li>
<li><p>p6</p></li>
<ol>
<li><p>p7</p></li>
<li><p>p8</p></li>
</ol>
</ul>
</body>
</html>
通用选择器
通用兄弟选择器，所有同级别兄弟都要选，但对下不对上
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*后代选择器
body p{
background:red;}
*/
/*子代选择器
body>p{
background: red;}*/
/*相邻兄弟选择器
.nihao + p{
background: red;*/
/*通用兄弟选择器*/
.nihao ~ p{
background: red;
}
</style>
</head>
<body>
<p class="nihao">p1</p>
<p>p2</p>
<p>p3</p>
<p>p4</p>
<ul>
<li><p>p5</p></li>
<li><p>p6</p></li>
<ol>
<li><p>p7</p></li>
<li><p>p8</p></li>
</ol>
</ul>
</body>
</html>
p1后面三个红，p1自己不红，如果假如p1上面有p0也不红！！
结构伪类选择器
伪类：带冒号的就是伪类，冒号后面过滤一些动作
nth-child()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*
目标：选中p1
定位到父类，选中父类的第一个子元素，且必须为p标签，如果不是p标签则无法定位
*/
p:nth-child(1) {
background: red;
}
</style>
</head>
<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ol>
<li>l1</li>
<li>l2</li>
<li>l3</li>
</ol>
</body>
</html>
first-child
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* 目的：选中l1
定位到ol的第一个li子类
*/
ol li:first-child{
background: red;
}
</style>
</head>
<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ol>
<li>l1</li>
<li>l2</li>
<li>l3</li>
</ol>
</body>
</html>
nth-of-type()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*
目的：如果在p1前加一个h标签，选中p1
定位到父类，选中父类一个p标签类型的元素
*/
p:nth-of-type(1){
background: red;
}
</style>
</head>
<body>
<h1>h1</h1>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ol>
<li>l1</li>
<li>l2</li>
<li>l3</li>
</ol>
</body>
</html>
属性选择器
标签类型[属性=属性的值]{} 属性的值可以填写正则表达式
简单的正则
- =为绝对等于
- *= 包含这个元素
- ^= 以这个元素开头
- $= 以这个元素结尾
美化网页元素
span标签
约定熟成将需要重点突出的字用span标签包起来
字体样式
font
文本样式
- 颜色 rgba: a为透明度 0-1
- text-align : 排版 center 居中 这是左右居中
- text-indent : 首行缩进 2em 缩进两个字符
- 上下居中必须要行高和块的高度一致。也就是line-height = height
- text-decoration: underline 文本装饰 上划线 中划线 下划线
- 超链接去下划线： txet-decoration:none;
超链接伪类
- hover 鼠标悬浮的状态
- active 鼠标按住未释放的状态
- visited 已访问链接的状态
阴影
text-shadow:阴影颜色，水平便宜，垂直便宜，阴影半径
列表
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="l1">
<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>
css
.title{
background: red;
text-indent: 1em;
width: 250px;
height: 55px;
line-height: 55px;
}
#l1{
background: grey;
width: 250px;
}
ul{
height: 400px;
font-size: 15px;
}
ul li{
line-height: 50px;
/*改变列表排序的格式*/
list-style: none;
}
a{
/*去掉下划线*/
text-decoration: none;
color: #000;
}
a:hover{
color: orange;
text-decoration: underline;
}
背景
背景颜色
背景图片
在上一个列表的基础上，加几个图片(向右的箭头)进去，调节位置坐标，完成一个简易的商品栏。
/*背景放入图片*/
background: url("images/r.png");
/*设置不重复铺*/
background-repeat: no-repeat;
/*调试拜访位置*/
background-position: 169px 18px;
渐变
花里胡哨，为了好看。可以直接百度用别人调好的渐变。
盒子模型
边框
/*利用属性选择器定位*/
input[name="user"]{
/*边框颜色红 实线*/
border: red solid;
}
input[name="psw"]{
/*边框颜色黑 虚线*/
border: black dashed;
}
圆角边框
border radius : 值
值就是半径。
border radius可以填四个值 分别对应四个角 按照顺时针方向取角
display
block 块元素
inline 行内元素
inline-block 是块元素，但是可以内联，在一行
none 消失
用display配合上面的命令，就可以将块变成行内元素，例如将列表变成行内元素实现导航栏
float
浮动，浮动会引起父级边框塌陷
父级边框塌陷解决
推荐的解决方式：在父类添加一个伪类：after
#father:after{
content:'';
display:block;
clear:both;
}
定位
相对定位
相对与以前的位置进行移动
position: relative;
练习：实现下图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="father">
<div id="div1"><a href="#">链接1</a></div>
<div id="div2"><a href="#">链接2</a></div>
<div id="div3"><a href="#">链接3</a></div>
<div id="div4"><a href="#">链接4</a></div>
<div id="div5"><a href="#">链接5</a></div>
</div>
</body>
</html>
#father{
width: 300px;
height: 300px;
background-color: orange;
padding: 10px;
border: black solid;
}
#father div{
width: 100px;
height: 100px;
background-color: aqua;
text-align: center;
position: relative;
}
#father div:hover{
background-color: orange;
}
a{
line-height: 100px;
text-decoration: none;
}
#div2,#div4{
left: 200px;
bottom: 100px;
}
#div5{
left: 100px;
bottom: 300px;
}
绝对定位
absolute
- 没有父级元素定位的前提下，相对于浏览器定位
- 假设父级元素存在定位，则相对于父级元素定位
- 在父级元素范围内移动
相对父级或浏览器的位置，进行指定偏移，绝对定位的话，它不在标准文档流中，原来的位置不会被保留
固定定位
fixed
用于网页中怎么滑动都不动的块，比如返回首页，导航栏
<!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;
position: absolute;
right: 0;
bottom: 0;
background: red;
line-height: 100px;
text-align: center;
}
div:nth-of-type(2){
width: 50px;
height: 50px;
position: fixed;
right: 0;
bottom: 0;
background: orange;
line-height: 50px;
text-align: center;
}
</style>
</head>
<body>
<div>div1</div>
<div>div2</div>
</body>
</html>
z-index
一个图层概念，图层越高越显示
