Java学习 day36_CSS

最新推荐文章于 2024-01-25 18:17:19 发布

p-坚持

最新推荐文章于 2024-01-25 18:17:19 发布

阅读量156

点赞数

分类专栏： Java学习文章标签： java 后端前端

本文链接：https://blog.csdn.net/weixin_43385930/article/details/119009971

版权

Java学习专栏收录该内容

66 篇文章 23 订阅

订阅专栏

1 CSS

网页 --> 人
Html --> 骨架
Css --> 皮肤和血肉

CSS 指层叠样式表（级联样式表）主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等等外观显示样式。 CSS以HTML为基础，提供了丰富样式功能。

1.1 怎么在HTML中引入CSS

CSS以HTML为基础: 说明CSS依赖于HTML而存在, CSS是用来描述HTML标签的

1.1.1 第一种

把CSS样式写在HTML标签上, 用Style属性指向, 多个CSS样式用分号分割

<!--把CSS样式写在HTML标签上, 用Style属性指向, 多个CSS样式用分号分割-->
    <div style="font-size: 100px;
                font-family: 'Arial Narrow';
                color: white;
                background: red;
                width: 200px;
                height: 200px;
                text-align: center;
                line-height: 200px;
                border-radius: 100px;
                margin: 0 auto;">
        div
    </div>

1.1.2 第二种

把CSS样式写在HTML的标签内部, 用Style标签包裹, 把CSS样式通过某种途径和HTML关联起来

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div1{
            height: 500px;
            width: 500px;
            background: #16eeff;
            margin: 0 auto;
        }
        .div1:hover{
            background: cornflowerblue;
            border: 10px solid cornflowerblue;
        }
    </style>
</head>
<body>
    <div class="div1">
        div
    </div>

</body>

1.1.3 第三种: 导入外部文件

<link rel="stylesheet" type="text/css" href="http://localhost:63342/code/com/cskaoyan/www/fe/css/01_css.css" />
<!--    <link rel="stylesheet" type="text/css" href="./01_css.css" />-->
<!--    <style type="text/css">-->
<!--        @import url(./01_css.css);-->
<!--    </style>-->

1.2 选择器:

CSS中的选择器: 就是用来描述把HTML标签和对应CSS样式关联的方式
标签选择器类选择器 Id选择器: 复合选择器伪类选择器伪元素选择器属性选择器

1.2.1 标签选择器

标签选择器: 通过标签名把html样式和css代码关联起来

<style>
        p{
            width: 100px;
            height: 100px;
            background: #17c044;

            margin: 0;
        }
    </style>

1.2.2 类选择器

类选择器: 通过类名(class属性 )把html样式和css代码关联起来

1.2.3 Id选择器

ID选择器: 通过ID名( id属性 )把html样式和css代码关联起来

在一个HTML页面中, 标签的id是唯一的

Id一般给js dom中

<style>
       #div2{
           width: 100px;
           height: 100px;
           border: 1px solid silver;
           color: red;
       }
    </style>
</head>
<body>
    <div id="div2">
        div2
    </div>
</body>

1.2.4 其它

复合选择器伪类选择器伪元素选择器属性选择器

1.2.5 选择器的优先级

行内 > ID选择器 > 伪类|类 | 属性选择 > 标签 > 通配符
!important : 强制把某个样式的优先级提到最高 CSS定义了一个!important命令，该命令被赋予最大的优先级。也就是说不管权重如何以及样式位置的远近，!important都具有最大优先级。 div{ background: red !important; }

如果样式, 优先级是相同级别的, 那么遵照就近原则

1.3 盒子模型

标准流/标准文档流/文档流: 页面显示是根据代码标签顺序, 在页面上从上到下从左到右顺序排列, 就是标准流

任何一个html标签, 在页面上所占据的空间都可以看成一个矩形的盒子(不管盒子是大还是小), 就是盒子模型

那么这个矩形的盒子: 是由四部分组成, 元素内容区域(存储字内容), 内边距区域, 边框区域, 外边距区域

我们所设置的宽高, 实际上控制的是一个盒子模型元素内容区域的宽高，不包含margin border 和padding

子元素占据的是父元素的元素内容区域

背景色 = 内边距区域(padding) + 元素内容区域
在块级元素上没有问题
在行级元素有问题

             /* 上  右   下  左*/
            /*padding: 110px 20px  30px  40px;*/

            /*      上下     左右*/
            /*padding: 10px  20px;*/

            /*       上     左右   下*/
            /*padding: 10px  20px  30px;*/


            /* 外边距写法和内边距一样 */
            /* margin: 10px  20px  30px  40px;*/

1.3.1 外边距合并

在一个html页面上, 当两个标签在垂直方向上紧相邻, 那么就会产生合并(谁大听谁的), 这种现象叫外边距合并

1.4 标签的分类

行的定义: 取决于父元素, 一行的宽表示从父元素的left 到 right

1.4.1 块级元素

1, 块级元素独占一行
2, 可以设置宽/高/内边距/外边距
3, 宽度可以继承, 高度不可继承
块级元素是指本身属性为display:block;的元素。通常使用块级元素来进行大布局（大结构）的搭建

Div p ul li ol table tr h1…h6 form …

1.4.2 行级元素

1, 行级元素在行内显示, 连续的行级元素排列在同一行
2, 不能设置宽高, 仅能设置内外边距的左右值
3, 行级元素的宽高是由本身内容的大小决定
行级元素只能容纳文本或者其他行级元素（不要在行级元素中嵌套块级元素）行级元素是指本身属性为display:inline;的元素。通常使用行级元素来进行文字、小图标（小结构）的搭建。

