java-css3

最新推荐文章于 2024-09-11 00:07:50 发布

薛博

最新推荐文章于 2024-09-11 00:07:50 发布

阅读量151

点赞数

文章标签： css

本文链接：https://blog.csdn.net/weixin_43419884/article/details/112426997

版权

CSS

层叠级联样式表
CSS：表现（美化网页）
字体，颜色，宽度，高度，背景图片，网页定位，网页浮动

1. 快速入门

< style>可以编写css代码,每一个声明最好用分号结尾
语法:
选择器{
声明1;
声明2;
声明3;
}
用link进行连接

css优势：1.内容和表现分离
2.网页结构表现统一，可以实现复用
3.样式丰富
4.建议使用独立于html的css文件
5.利用seo，容易被搜索殷勤引擎收录

2.CSS的n种导入方式

内部样式表
外部样式表
行内样式
优先级：就近原则

拓展：外部样式两种写法

链接式

  <link rel="stylesheet" href="css/style.css ">

导入式（不建议）

<style>
        @import url("css/style.css");
    </style>

3.选择器

作用：选择页面上某一个或一类元素

3.1基本选择器

标签选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*标签选择器会选择页面上所有的标签*/
        h1{
            color: #0040ff;
            background: red;
            border-radius: 23px;
        }
        p{
            font-size: 80px;
        }
    </style>
</head>
<body>
<h1>学java</h1>
<p>听网课</p>
</body>
</html>

类选择器class

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
/*类选择器： .class的名称{}
好处：可以多个标签归类，相当于同一个class,可以复用
*/
.xuebo{
        color: red;
}
.xue{
    color: #0040ff;
}
    </style>
</head>
<body>

<h1  class="xuebo">标题1</h1>
<h1 class="xue">标题2</h1>
<h1 class="xuebo">标题3</h1>

<p class="xuebo">p标签</p>
</body>
</html>

id选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
/*  id选择器：id必须保证全局唯一
#id名称{}


*/
    #xuebo{
        color: red;
    }

.sytle1{
    color: bisque;
}
    h1{
        color: blue;
    }
    </style>
</head>
<body>
<h1 id="xuebo">标题一</h1>
<h1 class="sytle1">标题二</h1>
<h1 class="sytle1">标题三</h1>
<h1>标题四</h1>
<h1>标题五</h1>
</body>
</html>

优先级：
id选择器>类选择器>标签选择器
标签选择器：选择一类标签：标签{}
类选择器：选中所有class属性一致的标签：。类名
id选择器：全局唯一

3.2层次选择器

1.后代选择器：在某个元素的后面：

/*
         1.后代选择器
*/

body p{
    background: red;
}

2.子选择器：只有一代

/*子选择器*/

body>p{
    background: red;
}

3.相邻选择器：同辈

相邻兄弟选择器:只有一个，相邻（向下）

/*相邻兄弟选择器:只有一个，相邻（向下）*/
.active +p{
     background: red;
}

4.通用选择器

选中元素的向下所有兄弟元素

/*通用选择器：选中元素的向下所有兄弟元素
*/
.active~p{
    background: red;
}

3.3结构伪类选择器

        /*ul的第一个子元素*/

        ul li:first-child{
            background: red;
        }
        /*ul的最后一个子元素*/
        ul li:last-child{
            background: green;
        }

        /*选中p1
        选择当前p元素的父级元素，选中父级元素的第一个，并且是当前元素才生效
        按顺序选
        */

        p:nth-child(1){
            background: blue;
        }
        /*选中父元素下的p元素的第二个，按类型选*/
        p:nth-of-type(2){
            background: purple;
        }

伪类：条件

3.4属性选择器

属性名，属性名=属性值
=绝对等于
*=包含这个元素
^=以这个开头
$=以这个结尾

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>


    <style>
        .demo a{
             float: left;
            display: block;
            height: 50px;
            width: 50px;
            border-radius: 10px;
            background: #0040ff;
            text-align: center;
            color: gray;
            text-decoration: none;
            margin-right: 5px;
            font:bold 20px/50px Arasda;
/*存在id属性的元素 a[]{}

属性名，  属性名=属性值
=绝对等于
*=包含这个元素
^=以这个开头
$=以这个结尾
*/

        }

        /*a[id]{*/
        /*    background: yellow;*/
        /*}*/
a[id=first ]{
    background: yellow;
}

a[class*="links"]{
    background: red;

}
a[href^=http]{

}


    </style>
</head>
<body>
<p class="demo">
    <a href="https://www.baidu.com"  class="links item first " id="first ">1</a>
    <a href="" class="links item active " target="_blank" title="test">2</a>
    <a href="images/123.html" class="links item  ">3</a>
    <a href="images/123.png" class="links item">4</a>
    <a href="images/123.jpg" class="links item">5</a>
    <a href="abc" class="links item">6</a>
    <a href="/a.pdf" class="links item">7</a>
    <a href="/abc.pdf" class="links item">8</a>
    <a href="abc.doc" class="links item">9</a>
    <a href="abcd.doc" class="links item last">10</a>
</p>
</body>
</html>

4.美化网页

span标签

4.1字体样式

font：family 字体
font：size字体大小
font：weight字体粗细
color：字体颜色

4.2文本样式

颜色：单词，rgb，rgba
排版：text-align （center，right，left）
首行缩进：text-indent：2em
行高：line-hight
行高和块的高度一致，可以上下居中
下划线：text-decoration：underline
中划线：line-through
上划线：overline
去划线：none
水平对齐：vertical-align：middle（需要参照物）

