一篇随笔学会CSS

CSS3

1.CSS介绍

HTML+CSS+JS 结构+表现+交互

2.CSS发展史

Cascading Style Sheet 层叠级联样式表
表现层：美化网页（字体、颜色、边距、宽高、网页定位、网页浮动……）
1.0/2.0/2.1/3.0
- 2.0：DIV（块）+CSS，提出HTML和CSS结构分离的思想，利于SEO
- 2.1：浮动和定位
- 3.0：圆角边框、阴影、动画……存在浏览器兼容性问题

3.CSS入门

style
link外部引入
优势：
- 内容和表现分离
- 网页结构表现统一，可以实现复用
- 样式十分丰富
- 利于SEO搜索引擎收录（VUE不利于）

<!-- 尽量写在head规范，<style>编写css代码
语法：
    选择器{ 
        声明1;
        声明2;
        声明3;
    }
-->
    <style>
        h1{
            color: coral;
        }
    </style>

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

4.四种CSS导入方式

链接式是属于html，导入式必须放在style标签中，是属于CSS2.1
优先级遵循就近原则

<!--内部样式-->
    <style>
        h1{
            color: aqua;
        }
    </style>

<!--外部样式
1.链接式：link
2.导入式：@import url（“.......”）
-->
    <link rel="stylesheet" href="css/style.css">

<!--行内样式：在标签元素中编写style属性-->
<h1 style="color: coral">我是标题</h1>

5.三种基本选择器

作用：选择页面上某一种或者某一个元素
基本选择器：
- 标签选择器:选择所有标签标签{}
- 类选择器class：选中class名一致的标签 .class{}
- id选择器：全局唯一不能重复 #id{}
优先级：不遵循就近原则，id选择器 > 类选择器 > 标签选择器

<!--标签选择器会选择到页面上所有标签-->
    <style>
        h1{
            color: aqua;
            background: coral;
            border-radius:24px ;
        }
    </style>

<!--类选择器的格式   .class的名称{ }
好处：多个不同类型的标签可以归类，可以复用
-->
    <style>
        .hi{
            color: azure;
        }
        .hello{
            color: bisque;
        }
    </style>
<h1 class="hi">hi</h1>
<h1 class="hello">hi</h1>
<h3 class="hello">hi</h3>

<!--ID选择器：  #id名称{ }  id一定唯一  -->
<style>
    #hi{
        color: azure;
    }
</style>
<h1 id="hi">h1</h1>
<h1>h2</h1>
<h1>h3</h1>
<h1>h4</h1>
<h1>h5</h1>

<!--  优先级：不遵循就近原则，id选择器 > 类选择器 > 标签选择器  -->

6.层次选择器

后代选择器：在某个元素的后面，选择所有后代
子选择器：只选择后面一代
相邻/兄弟选择器，同辈，只有一个
通用选择器

<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>

        p {
            color: bisque;
        }

        /*后代选择器    body  p{  }代表body后面的所有p标签   */
        body  p{
            background: aqua;
        }

        /*子选择器      body>p{  }代表后一代p标签 */
        body>p{
            background: coral;
        }

        /*兄弟选择器     .class+p{  }代表相邻的一个兄弟p标签，只有一个，唯一的*/
         .active+p{
             background: aquamarine;
         }

         /*通用选择器    .active~p{ }选择当前元素的向下所有的兄弟p标签*/
        .active~p{
            background: blue;
        }

    </style>

</head>
<body>

<p class="active">p1</p>
<p>p2</p>
<p>p3</p>
<ul>
    <li>
        <p>p4</p>
    </li>
    <li>
        <p>p5</p>
    </li>
    <li>
        <p>p6</p>
    </li>
</ul>

</body>

7.结构伪类选择器

伪类选择器
伪类：a：hover
结构：定位元素、与结构相关

<!--伪类选择器-->
    <style>

        /*ul的第一个元素*/
        ul li:first-child{
            background: aquamarine;
        }

        /*ul的最后一个元素*/
        ul li:last-child{
            background: bisque;
        }

        /*只选p1:定位到父元素，选择当前第一个元素,
        nth-child:同辈孩子里的第几个元素,p:p元素才生效
        按顺序选择
        */
        p:nth-child(1){
            background: blueviolet;
        }

        /*选择父元素下的p元素的第二个
        按类型选择
        */
        p:nth-of-type(2){
            background: aqua;
        }

    </style>

8.属性选择器

