浅谈JavaWeb之CSS

最新推荐文章于 2023-01-02 10:04:33 发布

浅汐yt

最新推荐文章于 2023-01-02 10:04:33 发布

阅读量201

点赞数

分类专栏： Java CSS 文章标签： java

本文链接：https://blog.csdn.net/qq_45437546/article/details/104160698

版权

Java 同时被 2 个专栏收录

71 篇文章 3 订阅

订阅专栏

CSS

1 篇文章 0 订阅

订阅专栏

HTML CSS

1. frameset[已淘汰]

<!--
noresize 不可拖拽
-->
<frameset rows="100px, *" border="1px" bordercolor="black" noresize>
    <frame src="01-top.html">
    <frameset cols="200px, *">
        <frame src="01-left.html">
        <frame src="01-right.html" name="show">
    </frameset>>
</frameset>

2. CSS

2.1 什么是CSS

HTML 是网页的骨架
CSS 装饰

CSS层叠样式表
	洗脸，水乳，隔离，粉底，眉毛，眼线，眼影，高光，睫毛，口红.... 
	已经1个小时~~

2.2 CSS的三种引入方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>02-CSS引入方式</title>
    <style>
        /*
        CSS样式
        内联样式表:
            在Head标签内，使用选择器，在选择器大括号以内，都是CSS样式
        */
        .div1 {
            width: 200px;
            height: 200px;
            background-color: hotpink;
        }
    </style>
    <!--
    外联样式表：【实际开发使用最多】
        在head标签内，连接外部的CSS样式，href是CSS文件所在路径
        可以是本地，本地服务器路径，也可以使用网络路径
    -->
    <link rel="stylesheet" href="css/02.css">
</head>
<body>
<!--
行内样式表:
    在HTML标签内使用style属性，在style属性中都是CSS样式
-->
<div style="width: 200px; height: 200px; background-color: lawngreen"></div>
<div class="div1"></div>
<div id="id1"></div>
</body>
</html>
<!--
开发中使用最多的是CSS外联样式表
	1. 样式可以复用！！！
	2. 可以提高用户加载页面的效率，CSS样式文件可以缓存在本地
	3. 可以有效降低服务器带宽压力，提高带宽利用率

300M 37mb/s
20M 3mb/s

200M 上下
-->

2.3 CSS选择器【重点】

1. 标签选择器
	选择修饰对应标签名CSS样式
2. 类选择器
	约束同class属性的HTML标签
	要求.className  
	例如
		<p class="p1"></p>
		.p1 {}
3. id选择器 
	约束指定id属性的HTML标签，并且ID属性不可以重复，具有唯一性
	要求 #idName
	例如
		<div id="id1"></div>
		#id1 {}
	决定当前HTML标签CSS样式的权重
		id选择器 > class选择器 > 标签选择器
4. 层级选择器
	按照HTML标签的层关系约束
5. 并集选择器
	不同的选择器，通过逗号分隔，同时修饰
6. 通配选择器
	*
7. 伪类选择器

3. CSS属性

3.1 背景

background-image: url("img/羊肉串.png");
background-repeat: no-repeat;
/*
no-repeat 显示一张，不重复
repeat-x 横轴方向平铺
repeat-y 纵轴方向平铺
*/
background-position: 50px 100px;

background-attachment: scroll;
/*
fixed: 固定在页面之上
scroll: 随着滚动轴拖拽会消失
*/

3.2 边框

width: 200px;
height: 200px;
background-color: red;
/*border-width: 5px;*/
/*border-style: double;*/
/*border-color: blue;*/
border: 5px dotted blue;
/*
border: 边框的宽度，边框样式，边框颜色
边框样式:
    solid 实线
    double 双实线
    dashed 虚线
    dotted 点状线
border-top
border-right
border-bottom
border-left
 */
/* 倒角 */
border-radius: 50px;

3.3 文本设置

width: 200px;
height: 200px;
background-color: red;
/* 文本颜色 */
color: yellowgreen;
/* 文本大小 */
font-size: 32px;
/* 字体样式选择 */
font-family: 仿宋;
/* 设置字体加粗 */
font-weight: bold;
/* 设置字体斜体 */
font-style: italic;
/*
设置文本划线
    underline：下划线
    overline： 上划线
    line-through：删除线
    none：没有任何线
    后面加颜色
 */
text-decoration: line-through navy;
/* 文本对齐方式 center居中 right右对齐，默认left左对齐 */
text-align: left;
/* 缩进 */
text-indent: 2em;
/* 行高 */
line-height: 200px;

4. 盒子模型

4.1 盒子模型图例

4.2 内边距

元素对外的分界线是边框，内边距可以认为属于元素内部
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>08-盒子模型之padding</title>
    <style>
        #id1 {
            width: 200px;
            height: 200px;
            background-color: tomato;

            padding: 50px 100px 150px 200px;
            /*
            一个数据：上下左右全部一致
            两个数据: 第一个数据控制上下，第二个数据控制左右
            三个数据: 第一个数据控制上，第二个数据控制左右，第三个数据控制下
            四个数据: 顺时针方向，上右下左
            */
        }
    </style>
</head>
<body>
<div id="id1"></div>
</body>
</html>

4.3 外边距

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>09-盒子模型之margin</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        div {
            width: 200px;
            height: 200px;
            background-color: tomato;

            margin: 100px 50px 150px 200px;
            /*
            一个数据：上下左右全部一致
            两个数据: 第一个数据控制上下，第二个数据控制左右
            三个数据: 第一个数据控制上，第二个数据控制左右，第三个数据控制下
            四个数据: 顺时针方向，上右下左
            */
        }
    </style>
</head>
<body>
<div></div>
</body>
</html>

浅汐yt

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
浅谈JavaWeb之CSS

HTML CSS1. frameset[已淘汰]<frameset rows="100px, *" border="1px" bordercolor="black" noresize> <frame src="01-top.html"> <frameset cols="200px, *"&g...
复制链接

扫一扫