4.3超链接伪类

a：hover{}(鼠标悬浮时的状态)
text-shadow：（）（阴影）

4.4列表

list-style：列表前面的样式

#nav{
    width: 300px;
    background: gray;
}
.title{
    font-size: 18px;
    font-weight: bold;
    text-indent: 1em;
    line-height: 40px;
    background:red;
}
/*ul li*/
/*
list-style:
none:去掉圆点
circle：空心圆
decimal：数字
square：正方形

*/
ul li{
    height: 30px;
    list-style: none;
    text-indent: 1em;
    background: gray;
}
a{
    text-decoration: none;
    font-size: 14px;
    color: black;

}
a:hover{
    color: orange;
}

4.5背景

背景颜色
背景图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        div{
            width: 1000px;
            height: 700px;
            border: 1px solid red;
            background-image: url("images/2.PNG");
        /*    默认是全部平铺*/
        }
        .div1{
            background-repeat: repeat-x;
        }
        .div2{
            background-repeat: repeat-y;
        }
        .div3{
            background-repeat: no-repeat;
        }
    </style>
</head>
<body>

<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</body>
</html>

background：颜色，图片，图片位置（10px 10px），平铺方式

4.6渐变

径向渐变
圆形渐变

 background-image: linear-gradient(62deg, #8EC5FC 0%, #E0C3FC 100%);

5.盒子模型

5.1什么是盒子

margin：外边距
padding：内边距
border：边框

5.2什么是边框

边框的粗细
边框的样式
边框的颜色

border:粗细，样式，颜色

 border: 1px solid red;

body有默认的外边距
margin：0px

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        body{
            margin: 0px;
        }
        #app{
            width: 300px;
            border: 1px solid red;
        }
h2{
    font-size: 16px;
    background-color: #8EC5FC;
    line-height: 60px;
    color: white;
}
        form{
            background: dimgray;
        }
       form div:nth-of-type(1) input{
            border: 3px solid black;
        }
        form div:nth-of-type(2) input{
            border: 3px solid palegreen;
        }
        form div:nth-of-type(3) input{
            border: 3px solid palegreen;
        }
    </style>
</head>
<body>

<div id="app">

    <h2>会员登录</h2>
    <form action="#">
        <div>
             <span>用户名：</span>
            <input type="text">
        </div>
        <div>
            <span>年龄：</span>
            <input type="text">
        </div>
        <div>
            <span>邮箱：</span>
            <input type="text">
        </div>
    </form>

</div>
</body>
</html>

5.3内外边距

外边距的妙用：居中元素
margin：0 auto
盒子的计算方式:元素到底多大
margin+border+padding+内容

5.4圆角边框

     border-radius: 0px 50px 50px 0px;

5.5盒子阴影

box-shadow（x，y，）

6.浮动

6.1标准文档流

标准文档流：自上而下

块级元素（独占一行）：h1-h6 ；p ；div ；列表。。。
行内元素（不独占一行）：span a img。。。。
行内元素可以被包在块级元素中，反之不可

6.2display

block 块元素
inline 行内元素
inline-block 保持快元素的特性但可以写在一行
none：消失

6.3 float

左右浮动 float

6.4父级边框塌陷

clear：right清除右侧浮动
clear：left左侧不允许有浮动
clear：both两侧都不允许有浮动元素
clear：none

解决方案：1.增加父级元素高度
2.增加一个空div标签，清除浮动
3.overflow（overf：hidden：隐藏超出部分）（overflow：scroll 添加滚动条）
4.在父类添加一个伪类：after

#father：after{
content='';
display:block;
clear:both;
}

1.浮动元素后面加空div。特点：简单，但代码中尽量避免空div
2.设置父级元素的高度。特点：简单，元素假设有了固定高度就会被限制
3.overf。特点：简单，但超出去的会被切掉
4.在父类添加伪类。（推荐）特点：写法复杂，没有副作用

6.5对比

display和float
display不可控制方向，float可以控制方向
float浮动起来会脱离标准文档流，需要解决父级边框塌陷问题

7.定位

7.1相对定位

相对于自己原来的位置进行偏移，相对定位仍然在标准文档流中，原来的位置被保留

   position: relative;
            top: -20px;
            left:  20px;

7.2绝对定位

基于xxx定位，在父级元素或浏览器范围内移动，绝对定位后，不在标准文档流中，原来的位置不被保留

  position: absolute;

1.没有父级元素定位的前提下，相对于浏览器定位
2.假设父级元素存在定位，相对于父级元素定位

7.3固定定位

  position: fixed;

7.4z-index

图层
z-index：默认是0，最高是无限

.tipText{
    color: red;
    z-index: 999;
}

背景透明度: opacity: 0.5;

薛博

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
java-css3

CSSCSS层叠级联样式表CSS：表现（美化网页）字体，颜色，宽度，高度，背景图片，网页定位，网页浮动1. 快速入门< style>可以编写css代码,每一个声明最好用分号结尾语法:选择器{声明1;声明2;声明3;}用link进行连接css优势：1.内容和表现分离2.网页结构表现统一，可以实现复用3.样式丰富4.建议使用独立于html的css文件5.利用seo，容易被搜索殷勤引擎收录2.CSS的n种导入方式内部样式表外部样式表行内样式优先级
复制链接

扫一扫