<!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: coral;
            text-align: center;/*居中对齐*/
            color: blueviolet;
            text-decoration: none;
            margin-right: 5px;
            font:bold 20px/50px Arial;
        }

        /*选中存在id属性的元素
        属性名=属性值（正则）
        属性选择器：a[]{ }
        */
        a[id]{
            background: blue;/*选中a标签中所有有id属性的*/
        }

        /*
        =是绝对等于
        *=是包含于
        ^=是以...开头
        $=是以...结尾
        */

        a[class*="links"] {
            background: azure; /*选中a标签中class中含有links的所有属性*/
        }

        /* 选中href中以http开头的元素   */
        a[href^="http"]{
            background: azure;
        }

        /* 选中href以pdf结尾的元素     */
        a[href$="pdf"]{
            background: blue;
        }

    </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">6</a>
    <a href="/a.pdf">7</a>
    <a href="/abc.pdf">8</a>
    <a href="abc.doc">9</a>
    <a href="abcd.doc"class="links item last">10</a>
</p>

</body>
</html>

9.CSS的作用及字体样式

有效传递页面信息
吸引注意，美化页面
凸显主题
提高用户体验
span标签：重点要突出的字，使用span标签套起来

<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        #title1{
            font-size:50px;
        }
    </style>

</head>
<body>

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

</body>

=========================================================================================

<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>

        /*字体*/
        body{
            /*也可以直接改两种字体：英文和中文*/
            /*斜体、字体*/
            font: oblique bolder 16px "幼圆";
        }

        /*大小*/
        h1{
            font-size: 50px;
            /*颜色*/
            color: coral;
        }

        /*粗细*/
        .p1{
            font-weight: bolder;
        }

    </style>

</head>
<body>
<h1>故事介绍</h1>
<p class="p1">
    及爱哦都叫我大家都岛炮击低洼的接待觉得我i巨大的的咯我就低洼的窘境地位i就
</p>
<p>
    大家都哈维和带我带我到巨大危机骄傲的我到家都i大家就都到基金我的骄傲滴哦我觉得决定骄傲的骄傲到达口袋击破敌军安排接待评委九点九万九千
</p>

</body>

10.文本样式

颜色
对齐方式
首行缩进
行高
装饰（下划线……）

<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
       
				
				 h1 {
            /*颜色：
                  单词
                  RGB  0-F
                  RGBA 透明度一般值为0-1
            */
            color: rgba(0, 255, 255, 0.1);
            /*文本左右排版居中，左：left，右：right*/
            text-align: center;
        }

        .p1 {
            /*首行缩进两个字符（em）*/
            text-indent: 2em;
        }

        .p3 {
            background: azure;
            /*高度，上下居中，可以调节行高和块的高度一致*/
            height: 300px;
            line-height: 300px;
        }

        /*下划线*/
        .l1 {
            text-decoration: underline;
        }

        /*中划线*/
        .l2 {
            text-decoration: line-through;
        }

        /*上划线*/
        .l3 {
            text-decoration: overline;
        }

        /*文字在图片中间*/
        img,span{
            vertical-align: middle;
        }

				/* 超链接去下划线*/
        a{
            text-decoration: none;
        }

    </style>

</head>
<body>

<p>
    <img alt="" src="images/a.png">
    <br>
    <span>djaidjadjoajddpo</span>
</p>

<p class="l1">123123</p>
<p class="l2">123123</p>
<p class="l3">123123</p>
<p>123123</p>

<h1>故事介绍</h1>
<p class="p1">
    及爱哦都叫我大家都岛炮击低洼的接待觉得我i巨大的的咯我就低洼的窘境地位i就
</p>
<p class="p3">
    大家都哈维和带我带我到巨大危机骄傲的我到家都i大家就都到基金我的骄傲滴哦我觉得决定骄傲的骄傲到达口袋击破敌军安排接待评委九点九万九千
</p>

</body>

11.文本阴影和超链接伪类

<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        a{
            text-decoration: none;
            color: black;
        }
        /*鼠标悬浮颜色*/
        a:hover{
            color: coral;
            font-size: 50px;
        }
        /*鼠标按住未释放*/
        a:active{
            color: blue;
        }
        /*平常颜色*/
        a:link{
            color: aqua;
        }
        /*点击访问后已经访问的链接*/
        a:visited{
            color: blueviolet;
        }
        /*文字阴影*/
        .price{
            text-shadow: 10px 10px 5px chartreuse;
        }
    </style>

</head>
<body>

<a href="#">
    <img src="images/a.JPG" alt="">
</a>
<p>
    <a href="#">骂出高效</a>
