CSS学习

最新推荐文章于 2024-07-25 10:59:09 发布

进击的小鸡仔

最新推荐文章于 2024-07-25 10:59:09 发布

阅读量68

点赞数

分类专栏：分享文章标签： css

本文链接：https://blog.csdn.net/m0_57102339/article/details/119008431

版权

分享专栏收录该内容

16 篇文章 0 订阅

订阅专栏

什么是CSS

· Cascading Style Sheet层叠级联样式表
· CSS：表现（美化网页）
· 字体、颜色、边距、高度、宽度、背景图片、网页定位、网页浮动
· CSS3新特性：
1.颜色：新增 RGBA，HSLA 模式
2. 文字阴影（text-shadow、）
3.边框：圆角（border-radius）边框阴影： box-shadow
4. 盒子模型：box-sizing
5.背景：background-size 设置背景图片的尺寸 background-origin 设置背景图片的原点
background-clip 设置背景图片的裁切区域，以”，”分隔可以设置多背景，用于自适应布局
6.渐变：linear-gradient、radial-gradient
7. 过渡：transition，可实现动画
8. 自定义动画 animate @keyfrom
9. 在 CSS3 中唯一引入的伪元素是：：selection. 10. 媒体查询，多栏布局 @media screen and (width:800px){ … }
11. border-image
12.2D 转换：transform：translate(x，y) rotate(x，y) skew(x，y) scale(x，y)
13. 3D 转换
14 字体图标 font-face
15 弹性布局 flex

· 代码规范：CSS代码尽量和html代码分开，在HTML文件中使用link标签引用CSS代码。

· 注释规范：/* 注释 */

CSS的三种导入方式：

<!--内部样式：-->
    <style>
        h1{
            color: blue;
        }
    </style>
    <!--外部样式-->
    <link rel="stylesheet" href="CSS01.css">
    <!--行内样式-->
<h1 style="color: antiquewhite">Hello,World!</h1>

外部样式的两种写法：
· 链接式：<link rel="stylesheet" href="CSS01.css">
· 导入式：<style> @import "CSS01.css"; </style>
· 导入式弊端：渲染有先后，不符合现代网页要求

选择器

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

· 基本选择器：
1、标签选择器：会选择到这个页面上所有的这个标签的元素
2、类选择器: 好处：可以多个标签归类，是同一个class，可以复用
3、id选择器：id必须保证全局唯一；
注意：无论是id，还是类，名字都只能是字母，不能是数字
· 三个选择器没有就近原则，只有优先级大小：id选择器>类选择器>标签选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS</title>
<!--  规范，Style可以编写css的代码,每一个声明最好使用分号结尾
语法：
选择器{
声明1；
声明2；
。。。
           }
-->
<!--内部样式：-->
    <style>
        .qing{
        color: #25ea2b;
        }
        .shou{
            color: azure;
        }
        #1{
            color: brown;
        }
    </style>

</head>
<body>
<!--行内样式-->
<h1 class="qing">Hello,World!</h1>
<h1 class="shou">Hello,World!</h1>
<h1 id="1">Hello,World!</h1>
</body>
</html>

· 层次选择器：
1、后代选择器：在某个元素的后面
2、子选择器：只有一代
3、相邻兄弟选择器: 下一个元素，且只有一个
4、通用兄弟选择器: 向下同等级元素的所有

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS</title>
<!--  规范，Style可以编写css的代码,每一个声明最好使用分号结尾
语法：
选择器{
声明1；
声明2；
。。。
           }
-->
<!--内部样式：-->
    <style>
        /*p{*/
        /*    background: blue;*/
        /*}*/
    /*    后代选择器*/
        body p{
            background: azure;
        }
    </style>

</head>
<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
    <li><p>p4</p></li>
    <li><p>p5</p></li>
    <li><p>p6</p></li>
    <li><p>p7</p></li>
</ul>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS</title>
<!--  规范，Style可以编写css的代码,每一个声明最好使用分号结尾
语法：
选择器{
声明1；
声明2；
。。。
           }
-->
<!--内部样式：-->
    <style>
        /*p{*/
        /*    background: blue;*/
        /*}*/
    /*    子选择器*/
        body > p{
            background: azure;
        }
    </style>

</head>
<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
    <li><p>p4</p></li>
    <li><p>p5</p></li>
    <li><p>p6</p></li>
    <li><p>p7</p></li>
</ul>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS</title>
<!--  规范，Style可以编写css的代码,每一个声明最好使用分号结尾
语法：
选择器{
声明1；
声明2；
。。。
           }
