【Java学习笔记】————CSS篇
CSS是啥,以及有什么优点我就不介绍了。
CSS入门了解
- 内置样式
直接在html代码页面添加
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- (此行代码为html代码中的注释)style 标签里是js语法 -->
<style>
/* 这里面是js语法,所以注释要这么写*/
h1 {
color: red;
}
选择器 {
声明1;
声明2;
声明3;
}
</style>
</head>
<body>
<h1>这是一个一级大标题</h1>
</body>
</html>
- 外置样式
<!-- 代替上面的style标签采用引用自己已经写好的css文件 -->
<link rel="stylesheet" href="../css/style.css">
CSS的三种导入方式
- 行内样式
<span style="color: blue">This is a span</span>
- 内部样式(内置样式)
- 外部样式(外置样式)
拓展:css2.1特有
- 链接式
- 导入式:@import url(“Path”);
- 优先级:行内>内部>外部(就近原则)
选择器
作用:选择页面上的某一个或某一类元素
- 基本选择器
- 类选择器 (.class名)可以分组复用
- id选择器 (#id名)全局唯一
优先级:id选择器>类选择器>基本选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* 基本选择器 */
span {
color: red;
}
/* id选择器 */
#span2 {
color: blue;
}
/* class选择器 */
.span3 {
color: green;
}
</style>
</head>
<body>
<span>This is a span</span>
<span id="span2">This is a span</span>
<span class="span3">This is a span</span>
</body>
</html>
层次选择器
- 后代选择器 空格
- 子选择器 >
- 相邻兄弟选择器 +
- 通用兄弟选择器 ~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* 后代选择器:选取body下所有的p标签 */
body p{
color: red;
}
/* 子选择器:选取body下直接子元素p标签 p1 p2 p3 */
body>p{
color: green;
}
/* 相邻兄弟选择器:选择指定标签的下一个相邻的同级标签 p3 */
.active+p{
color: blue;
}
/* 通用选择器:选择指定标签的下面所有同级标签 p3 p7 */
.active~p{
color: blue;
}
</style>
</head>
<body>
<p>p1</p>
<p class="active">p2</p>
<p>p3</p>
<ul>
<li>
<p>p4</p>
</li>
<li>
<p>p5</p>
</li>
<li>
<p>p6</p>
</li>
</ul>
<p>p7</p>
</body>
</html>
结构型伪类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--使用伪类选择器(元素:条件) 避免使用id和class选择器 -->
<style>
/* ul的第一个子元素 */
ul li:first-child{
background-color: red;
}
/* ul的最后一个子元素 */
ul li:last-child{
background-color: green;
}
/* 选中p1:线定位到父元素,再选择父元素中的p1 ,按 !顺序! 选择,可能会被其他元素挡住 */
p:nth-child(1){
background-color: yellow;
}
/* 选中父元素下的第二个p元素 p2, 按照元素 !类型!来选择 */
p:nth-of-type(2){
background-color: blue;
}
/* 拓展:hover:鼠标移动到超链接上会有效果 */
a:hover{
background-color: pink;
}
</style>
</head>
<body>
<a href="">Hello</a>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li>aaa</li>
<li>aaa</li>
<li>aaa</li>
</ul>
<p>p7</p>
</body>
</html>
属性选择器
标签[属性/属性=“属性值”/*=]
id和class选择器结合
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 属性选择器: 元素[属性]
元素[属性=属性值] (= 绝对等于)
元素[属性*=属性值] (*= 存在)
元素[属性^=属性值] (^= 以属性值为开头)
元素[属性$=属性值] ($= 以属性值为结尾)
-->
<style>
/* 选中所有带有id属性的 a标签 */
a[id]{
background: red;
}
/* 选中class属性值为 links 的a标签 */
a[class="links"]{
background: green;
}
/* 选中class属性值带有 item 的a标签 */
a[class*="item"]{
background: blue;
}
/* 选中href属性值以 http开头 的a标签 */
a[href^="http"]{
background: yellow;
}
/* 选中href属性值以 html结尾 的a标签 */
a[href$="html"]{
background: pink;
}
</style>
</head>
<body>
<a href="http://www.baidu.com" class="links item first">1</a>
<a href="https://www.qq.com" class="links item second">1</a>
<a href="" class="links" id="third">1</a>
<a href="" class="links">1</a>
<a href="" class="links">1</a>
<a href="index2.html" class="links">1</a>
</body>
</html>
美化网页
字体样式
- font-family (修改字体)
- font-size (字体大小)
- font-weight (粗体)
- font:oblique bold 16px “楷体”;
上面这一种是全部写在一起了
文本样式
- 颜色
- color:red;
- color:rgba(0,0,0,0.5)
rgb参数 和 透明度参数
- 文本对齐方式
- text-align:center; (居中对齐)
- 首行缩进
- text-indent:2em; (首行缩进2个字)
- 行高
- line-height:10px; (行内高度,当内容的行高与块的高度一致时,可以达到上下居中)
- 装饰
- text-decoration:underline / overline / line-through;
下划线/上划线/中划线
- 文本图片水平对齐
- 水平对齐需要参照物,将需要水平对齐的两个元素放一块
- vertical-align:middle;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
img, span {
vertical-align: middle;
}
</style>
</head>
<body>
<p>
<img src="../img/deskimg.jpg" >
<span>aaaaaaaaaaaaaaaaaaaaaaaaa</span>
</p>
</body>
</html>
文本阴影
- text-shadow:1px 1px 1px #ffffff;
背景图像应用及渐变
- 背景颜色
background-color:red; - 背景图片
- background-image:url(“path”);
- background-repeat:repeat-x;(水平平铺)
- background-repeat:repeat-y;(垂直平铺)
- background-repeat:no-repeat;(不平铺)
- background: red url(“path”) no-repeat; (写一块)
- 渐变
- background:linear-gradient(115deg, #FFFFF 0%, #6248FF 50%, #FF0000 100%);
盒子模型
- margin:外边距
- padding:内边距
- border:边框
边框
- 边框的粗细
- 边框的样式
- 边框的颜色
写一块就可以了:
- border: 1px solid black;
外边距
margin: 0 0 0 0;
四个参数全写:上 右 下 左
不足四个参数:上 左 下 右
内边距
盒子大小:margin + border + padding + 内容宽度
圆角边框
border-radius:0 0 0 0;
左上 右上 右下 左下(顺时针)
盒子阴影
box-shadow:0 0 0 #000000;
display和浮动
- display
- block:块元素
- inline:行内元素
- inline-block:行内块元素,是块元素,可以内联在一行
- 浮动
可以把块元素变成像行内元素一样在一行
父级边框塌陷问题
解决方案:
- 增加父级元素的高度
- 在父级元素后增加一个空的div,清除浮动
- 在父级元素中增加一个overflow
- 父类中添加一个伪类:after。跟第二种方法的优化
小结:
1. 浮动元素后面加空div
简单,代码中尽量避免空div
2. 设置父元素的高度
简单,元素假设有了固定的高度,就会被限制
3. overflow
简单,运用在不介意被裁剪掉或者下拉的地方
4. 父类添加一个伪类:after(推荐)
写法稍微复杂一点,但是没有副作用,属于是在原有的代码基础上添加新东西,不破坏原始代码,推荐使用!
对比
- display
方向不可以控制 - float
浮动起来的话会脱离标准文档流,所以要解决父级边框塌陷问题
定位
相对定位
- position:relative;
相对于原来的位置,进行指定的偏移,相对定位的话,还是在标准文档流中,原来的位置还会被保留
绝对定位
- position:absolute;
基于其他元素定位,上下左右调整
- 没有父级元素定位的前提下,相对于浏览器定位
- 父级元素存在定位,通常会相对于父级元素进行偏移
- 在父级元素范围内移动
相对于腹肌或浏览器的位置,进行指定的偏移,绝对定位的话,它不存在在标准文档流中,原来的位置不会被保留
固定定位
- position:fixed;
z-index及透明度
- z-index:0;
参数代表了当前元素的层级(可以理解为第几图层) - opacity:0.5;
参数范围0~1 - filter:alpha(opacity=50);
和上面的一样,但这个已经是历史了,现在的浏览器不兼容
推荐几个素材网站
- layui
- ice.work阿里巴巴组件库
- 模板之家
以上都是我跟着狂神学Java 前端基础 时的一些代码和感悟,纯属当作笔记来分享,如果大家发现了我笔记中的错误,可以多多指正,我会认真修改,虚心求教的!