</p>
<p>
    <a href="">作者：狂神</a>
</p>
<p id="price">
    $99
</p>

</body>

12.列表

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表样式</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>

<div id="nav">

<h2 class="title">全部商品分类</h2>

<ul>
    <li>
        <a href="#">图书</a>&nbsp;&nbsp;
        <a href="#">音像</a>&nbsp;&nbsp;
        <a href="#">数字商品</a>
    </li>
    <li>
        <a href="#">家用电器</a>&nbsp;&nbsp;
        <a href="#">手机</a>&nbsp;&nbsp;
        <a href="#">数码</a>
    </li>
    <li>
        <a href="#">电脑</a>&nbsp;&nbsp;
        <a href="#">办公</a>
    </li>
    <li>
        <a href="#">家居</a>&nbsp;&nbsp;
        <a href="#">家装</a>&nbsp;&nbsp;
        <a href="#">厨具</a>
    </li>
    <li>
        <a href="#">服饰鞋帽</a>&nbsp;&nbsp;
        <a href="#">个性化妆</a>
    </li>
    <li>
        <a href="#">礼品箱包</a>&nbsp;&nbsp;
        <a href="#">钟表</a>&nbsp;&nbsp;
        <a href="#">珠宝</a>
    </li>
    <li>
        <a href="#">食品饮料</a>&nbsp;&nbsp;
        <a href="#">保健食品</a>
    </li>
    <li>
        <a href="#">彩票</a>&nbsp;&nbsp;
        <a href="#">旅行</a>&nbsp;&nbsp;
        <a href="#">充值</a>&nbsp;&nbsp;
        <a href="#">票务</a>
    </li>
</ul>
</div>
</body>
</html>

#nav{
    width: 400px;
    background: azure;
}

.title{
    font-size: 18px;
    /*加粗*/
    font-weight: bold;
    /*缩进*/
    text-indent: 1em;
    line-height: 30px;
    background: antiquewhite;
}
/*ul li*/
ul li{
    /*行高*/
    height: 30px;
    /*把圆点去掉*/
    list-style: none;
    /*空心圆、正方形、数字有序列表*/
    /*list-style: circle\square\decimal;*/
    text-indent: 1em;
    background: azure;
}
a{
    text-decoration: none;
    font-size: 14px;
    color: rebeccapurple;
}
a:hover{
    color: aqua;
    text-decoration: underline;
}

13.背景图像应用及渐变

div{
            width: 1000px;
            height: 700px;
            border: 1px solid red;
            /*默认图片背景全部平铺*/
            background-image: url("images/tx.JPG");
        }
        .div1{
            /*水平平铺*/
            background-repeat: repeat-x;
        }
        .div2{
             /*竖直平铺*/
             background-repeat: repeat-y;
         }
        .div3{
            /*不平铺*/
            background-repeat: no-repeat;
        }

.title{
    font-size: 18px;
    /*加粗*/
    font-weight: bold;
    /*缩进*/
    text-indent: 1em;
    line-height: 30px;
    /*1.颜色2.背景图片3.图片位置4.平铺方式*/
    background: antiquewhite url("../images/tx.JPG")270px 10px no-repeat;
}
/*ul li*/
ul li{
    /*行高*/
    height: 30px;
    /*把圆点去掉*/
    list-style: none;
    /*空心圆、正方形、数字有序列表*/
    /*list-style: circle\square\decimal;*/
    text-indent: 1em;
    background: azure;
    /*背景图片*/
    background-image: url("../images/tx.JPG");
    /*平铺方式*/
    background-repeat: no-repeat;
    /*背景图片位置*/
    background-position: 200px 2px;
}

渐变：www.grbient.com

<!--    径向渐变，圆形渐变-->
    <style>
        body{
            /*background-color: blueviolet;*/
            background-image:linear-gradient(19deg,blue 0%,coral 100%) ;
        }
    </style>

14.盒子模型及边框的使用

盒子模型
- margin外边距
- border边框
- padding内边距
边框
- 粗细
- 样式
- 颜色

<style>
        h1,h2,ul,li,a,body{
            /*h1、h2、ul、li、a、body总有默认外边距，把默认值置为0*/
            margin: 0;
            padding: 0;
            text-decoration: none;
        }
        #box{
            width: 300px;
            /*粗细、样式、颜色*/
            border: 1px solid red;
        }
        h2{
            font-size: 16px;
            background: bisque;
            line-height: 50px;
            color: blueviolet;
        }
        form{
            background: aqua;
        }
        /*结构伪类选择器，选中div下的input所有后代*/
        div:nth-of-type(1) input{
            border: 3px solid black;
        }
        /*dashed虚线solid实线*/
        div:nth-of-type(2) input{
            border: 3px dashed chocolate;
        }
    </style>