-->
<!--内部样式：-->
    <style>
        /*p{*/
        /*    background: blue;*/
        /*}*/
    /*    相邻兄弟选择器*/
        .keke+p{
            background: brown;
        }
    </style>

</head>
<body>
<p>p1</p>
<p class="keke">p2</p>
<p>p3</p>
<ul>
    <li><p>p4</p></li>
    <li><p>p5</p></li>
    <li><p>p6</p></li>
    <li><p>p7</p></li>
</ul>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS</title>
<!--  规范，Style可以编写css的代码,每一个声明最好使用分号结尾
语法：
选择器{
声明1；
声明2；
。。。
           }
-->
<!--内部样式：-->
    <style>
        /*p{*/
        /*    background: blue;*/
        /*}*/
    /*    通用兄弟选择器：当前选中元素的向下的所有兄弟元素*/
        .keke~p{
            background: brown;
        }
    </style>

</head>
<body>
<p>p1</p>
<p class="keke">p2</p>
<p>p3</p>
<ul>
    <li><p>p4</p></li>
    <li><p>p5</p></li>
    <li><p>p6</p></li>
    <li><p>p7</p></li>
</ul>
<p>p7</p>
<p>p8</p>

</body>
</html>

·结构伪类选择器：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS</title>
<!--  规范，Style可以编写css的代码,每一个声明最好使用分号结尾
语法：
选择器{
声明1；
声明2；
。。。
           }
-->
<!--内部样式：-->
<!--伪类选择器-->
    <style>
        /*p{*/
        /*    background: blue;*/
        /*}*/
        /*选中ul的第一个子元素*/
       ul li:first-child
       {
           background: aqua;*/
       }
    /*!*选中ul的最后一个子元素*!*/
        ul li:last-child
        {
           background: beige;
       }
    /*   选中p1:定位到父元素，选择当前的第一个元素，如果当前元素不是p元素，则不生效*!*/
       p:nth-child(1)
       {
           background: blueviolet;
        }
        /*选中父元素p下的第一个元素*/
        p:nth-of-type(2)
        {
            background: blueviolet;
        }
        a:hover{
            background: blueviolet;
        }

    </style>

</head>
<body>
<a href="">123</a>
<h1>h1</h1>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<h1>hello</h1>
<ul>
    <li><p>p4</p></li>
    <li><p>p5</p></li>
    <li><p>p6</p></li>
    <li><p>p7</p></li>
</ul>
<h1>hello</h1>
</body>
</html>

· 属性选择器：
id+class 结合

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS</title>
<!--  规范，Style可以编写css的代码,每一个声明最好使用分号结尾
语法：
选择器{
声明1；
声明2；
。。。
           }
-->
<!--内部样式：-->

    <style>
        .demo a
        {
            float: left;
            display: block;
            height: 50px;
            width: 50px;
            border-radius: 10px;
            background: aqua;
            text-align: center;
            color: brown;
            text-decoration: none;
            margin-right: 5px;
            font: bold 20px/50px Arial;
        }
    /*    属性选择器
    存在id属性的元素    a[] {}*/
        a[id]
        {
            background: yellow;
        }
        /*选中id=first的元素*/
        a[id=first]
        {
            background: rgba(30, 193, 178, 0.99);
        }
    /*    选中class中含有（使用*=）links的元素*/
        a[class*="item"]
        {
            background: yellow;
        }
    /*    选中href中以http开头(使用^=)的元素*/
        a[href^=http]
        {
            background: brown;
        }
    /*    选中以com结尾（使用$=）的元素*/
        a[href$=com]
        {
            background: #f8ff07;
        }

    </style>

</head>
<body>
<p class="demo">
    <a href="https://www.baidu.com" class="first item" id="first">1</a>
    <a href="" class="active item" target="_blank" title="test">2</a>

</p>
</body>
</html>

网页美化

span标签：重点要突出的字，使用span标签套起来

字体样式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS</title>
<!--  规范，Style可以编写css的代码,每一个声明最好使用分号结尾
语法：
选择器{
声明1；
声明2；
。。。
           }
-->
<!--内部样式：-->
<!--字体样式
font-family:字体选择
font-size:字体大小
font-weight:字体粗细
-->
    <style>

        #title1{
            font-size: 50px;
        }
        body{
            font-family: Baghdad;
        }
        h1
        {
            font-size: 50px;
            font-weight: bold;
        }
        /*oblique： 斜体
        bolder：粗体
        12px：字体大小
        */
        p{
            font:oblique bolder 12px "楷体";
        }

    </style>

</head>
<body>

    欢迎欢迎 <span id="title1">Java </span>

    <h1>故事介绍</h1>
    <p>hello，World！</p>
    <p>hello，World！</p>