I b span a img input textarea select …

1.4.3 行内块

本质属于行级元素, 可以与其他行级元素共处一行但是: 可以设置宽高、内外边距

属性为display:inline-block;的元素。常见的行内块元素：
input 输入框
img 引入图片
可以在行内样式或css样式中改变元素的display将三种元素进行转换。
display: block；(将元素变为块级元素)
display: inline； (将元素变为行级元素)
display: inline-block；（将元素变为行级块元素）

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            height: 100px;
            width: 100px;
            background: #eda481;
            display: inline-block;
        }
    </style>
</head>
<body>
    <div>div</div>
    <div>div</div>

</body>

在这里插入图片描述

1.5 浮动

标准流/标准文档流/文档流: 页面显示是根据代码标签顺序, 在页面上从上到下从左到右根据元素特性顺序排列, 就是标准流

浮动最开始是用来做 --> “文字环绕”
现在浮动一般用来布局

浮动: 浮动就是使文档中的标签脱离标准流, 形象的讲, 就是让一个标签显示”漂浮起来”

1：浮动只影响后面的元素: 因为浮动脱离了标准文档流, 导致页面原本占据的位置空出来了, 后面的元素, 要符合标准文档流从上到下, 从左到右排列的特点, 那么就要占据前面空出来的位置
2：连续浮动一行显示
3：浮动以元素顶部为基准对齐
4：浮动可是实现模式转换

1.5.1 清除浮动

Clear: 谁受影响谁清除
left:在左侧不允许浮动元素。
right:在右侧不允许浮动元素。
both:在左右侧不允许浮动元素。

1.6 补充

1, 溢出的问题 overflow

     /*Visible:默认值。内容不会被修剪，会呈现在元素框之外。*/
     /*Hidden:内容会被修剪，并且其余内容是不可见的。*/
     /*Scroll:内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。*/
     /*Auto:如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。*/


      /*   溢出隐藏 */
      /*    overflow: hidden;*/

      /*    隐藏, 不占据空间*/
           display: none;

      /*    隐藏, 占据空间*/
       /*visibility: hidden;*/

2 行高

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            height: 100px;
            width: 100px;
            background: #eda481;
            display: inline-block;
        }
    </style>
</head>
<body>
    <div>div</div>
    <div>div</div>
</body>
</html>

Css 有个认知,
定位, 弹性布局, 动画…
练习

作业

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            min-width: 1000px;
        }
        .div-left{

            /*display: inline-block;*/
            /*vertical-align: top;*/
            float: left;

            border: 1px solid silver;
            margin: 30px 0 0 30px;

            width: 80px;
            height: 300px;
            padding: 30px;
        }
        .div-left div{
            /*width: 140px;*/
            /*margin: 10px  30px 0 30px;*/
            height: 30px;
            line-height: 30px;
            border-bottom: 1px solid silver;
        }
        a{
            text-decoration: none;
        }
        .div-right{

            /*display: inline-block;*/
            /*vertical-align: top;*/
            float: left;

            width: 500px;
            height: 500px;
            border: 1px solid silver;
            margin: 30px 0 0 30px;

        }
        iframe{
            width: 100%;
            height: 100%;
            border: none;
        }
    </style>
</head>
<body>


    <div class="div-left">
        <div>
            <a href="#"  target="iframe-right">首页</a>
        </div>
        <div>
            <a href="https://www.baidu.com" target="iframe-right">百度</a>
        </div>
        <div>
            <a href="https://www.taobao.com" target="iframe-right">淘宝</a>
        </div>
        <div>
            <a href="https://www.bilibili.com" target="iframe-right">哔哩哔哩</a>
        </div>
    </div>
    <div class="div-right">
        <iframe name="iframe-right">

        </iframe>
    </div>

</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div-top{
            width: 700px;

            background: #17ff66;

            margin: 0 auto;
        }
        .div-bottom{
            width: 700px;
            height: 48px;
            background: #fffe13;

            margin: 0 auto;
        }
        .top-son{
            float: left;
            width: 100px;
            text-align: center;
            background: black;
            color: white;

            border-top: 2px solid white ;
            border-bottom: 2px solid #fffe13;
        }
        .top-son:hover{
            background: red;
            border-top: 2px solid red ;
            border-bottom: 2px solid red;
        }
    </style>
</head>
<body>

<!--调试-->
<!--如果, 页面已经显示, 不能直接改变页面上显示内容的大小:  抖动-->

    <div class="div-top">
        <div class="top-son">
            首页
        </div>
        <div class="top-son">
            国内新闻
        </div>
        <div class="top-son">
            国内新闻
        </div>
        <div class="top-son">
            国内新闻
        </div>
        <div class="top-son">
            国内新闻
        </div>
        <div class="top-son">
            国内新闻
        </div>
        <div class="top-son">
            国内新闻
        </div>
    </div>
    <div class="div-bottom">

    </div>

</body>
</html>

p-坚持

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Java学习 day36_CSS

1 CSS网页 --> 人Html --> 骨架Css --> 皮肤和血肉CSS 指层叠样式表（级联样式表）主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等等外观显示样式。 CSS以HTML为基础，提供了丰富样式功能。1.1 怎么在HTML中引入CSSCSS以HTML为基础: 说明CSS依赖于HTML而存在, CSS是用来描述HTML标签的1.1.1 第一种把CSS样式写在H
复制链接

扫一扫