15.内外边距及DIV居中

盒子的计算方式（元素的大小到底多大）：margin+border+padding+内容宽度

<!--外边距的妙用：居中元素-->
    <style>
        /*h1, h2, ul, li, a, body {*/
        /*    !*h1、h2、ul、li、a、body总有默认外边距，把默认值置为0*!*/
        /*    margin: 0;*/
        /*    padding: 0;*/
        /*    text-decoration: none;*/
        /*}*/

        #box {
            width: 300px;
            /*粗细、样式、颜色*/
            border: 1px solid red;
            /*，上下为0，左右自动居中*/
            margin: 0 auto;

        }

        h2 {
            font-size: 16px;
            background-color: bisque;
            line-height: 30px;
            color: blueviolet;
            /*上下左右外边距圈改为0，按输入顺时针改*/
            margin: 0;
        }

        form {
            background: aqua;
        }

        input {
            border: 1px solid black;
        }
        div:nth-of-type(1){
            padding: 10px;
        }
    </style>

16.圆角边框及阴影

边框有四个角，存在上下左右的概念\
element
飞冰 ice.work

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            border: 10px solid black;
            /*左上角-->右上角-->右下角-->左下角  顺时针*/
            border-radius: 0 50px 100px 10px;
        /*    可以用来画各种图形：扇形、圆形......     */
        }
        image{
            /*改变图片的圆角边框*/
            border-radius: 100px;
        }
    </style>
</head>
<body>

<div></div>
<img src="images/tx.JPG" alt="">

</body>

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

<!--   
margin：0 auto 居中
前提：块级元素、行内元素、行内块元素、有固定的宽度
text-align：center 最简单的居中方式
-->
    <style>
        div{
            width: 100px;
            height: 100px;
            border: 5px solid black;
            /*盒子阴影 长 宽 模糊半径 颜色*/
            box-shadow: 10px 10px 5px blue;
        }
    </style>
    
    
</head>
<body>

<div></div>

</body>
</html>

17.display和浮动

标准文档流：正常排版不会浮动飘出去
块级元素：独占一行

h1-h6
p
div
列表....

行内元素：不独占一行

span
a
img
strong

行内元素可以被包含在块级元素中，反之则不行
display

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    
    
    <!--    
    block:块元素
    inline:行内元素
    inline-block:是块元素，但是具有行内元素的特性，可以内联在一行
    -->
    <style>
        div{
            width: 100px;
            height: 100px;
            border: 1px solid black;
            display: inline;
        }
        span{
            /*文字多少就占多少，与设置的宽高没关系*/
            width: 100px;
            height: 100px;
            border: 1px solid black;
            /*把行内元素变为块元素*/
            /*display: block;*/
            /*既是行内元素又是块元素*/
            display: inline-block;
        }

    </style>

    
</head>
<body>

<div>div块元素</div>
<span>span行内元素</span>

</body>

float-left（right）,图片向左（右）浮动，悬浮、独立于原来的背景之上，会自动排版，边框会塌陷，用clear：both可以解决边框塌陷，既可以浮动，又可以有块元素效果
disply也是实现行内元素排列的方式，但更多的是使用float

18.overflow及父级边框塌陷问题

ctrl+x 快速删除一行
clear属性具有四个值
- right：右侧不允许有浮动元素
- left：左侧不允许有浮动元素
- cboth：两侧不允许有浮动元素
- none：可以让其浮动
解决父级边框塌陷问题四大解决方案：
- 增加父级元素的高度
- 增加空div标签，class为clear，设置其内外边距为0
- overflow:
  - hidden
  - auto
  - scroll
- 在父类添加一个伪类after
  - father：after{ content：“ ”；display：block；clear：both； }、
对比
- display方向不可控制
- float浮动起来会脱离标准边框流

<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        #content{
            width: 200px;
            height: 50px;
            /*滚动条*/
            overflow: scroll;
        }
    </style>

</head>
<body>

<div id="content">
    <img src="images/2.JPG" alt="">
</div>
<p>
    哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈。
</p>

</body>

19.相对定位

定位分类：
- 相对定位 position:relative (仍然在标准文档流中，原来位置被保留，不会浮动出去)
- 绝对定位