</p>
</body>
</html>

文本样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS</title>
<!--  规范，Style可以编写css的代码,每一个声明最好使用分号结尾
语法：
选择器{
声明1；
声明2；
。。。
           }
-->
<!--内部样式：-->
<!--字体样式
font-family:字体选择
font-size:字体大小
font-weight:字体粗细
-->
    <style>

        #title1{
            font-size: 50px;
        }
        body{
            font-family: Baghdad;
        }
        /*text-align: 文本布局、排版
        height:相当于文本框高度
        line-height：每一行的高度*/
        h1
        {
            font-size: 50px;
            font-weight: bold;
            text-align: center;
            height: 300px;
            line-height: 300px;
        }
        /*oblique： 斜体
        bolder：粗体
        12px：字体大小
        text-indent:首行缩进
        line-through:中划线
        overline：上划线
        underline：下划线
        */
        p{
            font:oblique bolder 12px "楷体";
            text-indent: 2em;//缩进2字符
            text-decoration: line-through;
            text-decoration: overline;
            text-decoration: underline;
        }
        /*文本图片中间对齐*/
        img,span{
            vertical-align: middle;
        }

    </style>

</head>
<body>

    欢迎欢迎 <span id="title1">Java </span>
    <h1>故事介绍</h1>
    <p>hello，World！</p>
    <p>hello，World！</p>
    <img src="12" alt="123">
    <span>123</span>

</p>
</body>
</html>

文本阴影和超链接伪类

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS</title>
<!--  规范，Style可以编写css的代码,每一个声明最好使用分号结尾
语法：
选择器{
声明1；
声明2；
。。。
           }
-->
<!--内部样式：-->
<!--字体样式
font-family:字体选择
font-size:字体大小
font-weight:字体粗细
-->
    <style>

        #title1{
            font-size: 50px;
        }
        body{
            font-family: Baghdad;
        }
        /*text-align: 文本布局、排版
        height:相当于文本框高度
        line-height：每一行的高度*/
        h1
        {
            font-size: 50px;
            font-weight: bold;
            text-align: center;
            height: 300px;
            line-height: 300px;
        }
        /*oblique： 斜体
        bolder：粗体
        12px：字体大小
        text-indent:首行缩进
        line-through:中划线
        overline：上划线
        underline：下划线
        text-shadow:阴影颜色，水平偏移，垂直偏移，阴影半径
        */
        p{
            font:oblique bolder 12px "楷体";
            text-indent: 2em;
            text-decoration: line-through;
            text-decoration: overline;
            text-decoration: underline;
            text-shadow: #1ea9cb 10px 10px 10px;
        }
        a{
            text-decoration: none;
            color: black;
        }
        /*鼠标悬浮时的颜色*/
        a:hover{
            color: orange;
        }
        /*鼠标按住未释放的颜色*/
        a:active{
            color: brown;
        }
    </style>

</head>
<body>

    欢迎欢迎 <span id="title1">Java </span>
    <h1>故事介绍</h1>
    <p>hello，World！</p>
    <p>hello，World！</p>
    <a href="#">hello</a>

</p>
</body>
</html>

列表美化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <link rel="stylesheet" href="CSS01.css"/>
</head>
<body>
<div id="nav">
    <h2 class="title1">全部商品分类</h2>
    <ul>
        <li><a href="#">图书</a></li>
        <li><a href="#">图书</a></li>
        <li><a href="#">图书</a></li>
        <li><a href="#">图书</a></li>
        <li><a href="#">图书</a></li>
        <li><a href="#">图书</a></li>
        <li><a href="#">图书</a></li>
    </ul>
</div>

</body>
</html>

#nav
{
    width: 100px;

}
.title1
{
    font-size: 18px;
    font-weight: bold;
    text-indent: 1em;
    line-height: 35px;
    background: #1ea9cb;
}
/*
list-style:
none:去掉圆点
circle：空心圆
decimal：数字
square：正方形
*/
ul li
{
    height: 30px;
    list-style: none;
    text-indent: 1em;

}
a{
    text-decoration: none;
    font-size: 14px;
}
a:hover{
    background: aquamarine;
}

#nav
{
    width: 100px;
}

.title1
{
    font-size: 18px;
    font-weight: bold;
    text-indent: 1em;
    line-height: 35px;
    background: #1ea9cb;
    /*颜色，图片，图片位置，平铺方式*/
    background: red url("123") 270px 10px no-repeat;
}
/*
list-style:
none:去掉圆点
circle：空心圆
decimal：数字
square：正方形
*/
ul li
{
    height: 30px;
    list-style: none;
    text-indent: 1em;
    background-image: url("");
    background-repeat: no-repeat;
    background-position: 236px 2px;

}
a{
    text-decoration: none;
    font-size: 14px;
}
a:hover{
    background: aquamarine;
}