<!--
相对定位
相对于自己原来的位置进行偏移
-->
    <style>
        body{
            padding: 20px;
        }
        div{
            margin: 10px;
            padding: 5px;
            font-size: 12px;
            line-height: 25px;
        }
        #father{
            border: 1px solid #666666;
            padding: 0;
        }
        #first{
            background-color: bisque;
            border: 1px dashed #7db224;
            /*相对定位：上下左右*/
            position: relative;
            /*向上移*/
            top:-20px;
            /*向右移*/
            left:20px;
        }
        #second{
            background-color: #653b0a;
            border: 1px dashed #225edc;
        }
        #third{
            background-color: #624e37;
            border: 1px dashed #ce1515;
            /*向下移*/
            bottom:-10px;
        }
    </style>

20.绝对定位和固定定位

绝对定位：基于xxx定位进行上下左右的移动
- 没有父级元素定位的话，相对于浏览器定位
- 假设父级元素存在定位，通常会相对于父级元素进行偏移
- 在父级元素范围内移动
绝对定位position：absolute不保留原来位置，会浮动出去，相对于父级元素或浏览器进行偏移

<style>
        div{
            margin: 10px;
            padding: 5px;
            font-size: 12px;
            line-height: 25px;
        }
        #father{
            border: 1px solid #666666;
            padding: 0;
        }
        #first{
            background-color: bisque;
            border: 1px dashed #7db224;
        }
        #second{
            background-color: #653b0a;
            border: 1px dashed #225edc;
            /*绝对定位*/
            position: absolute;
            right: 20px;
        }
        #third{
            background-color: #624e37;
            border: 1px dashed #ce1515;
        }
    </style>

固定定位

<style>
        body{
            height:1000px;
        }
        div:nth-of-type(1){
            width: 100px;
            height: 100px;
            background: red;
            /*绝对定位，相对于浏览器*/
            position: absolute;
            right: 0;
            bottom: 0;
        }
        div:nth-of-type(2){
            width: 50px;
            height: 50px;
            background: blue;
            /*固定定位，位置固定不动*/
            position: fixed;
            right: 0;
            bottom: 0;
        }

 </style>

21.z-index及透明度

图层概念
z-index最低为0，最高无限

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

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

</head>
<body>

<div id="content">
    <ul>
        <li><img alt="" src="images/1.JPG"></li>
        <li class="tipText">学习微服务，找小狂</li>
        <li class="tipBg"></li>
        <li>时间2099-01-01</li>
        <li>地点：火星基地</li>
    </ul>
</div>

</body>
</html>

#content {
    width: 120px;
    padding: 0;
    margin: 0;
    overflow: hidden;
    font-size: 12px;
    line-height: 25px;
    border: 1px black solid;
}

ul, li {
    padding: 0;
    margin: 0;
    list-style: none;
}

/*父级元素相对定位*/
#content ul {
    position: relative;
}

.tipText, .tipBg {
    position: absolute;
    width: 120px;
    height: 25px;
    top:25px;
}
.tipText{
    color: azure;
    /*z-index: 0;*/
}
.tipBg{
    background: azure;
    /*背景透明度*/
    opacity: 0.5;
    /*同样效果filter: alpha(opacity=50);*/
}

22.动画及视野拓展

很少使用CSS写，一般用JS
找模板
卡巴斯基

posted @ 2023-03-14 11:53 hi_wch 阅读(26) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· 一篇随笔学会JavaScript

· 一篇随笔学会HTML

· 狂神说css学习笔记

· CSS学习

· css基础

公告

昵称： hi_wch
园龄： 2年5个月
粉丝： 2
关注： 3

+加关注

2025年3月

日

一

二

三

四

五

六

代码改变世界

失败总是贯穿人生始终

一篇随笔学会CSS

CSS3

1.CSS介绍

2.CSS发展史

3.CSS入门

4.四种CSS导入方式

5.三种基本选择器

6.层次选择器

7.结构伪类选择器

8.属性选择器

9.CSS的作用及字体样式

10.文本样式

11.文本阴影和超链接伪类

12.列表

13.背景图像应用及渐变

14.盒子模型及边框的使用

15.内外边距及DIV居中

16.圆角边框及阴影

17.display和浮动

18.overflow及父级边框塌陷问题

father：after{ content：“ ”；display：block；clear：both； }、

19.相对定位

20.绝对定位和固定定位

21.z-index及透明度

22.动画及视野拓展

公告

搜索

最新随笔

积分与排名

随笔分类

随笔档案

阅读排行榜

推荐排行榜