盒子模型

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
<!--    总有一个默认的边距，需要手动初始化为0-->
    body
    {
      margin: 0;
      padding:0;
  text-decoration: none;

    }
    #box
    {
      width: 300px;
      border: 1px solid red;
      margin: 0 auto;
    }
    form
    {
      background: #1ea9cb;
    }
    div:nth-of-type(1) input{
      border: 3px solid black;
    }
    div:nth-of-type(2) input{
      border: 3px dashed #1ea9cb;
    }
     div:nth-of-type(3) input{
      border: 3px dashed #1ea9cb;
    }
     h2
     {
       font-size:16px ;
       background-color: yellow;
       line-height: 30px;
       margin: 0;
     }

  </style>
</head>
<body>
<div id="box">
  <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>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
/*<!--斜着对应 圆圈：就是圆角边框等于半径-->*/
/*
margin: 0 auto   居中
块元素、且具有固定的宽度
*/
    div{
      width: 100px;
      height: 100px;
      border: 10px solid black;
      border-radius: 100px ;
      box-shadow: 10px 10px 1px yellow;
    }
  </style>
</head>
<body>
<!--居中操作-->
<div style="width:500px;display:block;text-align: center" >a</div>
</body>
</html>

· 块级元素：独占一行
h1~h6 + p+ div…
·行内元素：不独占一行
span+a+img+strong。。。。。
行内元素可以被包含在块级元素中，但是块级元素不能被包含在行内元素中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--  block块元素
inline 行内元素
inline-block：是块元素，但是可以内联在一行
none：让这个部分消失
float:让块元素浮起来
-->
  <style>
    div{
      width: 100px;
      height: 100px;
      border: 1px solid red;
        float: left;
    }
    span{
      width: 100px;
      height: 100px;
      border: 1px solid red;
        float: left;

    }
  </style>
</head>
<body>
<div>div块内元素</div>
<span>span行内元素</span>
</body>
</html>

父级边框边框塌陷

· 解决方案：
1、增加父级元素的高度（不建议使用）
2、在后面增加一个空的div标签，清除浮动

<div class"clear"></div>
.clear{
clear:both;
margin:0;
padding:0;
}

3、overflow
在父级元素中增加一个 overflow：hidden
4、父类添加一个伪类(最受认可的解决方案)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--  block块元素
inline 行内元素
inline-block：是块元素，但是可以内联在一行
none：让这个部分消失
float:让块元素浮起来
-->
  <style>
    div{
      width: 100px;
      height: 100px;
      border: 1px solid red;
        float: left;
    }
    span{
      width: 100px;
      height: 100px;
      border: 1px solid red;
        float: left;
    }
    #father:after{
        content: ' ';
        display: block;
        clear: both;
    }
  </style>
</head>
<body>
<div id="father">
    <div class="l1">div块内元素</div>
    <span class="l2">span行内元素</span>
</div>
</body>
</html>

display和float的对比

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

定位

相对定位

position：relative；
相对于原来的位置，进行指定的偏移，相对定位它仍然在标准文档流中，原来的位置会被保留
「
top：10px；
left：20px；
bottom：10px；
right：10px；
」

绝对定位

position：absolute；
1、没有父级元素定位的前提下，相对于浏览器定位
2、假设父级元素存在定位，我们通常会相对于父级元素进行偏移
3、在父级元素范围内移动
相对于父级或浏览器的位置，进行指定的偏移，绝对定位的话，它不在标准文档流中，原来的位置不会被保留

固定定位 fixed

position：fixed；
定位之后，不随浏览器的滚动条转换，相对于浏览器页面定位

z—index

三维层级概念，类似于ps的图层,z-index就是设置图片文字的层级，最低层级，也就是最底层为0
opacity：背景透明度
filter：alpha（opacity=**）（比较老，最好是两个都写上，兼容不同版本的浏览器）

进击的小鸡仔

关注

0
点赞
踩
0

收藏

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

什么是CSS· Cascading Style Sheet层叠级联样式表· CSS：表现（美化网页）· 字体、颜色、边距、高度、宽度、背景图片、网页定位、网页浮动· CSS3新特性：1.颜色：新增 RGBA，HSLA 模式2. 文字阴影（text-shadow、）3.边框：圆角（border-radius）边框阴影： box-shadow4. 盒子模型：box-sizing5.背景：background-size 设置背景图片的尺寸 background-origin 设置背景图片的原点
复制链接

扫一扫